Как с ИИ сделать сайт с анимациями за 20 минут

Описание: Как собрать современный лендинг с динамическими анимациями буквально за 20 минут? В этом видео я тестирую AI-агента Kiro от Amazon в режиме 'Vibe-кодинга'. Мы с нуля создадим сайт на Next.js, подключим shadcn/ui, добавим сложные анимации из Unicorn Studio и GSAP, и посмотрим, как AI справляется с реальными задачами, где он помогает, а где начинает проявлять излишнюю инициативу.

🕒 Тайм-коды:
00:00 — Собираем анимированный лендинг с нуля
02:15 — Установка Next.js и shadcn/ui
04:05 — Как подключить UI-библиотеки к AI-агенту (MCP Server)
07:50 — Первый промпт и генерация компонентов
09:10 — Проблема: AI-агент «зависает» после быстрых команд
11:20 — Особенности режима 'Vibe': AI создает лишние страницы и запускает второй сервер
14:00 — Кастомизация темы и корректирующие промпты
16:10 — Интеграция сложной анимации из Unicorn Studio
17:30 — Отладка: скармливаем AI ошибку из консоли, и он её чинит
18:45 — Добавляем анимацию появления текста с помощью GSAP
20:15 — Финальный результат и выводы: для каких задач подходит Vibe-кодинг

✅ Ключевые темы и инструменты:
AI-агент Amazon Kiro
Vibe-кодинг vs Spec-driven разработка
Next.js
shadcn/ui
Анимации: Unicorn Studio, GSAP
Промпт-инжиниринг для frontend-разработки

Надеюсь, было полезно! Подписывайтесь на канал, ставьте лайки — это очень помогает продвижению видео. Увидимся в следующих выпусках!

🔥 ПОЛЕЗНЫЕ ССЫЛКИ:
📱 Бесплатный Telegram-канал — секреты AI-разработки, вайб-кодинг и проверенные инструменты: https://t.me/+_jk9Xv5pXMk1ZGEy?utm_so...

💡 Присоединяйтесь к закрытому AI-клубу, чтобы получать:
• Готовые рабочие воркфлоу и автоматизации
• Разборы AI-инструментов с практикой
• Комьюнити для поиска партнеров и заказов
• Еженедельные эфиры с участниками
Ссылка на вход в клуб — https://tg.pulse.is/VibeAISchoolBot?s...

📸 Instagram: https://www.instagram.com/timur.yesse...