Модуль d.8: сайты без кода с AI

Ведущая: Привет-привет! С вами AIStudy — бесплатный курс про искусственный интеллект. Сегодня собираем сайты без единой строчки кода и разбираемся, какой конструктор для какой задачи.

Ведущий: Привет! Вопросов три. Чем Framer отличается от Webflow. Когда визуальных конструкторов уже мало и нужны Bolt.new с Lovable. И что получится, если один и тот же лендинг собрать тремя способами подряд.

Ведущая: Часть первая. Начнём с Framer. Его хвалят все дизайнеры, а за что именно?

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

Ведущая: А почему не собрать всё это в чате, как в Lovable, про который ты упомянул в начале?

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

Ведущая: А что тут делает искусственный интеллект, если дизайнер рисует сам?

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

Ведущая: Как именно ошибаются в самом начале?

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

Ведущая: Подожди, что значит «роли»? Просто цвета же.

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

Ведущая: Покажи, как выглядит такой бриф целиком.

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

Ведущая: И после генерации можно двигать блоки?

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

Ведущая: А если какого-то блока не хватает на странице?

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

Ведущая: Теперь про анимации. Во Framer их все хвалят.

Ведущий: Там три уровня, и без кода. Первый: появление. Заголовок и карточки первого экрана мягко всплывают с небольшой задержкой друг за другом. Второй: прокрутка. Скриншот продукта в первом экране выпрямляется и чуть увеличивается, пока вы листаете. Третий: наведение. Кнопка или карточка слегка приподнимается и пружинит. Для этого её превращают в компонент и добавляют отдельное состояние наведения.

Ведущая: Звучит как соблазн сделать новогоднюю гирлянду.

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

Ведущая: А с контентом что? Кейсы же придётся добавлять.

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

Ведущая: Сколько вообще времени на всё это уходит?

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

Ведущая: Получается, Framer про скорость и выразительность. От идеи до живой ссылки за один вечер.

Ведущий: И про одну-три страницы. Когда страниц становится много, а контент живёт своей жизнью, нужен инструмент другого склада. Это Webflow.

Ведущий: Часть вторая. Если Framer — холст, то что тогда Webflow?

Ведущая: Webflow с первого дня устроен как настоящая страница в браузере. Вложенные контейнеры, классы, строгая сетка. Кода вы не пишете, но мыслите как верстальщик. Освоить его дольше: не час, а пару дней. Зато на выходе система, которая выдерживает сотню страниц и не рассыпается.

Ведущий: Пара дней это немало. Кому это вообще оправдано?

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

Ведущий: И ИИ там тоже есть?

Ведущая: Есть, и в этом году он заметно вырос. Раньше генератор делал одну посадочную страницу. Теперь за один заход собирает многостраничный сайт, до пяти связанных страниц. И главное: разворачивает под него дизайн-систему. Не картинку, а архитектуру.

Ведущий: Из чего эта дизайн-система состоит?

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

Ведущий: А как выглядит запрос для такого сайта?

Ведущая: Тоже структурный. Например: корпоративный сайт инженерного бюро промышленного дизайна. Пять страниц: главная, услуги по трём направлениям, кейсы сеткой, команда, контакты с формой брифа. Строгая модульная сетка, светлая тема, акцент глубокий кобальт.

Ведущий: Сгенерировали сайт. Что делаем первым делом?

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

Ведущий: А если страниц будет десять, а не пять? Всё менять вручную?

Ведущая: Это вечер рутины: десятки кнопок и заголовков, да ещё мобильная версия, где обязательно что-нибудь упустят. С переменной это минута. Хороший тест: замените главный акцент на терракотовый, пролистайте три страницы и убедитесь, что кнопки, бейджи и ссылки обновились без вашего участия. Если что-то осталось прежним, значит, цвет там прописан руками, а не переменной.

Ведущий: А компоненты тоже надо проверять после генерации?

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

Ведущий: Теперь самое интересное. Почему вообще выбирают Webflow, а не Framer?

Ведущая: Из-за контента. У Webflow реляционная система управления содержимым: данные отделены от вёрстки и связаны между собой. Заводите коллекцию кейсов, коллекцию услуг и коллекцию инженеров. И связываете их ссылками друг на друга.

Ведущий: И что это даёт на практике?

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

Ведущий: Когда такая система нужна, а когда лишняя?

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

Ведущий: И ассистент внутри редактора тоже есть?

Ведущая: Есть, он помогает с текстами и мелкими правками внутри открытого проекта. Но главное он не заменит: порядок в переменных и компонентах придётся навести самому. Если там хаос, ассистент только размножит этот хаос по страницам.

Ведущий: Что ещё проверять на каждой странице, кроме переменных?

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

Ведущий: Что бы ты посоветовала сделать, чтобы это закрепить?

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

Ведущий: Давай честно сравним. Когда Framer, а когда Webflow?

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

Ведущий: Как быстрый скетч и строительные чертежи.

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

Ведущая: Часть третья. Всё, что мы обсудили, это витрины. А если нужно приложение: вход, личный кабинет, база данных?

Ведущий: Здесь двое: Bolt.new и Lovable. В обоих вы описываете задачу словами, и через пару минут перед вами рабочее приложение. Но уже через пять минут видна главная болезнь вайб-кодинга: такие приложения похожи как близнецы.

Ведущая: Почему они выходят одинаковыми?

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

Ведущая: И как сделать, чтобы приложение выглядело как своё, а не как у всех?

Ведущий: Паспорт дизайн-системы, файл DESIGN.md. Цвета с ролями, шрифты, отступы, состояния, сетка и запреты. Его можно выгрузить из Stitch, взять готовый у известных продуктов или составить под свой бренд. Агенту его отдают на нулевом шаге с такой командой: «прочитай паспорт, пропиши токены в стили как единственный источник правды, собери только пустой каркас». Дальше каждый новый экран наследует правила. А если агент ошибся, достаточно одной фразы со ссылкой на токен, а не споров про ощущения.

Ведущая: Какой паспорт, например, для трекера задач фрилансера?

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

Ведущая: Начнём с Bolt.new. Что это такое?

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

Ведущая: И подвох, конечно, есть.

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

Ведущая: Как этого избежать и не сжечь весь лимит?

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

Ведущая: То есть данные подключаются последними.

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

Ведущая: Тогда Lovable. Чем он лучше для первого запуска продукта?

Ведущий: Он заточен под первый боевой запуск, когда дизайнеру или основателю без штата инженеров нужна первая версия продукта с настоящей регистрацией людей и защищённой базой. Подключаете Supabase, и агент сам пишет миграции, создаёт таблицы, настраивает вход по почте или через соцсети.

Ведущая: А что тут обязан контролировать дизайнер?

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

Ведущая: И проверять эти правила тоже нужно самому?

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

Ведущая: Ты говорил про инженеров. Как им потом подхватывать проект?

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

Ведущая: А как понять, что связка с GitHub работает?

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

Ведущая: Ещё одно различие, о котором стоит помнить: Bolt.new считает расход токенами, а Lovable действиями и кредитами. Значит, в Bolt.new опасны каскады ошибок на длинных файлах, а в Lovable выгодно собирать правки в один структурный запрос.

Ведущий: Формула получается такая: запустить и проверить на первых пользователях, а когда продукт вырос, отдать репозиторий инженерам. Bolt.new про скорость прототипа, Lovable про первую боевую версию.

Ведущий: Часть четвёртая. Теперь у нас четыре инструмента. Как не запутаться?

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

Ведущий: Дай хотя бы краткую раскладку по слоям.

Ведущая: Имиджевый лендинг на пару экранов, где важна анимация, это Framer. Многостраничный сайт или медиа с регулярными обновлениями, это Webflow. Рабочий прототип с бэкендом к пятнице, это Bolt.new. Первая боевая версия продукта с регистрацией и базой, когда вы не инженер, это Lovable. А если продукт большой и живёт давно, нужны уже не генераторы с нуля, а агенты в среде разработки, у которых есть доступ ко всему репозиторию.

Ведущий: А если я сомневаюсь? Есть быстрый способ определиться?

Ведущая: Четыре вопроса, пока браузер ещё закрыт. Первый: нужны ли вход, личный кабинет и данные пользователей? Если нет, это витрина, и дорога лежит в Framer или Webflow. Если да, второй вопрос: вы проверяете гипотезу на тестовых данных или запускаете для живых людей с приватной информацией? Для первого Bolt.new, для второго Lovable. Третий, для публичного сайта: сколько страниц и как часто меняется контент? До трёх-пяти страниц с упором на эффект это Framer. Больше, с блогом и каталогом, Webflow.

Ведущий: А какой четвёртый вопрос?

Ведущая: Как склеить сайт и приложение в один бренд. Витрина живёт на главном домене во Framer или Webflow, приложение на поддомене в Lovable или Bolt.new. А связывает их один и тот же паспорт дизайн-системы: его значения кладёте в глобальные стили сайта и скармливаете на нулевом шаге генератору приложения.

Ведущий: Какие ошибки выбора самые дорогие?

Ведущая: Четыре. Первая: тянуть один инструмент на всё, например сложный личный кабинет с ролями в Webflow или лендинг с трёхмерным параллаксом в Lovable. Вторая: начинать в Bolt.new или Lovable без паспорта, получить фиолетовый клон и сжечь кредиты на перекрашивание кнопок. Третья: один гигантский запрос в Bolt.new вместо трёх фаз. Четвёртая: открытая база после публикации из Lovable.

Ведущий: И последнее про выбор: география аудитории.

Ведущая: У Framer и Webflow Россия значится в списках ограниченных стран. Если ваша аудитория в России, публичный сайт надёжнее держать там, где он точно открывается.

Ведущий: Хорошо, теория ясна. А как это выглядит вживую?

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

Ведущий: А что с паспортом дизайна для этого лендинга?

Ведущая: Один на все три сборки. Тёплый светлый фон цвета камня, белые карточки с тонкой рамкой, глубокий хвойно-бирюзовый для главных кнопок, янтарный для бейджей. Цифры таймера моноширинным шрифтом. И запрет: никаких фиолетовых градиентов и размытых теней.

Ведущий: Паспорт один, значит, различия видны честно.

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

Ведущий: А как проходит та же сборка в Bolt.new?

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

Ведущий: И как это делается в Lovable?

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

Ведущий: Как потом оценивать результат трёх сборок?

Ведущая: По пяти критериям, каждый по пятибалльной шкале. Насколько точно соблюдён паспорт. Плавность анимаций. Работают ли живые узлы: таймер, переключатель, запись в базу. Насколько удобно вносить точечные правки: мышкой на холсте или фразой в чате. И готовность к боевому запуску: чистый код в репозитории, защита данных, открывается ли у ваших пользователей. Обычно картина такая: Framer выигрывает по виду и движению, вайб-кодинг по живой логике.

Ведущий: Теперь итог. Первое: Framer для лендингов, промо и портфолио, где важны холст, типографика и движение, а глобальные стили фиксируются до ручных правок. Второе: Webflow для многостраничных сайтов и контента, с переменными, компонентами и связанной системой управления содержимым. Третье: Bolt.new для быстрого прототипа в три фазы, Lovable для первой боевой версии с защитой строк в базе и двусторонним GitHub. Четвёртое: паспорт дизайн-системы на нулевом шаге спасает любой инструмент от шаблонного вида. Пятое: выбирайте по слою задачи, а не по шуму, и разделяйте сайт и приложение на домен и поддомен.

Ведущая: Картинки, схемы и задания к этому модулю ждут в уроках на сайте.

Ведущий: Дальше в курсе модуль про UX-исследования с нейросетью: как понять, что собранный сайт действительно работает. А если хочется попробовать разные нейросети в одном месте, без VPN и с оплатой рублями, это наш сервис arckep.ru.

Ведущая: Спасибо, что слушали!

Ведущий: До встречи!