🎯 О чём этот конспект: Пошаговое руководство по созданию высококонверсионных и анимированных лендингов с использованием модели Gemini 1.5 Pro (в интерфейсе Aura) и специализированных AI-инструментов. Разбор процесса от поиска референсов до финальной упаковки кейса для соцсетей.

👤 Кому будет полезно: Вайбкодерам, дизайнерам и предпринимателям, которые хотят создавать сайты уровня $100-200 за шаблон, затрачивая на это от 30 минут до нескольких часов вместо недель работы в Figma.

✨ Что получите: Вы научитесь использовать «Blueprint» (чертеж) автора для генерации нешаблонного дизайна, внедрения сложных анимаций (Beam, Marquee, Sticky) и подготовки профессиональных мокапов для портфолио.

1. Стратегия «Hero First»: Почему первый экран — это 50% успеха

Контекст: Первый экран (Hero section) — это лицо продукта и главный элемент для привлечения внимания в соцсетях. Вместо того чтобы генерировать весь сайт сразу, автор рекомендует сфокусироваться на Hero. Это позволяет детально проработать композицию, шрифты и уникальные анимации, не перегружая контекстное окно AI. Использование скриншотов-референсов в качестве «вайрфреймов» помогает Gemini мгновенно уловить структуру, сетку (Grid/Flex) и типографику, что гораздо эффективнее текстовых промптов на 1000 слов.

Выгода: Экономия времени на итерациях и получение визуально дорогого результата, который выглядит как ручная работа топового агентства.

Как применить:

• Шаг 1: Поиск референса — Используйте сайты Superhero, Dribbble или Mobbin. Сделайте скриншот понравившегося Hero-экрана.
• Шаг 2: Загрузка в AI — Загрузите скриншот в Aura (или аналогичный инструмент с Gemini 1.5 Pro).
• Шаг 3: Промптинг структуры — Используйте промпт для адаптации референса под ваш бренд:

Create a hero section based on this image. Change text names and numbers to [Ваше название]. Use Iconify Solar icons. Use SVG logo monotone. Add vertical container size lines (grids). Use Newsreader font for headings and Inter for body.

Результат: Готовый, уникализированный первый экран с правильной сеткой и шрифтовыми парами.

2. Уход от «AI Slop»: Как сделать дизайн нешаблонным

Контекст: «AI Slop» (ИИ-штампы) — это типичные фиолетовые градиенты и иконки Lucide, которые выдает нейросеть по умолчанию. Чтобы сайт выглядел профессионально, нужно использовать специфические библиотеки и стили. Автор выделяет библиотеку Iconify Solar (из-за разнообразия стилей: Outline, Broken, Duotone) и шрифты с засечками (Serif), такие как Newsreader или Playfair Display, в сочетании с гротесками.

Выгода: Ваш продукт выделяется на рынке шаблонов и выглядит как индивидуальная разработка, что повышает его стоимость.

Как применить:

• Шаг 1: Настройка иконок — В промпте всегда указывайте конкретный сет:

Use iconify simple-icons for brand logos and iconify solar for UI elements. Make icons size 24px.

• Шаг 2: Работа с деталями — Добавляйте технические детали, которые ИИ обычно пропускает:

Add 01, 02, 03 step indicators in small mono font. Add thin 1px borders with 0.1 opacity. Add a "beam animation" that continuously goes around the primary button pill shape.

Результат: Детализированный интерфейс с микро-взаимодействиями, которые создают ощущение «премиальности».

3. Продвинутые анимации и Unicorn Studio

Контекст: Анимации — это то, что продает шаблон. Автор использует связку Aura + Unicorn Studio для создания сложных эффектов. Ключевые типы анимаций: Beam animation (бегающий луч по контуру), Marquee (бегущая строка логотипов) и Noodle beams (анимированные линии-связки).

Выгода: Интерактивность повышает вовлеченность пользователя и выделяет сайт среди статичных конкурентов.

Как применить:

• Шаг 1: Анимация луча — Для кнопок или карточек используйте промпт:

Add a 1px beam animation that continuously goes around the button shape. The button is a pill shape.

• Шаг 2: Соединительные линии (Noodles) — Для визуализации связей:

Add animated noodles (SVG paths) to connect the central circle with the surrounding icons. Use a beam effect on the noodles.

• Шаг 3: Фоновые эффекты — Интегрируйте шейдеры из Unicorn Studio в качестве фонового слоя для Hero-секции.

Результат: Живой, динамичный лендинг, который выглядит технологично.

4. Сборка лендинга из секций (Bento и Feature Blocks)

Контекст: После утверждения Hero-секции, остальные блоки добавляются итерационно. Автор рекомендует использовать Bento Grid (популяризированный Apple) для секций с фичами. Важно чередовать фоны (например, темный Hero -> белый Feature block -> темный CTA), чтобы сайт не выглядел монотонным.

Выгода: Структурированная подача информации, удобная для чтения и адаптации под мобильные устройства.

Как применить:

• Шаг 1: Референсы секций — Найдите блоки на Bento Grids или CTA Gallery.
• Шаг 2: Режим редактирования (Edit Mode) — Чтобы ИИ не переписывал весь код, используйте локальное редактирование:

Adapt a new section below the hero based on this screenshot. Keep the color palette (orange/dark) and fonts. Use the same button style.

• Шаг 3: Исправление изображений — ИИ часто ломает картинки. Замените их через библиотеку ассетов Aura или используйте прямые ссылки на Unsplash.

Результат: Полноценный лендинг с логичной структурой и единым визуальным стилем.

5. Презентация и мокапы: Как продать результат

Контекст: Чтобы продать шаблон или привлечь клиентов в соцсетях, недостаточно просто ссылки. Нужна красивая визуализация. Автор использует встроенные инструменты Aura для создания композиций из нескольких экранов (Desktop + Mobile) на одном холсте с размытым фоном.

Выгода: Готовый контент для Twitter/Instagram за 2 минуты, который генерирует охваты.

Как применить:

• Шаг 1: Canvas Mode — Перейдите в режим холста и выберите пресет (например, Triple View).
• Шаг 2: Настройка фона — Добавьте абстрактное изображение на фон и примените Blur (размытие).
• Шаг 3: Скриншот — Сделайте финальный кадр (Cmd+Shift+4 на Mac) для публикации.
• Дополнительно: Используйте Nano Banana для создания 3D-мокапов (например, ваш сайт на экране MacBook в 4K).

Результат: Профессиональное портфолио, готовое к публикации и продаже.

FAQ

В: Можно ли использовать этот метод в Cursor или других редакторах?

О: Да, вы можете использовать те же промпты и референсы в Cursor или Lovable. Главное — использовать модель Gemini 1.5 Pro (через API), так как она лучше всего справляется с визуальным контекстом скриншотов и генерацией чистого UI-кода.

В: Как избежать «глюков» ИИ при добавлении новых секций?

О: Используйте «негативные промпты». Пишите: Don't change anything else, keep the hero and navbar exactly as they are. Также лучше добавлять секции по одной, а не просить весь сайт целиком.

В: Где брать иконки, чтобы они не выглядели дешево?

О: Автор рекомендует библиотеку iconify и конкретно сет solar. В промпте указывайте: Use Iconify Solar icons in broken style. Это даст современный, «дизайнерский» вид.

В: Обязательно ли знать код (HTML/CSS)?

О: Нет, автор подчеркивает, что сейчас важнее «Taste» (вкус) и умение описывать результат. Однако базовое понимание структуры (что такое div, section, footer) поможет вам точнее направлять ИИ в режиме редактирования.

В: Сколько можно заработать на таких шаблонах?

О: По данным видео, качественные шаблоны на Framer или Webflow продаются по $50–100 за штуку. Топовые авторы зарабатывают от $5,000 до $20,000 на одном удачном шаблоне за все время его продаж.

Конспект создан на основе видео «How to design & build landing pages with Gemini 3» канала Aura. Все права на оригинальный материал принадлежат авторам. Источник: https://www.youtube.com/watch?v=HO2a_BTx12k