Перейти к содержанию
Назад к материалам
Рабочий протоколВайб-кодинг

Сайт с ИИ
за 37 минут

Это не теоретический конспект, а пошаговый рабочий протокол. Включает готовый Taste Skill для дизайна, схему CRM автоматизации на N8N и рабочие команды, чтобы вы могли повторить проект у себя.

Шаг 00: Подготовка

Установка и доступ

Перед началом работы обязательно скачайте официальное приложение Claude Desktop. Ниже собран практический чек-лист, чтобы подготовить рабочую среду и не споткнуться на старте.

Скачать Claude Desktop

1. Качественный VPN

Регистрация и работа осуществляются только с включенным VPN-сервисом (идеально США/Европа). Иначе API заблочит доступ.

2. Авторизация и SMS

Используйте рабочий способ авторизации для вашего региона. Если берете готовый аккаунт или подписку у продавца, проверяйте репутацию, почту и условия восстановления доступа.

3. Подписка (Pro / Max)

Для полноценной работы Claude Code подойдет платная подписка. Главное — заранее проверить, что доступ стабилен, а аккаунт привязан к почте, которую вы контролируете.

Дополнительно

Совместные подписки нейросетей

Если вам нужны другие нейросети, общие аккаунты или сервисы по выгодной цене, заглядывайте в нашу закрытую группу.

Группа с подписками
Практическое руководство

Протокол развертывания проекта

Шаг01

Инфраструктура и Настройки

Настройка Claude Desktop для вайб-кодинга. Важны две вещи: включить галочку 'Auto accept edits' и добавить системный промпт (Taste Skill), чтобы нейронка не выдавала стандартные дешевые шаблоны. Вы можете просто попросить Claude настроить это.

Рабочий промпт

Самостоятельно создай и настрой файл settings.json, добавив в него инструкции Taste Skill для создания топового дизайна.
Шаг02

Инициализация и Архитектура

Начинаем работу в пустой директории. Вызываем команду скилла и даем наш главный архитектурный запрос.

Рабочий промпт

/design-taste-frontend Сделай визуально очень сильный, премиальный сайт для студии модульных домов. Это сайт для демонстрации, поэтому он должен выглядеть дорого, архитектурно и запоминаться уже с первого экрана
Шаг03

Генерация и Интеграция Медиа

Сначала просим Claude описать нужные медиа и написать для них промпты. Затем генерируем визуал в Google Labs (названия файлов строго латиницей!) и просим нейронку адаптировать сетку под новые ассеты.

Генерация промптов для картинок

Опиши наш текущий проект и напиши, какие 3-4 картинки нам нужны для сайта. Затем составь для каждой детальный промпт на английском языке для генерации в нейросети. (При желании можете прикрепить свои референсы)

Масштабирование картинок

Я сгенерировал картинки и добавил материалы в папку. Размеры картинок могут быть не идеальными, поэтому перестрой сетку сайта под них. И обязательно сожми изображения, чтобы сайт грузился быстро

Интеграция видео-блоков

Добавь эти видео на главную страницу и обязательно сожми их

Пример промпта для видео (Veo 3.1)

Slow cinematic drift — camera very gently pushes forward toward the house, almost imperceptible movement. Pine trees sway slightly in a soft evening breeze. Thin wisps of ground fog drift slowly left across the forest floor. Warm interior light inside the house flickers subtly — like a fireplace or candles. Overcast blue-hour sky shifts slightly, clouds move in slow motion. No sudden movements, no cuts. Mood: still, breathable, cinematic. Duration: 6–8 seconds, loop-friendly.

Примеры промптов для фото (Nano Banana / ImageFX)

1. Hero — Borealis-тип, вечер у леса Modular house, two rectangular dark timber volumes placed at a slight angle, flat roof, floor-to-ceiling windows glowing warm light from inside, dense pine forest background, dusk, blue hour, ground fog, corten steel details, cantilevered terrace, no fences no decor, photorealistic architectural photography, Dezeen style, moody dark atmosphere, 9:16 2. Философия — интерьер Interior of a modular house, exposed CLT wood ceiling and walls, large floor-to-ceiling window overlooking forest, concrete floor, minimal furniture, warm diffused daylight, overcast sky outside, dark steel frame details, no clutter, architectural photography, Peter Zumthor mood, 4:5 3. Borealis — фасад в лесу Small modular house, dark thermally modified wood horizontal cladding, flat roof, two connected rectangular volumes offset from each other, surrounded by tall pine trees, early morning fog, no fences, photorealistic, Archdaily architecture photo, moody cold light, 3:4 4. Keda — компактный в бору Single compact modular cabin, black metal cladding, flat roof, floor-to-ceiling glazing on one facade, pine forest, soft morning light, mist between trees, raised slightly off ground on steel beams, no landscaping, photorealistic architecture photography, 16:10

Шаг04

Устранение багов и Версионирование

Не ищите код руками. Делайте скриншоты или выделяйте кривые элементы прямо на экране, отдавая контекст Claude.

Скриншот + промпт

Данный элемент стоит криво, сам посмотри и исправь

Создание точки возврата перед крупными изменениями

Сделай Git-версию 1.0
Шаг05

Бэкенд и CRM автоматизация (N8N)

Для сбора заявок не оставляем вебхуки открытыми. Claude пишет бэкенд, а в N8N настраиваем обработчик: Webhook → Telegram.

Рабочий промпт

Напиши Backend (бекенд) маршрут для отправки данных из формы на этот вебхук

Шаблон N8N 1.0 (Импортируйте через Ctrl+V). Важно: замените ID таблиц и Telegram на свои.

{ "name": "My workflow", "nodes": [ { "parameters": { "httpMethod": "POST", "path": "9dee935c-467c-420c-8d6c-5e60932bb775", "options": {} }, "type": "n8n-nodes-base.webhook", "typeVersion": 2.1, "position": [0, 0], "id": "9c55f38d-7c38-4606-8fe5-f2d1d0018853", "name": "Webhook", "webhookId": "9dee935c-467c-420c-8d6c-5e60932bb775" }, { "parameters": { "chatId": "5826031477", "text": "=Новая заявка!\n\nИмя: {{ $json.body.name }}\nEmail: {{ $json.body.email }}\nТелефон: {{ $json.body.phone }}\nСообщение: {{ $json.body.message }}\nВремя отправки: {{ $json.body.timestamp }}", "additionalFields": {} }, "type": "n8n-nodes-base.telegram", "typeVersion": 1.2, "position": [416, 0], "id": "5235a487-11ce-4d6f-b4b2-4c2c95377a28", "name": "Send a text message", "webhookId": "0708fbd6-28f5-4fdf-8d76-477f0e3f3c61", "credentials": { "telegramApi": { "id": "uGqIcCViEeRGWvEz", "name": "ARCA Bot" } } }, { "parameters": { "operation": "append", "documentId": { "__rl": true, "value": "14rCVdY_uzpTaIBsOl1cR7Lv9dwBYeDkVIAoniPwBeHA", "mode": "list", "cachedResultName": "Заявки", "cachedResultUrl": "https://docs.google.com/spreadsheets/d/14rCVdY_uzpTaIBsOl1cR7Lv9dwBYeDkVIAoniPwBeHA/edit?usp=drivesdk" }, "sheetName": { "__rl": true, "value": "gid=0", "mode": "list", "cachedResultName": "Лист1", "cachedResultUrl": "https://docs.google.com/spreadsheets/d/14rCVdY_uzpTaIBsOl1cR7Lv9dwBYeDkVIAoniPwBeHA/edit#gid=0" }, "columns": { "mappingMode": "defineBelow", "value": { "Имя": "={{ $json.body.name }}", "Телефон": "={{ $json.body.email }}", "Почта": "={{ $json.body.phone }}", "Сообщение": "={{ $json.body.message }}", "Время": "={{ $json.body.timestamp }}" }, "matchingColumns": [], "schema": [ { "id": "Имя", "displayName": "Имя", "required": false, "defaultMatch": false, "display": true, "type": "string", "canBeUsedToMatch": true }, { "id": "Телефон", "displayName": "Телефон", "required": false, "defaultMatch": false, "display": true, "type": "string", "canBeUsedToMatch": true }, { "id": "Почта", "displayName": "Почта", "required": false, "defaultMatch": false, "display": true, "type": "string", "canBeUsedToMatch": true }, { "id": "Сообщение", "displayName": "Сообщение", "required": false, "defaultMatch": false, "display": true, "type": "string", "canBeUsedToMatch": true }, { "id": "Время", "displayName": "Время", "required": false, "defaultMatch": false, "display": true, "type": "string", "canBeUsedToMatch": true } ], "attemptToConvertTypes": false, "convertFieldsToString": false }, "options": {} }, "type": "n8n-nodes-base.googleSheets", "typeVersion": 4.7, "position": [208, 0], "id": "ec560fc7-ccb1-4ee0-aec1-dcbc9b677947", "name": "Append row in sheet", "credentials": { "googleSheetsOAuth2Api": { "id": "RKab63BCie1jhFD0", "name": "Google Sheets OAuth2 API" } } } ], "pinData": {}, "connections": { "Webhook": { "main": [ [ { "node": "Append row in sheet", "type": "main", "index": 0 } ] ] }, "Append row in sheet": { "main": [ [ { "node": "Send a text message", "type": "main", "index": 0 } ] ] } }, "active": true, "settings": { "executionOrder": "v1", "binaryMode": "separate", "timeSavedMode": "fixed", "callerPolicy": "workflowsFromSameOwner", "availableInMCP": false }, "versionId": "cf06b14c-947a-4c89-bd73-1556c77f9dbf", "meta": { "templateCredsSetupCompleted": true, "instanceId": "c934a619e9d46e368babc1cb3fc0b872a41710422e5fec26af28261c16103f5c" }, "id": "v4pAobu0Xm7Juqjy", "tags": [] }
Шаг06

Деплой и Публикация

Бесплатное размещение сайта в сети через Vercel. Даем нейронке доступ к Vercel Connector.

Рабочий промпт

Задеплой наш проект на Vercel, картинки и видео в том числе