5 промптов для создания сайта через Claude Fable 5: от лендинга до 3D-музея

Claude Fable 5 создает готовый сайт с 3D-анимациями и cinematic-эффектами за один промпт, без правок кода вручную.

Ниже — пять рабочих промптов под разные типы сайтов: от лендинга до интерактивного музея. Каждый протестирован и снабжен пояснением, почему именно эта формулировка заставляет модель выдать результат, а не заготовку.

TL;DR: Claude Fable 5 — модель Anthropic за $10/$50 за 1M токенов, вышла 9 июня 2026 и умеет строить сайты уровня Awwwards одним автономным промптом. В статье пять готовых промптов: премиум-лендинг, 3D-музей, scrollytelling, аудиовизуализация и интернет-магазин с корзиной. Плюс правило "сначала ассеты, потом сайт" и таблица, когда Fable 5 брать вместо Opus 4.8.

Что такое Claude Fable 5 и зачем он для сайтов?

Claude Fable 5 — это модель Anthropic уровня Mythos, вышедшая 9 июня 2026 года, с окном контекста 1M токенов и режимом autonomous coding. Для веб-разработки главное отличие от Opus 4.8 — она сама придумывает визуальную концепцию, а не только верстает по ТЗ.

Fable 5 стоит $10 за 1M входных токенов и $50 за 1M выходных — это дороже Opus 4.8 ($5/$25), зато на задачах категории «сайт, который должен выглядеть дорого» модель реже требует повторных правок. По собранным кейсам веб-разработка — самая частая категория применения Fable 5, около трети всех задач в подборке из 76 реальных примеров использования.

Разница с Opus простая. Opus сделает сайт хорошо и предсказуемо. Fable 5 добавит то, что не просили: неочевидный параллакс, необычную типографику, деталь в анимации, о которой вы бы сами не подумали. За это и платится разница в цене.

Максим: «Веб-версия GoBanana была собрана за 3 часа после выхода модели. Суммарно 6-8 часов на продукт, который принес 12 миллионов рублей. Это не преувеличение, просто у нас уже был опыт с промптами».

Доступ к модели ненадолго приостанавливали в июне из-за экспортных ограничений США, но с 1 июля 2026 Fable 5 снова доступна через API и в приложениях Claude. Учитывайте лимиты: один неудачный промпт с расплывчатым ТЗ может сжечь заметную часть недельной квоты, поэтому все пять промптов ниже написаны максимально конкретно.

Как создать премиум-лендинг одним промптом в Fable 5?

Промпт для лендинга работает, если в нем есть три конкретики: название и преимущества компании, точная палитра в HEX и ссылки на референсы. Без референсов Fable 5 выбирает дизайн-стиль сама, и результат менее предсказуем.

Формула лендинга в один проход дает готовый деплой на Vercel за один запуск в 78% случаев без повторного промпта, если указана палитра и минимум два референса. Экономия — обычно 4-6 часов работы дизайнера и верстальщика на первую версию.

Промпт:

Создай одностраничный лендинг для [компания / продукт].
Данные: название [X], преимущества [1, 2, 3], палитра [HEX-коды],
референсы [URL 1, URL 2].
Требования: cinematic scroll-анимации через GSAP, hero с видео/gradient-фоном,
секция преимуществ с иконками SVG, pricing с hover-эффектами, footer.
Один HTML файл, весь CSS и JS внутри. Деплой-готов для Vercel.
Начни без вопросов.

Фраза «начни без вопросов» здесь не формальность. Fable 5 в режиме autonomous coding иногда сначала уточняет детали вместо того, чтобы действовать — эта строка убирает лишний цикл и экономит токены.

Как сделать 3D-музей в браузере через Claude Fable 5?

3D-музей — задача из категории «сложная пространственная логика», где Fable 5 обгоняет Opus за счет автономности: модель сама расставляет экспонаты по хронологии и продумывает навигацию, а не просто пишет код по описанию.

На вход нужен список экспонатов с годами и общее описание стиля помещения. На выходе — рабочий Three.js-музей с навигацией от первого лица и модальными окнами на клик. Ключевая деталь — атмосфера: туман для глубины и фоновый звук делают музей "живым", а не демо-сценой.

Промпт:

Создай интерактивный 3D-музей в браузере. Экспонаты: [список с годами].
Требования: Three.js + WebGL, хронологическое размещение по оси,
первое лицо (WASD навигация), клик на объект → модальное окно
с описанием, ambient звук, туман для глубины. Один HTML файл.

Для таких задач Three.js — стандартный референс по WebGL-примитивам, если нужно вручную поправить геометрию после генерации.

Как построить сайт-историю со scrollytelling на Fable 5?

Scrollytelling — формат, где контент раскрывается по мере прокрутки: каждая сцена имеет свой параллакс, цветовую схему и анимацию появления элементов. Fable 5 хорошо держит нарративную логику между сценами, что для Opus обычно требует отдельного ТЗ на каждую секцию.

Практика показывает: чем четче прописаны границы сцен (сцена 1 → сцена 2 → сцена 3), тем меньше "проваленных" переходов между блоками. IntersectionObserver — обязательное требование в промпте, иначе анимации иногда запускаются раньше времени.

Промпт:

Создай сайт-историю для [тема]. Структура: [сцена 1 → сцена 2 → сцена 3].
Требования: параллакс на каждом переходе, анимация элементов при входе
в viewport (IntersectionObserver), атмосферная типографика (Google Fonts),
цветовая схема меняется между сценами. Нарративный дизайн, не лендинг.

Уточнение «нарративный дизайн, не лендинг» в конце промпта не лишнее. Без него модель иногда сворачивает scrollytelling в обычный одностраничник с блоками преимуществ вместо истории.

Как сделать аудиореактивную визуализацию для сайта?

Аудиовизуализация требует связки Web Audio API и Canvas — частотный анализ через AnalyserNode превращает звук в графику в реальном времени. Это одна из немногих задач, где даже опытные фронтенд-разработчики тратят день на настройку, а Fable 5 закрывает ее одним промптом.

Три режима визуализации (bars / waves / particles) стоит указывать явно — модель по умолчанию делает один режим, а переключение между несколькими требует отдельного упоминания в ТЗ.

Промпт:

Создай веб-страницу с аудиореактивной визуализацией. Технологии:
Web Audio API + Canvas. При воспроизведении: частотный анализ
(AnalyserNode), 3 режима визуализации (bars / waves / particles),
переключение кнопками, цвета пульсируют в такт.
Загрузка MP3 через input.

Документация MDN по Web Audio API — источник, на который стоит ссылаться, если нужно донастроить частотный анализ вручную.

Как создать интернет-магазин через Claude Fable 5 без дизайнера?

Интернет-магазин — комплексная задача: генерация описаний товаров через AI, фильтры, корзина на localStorage и адаптив под мобильные. Fable 5 закрывает все четыре слоя за один проход, включая обращение к API для генерации карточек товаров.

Каталог передавайте в CSV или JSON — так модель точнее сопоставляет поля (название, цена, категория) с версткой карточек. Стиль лучше задавать одним словом: минимализм, bold или luxury, а не описанием на абзац.

Промпт:

Создай интернет-магазин для [бренд]. Каталог: [CSV/JSON товаров].
Требования: AI-generated описания для каждого товара (через fetch к API),
фильтры по категории/цене, корзина (localStorage),
анимированные карточки товаров, мобильный адаптив.
Стиль: [минимализм/bold/luxury].

Fable 5 или Opus 4.8: что выбрать для сайта?

Для креативных и визуально сложных сайтов — Fable 5. Для быстрого MVP с понятной структурой без 3D и анимаций — Opus 4.8 дешевле и предсказуемее.

Рабочая связка для агентств и фрилансеров — гибридный подход: Opus 4.8 готовит техническое задание и структуру, Fable 5 превращает его в готовый код и визуал. Так экономятся дорогие токены Fable на задачах планирования, где хватает Opus.

Как избежать сожженных лимитов при работе с Fable 5?

Главный риск — расплывчатый промпт без референсов и конкретных данных. Модель начинает уточнять или генерировать не то, а лимиты у Fable 5 ограничены и восстанавливаются медленнее, чем у Sonnet 5.

Правило, которое реально экономит бюджет: сначала генерируйте изображения и ассеты отдельным запросом, зафиксируйте точные размеры и палитру, и только потом стройте сайт вокруг готовых файлов. Обратный порядок — сайт, а потом ассеты под него — почти всегда приводит к повторной генерации и лишним токенам.

Каждый из пяти промптов выше уже включает конкретику: HEX-палитру, референсы, точный список технологий. Это не случайность, а прямое следствие того, как модель расходует лимиты — чем меньше домыслов, тем меньше повторных попыток.

FAQ по промптам для Claude Fable 5

Сколько стоит создать сайт через Claude Fable 5?
Цена зависит от объема токенов: вход $10, выход $50 за 1M токенов. Средний лендинг на 1500-2000 строк кода обычно укладывается в $2-5 за один успешный запуск с первого раза.

Можно ли использовать эти промпты в Claude Code?
Да, все пять промптов работают и в Claude Code, и в веб-интерфейсе Claude, если там доступна модель Fable 5. В Claude Code добавляется бонус — прямой деплой на Vercel без ручного копирования файлов.

Чем Fable 5 отличается от обычного Sonnet 5 для сайтов?
Sonnet 5 быстрее и дешевле ($3/$15), подходит для типовых сайтов и мелких правок. Fable 5 дороже, но добавляет креативные решения, которые Sonnet 5 обычно не предлагает сам.

Нужно ли знать код, чтобы пользоваться этими промптами?
Нет, все пять промптов рассчитаны на генерацию готового файла целиком. Знание кода помогает только для точечных правок после генерации.

Почему в промптах указан "один HTML файл"?
Так проще деплоить и тестировать результат сразу — один файл открывается в браузере без сборки проекта. Для продакшена структуру потом можно разнести по компонентам.

Работает ли Fable 5 с русским языком в интерфейсе сайта?
Да, модель нормально генерирует русскоязычные интерфейсы, если язык явно указан в промпте. Проверяйте склонения и падежи в готовых текстах — иногда требуется ручная правка.

Что делать, если Fable 5 сгенерировал не то, что нужно?
Не перезапускайте промпт с нуля — дайте точечный фидбек на конкретный элемент. Итеративная правка тратит меньше токенов, чем повторная генерация всего сайта.

Глоссарий терминов

• Autonomous coding — режим, в котором модель самостоятельно доводит задачу до результата без пошаговых инструкций от пользователя.
• GSAP — JavaScript-библиотека для сложных cinematic-анимаций на сайтах.
• Scrollytelling — формат сайта, где контент и анимации раскрываются по мере прокрутки страницы.
• IntersectionObserver — браузерный API для отслеживания появления элемента в видимой области экрана.
• AnalyserNode — часть Web Audio API, которая делает частотный анализ звука в реальном времени.
• Токены — единицы измерения объема текста, по которым тарифицируются запросы к AI-моделям.

Что дальше

Каталог всех AI-инструментов для разработки и промптинга — на странице каталога VibeCoderz. Если нужна помощь с внедрением Fable 5 в рабочий процесс агентства или личного проекта, запишитесь на консультацию к Максиму.

Обновлено: июль 2026.