Вайб-кодинг: 9 шагов до сайта, который не выглядит сгенерированным

Что такое вайб-кодинг и чем он отличается от обычной разработки?

Термин не определён в найденной официальной документации Anthropic. Поэтому я не буду выдавать его за строгий технический стандарт. Дальше использую его как короткое название описанного рабочего цикла.

Claude Code может искать и читать код, менять файлы, писать и запускать тесты, выполнять команды командной строки. В отличие от чата, который только предлагает фрагмент кода, этот инструмент работает внутри проекта и меняет его содержимое.

Для начинающего это меняет точку входа. Писать CSS вручную на старте не придётся: опиши цель, открой результат в браузере и заметь конкретный дефект:

• заголовок слишком низко;
• кнопка теряется на фоне;
• карточки выглядят одинаково;
• мобильный экран разваливается;
• между секциями слишком много пустого места.

Граница тоже простая. ИИ создаёт и изменяет код, но визуальное решение принимаешь ты. Если не проверять страницу глазами, ИИ-агент может считать задачу законченной по структуре файлов, хотя готовый экран не соответствует замыслу.

Как работает вайб-кодинг простыми словами?

Рабочая схема выглядит так:

1. Опиши задачу. Например: «Собери одностраничный сайт независимого книжного магазина».
2. Получи первую версию страницы.
3. Посмотри её в браузере.
4. Назови один дефект. Например: «Заголовок теряется на фоне».
5. Получи новую версию.
6. Снова проверь результат.

Claude Artifacts ближе к сценарию без написания кода. В официальной справке среди примеров есть сайты в формате одностраничного HTML. Идею можно описать прямо в интерфейсе, получить страницу и продолжать правки через диалог.

Через Claude Artifacts можно создавать сайты в формате одностраничного HTML описанием результата. Исправления тоже можно формулировать обычным языком: «заголовок слишком низко», «на мобильном первый экран разваливается», «кнопка теряется на фоне».

Claude Code работает иначе. Он открывает папку проекта, читает файлы, меняет их и запускает команды. Для старта нужно установить инструмент, пройти аутентификацию, открыть папку проекта и запустить claude.

cd your-awesome-project
claude

В Artifacts ты работаешь с опубликованным результатом внутри сервиса. В Claude Code ты работаешь с файлами и командами проекта. Цикл у них похожий: описать, посмотреть, назвать дефект, исправить.

Какие сайты можно создать с помощью вайб-кодинга?

Для первого проекта я бы не брал VibeReview. Полноценная работа с ним требует Next.js и MongoDB. Интерфейс можно изучать локально, но отзывы, рейтинги и идеи завязаны на серверную часть.

TicTac тоже не подходит для первого вечера. Полный исходный код и asset pipeline вынесены в платный BuilderPack. В открытом репозитории остались skills, планы, промпты и часть материалов, но не весь проект.

Простой одностраничник даёт короткую обратную связь. Ты видишь весь результат на одном экране и можешь связать замечание с конкретным объектом. Чем больше серверной логики и скрытых зависимостей, тем сложнее понять, где возникла поломка.

Почему сайт после генерации выглядит шаблонным?

У AI-стиля есть узнаваемый набор:

• стандартный внешний вид на базе Tailwind или shadcn;
• фиолетовые градиенты;
• градиентный текст в hero-блоке;
• неоновые свечения;
• эмодзи вместо иконок;
• центрированный первый экран;
• три одинаковые карточки сразу под ним.

Один фиолетовый цвет сам по себе ничего не определяет, как и использование Tailwind. Шаблонность появляется, когда все решения принимаются по умолчанию. Модель не знает, должен ли сайт быть редакционным, ретро-футуристичным, строгим или похожим на каталог. Она выбирает безопасный знакомый вариант.

Исследование визуальных признаков AI-сгенерированных сайтов vibecoded-design-tells указывает на стандартные паттерны. Модель хорошо воспроизводит знакомые интерфейсы, но хуже держит необычную механику, точную композицию и вариацию известного решения.

Поэтому я бы не лечил шаблонный вид случайными украшениями. Сначала задай систему:

• один характер интерфейса;
• ограниченную палитру;
• шрифтовую пару;
• правила для фона;
• форму кнопок и карточек;
• плотность секций;
• список запрещённых решений;
• один заметный композиционный приём.

Список запретов помогает не меньше списка пожеланий. Например: без фиолетовых градиентов, без эмодзи, без неоновых свечений, без трёх одинаковых карточек, без центрированного hero-блока.

С чего начать вайб-кодинг сайта с нуля?

До первого запроса подготовь исходные материалы:

• назначение страницы;
• аудиторию;
• 2-5 скриншотов референсов;
• структуру секций;
• палитру;
• шрифтовую пару;
• плотность интерфейса;
• поведение на мобильном экране;
• список запрещённых решений.

Я бы разделил эти материалы на три коротких файла.

brief.md отвечает на вопрос, зачем существует страница и кто её читает. Внутри достаточно назначения, аудитории, предложения и желаемого действия.

visual-system.md хранит визуальные правила: цвета, шрифты, сетку, фон, иллюстрации, кнопки, карточки и запреты.

implementation-plan.md описывает порядок сборки. Сначала каркас секций, потом стили, затем отдельные компоненты. Такой порядок не даёт агенту сразу переписать весь проект из-за одной небольшой правки.

Референсы тоже лучше подготовить заранее. Один пример может случайно потянуть сайт в сторону чужого решения. Несколько референсов помогают сравнить стиль, функциональность и ощущение от использования.

Не копируй чужой сайт целиком. Вытащи из референсов конкретные признаки: плотность текста, размер заголовков, форму изображений, положение навигации, характер фона.

Как объяснить ИИ, каким должен быть дизайн страницы?

Документация Anthropic формулирует принцип прямо: ясные и подробные инструкции помогают получить более предсказуемый результат.

Один запрос должен содержать несколько уровней конкретики:

• назначение страницы;
• аудиторию;
• формат первого экрана;
• количество секций;
• цвета;
• шрифтовую пару;
• сетку;
• фон;
• иллюстрации;
• анимации;
• ограничения;
• порядок проверки.

Фраза «дай советы по дизайну» может вернуть список рекомендаций. Команда «внеси изменения в файлы и покажи обновлённый результат» задаёт другой режим работы.

Тот же принцип работает для отдельной правки. Называй объект и изменение:

• замени фон hero-блока;
• оставь структуру, но сделай навигацию компактнее;
• измени только типографику карточек;
• сохрани палитру и перестрой мобильную сетку.

Описывай визуальный дефект через область и наблюдаемое свойство: «заголовок слишком низко относительно изображения» или «кнопка визуально тяжелее основного текста».

Официальный frontend-design skill отдельно выделяет типографику, CSS-переменные и нестандартную композицию. Это полезный чек-лист, когда сайт снова начинает выглядеть одинаково.

Открой текущую страницу и внеси изменения в файлы проекта.

Задача:
- сохранить существующую структуру секций;
- заменить фон hero-блока на спокойный тёплый цвет;
- оставить одну основную кнопку;
- сделать навигацию компактнее;
- изменить типографику карточек;
- не добавлять фиолетовые градиенты;
- не использовать эмодзи вместо иконок;
- не добавлять неоновые свечения;
- не создавать новые секции.

После изменения:
1. запусти страницу;
2. проверь desktop и mobile;
3. перечисли оставшиеся визуальные проблемы;
4. покажи изменённые файлы;
5. кратко опиши результат проверки.

После раздела о визуальной системе начинается практическая часть. На практикуме эту связку можно пройти руками: от замысла и файлов правил до точечных правок и приёмки страницы.

Как создать сайт с помощью вайб-кодинга и не потерять замысел?

Храни правила рядом с проектом. Для этого подойдёт короткий файл CLAUDE.md. В нём можно закрепить визуальную систему, ограничения и обязательную проверку. Критические правила не придётся повторять в каждом сообщении.

Не проси переделать всё, если сломалась одна часть. Запрос «сделай сайт лучше» даёт агенту слишком широкое поле. Он может заменить структуру, переписать стили и затронуть рабочие компоненты.

Лучше менять по одному классу проблем:

1. Сначала фон и общую композицию.
2. Затем типографику.
3. Затем навигацию и первый экран.
4. Затем карточки и остальные секции.
5. Затем мобильную сетку.
6. После этого проверить формы, изображения и кнопки.

В Artifacts каждая правка создаёт новую версию. Версии можно сравнивать и выбирать предыдущий вариант. Это снижает риск потерять рабочее состояние после неудачной итерации.

Для Claude Code нужен минимальный запуск: установка, аутентификация, переход в папку проекта и команда claude. После этого агент работает с файлами и командами проекта.

Publish в Artifact создаёт публичный вариант результата. После публикации появляется кнопка Get embed code, откуда можно взять код для вставки на другой сайт. Это не инструкция по размещению обычного проекта на Vercel, Netlify, GitHub Pages или собственном сервере. Такого сценария в подтверждённых источниках нет.

Как проходит пошаговый процесс создания одностраничного сайта?

1. Выбери простой статический шаблон.

   Начни с локального сайта без базы данных и сложной серверной части. Такой вариант проще открыть, увидеть и исправить. Не бери VibeReview с Next.js и MongoDB и не начинай с TicTac, где полный проект закрыт платным BuilderPack.

   В одном из примеров локальный проект запускается через готовый шаблон. Для работы с существующим репозиторием пригодится такой порядок:

   bash

   Скопировать

   git clone https://github.com/your-username/studio-site.git
   cd studio-site
   npm run dev

   После запуска открой страницу в браузере. Не переходи к следующему запросу, пока не увидел первую версию.

2. Подготовь brief и визуальную систему.

   Запиши назначение страницы, аудиторию, референсы, секции, палитру, типографику, плотность, мобильное поведение и запреты. Для сайта керамической студии можно зафиксировать спокойную редакционную подачу, крупную фотографию изделий и заметную кнопку записи.

   Разложи информацию по файлам:

   Скопировать

   brief.md
   visual-system.md
   implementation-plan.md

   В implementation-plan.md запиши малые шаги: каркас, первый экран, секции, адаптация, проверка. Не отдавай агенту весь проект одним расплывчатым запросом.

3. Создай каркас секций.

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

   Готовый запрос может выглядеть так:

   Каркас сайта керамической студииСкопировать промпт

   Собери каркас одностраничного сайта керамической студии.
   
   Секции по порядку:
   1. Первый экран с названием студии, коротким описанием и кнопкой записи.
   2. Блок с расписанием занятий.
   3. Галерея готовых работ.
   4. Короткая история студии.
   5. Форма записи.
   6. Контакты.
   
   Сделай статический HTML/CSS/JS-сайт без базы данных и сложной серверной части.
   Сохрани структуру секций понятной.
   Не добавляй фиолетовые градиенты, неоновые свечения, эмодзи вместо иконок и три одинаковые карточки.
   Сначала создай файлы каркаса и перечисли их.

4. Запусти сайт локально.

   В Claude Code открой папку проекта и запусти claude. Для самого сайта выполни команду запуска dev-сервера, которая указана в проекте. В фактуре для простого примера используется npm run dev.

   bash

   Скопировать

   cd studio-site
   npm run dev
   npx claude

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

5. Проверь desktop и mobile.

   Открой страницу на большом и мобильном размере. Смотри не только на наличие секций. Проверь положение заголовка, читаемость текста, размер кнопки, поведение изображений и переход между блоками.

   Агент видит код, а ты видишь отрендеренную страницу. Это разные вещи. Визуальный дефект нужно описывать через конкретную область: «на мобильном заголовок выходит за границы первого экрана» или «галерея становится слишком узкой после второго изображения».

6. Исправляй по одному классу проблем.

   Не отправляй список из десяти разрозненных пожеланий. Сначала измени первый экран, затем проверь его снова. После этого переходи к карточкам, типографике или мобильной сетке.

   Пример точечного запроса:

   Исправление первого экранаСкопировать промпт

   Измени только первый экран сайта керамической студии.
   
   Сделай заголовок выше относительно изображения.
   Оставь текущую палитру и текст.
   Не меняй расписание, галерею, форму записи и контакты.
   Не добавляй новые секции.
   После изменения запусти страницу и проверь desktop и mobile.
   Покажи изменённые файлы и перечисли оставшиеся проблемы.

7. Повторно открой страницу.

   После каждой правки снова посмотри результат в браузере. Не принимай сообщение «готово» вместо просмотра. Если подключён screenshot loop, делай снимок страницы после изменения и передавай его агенту для сравнения с целью.

   Для такого сценария в источниках предложено настроить Puppeteer, чтобы Claude Code мог делать скриншоты, сравнивать их с заданным результатом и исправляться. На анимированных элементах screenshot loop может зациклиться. Такие участки лучше временно исключать из автоматической визуальной проверки или ограничивать число итераций.

8. Проверь формы, изображения и кнопки.

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

   Сформулируй проверку как отдельную последовательность:

   Приёмка страницыСкопировать промпт

   Осмотри готовую страницу.
   
   Проверь:
   - форму записи;
   - изображения в галерее;
   - кнопки первого экрана;
   - ссылки навигации;
   - desktop-версию;
   - mobile-версию.
   
   Внеси только необходимые исправления.
   Затем снова открой страницу.
   Перечисли найденные проблемы, изменённые файлы и результат повторной проверки.

9. Опубликуй готовый Artifact.

   Когда страница проверена, нажми Publish. Для вставки на другой сайт используй Get embed code. Не называй этот шаг полноценным размещением на собственном домене: подтверждённые источники описывают публикацию Artifact внутри инфраструктуры Claude и код вставки, но не внешний деплой на хостинг для статического сайта.

   Финальная последовательность для книжного магазина будет такой же. Меняется содержание: вместо расписания студии появятся подборка книг, заметка владельца, каталог или форма заказа. Порядок сборки остаётся прежним: спецификация, каркас, запуск, визуальная проверка, точечные правки, повторный просмотр и публикация.

Что делать, если ИИ не проверяет страницу или ломает результат?

Сбой выглядит так: агент меняет код, сообщает о завершении и не запускает страницу повторно. Отдельная фраза «проверь работу» конкурирует с основной задачей и может остаться без действия.

Используй последовательность:

1. Осмотри текущую страницу.
2. Внеси запрошенное визуальное изменение.
3. Запусти dev-сервер.
4. Проверь desktop и mobile.
5. Перечисли оставшиеся визуальные проблемы.
6. Покажи изменённые файлы и результат проверки.

Для визуальной проверки полезен screenshot loop. После изменения делай снимок страницы, передавай его Claude Code и проси сравнить с целевым референсом. Без снимка агент видит HTML, CSS и JavaScript, но не видит фактическое расположение элементов.

У screenshot loop есть ограничение. На анимированных элементах сравнение может зациклиться. Временно отключи автоматическую проверку для таких элементов или задай предел итераций.

Не пиши агенту только «карточка выглядит неправильно». Пользователь описывает дефект по тому, что видит, а агент ищет причину в коде. Укажи область и измеримое наблюдение: «заголовок на 32 px ниже изображения», «кнопка визуально тяжелее текста», «мобильный экран ломается после второго блока».

Вопросы и ответы