Как собрать лендинг на React из готовых блоков в едином стиле

1. Начните с маршрута читателя

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

Каждая секция должна отвечать на свой вопрос. Если два соседних блока повторяют обещание разными словами, один можно убрать. Отзывы нужны, когда есть настоящие отзывы; тарифы — когда есть реальные условия. Не добавляйте секцию только потому, что для неё нашёлся эффектный компонент.

2. Посмотрите состав готовой страницы

Разберём сценарий «AI-инструмент / SaaS». Это демонстрационная страница сервиса для встреч: она показывает результат работы продукта, затем объясняет процесс, даёт интерактивный пример и отвечает на вопросы о покупке. Состав ниже берётся из текущего сценария VibeUI.

1. 1. Шапка

   navbar-033 — Плавающая стеклянная капсула: эквалайзер в лого, подсветка меню, живой индикатор созвона.

2. 2. Первый экран

   hero-033 — Созвон на троих с субтитрами заканчивается — задача, сводка и решения сами разлетаются по сервисам.

3. 3. Как работает

   ai-001 — Три узла — звук, текст, задачи — с микроанимациями и бегущими точками между ними.

4. 4. Песочница

   ai-002 — Поле с расшифровкой, кнопка «Сделать сводку», ответ печатается секциями, «Скопировать».

5. 5. Интеграции

   bento-002 — Маршрутизатор: входы, ядро продукта и выходы, по линиям бегут пакеты.

6. 6. Доверяют

   logocloud-007 — Бегущая строка названий клиентов.

7. 7. Тарифы

   pricing-025 — Ползунок «человек в команде», переключатель года, три карточки с пересчётом.

8. 8. Данные

   faq-023 — Аккордеон о хранении, обучении модели и своём контуре.

9. 9. Начать

   cta-026 — Стеклянная карточка на плавающих аврорах, поле почты, «без карты».

10. 10. Подвал

    footer-032 — Карточка «сводка этой страницы», статус систем с пульсом, колонки ссылок.

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

3. Зафиксируйте общую тему

Откройте демо целиком и посмотрите переходы между секциями. В этом сценарии используются тёмная основа, голубой акцент, светлый текст и стеклянные поверхности. Эти правила связывают разные типы блоков.

Основа

#0a0f1e

Акцент

#5ee7ff

Текст

#eef2ff

Шрифты

Wix Madefor Display · Golos Text · IBM Plex Mono

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

Не у всех блоков одинаковый API. Один принимает tone и background, другой следует color-scheme окружения. Передавайте только поддерживаемые props из инструкции. Не перекрашивайте внутренние кнопки глобальным правилом для всех ссылок: это может разрушить контраст внутри секций.

4. Соберите страницу по одному источнику

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

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

Собери страницу по этому сценарию VibeUI:
<свежая ссылка из «Копировать сценарий для ИИ»>

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

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

5. Замените демо-содержимое и подключите действия

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

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

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

6. Проверьте страницу целиком

• Прочитайте только заголовки: складываются ли они в понятный рассказ о продукте?
• Проверьте фон и вертикальные расстояния на стыках секций, а не только внутри каждого блока.
• Пройдите основное действие от первой кнопки до результата и проверьте поведение без успешного ответа сервера.
• Проверьте широкое окно, планшет и ширину около 390 px. Разверните FAQ, измените число мест в тарифах и прокрутите длинные секции.
• Проверьте Tab, видимый фокус, уменьшение движения и загрузку настоящих изображений и шрифтов.

Разбор основан на составе и исходнике SaaS-сценария VibeUI. Скриншот показывает отдельный блок каталога; здесь нет заявления о новом измеренном результате установки или росте конверсии. Критерий готовности — ваша страница с вашим содержимым и работающими действиями.