Frontend Design (Anthropic)

Что умеет навык

В SKILL.md frontend-design нет ни кода, ни шаблонов, это руководство по дизайнерскому мышлению для нового или переделываемого интерфейса. Claude должен вести себя как ведущий дизайнер студии, которой клиент уже вернул несколько шаблонных проектов. Если в задании не сказано, что за продукт, навык велит сначала предложить конкретную тему, аудиторию и главную задачу страницы и подтвердить их с клиентом: визуальные решения берутся из предметной области.

Работа идёт в четыре шага. Сначала короткий дизайн-план: палитра из 4-6 именованных hex-значений, роли шрифтов, идея раскладки с ASCII-схемами и главные принципы. Затем план сверяют с заданием и переписывают места, которые получились бы у любой похожей страницы. Только после этого пишется код, а в конце идёт самокритика, в том числе по скриншотам, если среда их поддерживает. В тексте навыка перечислены типовые «приметы сгенерированного дизайна»: тёплый кремовый фон с терракотовым акцентом, чёрный фон с одним кислотным акцентом, газетная вёрстка, одинаковые скруглённые карточки, лишние метки капсом.

Отдельный раздел посвящён типографике и текстам: строки короче 80 символов, осознанный выбор гарнитур и шкалы, глаголы в кнопках вроде «Save changes» вместо «Submit», сообщения об ошибках без извинений.

Когда использовать

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

Ограничения и безопасность

В SKILL.md нет команд и скриптов, навык лишь меняет порядок рассуждений Claude, поэтому результат зависит от модели и от того, насколько подробно описано задание. Ничего не гарантируется: «авторский» вид остаётся делом вкуса, а выбранный стиль нужно проверять на реальных устройствах. Базовый минимум, который навык требует от кода, это адаптивность до мобильного размера, видимый фокус с клавиатуры, учёт настройки уменьшенной анимации и читаемые цвета.

Лицензия навыка Apache 2.0, текст лежит в папке навыка. Авторы репозитория напоминают, что навыки приведены в учебных целях и поведение Claude в продукте может отличаться, поэтому проверяйте их в своём окружении.

Claude Code

Зарегистрируйте репозиторий как маркетплейс плагинов, выполнив в Claude Code:

/plugin marketplace add anthropics/skills

Навык входит в набор примеров example-skills:

/plugin install example-skills@anthropic-agent-skills

Установить можно и через меню: Browse and install plugins, затем anthropic-agent-skills, затем example-skills и Install now.

После установки навык вызывается по упоминанию: назовите его в запросе к Claude Code.

Claude.ai и Claude API

Навыки из этого репозитория уже доступны в Claude.ai на платных тарифах. Пользовательские навыки загружают по инструкции «Using skills in Claude» в справке Anthropic. Через API работает быстрый старт Skills API Quickstart в документации Claude.