В новом курсе от freeCodeCamp.org ведущий Эрик У. (Eric W.), в прошлом старший разработчик в Amazon и Microsoft, представляет методику создания высококлассных веб-приложений с использованием современного ИИ-стека. Основная идея автора заключается в отказе от генерации «мусорного» ИИ-контента (AI slop) в пользу создания отточенных, готовых к эксплуатации интерфейсов, которые не уступают по качеству продуктам от Apple или ведущих финтех-гигантов.
🧠 Глубокий контекст: как заставить ИИ понять вашу идею 2:25
Первым и самым критическим шагом Эрик У. называет создание детального контекста проекта. По его мнению, если не предоставить ИИ достаточно вводных данных, нейросеть начнет «гадать», что приведет к низкой точности и созданию посредственного интерфейса .
Для решения этой задачи автор использует специальный навык «Grow Me» (разработанный для Claude Code), который превращает процесс постановки задачи в «интервью». Вместо того чтобы писать длинный промпт, разработчик запускает сессию, в которой ИИ методично задает уточняющие вопросы :
- Кто является целевой аудиторией приложения?
- Какие реальные данные будут отображаться (mock data)?
- Какой технологический стек предпочтителен?
- Каковы основные функции первой версии (MVP)?
Результатом такой сессии становятся два ключевых файла: decisions.md (лог всех принятых решений) и spec.md (сводная спецификация проекта) . Эрик У. подчеркивает, что наличие таких файлов позволяет не терять нить разработки даже при масштабировании проекта до сотен вопросов к модели.
🏛 Стратегия клонирования: зачем изобретать велосипед? 5:32
Эрик У. критикует стандартные советы по использованию варфреймов или случайных шаблонов из Pinterest. Вместо этого он предлагает клонировать архитектуру уже успешных и работающих приложений .
Автор приводит в пример свой проект — трекер финансовых инфлюенсеров «Fin Influencers». Для него идеальным прототипом стал сервис CoinMarketCap (CMC). Логика Эрика У. проста:
- Проверенный UX: У CMC миллионы активных пользователей ежедневно .
- Готовые решения: Архитектура дашбордов, таблиц и графиков в CMC уже оптимизирована для конверсии и удобства.
- Экономия времени: Не нужно проводить A/B тестирование базовых элементов, которые уже доказали свою эффективность в индустрии .
Для реализации этого этапа используется навык deep-research в Claude Code. Модель анализирует целевой сайт, определяет используемые библиотеки UI-компонентов (многие из которых являются открытыми) и воссоздает структуру проекта в локальной папке . Это создает «базовую линию», которую затем можно кастомизировать под конкретные нужды.
🛠 Слияние контекста и создание Web 1.0 14:24
После получения «клона» (структуры CMC) и наличия спецификации собственного проекта, наступает этап слияния. Эрик У. использует подход Spec-Driven Development (разработка на основе спецификаций) .
Автор копирует кодовую базу клона и заставляет ИИ перестроить каждый компонент в соответствии с файлом spec.md. При этом сохраняются качественные библиотеки компонентов, но полностью меняется логика: вместо криптовалют появляются инфлюенсеры, вместо рыночной капитализации — статистика их «винрейта» и торговых рекомендаций .
Эрик У. отмечает, что на этом этапе приложение уже функционально, но всё ещё визуально напоминает прототип. Для превращения «копии» в уникальный продукт он вводит понятие «безупречного стиля».
✨ Использование навыка Impeccable и магия Git Worktree 18:04
Для радикального изменения внешнего вида приложения без повреждения его логики Эрик У. применяет навык «Impeccable». Этот инструмент позволяет проводить аудит UI и итеративно улучшать дизайн по трём направлениям: мелкие правки (цвета, токены), средние (типографика, отступы) и крупные (полная смена визуального стиля) .
Ключевой технический прием, который демонстрирует автор — использование Git Worktrees :
- ИИ создает несколько параллельных рабочих деревьев (папок) для разных вариантов дизайна.
- Разные «агенты» одновременно работают над версиями Small, Medium, Large и Surprise Me.
- Каждая версия запускается на отдельном порту (например, 5173, 5175 и т.д.) .
- Разработчик может мгновенно переключаться между вкладками браузера, сравнивая варианты, и выбрать лучший для слияния с основной веткой.
В итоге приложение Эрика У. меняет цветовую схему на черно-желтую (в стиле Binance или газетной верстки), получает новую типографику и уникальные тени, полностью избавляясь от сходства с исходным CoinMarketCap .
🎬 Анимации в стиле Apple через Hicksfield AI 36:48
Чтобы выделить приложение на фоне конкурентов, Эрик У. внедряет динамические анимации, зависящие от скролла. В качестве эталона он называет сайт apple.com . Для этого используется платформа Hicksfield AI.
Процесс создания высокоуровневой анимации состоит из нескольких шагов:
- Анализ кадров (Frame Analysis): Эрик У. берет качественный видео-трейлер и просит ИИ разобрать его по кадрам, чтобы понять тайминги и движения .
- Генерация видео: На основе контекста проекта (золотые монеты, графики, действия инфлюенсеров) Hicksfield AI генерирует уникальное видео с использованием модели SeeDance 2.5 .
- Конвертация в код: Специальный навык «Animated Website» превращает сгенерированный MP4-файл в интерактивную страницу, где прогресс видео привязан к прокрутке страницы пользователем .
Автор подчеркивает, что использование ИИ для генерации видео (стоимостью около 45 кредитов за 5 секунд) гораздо эффективнее и дешевле, чем наем профессиональных моушн-дизайнеров для создания аналогичных эффектов с нуля .
🚀 Деплой на Cloudflare и финальные штрихи 1:00:05
Завершающим этапом курса является развертывание фронтенд-части приложения. Эрик У. отдает предпочтение Cloudflare Pages вместо Vercel, так как это позволяет использовать CLI-инструменты (Wrangler) для быстрой публикации без необходимости делать репозиторий публичным .
Весь процесс деплоя также автоматизирован через ИИ-агентов. Эрик У. просто передает управление CLI своему помощнику (Claude или Codeex), который выполняет сборку (npm run build) и авторизацию . В результате приложение становится доступным по всему миру по уникальному URL, включая все сложные анимации и стили .
В заключение Эрик У. напоминает, что данный курс сфокусирован на UI/UX, а создание полноценного бэкенда и пайплайнов данных будет темой следующих уроков в его сообществе .
