Промпт для Tailwind-лендинга в Cursor, который сразу даёт чистую структуру
Cursor хорошо собирает лендинг, если не просить его “сделать красиво”, а задать каркас: hero, оффер, блоки доверия, CTA и footer. Для Tailwind это особенно важно: модель быстрее попадает в сетку, когда вы явно фиксируете spacing, max-width и набор компонентов.
Промпт:
Собери одностраничный лендинг на Tailwind CSS.
Задача: [ниша].
Стиль: чистый B2B / direct response, без лишней анимации.
Структура: hero, benefits, social proof, FAQ, CTA.
Требования:
— desktop-first, но адаптивно под mobile
— max-width 1200px, читабельная типографика
— используй Tailwind utility classes, без кастомного CSS
— не добавляй внешние библиотеки
— все блоки должны быть в одном файле
— оставь понятные плейсхолдеры для текста, фото и кнопок
— CTA должен повторяться 2 раза
— проверь контраст и отступы между секциями
Если нужен быстрый результат, добавьте ещё одно ограничение: “не выдумывай лишние секции”. Тогда Cursor реже уводит лендинг в перегруженную витрину. Для прелендера это критично: лучше 5 рабочих блоков, чем 9 декоративных.
После генерации проверьте 3 вещи: 1) hero помещается без скролла на типовом ноутбуке, 2) кнопка заметна в первом экране, 3) карточки не ломают сетку на mobile. Если эти три пункта проходят, уже можно идти в доработку контента, а не в переписывание верстки.
Финал: самый полезный промпт для Tailwind — тот, где вы описали не дизайн, а ограничения. Cursor любит ясные рамки, а лендинги от этого выглядят аккуратно и собираются быстрее.
AI Vibe Coding — лендинги через ИИ
@vibe_coding_aff
Промпт для Tailwind-лендинга в Cursor, который сразу даёт чистую структуру
Этот пост опубликован в Telegram-канале AI Vibe Coding — лендинги через ИИ. Подписаться можно по ссылке: @vibe_coding_aff.