Вайбкодинг: сайты — лендинги и порталы

v0 и bolt.new хороши для быстрой генерации отдельных экранов и лендингов по описанию или скриншоту дизайна. Figma Make превращает макет прямо в Figma в рабочий, кликабельный прототип. Сюда же входит Framer — сайт-конструктор. Не путай его с библиотекой анимации Motion из темы «Библиотеки и ресурсы»: она выросла внутри Framer и долго называлась Framer Motion, но с конца 2024 года это независимый open-source проект (Framer остался лишь спонсором). Framer — это no-code редактор, где сайт собирается промптом и визуальными правками одновременно. Его цель — готовый, сразу опубликованный маркетинговый сайт, а не только прототип. Для лендинга или сайта-визитки это часто быстрее, чем доводить до продакшена вывод v0/bolt.new. Отдельно полезно знать про paper.design — дизайн-инструмент на HTML/CSS-холсте, рассчитанный на работу с ИИ-агентами. Интерфейсы и визуалы там можно создавать промптом через агента прямо на канвасе, а не собирать вручную из слоёв, как в классической Figma. Для дизайнера это ближе всего к «вайбкодингу самого макета» ещё до того, как он превращается в код. Это полезная промежуточная ступень между чистой генерацией изображений и полноценной сборкой в v0/bolt.new. Чем именно это отличается от Claude Design и Google Stitch, разобрано в теме «Дизайн-мышление до кода». Ещё один вариант, ближе к самой Figma, — code layers в Figma Sites. Это способ превратить статичный слой макета в реально работающий кусок кода (React/TypeScript/Tailwind) с настоящим поведением (анимацией, реакцией на курсор, состояниями), не выходя из Figma. Подробно разобрано в теме «ИИ внутри Figma».

Описания у v0, bolt.new и Lovable звучат одинаково: «опиши — получи работающий сайт». Разница видна только на одной и той же задаче. Так обычно выглядит результат на этом промпте (лендинг из четырёх секций); оценки в таблице — по моему опыту:

Собери одностраничный лендинг для студии йоги «Пауза»: hero с заголовком и кнопкой записи, три карточки направлений, расписание на неделю таблицей, форма записи на пробное занятие (имя, телефон, направление). Светлая палитра, шрифт без засечек, адаптивная вёрстка

Практический вывод для дизайнера. Если задача — экран, секция или лендинг, который потом уедет разработчику или в свой проект, бери v0. Если хочется живой сайт по ссылке к вечеру и не пугает терминал — bolt.new. Если нужно, чтобы форма реально сохраняла заявки, а аккаунты и база появились без единого ручного шага, — Lovable. Только помни, что это уже территория темы «Вайбкодинг: интерфейсы». Все три упираются в одно и то же место. По опыту, большую часть продукта они собирают быстро. Остаток (интеграции, сложная логика, производительность) требует либо терминального агента, либо разработчика.

v0

bolt.new

Lovable

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

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

Вот ссылка на сайт (вставить) — как думаешь, как устроена эта анимация появления карточек при скролле? Из каких технических частей это может состоять, и как повторить похожий эффект в моём проекте

Тот же приём работает и с собственным старым проектом. Попроси модель объяснить, почему тогда сработало то или иное решение, вместо того чтобы вслепую повторять его в новом. Обсуждать результат, свой и чужой, — постоянная практика, а не разовое действие «получил и пошёл дальше». Задавай вопросы, проси объяснить логику решения, сверяй свою интуицию с тем, что говорит модель. Именно из таких разборов со временем складывается собственное понимание инструмента, а не запомненный набор чужих приёмов.

Где брать сами ссылки — в таблице галерей в разделе «Где смотреть референсы сайтов» ниже.

Базовый просмотр во всех этих галереях бесплатный. У части из них есть платная подписка с дополнительными функциями.

Как это связано с агентом. Референс из галереи — вход для разбора «как это сделано»: скриншот плюс ссылка в Claude Code или Codex. И для брифа агенту: «структура как у X, типографика как у Y». Готовые компоненты и эффекты с кодом — в теме «Библиотеки и ресурсы для вайбкодинга».

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

Например: нужно регулярно записывать скринкаст того, что открыто в браузере, с автопрокруткой и точным контролем разрешения и фреймрейта. Готовые расширения из магазина либо платные, либо не делают именно то, что нужно. Искать идеальный готовый инструмент дальше не нужно: это готовая задача для вайбкодинга. Расширение для браузера (тема «Вайбкодинг: арт и инструменты», раздел про вайбкодинг расширения для Chrome) собирается по тому же принципу, что и плагин для Figma из той же темы, просто платформа другая.

Claude Code, Codex CLI, Gemini CLI (см. тему «CLI и терминальные ИИ-агенты») тоже работают с простыми сайтами. Они быстро найдут и заменят цвет бренда по всему проекту, поправят вёрстку одного блока, прогонят проверку доступности. Для сайта такого масштаба разница с веб-агентами в основном в удобстве интерфейса, а не в возможностях. Когда проект вырастает в полноценный продукт с собственной базой данных и логикой, разница становится куда заметнее. Это разбирается в теме «Вайбкодинг: интерфейсы».

Собери одностраничный лендинг для студии йоги: хиро-секция с фото, три блока с преимуществами, форма записи на пробное занятие, светлая цветовая палитра, шрифт без засечек

Вот скриншот моего макета из Figma (приложить) и точные значения: отступы между секциями [значение], размеры шрифтов [значения], ширина контейнера [значение]. Сверстай страницу. На мобильных: [как перестраиваются блоки]

По картинке отступы угадываются на глаз, а мобильная версия из одного десктопного скриншота не следует. Поэтому давай значения или подключай Figma MCP.

Добавь на эту страницу тёмную тему, переключаемую кнопкой в правом верхнем углу

Проверь по коду эту форму на доступность: есть ли подписи у полей, логичный ли порядок табуляции, виден ли фокус

Навигацию с клавиатуры агент сам не пройдёт, он проверит код. После правок пройди форму клавишей Tab сам.

Открой проект, найди все места, где используется старый синий цвет бренда [старый hex или имя токена], и замени на новый #2D6CDF

Сделай кнопку "Купить" липкой (sticky) внизу экрана на мобильной версии

Сравни макет в файле design-spec.md с текущей вёрсткой и перечисли расхождения

Первая генерация редко получается идеальной. Первый инстинкт — переписать весь промпт заново — почти всегда медленнее, чем точечная правка. Веб-агенты держат контекст предыдущего результата в рамках одного чата. Поэтому работает тот же принцип, что и в разговорном редактировании изображений (тема «Редактирование изображений и ретушь», раздел «Редактирование и правки»): продолжай диалог короткими, точными правками.

• Явно называй, что не трогать. «Оставь всё как есть, поменяй только цвет кнопки на #2D6CDF» работает надёжнее, чем просто «сделай кнопку синей». Агент реже трогает соседние элементы, которые устраивали.
• Показывай, а не только описывай. Скриншот текущего состояния с пометкой (стрелка, обводка, комментарий «вот здесь не так») агент считывает точнее, чем словесное описание того же самого. Особенно если проблема в тонкой детали вроде отступа или оттенка.
• Проси объяснить, что изменилось, после каждой правки. Короткое «что именно ты поменял» помогает поймать побочные эффекты сразу, а не через три шага, когда их уже сложнее отследить.
• Откатывайся, а не патчь бесконечно. Если несколько правок подряд не приближают к результату, а множат случайные изменения, вернись к последнему рабочему состоянию и переформулируй задачу точнее. Это надёжнее, чем накапливать патчи поверх патчей (подробный разбор отката — тема «Чтение и отладка кода агента»).

Это работает, когда результат просто «не тот» по виду или поведению. Если вместо этого что-то откровенно сломалось (белый экран, ошибка, кнопка не нажимается), это уже территория темы «Чтение и отладка кода агента». Там другая логика работы: через чтение ошибки, а не через визуальное сравнение.

Глубина брифа для вайбкодинга — сознательный выбор под конкретную задачу, а не универсальная константа. Чем короче промпт, тем быстрее первый результат. Но тем больше деталей агент додумывает сам по самому частотному паттерну, а это прямая дорога к нейрослопу (тема «Нейрослоп»). Три уровня, от самого лёгкого до самого подробного:

• Один быстрый промпт. «Собери лендинг для студии йоги» — нормально для черновой разведки направлений или разового эксперимента. Но результат почти наверняка получится максимально типовым: агент заполнит все пробелы дефолтами.
• Структурированное ТЗ через мета-промптинг. Полезная привычка — начинать сессию с мета-промпта из темы «Мета-промптинг», а не с самого промпта на постройку. Опиши задачу своими словами модели-чату и попроси оформить её в чёткое ТЗ для агента: разделы страницы, компоненты, состояния, adaptive-поведение. Уже этот структурированный текст отдавай в v0/bolt/Framer. Так агент реже «додумывает» детали не в ту сторону.
• Полноценный бриф-документ. Для сайта из нескольких страниц удобнее один раз собрать бриф по шаблону из темы «Брифы с ИИ» (цель, аудитория, референсы, ограничения) и вставлять его целиком в начале любого нового чата с агентом. Пересказывать вводные заново в каждой сессии не придётся.

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

Деплой — публикация проекта в интернете по реальному адресу. Vercel — один из самых популярных сервисов для этого, особенно в связке с агентными инструментами. Предусловие для терминального агента: установлен и залогинен Vercel CLI (npm i -g vercel, затем vercel login). Иначе агент упадёт на первой команде или придумает ссылку:

Задеплой проект на Vercel и пришли мне ссылку на живую версию. Если Vercel CLI не установлен, не залогинен или команда просит ввод — остановись и скажи мне. Ссылку не придумывай.

После деплоя проект готов не только к использованию, но и к тому, чтобы попасть в портфолио с живой ссылкой — см. тему «Портфолио: как презентовать проекты с ИИ». Если у проекта появляется своя база данных, аккаунты пользователей или приём платежей, это уже территория темы «Вайбкодинг: интерфейсы», а не простого деплоя сайта.

Собери одностраничный сайт-визитку для [ниша]: форма обратной связи, адаптивная вёрстка, минимум три секции

Сравни, какой инструмент лучше для быстрого лендинга под мою задачу [описание] (v0, bolt.new или Lovable), и объясни разницу в подходе

Вот ошибка при деплое на Vercel (вставить текст ошибки) — объясни, что пошло не так, и предложи исправление

Вот скриншот текущего результата (вставить) с пометкой, что не так — оставь всё остальное как есть и поправь только это

У меня есть только одна фраза с идеей сайта [вставить] — задай мне уточняющие вопросы по одному, чтобы собрать из этого структурированное ТЗ для агента