Рабочий рецепт, как создать лендинг за 15 минут

Пару месяцев назад мы делали обзор на инструменты для создания лендингов. Добавьте к ним еще Lovable и Base44 и у вас будет полный обзор того, что сейчас есть на рынке.

С хорошими промптами на Lovable можно сделать неплохой лендинг за 3–4 часа.

А мы принесли вам не самый популярный, но оч крутой способ быстро собрать лендос для проверки гипотез за 15 минут.

Вам понадобится:
- Сайт-референс по дизайну
- Figma
- Cursor
- Claude Pro (опционально)

1. Выберите жертву
Выбираете любой сайт, который вам нравится по дизайну и импортируете в Figma его через плагин html.to.design за 2 клика. Через пару минут получает весь сайт нашей жертвы в Figma с возможностью редактирования.

2. Скопируйте сайт как код
Copy as → Code → CSS (all layers)

3. Создайте проект в Cursor
Предварительно его нужно установить себе на комп, вот ссылка.
Настроить его интуитивно легко, если что то будет не понятно - ChatGPT по скринам интерфейса подробно расскажет, что вам тыкать.

Дальше создаете внутри Cursor новую папку, а внутри нее файл code.md. Внутрь файла вставляете наш код, который скопировали из Figma.

4. Подключаете Claude Code
В Extensions внути Cursor находите Claude Code, устанавливаете и авторизуетесь. Тут потребуется подписка Claude Pro.

В принципе можно все сделать и на обычном агенте Cursor или на Codex.

5. Готовите промпт
Самая трудозатратная и самая важная часть всего процесса.

Ловите драфт промпта. Его вы наполняете данными о продукте, добавляете нужные вам блоки лендинга по примеру и в итоге получаете готовое ТЗ.

Как минимум после этого у вас останется качественный промпт, который можно использовать в других генераторах и тулах для лендингов.

6. Запускаете генерацию
Открываем в курсоре Claude Code, вставляем готовый промпт и ждем пока случится магия! Примерно 5-7 минут

7. Дорабатываете итерациями
Чаще всего, конечно, результат нужно докручивать, но для результата за 15 минут у нас получается круто.
В Cursor удобно делать правки прямо в диалоговом окне:
- пишете точные правки по блокам
- или еще проще, прикладываете скриншот и отмечаете, что не так
- просите обновить код

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

8. Публикация
Дальше можно:
а) загрузить файлы из Cursor в репозиторий на GitHub и опубликовать

б) если вы привыкли работать с Figma, то можно выгрузить через тот же плагин html.to.design ваш лендинг в редактируемом формате в ваш спейс.
- Соберите все файлы, которые создал Cursor к вашему проекту. Это скорее всего будут: index.html (HTML-структура со всеми блоками), styles.css (стили с градиентами и анимациями) и возможно еще какие то файлы.
- Создайте zip архив из этих файлов
- В html.to.design выберите вкладку file и импортируйте этот zip архив

Вуаля - ваш лендос теперь в Figma и вы можете отдать его своим дизайнерам/маркетологам на растерзание и доработку

Дальше можно одной кнопкой импортировать макет в Tilda. В Zero Block в меню выбрать Import from Figma (предварительно нужно взять Figma API access token)

Шерьте пост с друзьями и кидайте свои результаты в комменты, ребзя 🔥