Загрузка...
Смарт-конспекты YouTube-видео — ключевые идеи и инсайты без необходимости смотреть часовые ролики
Пошаговое руководство по созданию анимированных сайтов с помощью AI. Промпты для анимаций, выбор шрифтов и иконок, работа с референсами.
🎯 О чём этот конспект: Пошаговое руководство по созданию высококонверсионных и анимированных лендингов с использованием модели Gemini 1.5 Pro (в интерфейсе Aura) и специализированных AI-инструментов. Разбор процесса от поиска референсов до финальной упаковки кейса для соцсетей.
👤 Кому будет полезно: Вайбкодерам, дизайнерам и предпринимателям, которые хотят создавать сайты уровня $100-200 за шаблон, затрачивая на это от 30 минут до нескольких часов вместо недель работы в Figma.
✨ Что получите: Вы научитесь использовать «Blueprint» (чертеж) автора для генерации нешаблонного дизайна, внедрения сложных анимаций (Beam, Marquee, Sticky) и подготовки профессиональных мокапов для портфолио.
Контекст: Первый экран (Hero section) — это лицо продукта и главный элемент для привлечения внимания в соцсетях. Вместо того чтобы генерировать весь сайт сразу, автор рекомендует сфокусироваться на Hero. Это позволяет детально проработать композицию, шрифты и уникальные анимации, не перегружая контекстное окно AI. Использование скриншотов-референсов в качестве «вайрфреймов» помогает Gemini мгновенно уловить структуру, сетку (Grid/Flex) и типографику, что гораздо эффективнее текстовых промптов на 1000 слов.
Выгода: Экономия времени на итерациях и получение визуально дорогого результата, который выглядит как ручная работа топового агентства.
Как применить:
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.Результат: Готовый, уникализированный первый экран с правильной сеткой и шрифтовыми парами.
Контекст: «AI Slop» (ИИ-штампы) — это типичные фиолетовые градиенты и иконки Lucide, которые выдает нейросеть по умолчанию. Чтобы сайт выглядел профессионально, нужно использовать специфические библиотеки и стили. Автор выделяет библиотеку Iconify Solar (из-за разнообразия стилей: Outline, Broken, Duotone) и шрифты с засечками (Serif), такие как Newsreader или Playfair Display, в сочетании с гротесками.
Выгода: Ваш продукт выделяется на рынке шаблонов и выглядит как индивидуальная разработка, что повышает его стоимость.
Как применить:
Use iconify simple-icons for brand logos and iconify solar for UI elements. Make icons size 24px.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.Результат: Детализированный интерфейс с микро-взаимодействиями, которые создают ощущение «премиальности».
Контекст: Анимации — это то, что продает шаблон. Автор использует связку Aura + Unicorn Studio для создания сложных эффектов. Ключевые типы анимаций: Beam animation (бегающий луч по контуру), Marquee (бегущая строка логотипов) и Noodle beams (анимированные линии-связки).
Выгода: Интерактивность повышает вовлеченность пользователя и выделяет сайт среди статичных конкурентов.
Как применить:
Add a 1px beam animation that continuously goes around the button shape. The button is a pill shape.Add animated noodles (SVG paths) to connect the central circle with the surrounding icons. Use a beam effect on the noodles.Результат: Живой, динамичный лендинг, который выглядит технологично.
Контекст: После утверждения Hero-секции, остальные блоки добавляются итерационно. Автор рекомендует использовать Bento Grid (популяризированный Apple) для секций с фичами. Важно чередовать фоны (например, темный Hero -> белый Feature block -> темный CTA), чтобы сайт не выглядел монотонным.
Выгода: Структурированная подача информации, удобная для чтения и адаптации под мобильные устройства.
Как применить:
Adapt a new section below the hero based on this screenshot. Keep the color palette (orange/dark) and fonts. Use the same button style.Результат: Полноценный лендинг с логичной структурой и единым визуальным стилем.
Контекст: Чтобы продать шаблон или привлечь клиентов в соцсетях, недостаточно просто ссылки. Нужна красивая визуализация. Автор использует встроенные инструменты Aura для создания композиций из нескольких экранов (Desktop + Mobile) на одном холсте с размытым фоном.
Выгода: Готовый контент для Twitter/Instagram за 2 минуты, который генерирует охваты.
Как применить:
Результат: Профессиональное портфолио, готовое к публикации и продаже.
В: Можно ли использовать этот метод в 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