Дизайн как код: как упаковать насмотренность в файл и раздать всей команде

## ## Что такое SKILL.md

SKILL.md — открытый стандарт, опубликованный Anthropic в декабре 2025 года. Это Markdown-файл с YAML-метаданными, который агент подгружает в контекст автоматически, когда задача совпадает с описанием скилла.

Ключевое отличие от AGENTS.md: тот загружается всегда, при каждой задаче. Skill загружается только когда нужен — это экономит контекст и не перегружает агента лишними инструкциями.

Структура минимального скилла:

my-brand-design/
├── SKILL.md          # обязательно: инструкции + метаданные
├── scripts/          # опционально: скрипты которые агент запускает
├── references/       # опционально: доки загружаемые по запросу
└── assets/           # опционально: шаблоны, шрифты, токены

Метаданные в SKILL.md объясняют агенту что скилл делает и когда его применять. Markdown-секция — пошаговые инструкции, которые агент выполняет когда скилл активен.

Стандарт кроссплатформенный: один и тот же файл работает в Claude Code, Codex CLI, Cursor, Gemini CLI и Antigravity IDE без изменений.

## ## Почему это важнее, чем кажется

Старый цикл работы с агентом выглядит так: открыл сессию → объяснил стиль → получил результат → закрыл сессию → следующая сессия → объяснил стиль заново.

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

Skill-файл это разрывает. Вы описываете дизайн-суждение один раз, кладёте в репозиторий, и агент следует ему в каждой сессии, на каждой задаче, у каждого члена команды.

Это и есть «дизайн как исполняемое знание»: знание перестаёт жить только в голове одного дизайнера и становится артефактом проекта.

## ## Готовые скиллы: с чего начать

Экосистема уже большая. По состоянию на июнь 2026 — более 1200 скиллов в открытом доступе, совместимых с универсальным SKILL.md форматом. Вот что реально стоит поставить для дизайн-работы.

### frontend-design (Anthropic) — обязательный старт

Официальный скилл от Anthropic, 277 000+ установок по состоянию на март 2026. Запрещает Inter, Roboto, Arial и Space Grotesk до того как написана первая строчка кода. Заставляет агента зафиксировать эстетическое направление заранее — брутализм, редакционный стиль, ретрофутуризм — и только потом переходить к реализации.

Параллельный скилл от OpenAI для Codex (frontend-skill) вышел вместе с GPT-5.4 с похожими правилами: никаких карусельных блоков без нарративного смысла, никакой UI из стопки карточек вместо нормального лейаута.

Установка:

# Claude Code
npx skills add https://github.com/anthropics/skills --skill frontend-design

# Codex
# frontend-skill устанавливается через marketplace внутри Codex

### impeccable — когда нужен тонкий контроль

Большинство дизайн-скиллов валят лендинг и дашборд в одну кучу. impeccable работает в двух режимах: brand (маркетинг, портфолио, редактура) и product (app UI, дашборды, внутренние инструменты). Это разные правила — и правильно что они разделены.

23 команды в одном скилле: typeset, colorize, animate, layout, bolder, quieter, delight. 27 детерминированных правил обнаружения антипаттернов в типографике, цвете, лейауте и движении.

npx skills add pbakaus/impeccable

### figma-implement-design — когда Figma-файл уже есть

Для случаев когда дизайн готов и нужен точный перевод в код, а не интерпретация. Обрабатывает все состояния компонента (hover, selected, empty, loading) без отдельных промптов. В паре с Playwright верифицирует визуальное соответствие по всем брейкпоинтам.

# Codex
figma-implement-design — через marketplace внутри Codex

### accesslint — accessibility до аудита, а не после

Проверка контрастности по WCAG AA и AAA, семантический HTML, обнаружение паттернов «цвет как единственный сигнал». Большинство устанавливают это после того как провалили аудит. Правильно — до.

git clone https://github.com/accesslint/claude-marketplace.git
cp -r claude-marketplace/plugins/accesslint/skills/* ~/.claude/skills

## ## Как написать свой скилл под бренд

Готовые скиллы решают общие проблемы. Собственный скилл решает вашу конкретную — и это принципиально другой уровень.

Пример минимального дизайн-скилла для команды:

---
name: brand-design
description: "Применяет дизайн-систему бренда при создании любого UI"
triggers:
  - "создай страницу"
  - "сделай компонент"
  - "лендинг"
  - "интерфейс"
---

# Brand Design System

## Цвета
- Primary: #1A1A2E
- Accent: #E94560
- Surface: #F5F5F0
- Text: #0F0F0F
- Никаких произвольных hex-значений вне этого списка

## Типографика
- Заголовки: Neue Haas Grotesk Display, 700
- Текст: Neue Haas Grotesk Text, 400/500
- Mono: JetBrains Mono
- Запрещено: Inter, Roboto, Arial, Space Grotesk

## Лейаут
- Сетка: 12 колонок, гаттер 24px
- Отступы: 4px-шаг (4, 8, 12, 16, 24, 32, 48, 64, 96)
- Никаких произвольных значений вне шкалы

## Компоненты
- Кнопки: только primary, secondary, ghost — никаких кастомных вариантов
- Карточки: border-radius 8px, тень только elevation-1 или elevation-2
- Формы: высота инпута 44px, label всегда сверху

## Голос бренда
- Минималистичный, без стоковых иллюстраций
- Плотная типографика, много воздуха вокруг неё
- Движение только там где оно добавляет иерархию

Три вещи которые делают скилл хорошим:

Конкретные запреты, а не только разрешения. «Используй нашу палитру» — слабо. «Никаких hex-значений вне этого списка» — сильно. Агент понимает границы лучше чем рекомендации.

Триггеры. Поле triggers в метаданных говорит агенту когда подгружать скилл. Без триггеров агент может его проигнорировать.

Голос и намерение. Токены — это необходимое условие. Но хороший скилл объясняет ещё и философию: почему минималистично, почему типографика в центре, почему без иллюстраций. Это то, что отличает результат с характером от технически правильного но пустого.

## ## Три уровня: AGENTS.md, SKILL.md, DESIGN.md

Важно понимать как три файла соотносятся — они решают разные задачи и работают на разных уровнях.

Рабочая схема для проекта с дизайн-системой:

repo/
├── AGENTS.md          # ссылается на DESIGN.md, общие правила
├── DESIGN.md          # токены, философия бренда
└── .claude/skills/
    └── brand-design/
        └── SKILL.md   # специфические UI-workflow

В AGENTS.md достаточно одной строки:

## UI & Design System
Follow ./DESIGN.md for all visual decisions. Use brand-design skill for UI tasks.

После этого агент знает систему во всех сессиях и у всех членов команды.

## ## Скилл как способ передать насмотренность

Самый честный аргумент в пользу кастомных скиллов — не производительность, а передача знания.

Насмотренность опытного дизайнера не передаётся через брифинг и не копируется через скриншоты. Но она передаётся через точно сформулированные ограничения и принципы. Именно это делает хороший скилл-файл.

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

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

## ## Куда смотреть дальше

• Официальные скиллы Anthropic: github.com/anthropics/skills
• Каталог сообщества (1234+ скиллов): npx antigravity-awesome-skills --claude
• Awesome Claude Skills: awesome-skills.com — 153 курированных скилла, обновлено май 2026
• Создать свой скилл: claude plugin create или просто создать папку .claude/skills/my-skill/SKILL.md