Claude Design или skill для дизайн-системы: какую поверхность выбрать

Начинайте не с установки пакета, а с выбора слоя. На 10 октября 2026 года Claude Design — официальный продуктовый маршрут Anthropic для визуальных артефактов, и он есть на всех тарифах, включая бесплатный. Project skill в Claude Code лучше подходит, когда код должен следовать tokens, компонентам, примерам и проверкам конкретного репозитория. Community UI/UX skill может улучшить стартовые дизайнерские решения, но только после проверки файлов и скриптов. Если же дизайн-система слаба сама по себе, новый skill просто добавит уверенности поверх неясного источника.

Главное правило остановки: если у вас нет надежных tokens, компонентных примеров, скриншотов, accessibility-правил и acceptance checks, еще один skill не решит проблему. Он только сделает слабую систему более убедительно оформленной.

Здесь смешаны четыре разные задачи

Граница фактов: продуктовые и availability-утверждения в статье опираются на анонс Claude Design, Skills overview, документацию Claude Code skills и документацию custom skills. Названия third-party skills ниже являются примерами для проверки, а не endorsement от Anthropic.

Русскоязычные материалы по теме часто смешивают видео про Claude Design, статьи про Claude Code skills, каталоги UI/UX skills, Reddit и локальные гайды. Это нормальный сигнал спроса, но плохой mental model для принятия решения. Вопрос не в том, какой пакет красивее. Вопрос в том, какой слой должен отвечать за результат.

Claude Design — это продуктовая поверхность. Она нужна, когда работа начинается с визуального результата: макет, прототип, slide, one-pager, брендовая концепция или направление интерфейса.

Project skill в Claude Code — это поверхность workflow внутри репозитория. Она нужна, когда Claude Code должен читать локальные правила, компоненты, примеры и проверки перед UI-изменением.

Community UI/UX skill — это ускоритель, а не authority. Он может дать полезный процесс, taste defaults или checklist, но он должен заслужить доверие происхождением и содержимым.

Governance дизайн-системы — это источник истины. Tokens, компоненты, Storybook, screenshots, interaction rules, accessibility standards и CI checks должны существовать независимо от skill.

Для визуальных артефактов сначала смотрите Claude Design

Anthropic представила Claude Design через Anthropic Labs 17 апреля 2026 года. В анонсе продукт описан как способ создавать designs, prototypes, slides, one-pagers и другие визуальные артефакты с Claude. На момент запуска Claude Design работал на Claude Opus 4.7, был в research preview и постепенно открывался для Claude Pro, Max, Team и Enterprise.

Этих ограничений доступа больше нет. С 16 сентября 2026 года Claude Design работает в любом разговоре с Claude (в поле сообщения «Output» > «Design» или шаблон Design на вкладке Artifacts), а в Claude Code — через /design. 8 октября он вышел из беты и включён по умолчанию на Free, Pro, Max, Team и Enterprise; на Enterprise он включается по умолчанию с 15 октября, владелец может сделать это раньше в Organization settings > Artifacts. Отдельный сайт claude.ai/design закрывается 14 декабря 2026 года (справка Claude Design). Если пункта всё равно нет, проверьте, включён ли «Cloud code execution and file creation» в Settings > Capabilities, а на Enterprise обратитесь к владельцу. Отсутствие пункта в меню — вопрос настройки, а не неустановленного skill.

Фраза про применение командной дизайн-системы в Claude Design тоже не означает локальный skill. Это продуктовая возможность при наличии доступа к системе. .claude/skills/design-system/SKILL.md — другое: файл workflow для Claude Code, который говорит агенту, как работать внутри репозитория.

Теперь эти два слоя пересекаются. По справке о настройке дизайн-системы, дизайн-системы в Claude — это артефакты, в бете на Pro, Max, Team и Enterprise (на Free их нет). Создать её можно в чате из брендовых материалов, презентаций, логотипов, шрифтов или файлов Figma, а если дизайн-система уже существует как React-компоненты, запустите /design-sync в Claude Code: команда читает tokens и компоненты напрямую. Команды, переходящие с отдельного сайта, используют «Migrate team design systems». Готовую дизайн-систему можно использовать в любом чате, включая Claude Code. Как мы это понимаем: справка описывает цвета, шрифты, компоненты и паттерны вёрстки, которые Claude применяет к новым дизайнам и слайдам, и ничего не говорит о запуске tests, CI или правил репозитория. Изменения кода по-прежнему остаются за project skill и детерминированными проверками.

Если вы просите Claude показать визуальное направление, начните с Claude Design. Если нужно менять production code, повторно использовать компоненты, проходить tests и соблюдать repo-specific rules, переходите к Claude Code.

Для repo-fidelity пишите project skill

Project skill для дизайн-системы полезен тогда, когда Claude Code регулярно выполняет UI-задачи в одном репозитории. Он не должен быть длинным prompt в стиле “сделай красиво”. Он должен направлять Claude к источникам, где уже определены красота, консистентность, доступность и implementation fit.

Базовый путь:

.claude/skills/design-system/SKILL.md

Минимальный вариант:

---
name: design-system
description: Use when UI work must follow this repository's tokens, components, examples, accessibility rules, and visual QA checks.
---

# Design System Skill

Use when:
- creating or editing UI in this repository
- translating a mockup into production components
- reviewing visual consistency before a frontend PR

Read first:
- `design/tokens.json`
- `src/components/ui/`
- `storybook/`
- `docs/design-system.md`

Rules:
- use existing components before creating new primitives
- preserve token names instead of hard-coding colors or spacing
- check responsive, keyboard, and contrast behavior
- explain any component divergence before editing

Сильный skill не пытается вместить всю дизайн-систему в Markdown. Он отвечает на вопросы: когда включаться, какие файлы читать первыми, какие правила нельзя нарушать, какие проверки должны пройти. Источником остаются tokens, компоненты, документация и tests.

Если вы только выбираете общую стратегию skills, сначала посмотрите гайд по Claude Code skills. Эта статья уже уже: она про UI-работу, дизайн-систему и границу между продуктом, repo workflow и community packages.

Community UI/UX skills проверяйте до установки

В русскоязычной экосистеме видно много интереса к UI/UX skills: видео, списки, Habr, Reddit, локальные переводы и каталоги. Это полезный рынок, но не официальный статус.

Проверьте четыре вещи.

Происхождение. Кто автор, где репозиторий, есть ли свежие изменения, объяснен ли intended workflow. Один viral post не является достаточным основанием.

Содержимое. Откройте SKILL.md, references, examples и scripts. Если skill состоит из эстетических лозунгов, он вряд ли поможет production UI. Если есть scripts, прочитайте их до запуска.

Риск. Посмотрите install path, shell commands, file access, network access и любые инструкции, где Claude должен выполнять шаги без human review.

Fit. Skill под React и shadcn может быть бесполезен для native app. Style pack может улучшить первые варианты, но все равно не удержит компонентную систему. Хороший package уменьшает повторяющуюся работу, а не заменяет источник правды.

Практический порядок: inspect first, install second, test on disposable branch. Оставляйте только то, что улучшает реальную задачу.

Иногда новый skill — неправильная абстракция

Используйте CLAUDE.md, если правило должно быть always-on: naming conventions, предпочтительная component library, accessibility baseline и общие ожидания от репозитория.

Используйте source-controlled design assets, если проблема в отсутствии истины. Tokens, stories, screenshots, interaction notes и review criteria должны жить в репозитории или в официальной системе команды. Skill может ссылаться на них, но не должен быть единственным домом.

Используйте hooks или CI, если правило должно enforced. Visual regression, typecheck, lint и accessibility checks лучше прозы, когда ошибка должна блокировать merge.

Используйте MCP или другую интеграцию, если Claude нужен внешний доступ: private Figma, token service, issue tracker или documentation system. Skill может описать процедуру, но tool connection поставляет данные. Для этой развилки подходит гайд по Claude Code MCP servers, а для выбора между памятью, skills и MCP — Claude Code memory vs MCP vs skills.

Минимальный порядок внедрения

1. Откройте Claude Design через «Output» > «Design» или вкладку Artifacts — с 8 октября 2026 года он есть на всех тарифах. Если компоненты на React и у вас Pro или выше, /design-sync в Claude Code превратит их в дизайн-систему, которую применяет Claude Design.
2. Инвентаризируйте дизайн-систему в репозитории: tokens, компоненты, examples, screenshots, accessibility rules, checks.
3. Создавайте .claude/skills/design-system/SKILL.md только когда Claude Code должен регулярно использовать эти материалы.
4. Держите skill процедурным: когда применять, что читать, что нельзя нарушать, что запускать.
5. Проверьте skill на маленьком UI-изменении: reuse компонентов, token fidelity, responsive, keyboard и contrast.
6. Community UI/UX skill пробуйте только после repo-owned route и только на branch.

Если проблема в постоянных preferences, а не в task-specific method, начните с Claude Code memory guide.

Часто задаваемые вопросы

Есть ли официальный Anthropic skill для дизайн-системы?

Не в виде одного официального продукта с таким названием. Ближе всего — дизайн-системы Claude Design (бета, Pro и выше), которые /design-sync в Claude Code строит из React-библиотеки компонентов. Claude Design — официальный продукт для визуальной работы. Claude Code skills — официальный механизм reusable workflow. Skill в .claude/skills/ для дизайн-системы вы создаете как project workflow, а third-party UI/UX skills нужно проверять отдельно.

Дизайнеру начинать с Claude Design или Claude Code?

Если нужен визуальный артефакт, начинайте с Claude Design. Если результат должен изменить repo, переиспользовать компоненты и пройти checks, начинайте с Claude Code и project skill. С осени 2026 года они связаны напрямую: /design в Claude Code создаёт и правит дизайны, а /design-sync превращает библиотеку компонентов в дизайн-систему.

Что класть в project skill для дизайн-системы?

В SKILL.md кладите процедуру и ссылки на реальные источники: token files, component directories, Storybook, docs, screenshots, accessibility rules и проверки. Skill — это метод, не сама дизайн-система.

Community UI/UX skills безопасны?

Иногда да, но безопасность зависит от автора, файлов, scripts, permissions и stack fit. Читайте package до установки и тестируйте на branch.

Когда лучше не добавлять skill?

Когда не хватает source files, checks или external access. Сначала чините tokens, components, examples, CI или integrations. Skill должен усиливать надежную систему, а не маскировать слабую.