aesthetic — скилл для Claude Code: дизайн интерфейсов по шагам

Что делает aesthetic

Скилл задаёт агенту рамку из четырёх этапов. Сначала BEAUTIFUL: разбор чужих работ и вытаскивание принципов — визуальная иерархия, типографика, цвет, воздух. Потом RIGHT: системы компонентов и требования доступности. Дальше SATISFYING — микровзаимодействия с таймингом 150–300 мс и кривыми ease-out на вход, ease-in на выход. Завершает PEAK: параллакс, частицы, сюжет в прокрутке, но с оговоркой про сдержанность.

Внутри два рабочих сценария. Первый — снять скриншот сайта-вдохновителя через скилл chrome-devtools и разобрать его скиллом ai-multimodal: стиль, сетка, шрифты с попыткой угадать конкретную гарнитуру из Google Fonts, палитра в hex, паттерны компонентов, оценка от 1 до 10. Второй — генерировать картинки дизайна через Gemini API, оценивать их тем же ai-multimodal и переделывать промпт, пока оценка не дойдёт до 7 из 10. Правки готовых изображений идут через media-processing, вёрстка — через ui-styling и web-frameworks.

Главное ограничение заложено в самом скилле: у ИИ нет вкуса, поэтому планку задают люди. Без разбора качественных примеров агент выдаст что-то среднее. Для генерации изображений нужен Gemini API, а работа со скриншотами опирается на chrome-devtools. Итоги разбора складываются в ./docs/design-guideline.md и ./docs/design-story.md — если в проекте уже есть свой гайдлайн, стоит решить, какой из них основной.