Иван, 16 апреля 2026
Claude Code
n8nПолный протокол создания сайта в Claude Desktop: настройка, архитектура, медиа, баг-фиксы, бэкенд и публикация. Каждый шаг -- с промптами и ссылками на инструменты.
Краткая карта протокола
Шаг 01. Инфраструктура и настройки
Настройка Claude Desktop для вайб-кодинга. Важны две вещи: включить галочку "Auto accept edits" и добавить системный промпт (Taste Skill), чтобы нейронка не выдавала стандартные дешёвые шаблоны. Вы можете просто попросить Claude настроить это.
Ссылки: Оригинал Taste Skill
Самостоятельно создай и настрой файл settings.json, добавив в него инструкции Taste Skill для создания топового дизайна.
Шаг 02. Инициализация и архитектура
Начинаем работу в пустой директории. Вызываю команду скилла и даю мой главный архитектурный запрос.
/design-taste-frontend Сделай визуально очень сильный, премиальный сайт для студии модульных домов. Это сайт для демонстрации, поэтому он должен выглядеть дорого, архитектурно и запоминаться уже с первого экрана
Шаг 03. Генерация и интеграция медиа
Сначала просим Claude описать нужные медиа и написать для них промпты. Затем генерируем визуал в Google Labs (названия файлов строго латиницей!) и просим нейронку адаптировать сетку под новые ассеты.
Ссылки: Google ImageFX (Nano Banana) | Google VideoFX (Veo 3.1)
Опиши наш текущий проект и напиши, какие 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, flat roof, floor-to-ceiling windows glowing warm light, dense pine forest background, dusk, blue hour, ground fog, corten steel details, cantilevered terrace, Dezeen style, 9:16. 2. Философия -- интерьер: Interior of modular house, exposed CLT wood ceiling, large window overlooking forest, concrete floor, minimal furniture, warm diffused daylight, Peter Zumthor mood, 4:5. 3. Borealis -- фасад: Small modular house, dark thermally modified wood cladding, flat roof, two connected volumes, pine trees, morning fog, Archdaily architecture photo, moody cold light, 3:4. 4. Keda -- компактный: Single compact modular cabin, black metal cladding, flat roof, floor-to-ceiling glazing, pine forest, soft morning light, mist, raised on steel beams, 16:10.
Шаг 04. Устранение багов и версионирование
Не ищите код руками. Делайте скриншоты или выделяйте кривые элементы прямо на экране, отдавая контекст Claude.
Данный элемент стоит криво, сам посмотри и исправь
Перед любым крупным изменением создайте Git-версию командой "Сделай Git-версию 1.0". Это даст точку возврата, если что-то пойдёт не так.
Шаг 05. Бэкенд и CRM-автоматизация (N8N)
Для сбора заявок не оставляем вебхуки открытыми. Claude пишет бэкенд, а в N8N настраиваем обработчик: Webhook -> Google Sheets -> Telegram.
Ссылки: Скачать N8N | BotFather (Telegram)
Напиши Backend (бекенд) маршрут для отправки данных из формы на этот вебхук
Шаблон N8N 1.0 можно импортировать через Ctrl+V в N8N. Важно: замените ID таблиц и Telegram на свои. Схема: Webhook -> Append row in Google Sheets -> Send Telegram message.
Как работает связка
- Webhook принимает данные
N8N получает POST-запрос с данными формы: имя, email, телефон, сообщение, время.
- Запись в Google Sheets
Данные автоматически добавляются в Google-таблицу для хранения и анализа.
- Уведомление в Telegram
Бот отправляет уведомление о новой заявке в Telegram-чат или канал.
Шаг 06. Деплой и публикация
Бесплатное размещение сайта в сети через Vercel. Даём нейронке доступ к Vercel Connector.
Ссылки: Vercel
Задеплой наш проект на Vercel, картинки и видео в том числе
Что входит в протокол
- Taste Skill
Файл settings.json с дизайн-рамкой для качественного визуала.
- Медиа-сценарий
Генерация через ImageFX и VideoFX, адаптация сетки под ассеты.
- Бэкенд и N8N
Бэкенд-маршрут и N8N blueprint для сбора заявок.
- Деплой
Порядок проверки, создания версий и деплоя на Vercel.
Главы ролика
24 главы, весь ролик 38 минут. Нажмите на главу, и ролик начнётся с неё
- 0:00Обзор финального сайта и системы заявок1 минута
- 1:13Что такое вайб-кодинг и почему это базаменьше минуты
- 1:32План проекта, этапы, время, стек3 минуты
- 4:22Настройка Claude Desktop2 минуты
- 5:55Подключаем Taste Skill для UI2 минуты
- 7:27Безопасность, что можно разрешать нейросетименьше минуты
- 8:08Первый промпт и структура на NextJS2 минуты
- 9:44Правим баги вёрстки визуально2 минуты
- 12:09Генерируем промпты для графикименьше минуты
- 12:29Бесплатные фото интерьеров, Nano Banana 22 минуты
- 14:36Работа над ошибками, дожимаем нейросеть1 минута
- 15:41Сжимаем изображения без потери качества1 минута
- 17:06Git, точки сохранения, чтобы не сломать проектменьше минуты
- 17:39Видеообложки в Veo 3.12 минуты
- 19:45Деплой на Vercel одной командой2 минуты
- 22:03Честно про лимиты Claude и реальную стоимостьменьше минуты
- 23:024 страницы домов за пару минут3 минуты
- 26:00Слайдеры и мобильная версия2 минуты
- 28:13Форма заявок через n8n и Webhook2 минуты
- 29:47Telegram-бот для лидов3 минуты
- 33:05Синхронизация с Google Таблицами1 минута
- 34:08Финальный обзор глазами пользователяменьше минуты
- 34:41Экономика проекта, сайт за 90 рублей, реально?меньше минуты
- 35:28Юридические нюансы 152-ФЗ и российские хостинги2 минуты
Не открывается плеер? Смотреть на YouTube
Не получается повторить? Спросите помощника в Telegram. Он знает все разборы и уроки и отвечает со ссылками.
Спросить помощникаНужно так же, но под вашу задачу? Внедряю ИИ в маркетинг и учу команды.
Работа со мной
