Маркетинг-стратег, IT-предприниматель, ментор по вайбкодингу
10+ лет в маркетинге, 300+ клиентских проектов: сайты, реклама, боты. Создатель GoBanana (228K+ пользователей, 11.6 млн ₽ выручки) и VibeCoderz. Делаю AI-продукты сам через Claude Code, Cursor, Windsurf и консультирую тех, кто хочет так же.
🎯 О чём этот конспект: Прямое практическое сравнение возможностей свежей модели GPT Astra (OpenAI Codex) и Fable 5.1 (на базе Claude) в боевой задаче веб-дизайна. Автор с 10-летним опытом в веб-разработке тестирует генерацию сложного лендинга для автосервиса/шиномонтажа с нуля: от подбора наградных референсов и интеграции 3D-анимаций до генерации изображений через MCP и автоматического деплоя.
👤 Кому будет полезно: Вайбкодерам, frontend-разработчикам, UI/UX-дизайнерам и фаундерам, которые используют AI-агентов (Cursor, Windsurf, Claude Code, Codex) для создания коммерческих сайтов и хотят выжать из моделей максимум визуального качества без скатывания в шаблонный «нейрослоп».
✨ Что получите: Пошаговый пайплайн работы с нейросетями: фреймворк декомпозиции наградных референсов с Awwwards, связку Fable с MCP-серверами для автогенерации графики, разбор подводных камней лимитов подписок ($20 против $100) и методику деплоя готового фронтенда за один промпт.
1. Методология «Анти-нейрослоп»: Сборка референсов и ТЗ чужими руками
Контекст: Большинство пользователей получают от нейросетей посредственный результат («нейрослоп»), потому что просят сделать сайт одним абстрактным промптом вроде «сделай красивый сайт для шиномонтажа». Профессиональный результат требует скармливания нейросети конкретных визуальных приёмов из признанных наградных проектов. Автор не ищет сайты вручную, а делегирует подбор референсов самой нейросети, используя персональную библиотеку Awwwards и лучших кейсов Tilda.
Тайминг:[00:35], [01:26], [02:53]
Выгода: Экономия 2–3 часов ручного рисерча визуальных стилей. Получение уникального дизайна за счёт комбинации («эффект Франкенштейна») микроанимаций, форм и интерактива из фестивальных работ.
Как применить:
Шаг 1: Автоматический подбор референсов через ИИ — Claude / Fable — Отправьте агенту запрос на поиск конкретных дизайн-решений в заданной нише, подключив внешние базы или ссылки на дизайн-подборки.
Пожалуйста, подбери мне референсы. Ниша: шиномонтаж. Мне нужно будет сделать сайт на пять блоков. Используй мою библиотеку референсов по Awwwards и библиотеку референсов по Tilda. Присылай ссылки на сайты сюда. Это должны быть наградные, фестивальные сайты в этой или смежных нишах (детейлинг, премиум-авто), которые мы используем в качестве визуальных референсов.
Шаг 2: Анализ и выжимка приёмов — Браузер / Глаза дизайнера — Из предложенных вариантов отберите конкретные рабочие узлы:
Из наградного кейса (например, Radian): вращающийся 3D-объект (шина), крупная сетка фото, параллакс.
Из коммерческих кейсов Tilda: контрастная палитра, срезанные углы плашек/кнопок, нестандартная форма навигационного меню.
Шаг 3: Надиктовывание ТЗ на составление единого системного промпта — Claude / Fable — Не пишите финальный код сразу. Заставьте модель собрать полноценный структурированный бриф, который в чистых сессиях будет скормлен тестируемым агентам.
Смотри, возьми референс Radian: с него возьмём наградные элементы (ховеры, переход с 1-го на 2-й экран, концепцию 3D-модели шины на первом экране, которая вращается при скролле). Из других блоков возьми параллакс в фотографиях и карусель. Составь структуру блоков. Сайт должен быть фестивальным: футер полноэкранный, массивный, тёмный, с интерактивным элементом (вращающаяся шина или огромный текстовый логотип), добавь интерактивную галерею кейсов. ВАЖНО: ты не приступаешь к верстке. Твоя задача — составить подробнейший развёрнутый промпт с текстами и структурой для другой модели (GPT Astra). Подготовь промпт так, чтобы сайт развернулся с одного запроса.
Результат: Готовое, глубоко детализированное техническое задание с продуманными интерактивными механиками, готовое к передаче в любую генеративную кодинг-модель.
2. Автоматическая генерация изображений: MCP HixF против нативного GPT Image
Контекст: Главная проблема вёрстки лендингов нейросетями — плейсхолдеры вместо контента («серая заглушка» или битые ссылки Unsplash). Чтобы сайт выглядел как готовый продакшн, модели должны самостоятельно создавать тематический графический контент под каждый блок прямо в процессе сборки верстки. В GPT Astra встроен собственный нативный генератор изображений, тогда как Fable из коробки не имеет встроенного генератора картинок. Решением становится расширение возможностей агента через специальный протокол MCP (Model Context Protocol).
Тайминг:[04:15], [06:26]
Выгода: Полная автономность пайплайна: сайт получает оригинальные сочные изображения (грязные руки автомеханика, атмосферный интерьер гаража, диски, шины) без ручного скачивания фотостоков или генерации в Midjourney.
Как применить:
Шаг 1: Подключение инструмента генерации картинок к Claude/Fable — Конфиг MCP — Подключите агрегатор нейросетей HixF через Model Context Protocol. В конфиг вашего AI-агента добавьте MCP-сервер, позволяющий вызывать API генерации графики прямо из чата.
Шаг 2: Инструкция агенту на генерацию графики — System Prompt / Chat — При передаче ТЗ укажите агенту жесткое требование: не использовать плейсхолдеры, а вызывать подключенный инструмент создания изображений под контекст блока.
Шаг 3: Автогенерация в GPT Astra — OpenAI Codex / Astra — В экосистеме Astra ничего подключать не нужно: модель сама обращается к внутреннему графическому ядру OpenAI Image, создавая ассеты в локальную папку проекта и прописывая к ним корректные пути в тегах <img>.
Результат: Полноценный лендинг с фотореалистичными тематическими иллюстрациями (атмосферные кадры автосервиса, текстуры, рендеры резины), интегрированными в разметку без участия человека.
3. Лимиты и выносливость: Тариф $20 (OpenAI) против $100 (Fable)
Контекст: Генерация комплексного веб-проекта требует огромного контекстного окна и миллионов токенов на рассуждения (chain-of-thought) и самопроверку (verification step). На базовой подписке за $20 в месяц GPT Astra может полностью израсходовать лимит сессии за один сложный сайт и упасть до завершения работы. При этом Fable на расширенном тарифе ($100) успешно выдерживает длинный контекст, скриптинг анимаций и финализацию билда.
Тайминг:[04:51], [05:32], [07:38], [09:14]
Выгода: Понимание реальной стоимости вайбкодинга и предотвращение ситуаций, когда проект «зависает» на 5 часов из-за обнуления квот посреди рабочего дня.
Как применить:
Шаг 1: Контроль лимитов при генерации "в один проход" — Codex / ChatGPT — Имейте в виду: GPT Astra на базовом тарифе тратит весь лимит за ~17 минут непрерывного кодинга крупного проекта. Если лимит падает в ноль, модель аварийно завершает работу на этапе самопроверки (self-reflection), не успев исправить мелкие JS-ошибки.
Шаг 2: Стратегия декомпозиции для недорогих тарифов — Любой AI-агент — Если у вас базовый тариф ($20), не просите сгенерировать сложный фестивальный сайт целиком в одном промпте. Разбивайте задачу:
Каркас + первый экран с 3D шиной;
Интерактивные блоки контента;
Футер и оптимизация.
Шаг 3: Использование тяжелых подписок для end-to-end генерации — Fable / Claude Pro/Team — Для задач «сделай всё под ключ от ТЗ до продакшна за один клик» используйте тарифные планы уровня $100/мес с расширенными квотами на reasoning-модели.
Результат: Бесперебойный пайплайн генерации без неожиданных падений сессии с кулдауном на 5 часов.
4. Битва результатов: Наградной Awwwards-стиль (Fable) против коммерческого сайта (GPT Astra)
Контекст: Обе нейросети получили идентичное ТЗ. На выходе сформировались два принципиально разных продукта:
Fable 5.1 создал фестивальный сайт уровня Awwwards: прелоадер, 3D-шина, плавно вращающаяся при вертикальном скролле, интерактивный переключатель светлой и тёмной темы в реальном времени прямо по ходу прокрутки страницы, интерактивный таймлайн («Как проходят 25 минут шиномонтажа») и тяжелый футер.
GPT Astra выдала добротный, приземленный коммерческий сайт, похожий на дорогую разработку на Tilda: строгий продающий визуал, сочные карточки, параллакс, горизонтальный слайдер услуг, форма записи со срезанными плашками и интерактивный футер, но без сложных WebGL/Canvas анимаций.
Критический нюанс адаптивности: Ни одна модель при генерации сложного фестивального десктопа с одного промпта не сделала качественную мобильную версию из коробки. Элементы 3D сжались, сетки поломались. Адаптив всегда выносится во второй итерационный промпт:
Десктопную версию сохраняем без изменений. Теперь оптимизируй стили и медиа-запросы под экраны мобильных устройств (375px–430px). Перестрой сетку в одну колонку, уменьши 3D-канвас с шиной, сделай читабельными шрифты заголовков и обеспечь плавный тач-скролл для слайдеров.
Результат: Понимание ограничений каждой модели: Fable побеждает по вау-эффектам (1:0 по графике и анимациям), но Astra дает более структурированный и понятный коммерческий результат для классического заказчика. Итог баттла: 1:1.
5. Деплой сайта за 60 секунд: Автоматическая публикация на Vercel
Контекст: Локального просмотра на localhost недостаточно: сайт нужно оперативно показать заказчику или протестировать на реальных мобильных устройствах. Тратить время на ручную настройку хостинга, создание репозиториев на GitHub и привязку DNS бессмысленно — весь процесс публикации делегируется AI-агенту за один промпт.
Тайминг:[09:30], [09:58], [10:07]
Выгода: Выкат готового веб-проекта в интернет за 1 минуту без необходимости открывать консоль или изучать документацию хостинг-провайдеров.
Как применить:
Шаг 1: Запрос на публикацию проекта — Чат с AI-агентом — Если у вас нет опыта деплоя, отправьте запрос модели:
Смотри, я никогда не деплоил на хостинг. Мне нужно, чтобы этот сайт оказался в интернете по живой ссылке. Предложи бесплатный сервис (например, Vercel) и дай конкретную пошаговую инструкцию или задеплой его сам через Vercel CLI, чтобы я мог открыть ссылку в браузере.
Шаг 2: Автоматический деплой через CLI — AI-агент / Терминал — Агент самостоятельно инициирует деплой: выполнит команду npx vercel (или использует встроенный Vercel CLI), сбилдит статические ассеты (HTML/CSS/JS или Next.js), создаст production-деплоймент и вернет готовую ссылку вида project-name.vercel.app.
Шаг 3: Проверка ассетов — Браузер — Убедитесь, что все сгенерированные картинки и скрипты 3D-анимации подгружаются по относительным путям в продакшн-билде.
Результат: Рабочий боевой URL с HTTPS, который можно сразу отправить клиенту на согласование.
6. Экономика вайбкодинга: Почему сайты за 9 000 ₽ вымирают, а за 540 000 ₽ продаются
Контекст: Появление инструментов уровня GPT Astra и Fable полностью уничтожило ценность базовой сборки сайтов. Тысячи начинающих вайбкодеров генерируют сырые страницы и пытаются спамить компаниям предложениями в стиле «соберем сайт для заявок за 9 000 рублей», получая нулевую конверсию. Высокие чеки (в агентстве автора последний проект на вайбкодинге продан за 540 000 рублей) формируются не за счет кода нейросети, а за счет маркетинга, смыслов, докрутки текстов и позиционирования.
Тайминг:[10:37], [10:59], [10:72]
Выгода: Переход из категории «дешевый сборщик сайтов» в статус высокооплачиваемого AI-стратега и архитектора цифровых продуктов.
Как применить:
Шаг 1: Отказ от продажи «чистого AI-кода» — Понимание рынка — Сырой сайт от GPT Astra или Fable нельзя отдавать клиенту в лоб. Нейросеть выдает черновой визуальный каркас (концепт).
Шаг 2: Маркетинговая докрутка (Value-Add) — Ручная работа вайбкодера:
Замена общих текстов нейросети на глубокие коммерческие офферы под боли целевой аудитории;
Внедрение аналитики, CRM и пикселей ретаргетинга;
Тонкая ручная полировка мобильного UX (кнопки под большой палец, оптимизация загрузки 3D-моделей);
Юридическая и коммерческая упаковка (квизы, калькуляторы, оферта).
Шаг 3: Позиционирование перед бизнесом — Перестаньте продавать «вайбкодинг» или «разработку лендинга». Продавайте решение бизнес-задачи: повышение конверсии трафика, презентацию премиального статуса компании перед инвесторами или запуск промо-кампании за 48 часов вместо 2 месяцев классической разработки.
Результат: Увеличение среднего чека с 9 000–15 000 ₽ до 300 000–500 000+ ₽ за счет решения проблем бизнеса, а не простой механической генерации разметки.
FAQ
В: В чем главное отличие GPT Astra от стандартного ChatGPT Plus? О: GPT Astra (в среде OpenAI Codex) ориентирована на автономный reasoning и многошаговую кодовую разработку. Она умеет выстраивать дерево файлов, автономно генерировать локальные ассеты через внутренние модели генерации изображений и проводить самопроверку (verification) кода в виртуальном окружении перед выдачей результата.
В: Почему Fable 5.1 справился с визуальными эффектами лучше, чем Astra? О: Fable (на стеке Anthropic Claude) лучше понимает сложную логику CSS-анимаций, динамических триггеров скролла (ScrollTrigger, IntersectionObserver) и интеграцию внешних 3D-библиотек (Three.js). Astra выдает более консервативный, стабильный, но менее экспериментальный UI.
В: Зачем подключать MCP HixF к Fable, если можно загрузить картинки вручную? О: Подключение MCP-серверов автоматизирует процесс вайбкодинга. Модель сама анализирует контекст секции («хранение шин», «замена колодок»), формирует точный графический промпт, вызывает API генератора картинок, скачивает файл и прописывает путь в коде без единого ручного действия пользователя.
В: Почему обе модели не смогли сделать адаптив под смартфоны с первого раза? О: При создании тяжелых фестивальных сайтов контекст модели перегружается сложными расчетами десктопных анимаций, 3D-сцен и сеток. Модели «экономят» токены на мобильных медиа-запросах. Адаптивность в вайбкодинге всегда должна выполняться отдельным итерационным шагом после фиксации десктопной структуры.
В: Хватит ли базовой подписки за $20 для работы с GPT Astra? О: Для небольших одностраничников и скриптов — хватит. Однако на генерации масштабных проектов с тяжелым рассуждением лимиты тарифа за $20 сгорают за 15–20 минут, прерывая сессию на этапе компиляции. Для профессионального продакшна требуется тариф с повышенными квотами или API-доступ.
В: На каком стеке генерируются такие сайты? О: В зависимости от промпта модели используют либо нативный стек HTML5 + Tailwind CSS + Vanilla JS (с библиотеками анимаций GSAP / Three.js), либо популярные фреймворки (Next.js / Vite + React). Это позволяет мгновенно разворачивать проект на Vercel или Netlify.
Ресурсы и ссылки
GPT Astra / Codex — специализированная модель и среда рассуждений от OpenAI для разработки приложений — упомянута в видео.
Fable 5.1 — агентская среда веб-разработки на базе моделей Claude — упомянута в видео.
MCP (Model Context Protocol) — открытый протокол Anthropic для подключения внешних инструментов к ИИ-агентам — упомянут в видео.
HixF — сервис-агрегатор нейросетей для генерации графики через MCP — упомянут в видео.
Tilda Publishing (Made on Tilda) — библиотека коммерческих сайтов с высокой конверсией для вдохновения — упомянута в видео.
Конспект создан на основе видео «GPT Astra vs Fable 5.1: Баттл нейросетей в веб-дизайне» канала Германа. Все права на оригинальный материал принадлежат авторам.Источник: https://www.youtube.com/watch?v=sn4LMq6fumw
Vercel