Конспект: AI Landing Page Benchmark — VibCoderZ - VibeCoderz

Загрузка...

Создание Идеального PRD (Product Requirements Document)

Роль: Фундамент промптинга

Секрет качественной генерации — не короткий промпт, а детальный PRD на 2000+ слов. Оливер использует расширение 'GoFullPage' для скриншота референса (например, Atio.com), загружает его в Gemini и просит: 'Опиши дизайн-систему, отступы, шрифты, bento-сетки и анимации этого сайта в виде PRD для моего приложения'.

ROI: Точность генерации UI повышается на 60%

Сбор референсов

Инструмент: GoFullPage + Gemini

Сделайте скриншот сайта-референса целиком. Попросите ИИ описать его визуальный язык (Visual Identity, Motion Design, Typography).

Битва Моделей в Cursor: Gemini vs GPT vs Claude

Роль: AI Coding Agents

Тестирование трех топовых моделей внутри редактора Cursor с одним и тем же PRD. Результаты оказались разными. Gemini 1.5 Pro (в видео названа 3 Pro по ошибке/хайпу) выдала 'плоский' дизайн. GPT-4o (Codex) сделала структуру лучше, но без анимаций. Claude 3.5 Sonnet (Opus High) добавил больше всего кода, но дизайн вышел странным.

ROI: Победитель в Cursor: GPT-4o (Codex)

Setup в Cursor

Инструмент: Cursor Composer

Загрузите PRD и логотипы (SVG/PNG) в контекст. Используйте режим Composer (Ctrl+I) для генерации всего проекта.

Результат: React/Next.js код

Битва Платформ: AI Studio vs Lovable

Роль: No-Code / Low-Code

Специализированные инструменты показали результат лучше, чем чистый код в Cursor. Google AI Studio (нативная среда Gemini) создала хорошие Lottie-анимации. Но абсолютным победителем стал Lovable. Он сгенерировал сложные hover-эффекты, 'живые' карточки, градиентные обводки и адаптив с первого раза.

ROI: Lovable: Готовый продакшн-дизайн за 2 минуты

Генерация в Lovable

Инструмент: Lovable.dev

Вставьте тот же PRD в Lovable. Платформа под капотом использует Claude 3.5 Sonnet + свои проприетарные UI-библиотеки.

Результат: Deployable App

Детали, которые делают разницу

Роль: UI/UX Polish

Что отличает 'AI Slop' от премиум-дизайна? 1. Bento Grids (плиточная верстка а-ля Apple). 2. Микро-анимации (Lottie, Framer Motion). 3. Скевоморфизм и тени. 4. Логотипы реальных брендов (не генерированные кружочки). Lovable справился с этим лучше всех, добавив интерактивность при наведении.

ROI: Perceived Value: $5k vs $500

Ассеты и Логотипы

Инструмент: Подготовка

Всегда загружайте реальные PNG/SVG логотипов (LinkedIn, YouTube), чтобы ИИ не вставлял плейсхолдеры.

Результат: Реалистичный мокап