83.3K+Скачать
Перейти к руководству
frontend-designавтор Anthropic

Frontend Design Skill.

Skill для Claude Code и Codex: выразительный UI-дизайн с осмысленной типографикой, цветом и композицией.

  • Web и UI
  • Websites
  • Редизайн UI
  • Typography
Скачать OpenDesignИнструкция по использованию
DESIGN DIRECTION / 01BRIEF → INTERFACE
AaTYPE WITH INTENT
A quieter palette.
A clearer hierarchy.
● ● ●homepage.html ↗
scope®Made for independent designers
LESS ADMIN. MORE MAKING.Good work.
Clear scope.

A considered space for your next project, from the first quote to the final yes.

Create your quote ↗
YOUR NEXT PROJECTBrand &
website design
01 Define the work
02 Agree on the scope
03 Get the go-ahead
Ready when you are. ↗
THE STARTING POINT

“A quoting tool for freelance designers.
Make the next step feel clear.”

Illustrative composition · not a recorded skill output

01 От брифа до интерфейса

Задача по фронтенд-дизайну от брифа до интерфейса.

Задайте Claude Code или Codex продукт, аудиторию и контент; скилл frontend-design примет визуальные решения.

Пример брифаИллюстративный процесс · не записанный запуск

Главная страница для инструмента котировок

Помогает фрилансерам понять, как составлять сметы, согласовывать изменения объёма работ и получать одобрение клиента.

Фирменные материалыЦеныТекст FAQ
Смотреть полный промпт ↗

Что направляет скилл

  1. 01
    Найти визуальное направление

    Палитра, типографическая иерархия и вёрстка, связанные с продуктом.

  2. 02
    Проверить план

    Сверить направление с брифом перед разработкой.

  3. 03
    Создать и доработать

    Адаптивный интерфейс с чёткими действиями и доступными состояниями.

02 Определите своё применение

Когда использовать скилл frontend-design

Используйте frontend-design skill, когда визуальные решения — часть работы: новая страница в Claude Code или Codex, либо редизайн интерфейса, который выглядит шаблонно.

Хорошо подходит

  • Новая страница или сайт по брифуЛендинги, продуктовые сайты, портфолио, небольшие приложения — всё, где первый вопрос «как это должно выглядеть?»
  • Визуальный редизайн существующего интерфейсаУ вас есть рабочий UI, который выглядит шаблонно, и вы хотите направление, основанное на предметной области продукта.
  • Исправление типографики и иерархииШкала кегля, длина строки, начертание и интерлиньяж, заданные осмысленно, а не по умолчанию из фреймворка.
  • Брифы с реальным контентомНавык создаёт дизайн на основе реального текста и темы из брифа; чем больше подробностей вы укажете, тем конкретнее будет результат.

Знайте границы

  • У вас уже есть дизайн-системаПредоставьте её правила и компоненты. Skill должен следовать вашему брифу и работать в рамках открытых визуальных решений.
  • Работа связана с логикой, данными или бэкендомОн сфокусирован на визуальном дизайне. Логика приложения, API и функциональное тестирование требуют отдельной реализации.
  • Вам нужна библиотека компонентов или шаблоныОн предоставляет инструкции по дизайну, а не готовую библиотеку компонентов или шаблон страницы.
  • Вам нужен обзор готового интерфейсаСамокритика навыка направлена на его собственный план. Для аудита чужого интерфейса смотрите связанные навыки ниже.

Что предоставить

  • Тема продуктаЧто это за продукт и в какой отрасли он работает. Если не указать, навык предложит вариант и попросит подтвердить.
  • Целевая аудиторияДля кого предназначена страница. Это больше всего влияет на визуальный регистр.
  • Цель страницыЕдинственная задача страницы и основное действие.
  • Реальный контентЗаголовки, тексты, цены, ответы в FAQ. Текст-заполнитель создаёт дизайн, похожий на заполнитель.
  • Брендовые активы и ограниченияЛоготип, палитра, шрифты и всё, что уже решено. Слова брифа всегда главнее.

03 Дизайн с намерением

Что навык привносит в UI-дизайн

Четыре вещи, которые навык frontend-design инструктирует Claude Code или Codex делать, и во что каждая из них превращает ваш ввод.

  1. Визуальное направление, основанное на теме

    Агент разбирается, что представляет собой продукт, кому он служит и как выглядит его мир, прежде чем что-либо выбрать. Игрушка для восьмилетних и дашборд для аналитиков не должны иметь одинаковый вид.

    Вы даёте
    тему продукта, аудиторию
    Вы получаете
    направление, которое можно принять или изменить до того, как будет написан код

  2. Типографика, цвет и раскладка, выбранные целенаправленно

    Одно или два начертания с настоящей шкалой, палитра из 4–6 цветов с указанием hex, концепция раскладки с правилами выравнивания. Структурные приёмы — линии, нумерация, метки — используются только там, где они несут информацию.

    Вы даёте
    брендовые материалы, ограничения
    Вы получаете
    компактная система токенов, на которой построена страница

  3. План, проверенный на соответствие брифу, перед разработкой

    Skill работает в два прохода. Сначала составляется черновик плана, затем каждая часть проверяется вопросом «создал бы я это для любой подобной страницы?» и всё, что читается как шаблон, пересматривается — с указанием, что изменено и почему. Код пишется после этого.

    Вы даёте
    бриф
    Вы получаете
    письменный план и короткая самопроверка, которые вы можете прочитать в транскрипте

  4. Базовое качество без напоминаний

    Адаптивность вплоть до мобильных устройств, видимый фокус клавиатуры, учёт настройки уменьшения движения, доступные цвета и текст, написанный с точки зрения пользователя простым, активным языком.

    Вы даёте
    ваши требования к доступности
    Вы получаете
    руководство по работе на мобильных устройствах и с клавиатуры

04 Применение

Установите frontend-design в Claude Code или Codex

Одна команда npx skills add, затем бриф для вашего агента и чек-лист для первого результата.

Добавьте frontend-design в Claude Code, Codex или ваш агент

Выполните команду в вашем проекте, следуйте инструкциям установщика для выбора агента, затем убедитесь, что ваш агент может обнаружить frontend-design.

Terminal
npx skills add https://github.com/anthropics/skills --skill frontend-design

Источник команды: страница frontend-design на skills.sh. Следуйте инструкциям установщика и убедитесь, что skill появился в вашем агенте.

Дайте skill первую задачу по дизайну интерфейса

Адаптируйте этот бриф под детали вашего продукта, прикрепите брендовые материалы и тексты, на которые он ссылается, и запустите его в Claude Code или Codex.

Example prompt
Use the frontend-design skill to design the homepage for a project-quoting tool for freelance designers. Goal: visitors should understand three things — how quotes are built, how scope changes are confirmed, and how clients approve — and then start creating a quote. Content: use the attached brand colors and logo. Include a hero, how it works, features, pricing, and FAQ. Use the real pricing tiers and FAQ answers I have provided; do not invent numbers or testimonials. Process: propose a visual direction that fits freelance designers and this product first, then build the desktop and mobile pages. Keep clear calls to action, visible keyboard focus, and a reduced-motion experience.

Проверьте первый результат

Хороший первый запуск легко распознать. Прежде чем принять страницу, найдите в транскрипте и в результате следующее:

  • План появился до кода, с именованными значениями палитры и ролями шрифтов.
  • Самопроверка называет хотя бы один шаблонный элемент, который был заменён, и объясняет почему.
  • Ваши реальные тексты, цены и брендовые материалы остаются без изменений.
  • Один элемент запоминается; остальная часть страницы остаётся сдержанной.
  • Страница работает при 390px, переход по Tab показывает видимое кольцо фокуса, а движение учитывает настройки ОС.
  • Если что-то читается шаблонно, скажите какая часть — skill написан так, чтобы принять эту критику и доработать.

Используете OpenDesign? frontend-design встроен в OpenDesign: откройте Plugins → Skills, выберите его в верхней панели, и его SKILL.md встраивается в промпт вместе с вашим DESIGN.md. Работу выполняют Claude Code, Codex, Cursor или OpenCode.

Скачать OpenDesignПрочитать краткое руководство

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author
Anthropic
Repository
github.com/anthropics/skills Ветка main
Файл skill
skills/frontend-design/SKILL.md Контрольная сумма содержимого записана при проверке; коммит 34040c9
License
Apache-2.0 Из skills/frontend-design/LICENSE.txt; в SKILL.md сказано «Complete terms in LICENSE.txt». В корне репозитория отдельная лицензия не указана.
Звёзды репозитория
176 183 Снимок GitHub от 2026-09-14 для всего репозитория anthropics/skills, который содержит много skills. Не является рейтингом или счётчиком использования для frontend-design.
Проверено OpenDesign
2026-09-14 Проверены исходный файл, путь, текст лицензии и количество звёзд. Встроен в OpenDesign main (проверено 2026-08-28); реальный запуск в OpenDesign пока не зафиксирован на этой странице.
Собственное описание skill
«Руководство для выразительного, продуманного визуального дизайна при создании нового UI или переработке существующего. Помогает с эстетическим направлением, типографикой и принятием решений, которые не выглядят как шаблонные по умолчанию.»

Front-matter description from SKILL.md. The full instructions are about 9,400 characters and cover subject grounding, design principles, a plan → review → build → critique process, restraint, and writing in design. Читать полный файл на GitHub.

Frontend Design

Дайте вашему агенту бриф, достойный проектирования.

Навык frontend-design входит в состав OpenDesign. Скачайте приложение, выберите навык в Plugins → Skills, вставьте пример запроса и прочтите план перед кодом.

Скачать OpenDesignВсе навыки
Терминал
npx skills add https://github.com/anthropics/skills --skill frontend-design