02 Сайты: дизайн и анимация словами
Результат: у каждого анимированный сайт, который выглядит как работа студии.
Главное открытие: красивый сайт получается из подробного дизайн-промпта, а не из «сделай красиво».
- 10минДемоДва сайта на одну тему
- 10минПриёмыДизайн-промпт, визуальный промпт
- 30минМладшийСайт про своё увлечение
- 30минСтаршаяЛукбук или портфолио
- 10минРелизСайты на телефонах
Демо: два сайта на одну тему
Сначала «Сделай сайт про велосипеды». Потом то же с дизайн-промптом VELLO ниже. Дети сами видят разницу.
Приёмы занятия
1. Дизайн-промпт в стиле MotionSites
На motionsites.ai собрана библиотека готовых промптов для сайтов: их копируют и вставляют в Claude или другие конструкторы. Показать детям галерею и разобрать, из чего состоит такой промпт.
| Блок промпта | Что в нём |
|---|---|
| Концепция | Что это за сайт и какое ощущение должен оставлять |
| Первый экран | Заголовок, фон, главная картинка, кнопка |
| Типографика | Какие шрифты, размеры, жирность |
| Палитра | 2-3 цвета с кодами или понятными названиями |
| Движение | Что анимируется при загрузке, прокрутке, наведении |
| Секции | Что идёт после первого экрана, по порядку |
| Техника | Один файл, адаптив под телефон, без внешних зависимостей |
Пример такого промпта, лукбук выдуманного бренда велоодежды:
Сделай одностраничный сайт-лукбук выдуманного бренда велоодежды VELLO. Концепция: дорогой модный журнал, много воздуха, ощущение скорости. Hero: на весь экран огромное слово VELLO, буквы выезжают снизу по одной при загрузке. Под ним тонкая строка «Коллекция Осень 2026» и кнопка «Смотреть луки». Типографика: заголовки узкий гротеск заглавными, текст тонкий с большим межстрочным. Палитра: почти чёрный фон, кремовый текст, один акцент неоново-оранжевый. Движение: при прокрутке карточки луков плавно появляются с небольшим сдвигом, при наведении карточка чуть увеличивается, бегущая строка с названиями луков. Секции: hero, бегущая строка, сетка из 6 луков (вместо фото абстрактные градиенты), цитата, подвал. Техника: один HTML-файл, отлично выглядит на телефоне.
2. Анатомия визуального промпта
Разобрать промпт про подводный портрет. Он построен из шести слоёв, и эта схема работает для любой картинки.
| Слой | В промпте про портрет |
|---|---|
| Стиль | Hyper-realistic, ultra-detailed macro portrait |
| Кадр | Только левая половина лица, глаз у левого края |
| Свет | Лучи и каустики на коже, кинематографичный подводный свет |
| Детали | Поры, ресницы, капли, пузырьки |
| Настроение | Сюрреалистичное, сновидческое |
| Техника | Малая глубина резкости, фотореализм, 3:4 |
Hyper-realistic, ultra-detailed macro portrait capturing only the left half of a human face partially submerged underwater. One eye in sharp focus near the far-left edge of the frame. Light rays create dynamic caustic reflections across the skin, emphasizing pores, wet lips, eyelashes, and fine textures with lifelike subsurface scattering. Suspended droplets and air bubbles add depth and motion. Cinematic underwater lighting with soft shadows and crisp highlights enhances the surreal, dreamlike atmosphere. Extremely shallow depth of field, photorealistic rendering, 3:4 aspect ratioЧестно сказать детям: фотореалистичные картинки Claude не рисует, такие промпты вставляют в генераторы изображений. Зато Claude отлично пишет такие промпты и рисует кодом графику, градиенты и анимации.
Упражнение на 5 минут: промпт для обложки своего сайта по схеме из 6 слоёв.
Напиши промпт для генератора изображений: обложка моего сайта про [тема]. Построй его из шести слоёв: Стиль: [как фото, как мультфильм, как плакат] Кадр: [что в кадре и где] Свет: [какой свет] Детали: [мелочи, которые видно вблизи] Настроение: [какое ощущение] Техника: [формат, например 16:9]
Младший: сайт про своё увлечение
Младший диктует ответы на 7 блоков, взрослый собирает из них промпт. Обязательный элемент: одна «вау»-анимация, которую он придумал сам: частицы за курсором, параллакс, текст, который печатается сам.
Сделай одностраничный сайт про [моё увлечение]. Концепция: [что за сайт и какое ощущение] Первый экран: [заголовок, фон, главная картинка, кнопка] Типографика: [какие шрифты, крупные или тонкие] Палитра: [2-3 цвета] Движение: [моя «вау»-анимация и что двигается при прокрутке] Секции: [что идёт после первого экрана, по порядку] Техника: один HTML-файл, отлично выглядит на телефоне.
Старшая: лукбук или портфолио
Берёт пример VELLO как образец и переписывает под свой вкус и тему. После первой версии приём «Упростить и сократить».
Посмотри на этот сайт глазами строгого арт-директора. Скажи, что можно упростить или убрать. Предлагай только то, что делает его чище и дороже на вид. Потом примени топ-3.
Релиз
Оба сайта на телефонах. Проверка: анимации не тормозят, ничего не вылезает за край экрана.
Готово, когда
Сайт не стыдно показать друзьям, и автор может объяснить, какие слова в промпте дали какой эффект.