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

> Практическая схема: когда начинать с Claude Design, когда писать project skill для Claude Code, когда проверять community UI/UX skill, а когда сначала чинить саму дизайн-систему.

- URL: https://blog.laozhang.ai/ru/posts/claude-design-system-skill
- Published: 2026-04-20
- Updated: 2026-10-10
- Author: LaoZhang AI Team (https://blog.laozhang.ai/ru/about)
- Topic: Claude Code
- Tags: Claude Design, Claude Code, Skills, Design Systems, Anthropic

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

| Задача читателя | Первый маршрут |
|---|---|
| Сделать прототип, one-pager, слайд или визуальную концепцию в Claude | Используйте Claude Design (все тарифы с 8 октября 2026 года) |
| Заставить Claude Code соблюдать компоненты и tokens репозитория | Используйте project skill в `.claude/skills/` |
| Улучшить UI/UX-качество первых вариантов | Проверьте community skill до установки |
| Команда постоянно спорит о едином UI | Сначала чините дизайн-систему и проверки |

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

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

> Граница фактов: продуктовые и availability-утверждения в статье опираются на [анонс Claude Design](https://www.anthropic.com/news/claude-design-anthropic-labs), [Skills overview](https://docs.claude.com/en/docs/agents-and-tools/agent-skills/overview), [документацию Claude Code skills](https://code.claude.com/docs/en/skills) и [документацию custom skills](https://docs.claude.com/en/docs/agents-and-tools/agent-skills/custom-skills). Названия third-party skills ниже являются примерами для проверки, а не endorsement от Anthropic.

![Схема выбора между Claude Design, project skill, community UI UX skill и governance](https://blog.laozhang.ai/posts/ru/claude-design-system-skill/img/route-board.jpg)

Русскоязычные материалы по теме часто смешивают видео про 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](https://support.claude.com/ru/articles/14604416)). Если пункта всё равно нет, проверьте, включён ли «Cloud code execution and file creation» в Settings > Capabilities, а на Enterprise обратитесь к владельцу. Отсутствие пункта в меню — вопрос настройки, а не неустановленного skill.

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

Теперь эти два слоя пересекаются. По [справке о настройке дизайн-системы](https://support.claude.com/ru/articles/14604397), дизайн-системы в 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.

![Анатомия project skill для дизайн-системы в Claude Code](https://blog.laozhang.ai/posts/ru/claude-design-system-skill/img/skill-anatomy.jpg)

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

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

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

```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](https://blog.laozhang.ai/ru/posts/claude-code-best-skills). Эта статья уже уже: она про UI-работу, дизайн-систему и границу между продуктом, repo workflow и community packages.

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

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

![Checklist для проверки community Claude UI UX skills](https://blog.laozhang.ai/posts/ru/claude-design-system-skill/img/trust-checklist.jpg)

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

**Происхождение.** Кто автор, где репозиторий, есть ли свежие изменения, объяснен ли 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](https://blog.laozhang.ai/ru/posts/claude-code-best-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](https://blog.laozhang.ai/ru/posts/claude-code-memory).

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

### Есть ли официальный 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 должен усиливать надежную систему, а не маскировать слабую.

## Источники

Внешние страницы, на которые ссылается это руководство, в порядке упоминания. Последнее обновление: 2026-10-10.

- [анонс Claude Design](https://www.anthropic.com/news/claude-design-anthropic-labs) (anthropic.com)
- [Skills overview](https://docs.claude.com/en/docs/agents-and-tools/agent-skills/overview) (docs.claude.com)
- [документацию Claude Code skills](https://code.claude.com/docs/en/skills) (code.claude.com)
- [документацию custom skills](https://docs.claude.com/en/docs/agents-and-tools/agent-skills/custom-skills) (docs.claude.com)
- [справка Claude Design](https://support.claude.com/ru/articles/14604416) (support.claude.com)
- [справке о настройке дизайн-системы](https://support.claude.com/ru/articles/14604397) (support.claude.com)