Промпт для Tailwind-лендинга в Cursor: чтобы ИИ не собрал кашу из классов

Промпт для Tailwind-лендинга в Cursor: чтобы ИИ не собрал кашу из классов

Cursor нормально тянет лендинг, если сразу задать структуру, ограничения и стиль. Иначе он начинает плодить лишние div, смешивать отступы и тащить случайные компоненты из разных паттернов.

Рабочий каркас промпта:
Собери landing page на Tailwind CSS.
Задача: [продукт/оффер].
Структура: hero, benefits, social proof, CTA, FAQ.
Условия:
— один экран = один главный оффер
— без лишних анимаций и сложных JS-компонентов
— используй только Tailwind utility classes
— все секции должны быть responsive
— кнопка CTA одна доминирующая
— текст оставь в виде реальных маркетинговых заглушек, не lorem ipsum

Дальше добавляй ограничения по визуалу: «clean, premium, dark background, 2 акцентных цвета» или «white, airy, conversion-first». Это сильно снижает шанс получить дизайн-мешанину. Если нужен прелендер, отдельно проси: «не использовать логотипы брендов, не вставлять отзывы без источника, сделать нейтральную подачу».

Еще один полезный блок — правила по верстке: «hero above the fold, cards одинаковой высоты, grid 3 columns desktop / 1 column mobile, без горизонтального скролла». Cursor лучше работает, когда ты описываешь не “красиво”, а “как именно должно собраться”.

Если лендинг нужен под тест гипотез, проси сразу 2 варианта секции hero в одном ответе: один агрессивный, второй спокойный. Так проще быстро сравнить конверсионный тон и не переделывать весь макет вручную.