Лендинг — второй по популярности проект для вайбкодинга. Визуальный результат, быстрый фидбек, реальная польза для бизнеса. С AI лендинг можно собрать за 2-4 часа.
Выбор стека
Next.js + Tailwind CSS — оптимальный выбор. Next.js даёт SSR/SSG для SEO, Tailwind — быстрая стилизация. Альтернатива — Astro или plain HTML.
Промпт: "Инициализируй Next.js 14 с App Router, Tailwind, TypeScript. Тёмная тема. Структура: app/page.tsx, components/ для секций."
Структура лендинга
5-7 секций: Hero, Features, How it works, Testimonials, Pricing, FAQ, Footer.
Промпт: "Создай лендинг для [продукт]. Hero + 4 Features + How it works (3 шага) + FAQ (5 вопросов) + Footer. Тёмная тема, минимализм."
Работа с дизайном
AI хорошо генерирует структуру, но дизайн часто требует доработки. Итерации: "Увеличь отступы", "Добавь hover-эффект", "Градиент на Hero".
Лайфхак: покажите AI референс. "Сделай Hero как на stripe.com" или сошлитесь на существующий компонент проекта.
Адаптивность
Tailwind делает адаптивность простой: sm:, md:, lg: префиксы. Проверяйте через DevTools и описывайте проблемы AI.
SEO и метаданные
Промпт: "Добавь SEO: metadata, JSON-LD Organization, sitemap.ts, robots.ts. Canonical URL."
Деплой
Vercel — самый быстрый путь: git push → автодеплой. Альтернатива — VPS с Docker. Для лендинга Vercel идеален.
Распространённые ошибки
Слишком много секций. 5-7 оптимально. Нет мобильной версии — 60%+ трафика мобильный. Нет CTA — каждая секция должна вести к действию.