Frontend Design: как агенту сделать страницу, не похожую на шаблон
Страницы, собранные ИИ, легко узнать: кремовый фон с терракотой, одинаковые скруглённые карточки, надпись капсом над каждым заголовком. Frontend Design описывает эти привычки прямо и просит агента сначала набросать план из цветов, шрифтов и сетки, сверить его с брифом и только потом писать код.
Сначала определяет предмет, аудиторию и главную задачу страницы, а визуальные решения берёт из материалов и языка этой отрасли.
Требует план до кода: 4–6 именованных цветов в hex, роли шрифтов, схему раскладки в ASCII и принципы конкретно этой страницы.
Перечисляет пять типичных примет сгенерированного дизайна, от карточек с одинаковой тенью до стрелки после текста каждой кнопки.
Задаёт правила типографики: одно-два семейства, внятная шкала кеглей, строка короче 80 знаков, без выделения одного слова в заголовке.
Отдельно разбирает тексты интерфейса: активный залог, кнопка и уведомление называют действие одинаково, ошибки без извинений.
Когда пригодится
Лендинг, собранный агентом, выглядит как сотни других, и заказчик просит у него собственное лицо.
Нужно перекроить существующий интерфейс, сделать его смелее и не потерять при этом доступность.
Бриф не называет продукт, и агенту стоит сначала предложить предмет и аудиторию, а уже потом рисовать.
Попросите агента
Сверстай главную для пекарни на Васильевском, только без кремового фона и терракоты
Перед кодом покажи план: палитру в hex, шрифты и ASCII-схему первого экрана
Перепиши тексты кнопок и ошибок в форме оплаты простым активным языком
Вопросы
Как установить скилл Frontend Design?
Командой npx skills add anthropics/skills@frontend-design. Пользователи Claude Code могут вместо этого добавить репозиторий как маркетплейс: /plugin marketplace add anthropics/skills.
Запретит ли Frontend Design тёмную тему или газетную вёрстку?
Нет. Эти приёмы названы привычками, а не ошибками: если бриф прямо просит такой вид, скилл велит следовать брифу.
Чем Frontend Design отличается от UI-библиотеки?
Он не даёт готовых компонентов и кода. Это порядок работы и набор принципов, по которым агент выбирает палитру, шрифты, раскладку и движение для конкретной задачи.
