Саммари

🎯 О чём этот конспект: Практическое руководство по работе с обновленным AI-генератором веб-сайтов. В видео показан полный цикл: от составления стартового промпта и подбора стиля без списания токенов до генерации адаптивного сайта за 3–4 минуты и глубокой доработки с помощью четырех встроенных визуальных инструментов AI-редактирования (мультиселект через Ctrl, инлайн-типографика, отрисовка отступов и пакетные комментарии).

👤 Кому будет полезно: Вайбкодерам, no-code разработчикам, веб-дизайнерам и фрилансерам, которым нужно за считанные минуты разворачивать рабочие лендинги под ключ с микроанимациями, версткой и чистым кодом для клиентов или своего портфолио.

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

1. Запуск генерации и бесплатный подбор стиля без списания токенов

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

Тайминг: ▶ 01:04, ▶ 01:16, ▶ 01:40, ▶ 02:04

Выгода: Экономия 100% токенов генерации на этапе брейншторма и сокращение времени создания готового первого драфта страницы до 3–4 минут (вместо 10+ минут в ранних версиях).

Как применить:

• Шаг 1: Формирование вводного промпта — Введите подробный текстовый запрос с указанием специфики бизнеса, ключевых блоков, желаемой атмосферы и референсов.

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

• Шаг 2: Утверждение структуры — Ознакомьтесь с предложенным планом секций (AI сам предложит полноэкранный hero-блок с горами, сетку номеров и блок бронирования) и подтвердите его.
• Шаг 3: Выбор стилистики и цветовой схемы — Просмотрите предложенные варианты дизайна. Если ни один не подошел, запросите новые варианты (кнопка пропуска) — токены за это не списываются.
• Шаг 4: Настройка шрифтов и палитры — Выберите светлую тему, шрифтовую пару и запустите финальную генерацию страницы.

Результат: Через 3–4 минуты формируется полностью рабочий, адаптивный лендинг с якорными ссылками, формой бронирования, адаптивной сеткой под мобильные устройства и базовыми микроанимациями.

2. Глобальное обновление страницы: добавление плавающих элементов и триггерных скриптов

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

Тайминг: ▶ 02:28, ▶ 02:34, ▶ 02:45

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

Как применить:

• Шаг 1: Снятие активных выделений — Убедитесь, что на макете не активен ни один визуальный элемент или инструмент редактирования.
• Шаг 2: Отправка глобального промпта — Введите команду с описанием логики появления и позиционирования элемента:

Добавь кнопку «Наверх» в правый нижний угол с плавным скроллом. Она должна появляться только со второго экрана и ниже. Если находимся на первом экране — кнопку показывать не нужно.

• Шаг 3: Проверка скрипта на живом превью — Проскролльте страницу: на первом экране кнопка должна отсутствовать, а при переходе ко второму экрану плавно появляться и корректно возвращать пользователя к шапке при клике.

Результат: Интерактивная кнопка возврата наверх с плавным скроллом и условием отображения по высоте прокрутки, встроенная в разметку.

3. Инструмент «Выделение»: Локальный мультиселект (Ctrl) и точечный промптинг

Контекст: Раньше любые текстовые правки через чат могли случайно переписать соседние блоки страницы. Обновленный инструмент выбора элементов позволяет изолировать конкретную область (текст, изображение, фон) и направлять AI-агенту контекстные инструкции строго для этой части. Функция множественного выбора через клавишу Ctrl позволяет применять правки к нескольким блокам одновременно, сохраняя визуальную синхронность и единообразие структуры.

Тайминг: ▶ 01:71, ▶ 01:88, ▶ 02:51, ▶ 02:73

Выгода: Исключение галлюцинаций AI относительно нетронутых блоков; точечное добавление сложных CSS-эффектов (например, Parallax) за секунды.

Как применить:

• Шаг 1: Добавление анимации к одиночному объекту — Выберите инструмент выделения (курсор), кликните по главному изображению и задайте промпт на анимацию:

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

• Шаг 2: Множественный выбор карточек — Зажмите клавишу Ctrl (или Cmd на macOS) и последовательно кликните по текстовым блокам или карточкам номеров, требующим синхронного обновления.
• Шаг 3: Пакетное обновление контента — Отправьте запрос на расширение текста для выделенной группы:

Добавь сюда побольше текста, чтобы не было пусто. Пусть в каждом текстовом блоке будет по 2–3 строки с одинаковой структурой.

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

4. Инструмент «Текст» (T): Прямой инлайн-редактор без вызова нейросети

Контекст: Тратить токены и время генерации нейросети ради исправления опечатки, замены цены или оптимизации заголовка неэффективно. Встроенный режим прямого редактирования текста (T) работает как классический текстовый процессор или инструмент Text в Figma. Правки вносятся непосредственно в DOM-дерево сайта и мгновенно сохраняются.

Тайминг: ▶ 03:05, ▶ 03:23, ▶ 03:31

Выгода: Моментальное сохранение изменений без ожидания ответа AI; доступно до 100 бесплатных текстовых правок в день без расхода кредитов.

Как применить:

• Шаг 1: Активация режима текста — На панели инструментов выберите иконку с буквой T (или кликните дважды по текстовому элементу).
• Шаг 2: Внесение SEO-правок — Кликните в нужный заголовок или абзац и перепишите текст вручную под поисковые запросы:

Отель Porsche в Альпах — Эксклюзивный отдых для ценителей спорткаров

• Шаг 3: Сохранение состояния — Кликните вне текстового поля; изменения автоматически зафиксируются в верстке страницы.

Результат: Скорректированная типографика и SEO-заголовки без использования токенов генерации и без изменения стилей блока.

5. Инструмент «Рисование» (Draw): Визуальная разметка отступов и позиций

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

Тайминг: ▶ 03:36, ▶ 03:49, ▶ 03:59

Выгода: 100% точность попадания в нужный блок при настройке padding/margin, изменении цветовых тем и переносе блоков.

Как применить:

• Шаг 1: Разметка отступов линией — Выберите инструмент «Кисть/Карандаш» и проведите линию в области между блоками, которую нужно скорректировать.
• Шаг 2: Промпт для изменения геометрии — Напишите команду:

Сделай эти отступы в два раза больше.

• Шаг 3: Обводка контейнера для переноса и перекраски — Обведите нужный текстовый блок кругом и отправьте инструкцию по смене позиции и темы:

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

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

6. Инструмент «Комментарии»: Пакетное внесение правок (Batch Prompts)

Контекст: Последовательная отправка одиночных мелких правок (передвинуть иконку, вставить разделитель, добавить пункт списка) занимает много времени из-за ожидания каждой отдельной генерации. Инструмент комментирования позволяет расставить пины с задачами по всей странице и отправить их на выполнение единым пакетом (Batch Execution).

Тайминг: ▶ 03:85, ▶ 03:97, ▶ 04:22, ▶ 04:43

Выгода: Сокращение времени полировки интерфейса в 4–5 раз за счет параллельного применения пула правок за одну итерацию генерации.

Как применить:

• Шаг 1: Расстановка комментариев по макету — Выберите инструмент «Комментарий» (иконка облачка) и кликайте по нужным местам, оставляя короткие инструкции:
  • Пин 1 (под шапкой): Добавь тонкий разделитель под шапкой, чтобы белый цвет не сливался с фоном при скролле.
  • Пин 2 (в меню/списке): Добавь пятый и шестой пункт.
  • Пин 3 (в инпутах формы): Добавь иконку календаря.
• Шаг 2: Единый запуск пакета — Нажмите кнопку отправки всех комментариев в работу одновременно.
• Шаг 3: Финальная микрокоррекция позиционирования — Если AI разместил элемент не с той стороны (например, иконку слева вместо права), выделите оба поля через Ctrl и отправьте уточнение:

Иконка календаря должна быть справа, а не слева. Выровняй по правому краю.

Результат: Все точечные визуальные элементы (разделители, иконки в инпутах, дополнительные пункты) внедряются в макет за один проход.

7. Монетизация и публикация: Интерактивное портфолио вместо статичных скриншотов

Контекст: Классические портфолио на площадках вроде Behance или Dribbble демонстрируют лишь статичные картинки и мокапы, что не дает клиенту представления о реальной адаптивности, микроанимациях и чистоте кода. В обновленном сервисе создан раздел Creator Marketplace: сгенерированные сайты можно публиковать как живые веб-страницы. Заказчики могут тестировать реальный UI и отправлять заказы напрямую авторам внутри платформы.

Тайминг: ▶ 00:17, ▶ 00:36, ▶ 00:46, ▶ 04:63

Выгода: Готовая площадка для лидогенерации и демонстрации полноценных интерактивных кейсов (с кодом и адаптивной версткой) без необходимости оплачивать сторонний хостинг.

Как применить:

• Шаг 1: Финализация и публикация проекта — После завершения всех правок нажмите кнопку Publish, чтобы получить прямую рабочую веб-ссылку.
• Шаг 2: Добавление в профиль креатора — Привяжите готовый проект к своему профилю на платформе; проект станет доступен для просмотра и комментирования другими участниками сообщества.
• Шаг 3: Активация промокода для старта — Для бесплатной генерации первого полнофункционального лендинга перейдите в настройки профиля:
  1. Откройте Settings -> Top up (Пополнение).
  2. Введите промокод Alex (или ALK).
  3. Активируйте бесплатный баланс и создайте первый кейс.

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

FAQ

В: Списываются ли токены при переборе стилей и шрифтовых пар до генерации?

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

В: Как работает мультивыбор элементов для одновременного редактирования?

О: Нужно выбрать первый инструмент на панели (курсор выделения), кликнуть на начальный элемент, затем зажать клавишу Ctrl (или Cmd) и кликать по остальным блокам. В поле чата отобразится счетчик выбранных объектов, и следующий промпт применится только к ним.

В: Есть ли ограничения на прямое инлайн-редактирование текста (инструмент T)?

О: Платформа предоставляет до 100 бесплатных текстовых правок ежедневно. Они не расходуют генеративные токены и сохраняются мгновенно без обращения к AI-модели.

В: Как AI понимает нарисованные от руки линии и круги через инструмент Draw?

О: Инструмент считывает экранные координаты векторных отметок и накладывает их на DOM-дерево макета. Когда вы обводите блок и пишете промпт, модель сопоставляет рисунок с ближайшим контейнером и понимает, какой именно отступ или элемент вы имеете в виду.

В: Чем отправка пакетных комментариев лучше последовательных промптов?

О: Пакетный режим (Batch Comments) позволяет расставить десятки мелких задач по всей странице и применить их за одну итерацию генерации. Это экономит время ожидания ответа AI и снижает вероятность конфликтов верстки при пошаговых изменениях.

В: Что получает пользователь на выходе — макет или рабочий код?

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

Ресурсы и ссылки

• AI Website Builder Platform — сервис для генерации и редактирования сайтов по текстовым промптам со встроенным маркетплейсом креаторов (рассмотрен в видео).
• Промокод Alex / ALK — код для бесплатной генерации первого сайта и пополнения баланса (активируется в разделе Settings -> Top up).

Конспект создан на основе видео «Делаем сайты по промпту: Большое обновление AI-генератора» канала Alexey Bychkov. Все права на оригинальный материал принадлежат авторам. Источник: https://www.youtube.com/watch?v=c0DzQsywjiQ