Как сгенерировать лендинг или сайт с AI в NeuroGate
Пошаговая инструкция: создать лендинг или маркетинговую страницу в NeuroGate Design — бриф, design system, превью HTML и экспорт PDF/ZIP за минуты.
Как сгенерировать лендинг или сайт с AI в NeuroGate
Нужен одностраничник под запуск, MVP или A/B-тест — без недели вёрстки? В NeuroGate Design вы описываете задачу текстом, прикрепляете референсы, выбираете design system — и получаете готовый HTML-прототип с превью в браузере. Экспорт: PDF, HTML, ZIP.
Лендинг vs сайт: что выбрать
На Design home тип «Прототип» раскрывается в два подтипа:
| Подтип | Когда использовать |
|---|---|
| **Лендинг** | Одна страница: hero, benefits, pricing, CTA |
| **Сайт** | Редакционная/маркетинговая страница чуть сложнее по структуре |
Оба используют шаблон web-prototype и single-canvas preview — HTML открывается справа, как живой сайт.
Предварительные условия
- Аккаунт на ng-ai.ru
- Баланс на AI-модели (списание за токены генерации)
- Рекомендуется: готовая design system — тогда лендинг в ваших цветах и шрифтах
Без design system лендинг тоже генерируется — но стиль будет «нейтральным шаблонным».
Пошаговая инструкция
Шаг 1. Design → Projects
Откройте ng-ai.ru/app/design. Убедитесь, что активна секция Projects.
Шаг 2. Выберите тип «Прототип» → «Лендинг»
- Карточка Прототип → подтип Лендинг (или Сайт)
- Иконка и описание подскажут выбранный
project_kind
Шаг 3. Выберите design system
В Design system picker — ваша опубликованная система или каталог Open Design.
Design system = tokens.css + DESIGN.md попадают в промпт агента автоматически.Шаг 4. Напишите промпт
Структура хорошего промпта:
Лендинг для [продукт]. Аудитория: [кто].
Секции: hero с заголовком и CTA, 3 benefits, social proof, pricing (2 тарифа), FAQ, footer.
Тон: [деловой / дружелюбный]. Язык: русский.
CTA: «Начать бесплатно» → #signup
Reference URLs — конкуренты, референсы Dribbble, ваш текущий сайт.
Attachments — PDF ТЗ, скриншоты, brandbook.
Шаг 5. Выберите модель
Design model picker — по умолчанию сбалансированная модель. Для сложных лендингов с длинным контекстом можно взять флагман (GPT 5.x / Claude Opus).
Шаг 6. Создайте проект
Нажмите отправку — создаётся проект, редирект на /app/design/{projectId}.
Первый промпт автоматически стартует генерацию (сохраняется в sessionStorage).
Шаг 7. Ответьте на discovery-вопросы (если есть)
Агент может показать question form в чате:
- Целевая аудитория
- Главный оффер
- Обязательные секции
Ответы уточняют HTML — это нормальный этап, не баг.
Шаг 8. Превью и итерации
Справа — canvas preview живого HTML. В чате:
- «Сделай hero на всю высоту экрана»
- «Добавь блок с логотипами клиентов»
- «Убери pricing, добавь форму заявки»
Каждая итерация — новый прогон generate с историей проекта.
Шаг 9. Экспорт
Меню Export:
- PDF — для согласования с заказчиком
- HTML — один файл для хостинга или доработки
- ZIP — архив с ассетами
Что внутри HTML-лендинга
Шаблон web-prototype (Open Design) задаёт:
- Семантическую разметку (
header,main,section) - Адаптив через CSS
- Подключение tokens.css из вашей design system
- Один
<artifact type="text/html">— самодостаточный документ
Это прототип, не production Next.js — но его можно отдать разработчикам или залить на статический хостинг.
SEO-рекомендации при генерации
Попросите в промпте явно:
- Один H1 на странице
- Логичную иерархию H2/H3
- Meta title и description (в
<head>) - Alt-тексты для ключевых изображений
- Текст CTA с ключевым действием, не «Подробнее»
Пример добавки к промпту:
SEO: title до 60 символов, description 140–160 символов,
ключевое слово «email-маркетинг для SMB» в H1 и первом абзаце.
Связь с другими форматами
Один бренд — три артефакта:
- Design system
- Лендинг (эта статья)
- Email и презентация в том же стиле
