Шаблоны промптов и анти‑грабли для создания анимированного Bento Grid‑сайта с помощью ChatGPT, Claude и Gemini

Хочешь сделать страницу, которая «оживает при прокрутке», как на сайте Apple, но не хочешь с нуля грызть фронтенд? Я больше рекомендую комбо‑удар: «три чат‑модели пишут код + Midjourney генерирует картинки» — эффективность просто запредельная。

Один пайплайн закрывает структуру страницы, анимации и материалы

ChatGPT отвечает за каркас

Он быстрее всего пишет HTML5+Tailwind, удобно сразу разложить все «жёсткие требования»: Bento Grid, чёрный фон + акцентный цвет #2657FD, огромные числовые заголовки и т. п.

Промпт, который можно копировать напрямую: Выведи один HTML‑файл, используй TailwindCSS CDN и необходимый JS, раскладку Bento Grid, чёрный фон, акцент #2657FD, большой заголовок на китайском с небольшими английскими словами‑вставками, с плейсхолдерами маленьких графиков с данными; не сокращай, не опускай ключевые пункты.

Claude отвечает за плавность анимаций

Framer Motion через CDN легко сделать так, что «работает, но дёргается»; Claude лучше умеет довести до приятного вида триггеры по скроллу, анимации появления и кривые темпа (и он охотнее помогает закрывать граничные случаи).

Gemini отвечает за поиск дыр и недочётов

Если браузер ругается ошибками, стили перезаписываются или компоненты не выравниваются, попроси Gemini чинить в формате «пошаговое объяснение + локализация проблемы + код на замену» — и не придётся тупить в консоли.

Midjourney отвечает за главный визуал

Главный визуал вроде «ядро реактора/вспышка галактики/высвобождение энергии» (в материалах упоминаются ультра‑яркие неоновые блики + тёмная подложка) лучше всего отдавать ему, а потом закинуть картинку обратно в ChatGPT, чтобы сделать адаптивную подстройку.

Две мои частые мелкие придирки

• Ссылки на CDN, которые генерируют модели, иногда протухают; если не запускается — не сомневайся в жизни, просто замени на актуальные официальные.
• Не наваливай слишком много анимаций: чем сдержаннее Bento Grid, тем «премиальнее» выглядит; иначе получится вайб PPT с новогоднего корпоратива.

Если ты всё ещё застрял на «как выбрать модель/как составить промпт/как за один раз настроить аккаунты и инструменты», можешь заглянуть в Titikey — я сам часто пользуюсь им, чтобы меньше наступать на грабли.