🎯 О чём этот конспект: Разбор новой эры «вайб-дизайна», где акцент смещается с написания кода на управление эстетикой и «вкусом» с помощью AI. В видео демонстрируется, как использовать модель Gemini 3 и специализированные инструменты для создания высококонверсионных лендингов с дорогой анимацией за 15–30 минут.
👤 Кому будет полезно: Вайбкодерам, владельцам AI-агентств и разработчикам, которые хотят создавать визуально безупречные IT-продукты, не имея глубоких навыков в UI/UX дизайне.
✨ Что получите: Методологию создания сайтов стоимостью $5,000–10,000 с использованием скриншотов-референсов, правильных промптов и специализированных AI-платформ для анимации.
1. Концепция Vibe Design vs Vibe Coding
Контекст: Большинство приложений, созданных через AI-агентов (Cursor, Lovable, Replit), выглядят «дешево» и стандартно, потому что разработчики фокусируются на логике, забывая о визуальной составляющей. Vibe Design — это процесс итеративного улучшения визуала в реальном времени, когда вы правите цвета, шрифты и анимации «по ощущениям», пока результат не станет выглядеть премиально. Это критически важный навык, так как клиенты покупают «глазами», и наличие качественного дизайна позволяет продавать услуги в разы дороже.
Выгода: Возможность поднять чек за лендинг с $500 до $5,000+, создавая продукт уровня топовых дизайн-студий за считанные минуты.
Как применить:
Шаг 1: Сбор мудборда — Используйте сервисы Mobbin (для реальных приложений) или Dribbble (для концептуального вдохновения).
Шаг 2: Анализ бренда клиента — Сделайте скриншот текущего сайта клиента, выделите основные цвета и шрифты.
Шаг 3: Перенос в AI — Используйте визуальный контекст (скриншоты) вместе с текстовым описанием для генерации первой версии.
Результат: Готовый визуальный каркас, который соответствует ожиданиям клиента по стилистике и цветовой гамме.
2. Формула идеального промпта для Gemini 3
Контекст: Модели вроде Gemini 3 выдают посредственный результат, если давать им общие задачи. Чтобы получить «дорогой» дизайн, нужно использовать специфический лексикон (Hero-секция, Bento-layout, Glassmorphism) и предоставлять визуальную опору. Без четких инструкций AI создаст стандартный черно-белый сайт без жизни.
Выгода: Экономия токенов и времени (каждый промпт стоит около $0.20) за счет получения качественного результата с 1-2 попыток.
Как применить:
Шаг 1: Структурируйте промпт — Обязательно укажите: Название, Тип продукта, Целевую аудиторию и Стилистику.
Шаг 2: Используйте референс — Прикрепите скриншот сайта, который вам нравится (например, Linear.app).
Шаг 3: Вставьте промпт по шаблону:
Create a landing page for [Название компании], an [Тип продукта: например, AI SDR system] for [Целевая аудитория: например, AI agencies]. Style: Inspired by [Название бренда-референса: например, Linear.app]. Theme: [Dark/Light mode], [Основной цвет: например, muted blue tones]. Sections: Hero with 3D app demo, social proof logos, feature grid, and animated FAQ. Details: Use high-end typography, progressive blurs, and subtle animations. Reference: [Прикрепить скриншот]
Результат: Профессиональный макет с правильной структурой секций и актуальной цветовой схемой.
3. Работа с Hero-секцией и анимациями
Контекст: Hero-секция (первый экран) определяет 50% успеха сайта. Именно здесь принимается решение о конверсии. Стандартные AI-инструменты редко добавляют сложные анимации (например, эффект лазерного луча или плавное появление элементов). Использование «секретных ингредиентов» в виде готовых сниппетов кода для анимации выделяет ваш продукт на фоне конкурентов.
Выгода: Эффект «вау» у клиента, который интуитивно чувствует качество через плавность интерфейса.
Как применить:
Шаг 1: Фокус на Hero — Убедитесь, что заголовок (H1), описание и CTA-кнопка (Call to Action) четко видны и анимированы.
Шаг 2: Добавление сложных эффектов — Используйте специализированные инструменты (например, a.build) для вставки эффектов типа "Beam animation" или "Glow" в один клик.
Шаг 3: Промпт для анимации (в Cursor или специализированном AI):
Add a subtle fade-in animation for all sections on scroll. For the primary CTA button, add a continuous glowing beam border effect. Apply a progressive blur (glassmorphism) to the navigation bar that stays fixed at the top.
Результат: Интерактивный, «живой» сайт, который выглядит как дорогое заказное решение.
4. Интеграция в рабочий процесс: от a.build до Cursor
Контекст: Для создания полноценного масштабируемого приложения одного визуального генератора недостаточно. Оптимальный стек — это связка инструментов: визуальный редактор для дизайна и Cursor для финальной сборки и логики. Платформа a.build позволяет экспортировать дизайн в виде чистого HTML/CSS кода в одном файле, что упрощает работу AI-агентам.
Выгода: Вы получаете чистый код, который легко поддерживать и расширять, в отличие от перегруженных файлов, которые иногда генерирует Cursor с нуля.
Как применить:
Шаг 1: Генерация в a.build — Создайте дизайн, настройте цвета и анимации через визуальный интерфейс и промпты.
Шаг 2: Экспорт — Скачайте HTML-файл или скопируйте код.
Шаг 3: Импорт в Cursor — Добавьте этот файл как контекст (через @file или просто вставьте в проект) и попросите Cursor:
Using this HTML/CSS as the frontend template, build the backend logic in Next.js. Ensure all animations from the template are preserved. Connect the lead generation form to my database.
Результат: Полноценное веб-приложение с премиальным дизайном и работающей логикой.
FAQ
В: Можно ли использовать бесплатные инструменты для такого качества?
О: Да, вы можете использовать Google AI Studio с моделью Gemini 1.5 Pro/Flash бесплатно, но вам придется вручную описывать все стили и анимации. Специализированные инструменты типа a.build или Lovable платные, но они экономят часы работы за счет встроенных библиотек компонентов и анимаций.
В: Как найти стиль, который понравится клиенту?
О: Лучший способ — «mood boarding» прямо на звонке с клиентом. Откройте Dribbble или Mobbin, отфильтруйте по основному цвету бренда клиента и покажите 3-5 вариантов. Когда клиент скажет «о, это круто», сделайте скриншот и используйте его как референс для AI.
В: Нужно ли мне знать CSS, чтобы делать такие сайты?
О: Глубоких знаний не требуется, но важно знать «лексикон»: что такое padding, gap, bento layout, glassmorphism, sticky header. Если вы знаете эти термины, вы сможете точнее направлять AI для исправления мелких недочетов.
В: Почему Gemini 3 лучше для дизайна, чем GPT-4o?
О: На текущий момент Gemini 3 (в частности в связке с инструментами визуального кодинга) показывает лучшие результаты в понимании пространственного расположения элементов на скриншотах и генерации чистого современного CSS-кода с анимациями.
В: Как продать такой лендинг за $5,000, если я сделал его за час?
О: Вы продаете не свое время, а результат и экспертизу. Клиент получает сайт уровня топового стартапа из Кремниевой долины, который будет приносить ему лиды. Используйте демонстрацию процесса «вайб-дизайна» в реальном времени, чтобы показать клиенту, как быстро вы можете вносить правки под его вкус.
Конспект создан на основе видео «Vibe Coding is changing... (Gemini 3)» канала Liam Ottley. Все права на оригинальный материал принадлежат авторам.Источник: https://www.youtube.com/watch?v=dEk3LUPAg7s
Cursor