К основному содержанию
скилл CX Codex

design-system-governance — скилл для Claude Code: правила развития

Скилл описывает, как дизайн-система меняется: кто владеет, кто предлагает правки, как версионировать и что выводить из обращения. Нужен, когда над системой работает несколько команд.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add Owl-Listener/designer-skills --skill design-system-governance -a claude-code
Открыть на GitHub

Что делает design-system-governance

Скилл задаёт вопросы, на которые у модели обычно нет готового ответа: кто владеет системой, кому можно в неё писать, как принимаются решения по изменениям, как нумеруются версии и что делать с ломающими правками. Внутри разобраны три модели владения — централизованная, федеративная и гибридная, с плюсами и минусами каждой.

Дальше идёт процесс в семь шагов: заявка, разбор, проектирование, ревью, сборка и тесты, релиз, оповещение потребителей. Версионирование опирается на semver: патч для исправлений, минор для новых компонентов, мажор для ломающих изменений. Отдельные разделы — вывод компонентов из обращения и политика ломающих правок.

Скилл текстовый, никаких скриптов и ключей не требует. Полезен, когда у вас уже есть система и спор о том, кто и как в неё добавляет компоненты. Если команда одна и правки идут напрямую, весь этот аппарат только замедлит работу.

Какие задачи решает

  • договориться, кто владеет компонентами дизайн-системы
  • описать путь заявки на новый компонент от идеи до релиза
  • выбрать между централизованной и федеративной моделью
  • ввести semver и changelog для библиотеки компонентов
  • спланировать вывод устаревшего компонента без сюрпризов для команд

Примеры запросов агенту

  • Опиши модель владения дизайн-системой для трёх продуктовых команд
  • Составь процесс контрибуции нового компонента: от заявки до релиза
  • Распиши политику ломающих изменений и миграции для нашей библиотеки

Как установить design-system-governance

1Через Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill design-system-governance -a claude-code

2Вручную: положить файлы

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

Папка скилла целиком; для одного проекта — .claude/skills/design-system-governance/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Из того же набора109

research-repository Помогает спроектировать базу исследовательских инсайтов и систему тегов, чтобы продуктовые выводы накапливались, а не терялись в папках со звонками. CX Codex +1 1 700установок doherty-threshold Скилл задаёт пороги отклика для интерфейсов и подсказывает, какую обратную связь показать во время ожидания. CX Codex +1 1 700установок content-strategy Помогает решить, какой контент нужен продукту, где он лежит и кто за него отвечает. Пригодится, когда проблема в самом контенте, а не в вёрстке. CX Codex +1 1 700установок millers-law Разбивает интерфейс на смысловые группы примерно по четыре элемента под ограничения рабочей памяти. Пригодится при структурировании меню, шагов онбординга и длинных форм. CX Codex +1 1 700установок design-debt-audit Разбирает накопленные несоответствия в интерфейсе по категориям и выдаёт план правок с приоритетами. Нужен, когда продукт рос годами и дизайн поехал. CX Codex +1 1 700установок von-restorff-effect Скилл учит агента выделять главное целевое действие в интерфейсе за счёт эффекта изоляции. Он пригодится, когда одна кнопка или тариф должны сразу бросаться в глаза. CX Codex +1 1 700установок hicks-law Скилл применяет закон Хика: время решения растёт с числом одновременных вариантов. Пригодится, когда на экране слишком много кнопок и пунктов. CX Codex +1 1 700установок fitts-law Скилл для ИИ-агента, который подсказывает размеры и расположение кнопок по закону Фиттса. Пригодится при вёрстке интерфейсов и мобильных экранов. CX Codex +1 1 700установок

Похожие

governance plugin87 Скилл ведёт правила развития дизайн-системы: SemVer для токенов и компонентов, порядок приёма правок, депрекация и оповещение о изменениях. CX Codex +1 474установок stitch::manage-design-system официальный google-labs-code Управляет дизайн-системой Stitch через MCP-инструменты: извлекает данные экранов, создаёт токены и применяет их к выбранным экранам. CX Codex +1 10 300установок figma-create-design-system-rules официальный openai Генерирует правила дизайн-системы для кодовой базы при переносе макетов из Figma. Помогает агентам соблюдать структуру компонентов и токенов проекта. CX Codex +1 2 900установок migrate-design-system plugin87 Скилл сопоставляет ваши дизайн-токены с внешней системой: Material 3, Apple HIG, Fluent, Carbon, shadcn/ui. Пригодится при миграции или переходе на чужой стек. CX Codex +1 487установок design-system-generator OneWave-AI Собирает дизайн-систему из токенов, базовых компонентов и документации. Пригодится, когда проект обзавёлся вторым экраном и цвета начали расползаться. CX Codex +1 300установок extract-design-system arvindrk Скилл находит базовые токены дизайна на веб-странице и создаёт начальные файлы tokens.json и tokens.css. Он полезен для быстрого старта стилизации в новом репозитории. CX Codex +1 130 700установок

Вопросы о design-system-governance

Как установить design-system-governance в Claude?

Выполните npx skills add Owl-Listener/designer-skills --skill design-system-governance -a claude-code. Скилл появится в ~/.claude/skills/design-system-governance/SKILL.md.

Что делает design-system-governance?

Описывает процессы и роли, по которым дизайн-система развивается: модели владения, приём вкладов, версионирование, вывод компонентов из обращения и работа с ломающими изменениями.

Чем этот скилл отличается от design-system-adoption?

Governance отвечает за то, как система меняется. Adoption из designer-toolkit — за то, как её внедряют в команды. Для истории дизайн-файлов есть version-control-strategy из design-ops.

Исходный текст

SKILL.md · MIT
---
name: design-system-governance
description: Define how the system evolves — contribution model, versioning, deprecation, and change management. Use when multiple teams contribute. For driving uptake use `design-system-adoption` (designer-toolkit); for design file history use `version-control-strategy` (design-ops).
---
# Design System Governance
You are an expert in the operational and organizational structures that keep a design system healthy over time.
## What You Do
You define the processes, roles, and decision frameworks that allow a design system to evolve without fragmenting — so contributors know how to participate, consumers know how to depend on it, and the system stays coherent as the product scales.
## Core Governance Questions
A governance model must answer:
1. **Who owns the system?** Dedicated team, federated contributors, or hybrid?
2. **Who can contribute?** Anyone, or only the core team?
3. **How are changes proposed and decided?** Request process, RFC, or open pull requests?
4. **How is the system versioned?** How do consumers know what changed?
5. **How are breaking changes handled?** How much notice, what migration support?
6. **What gets deprecated, and how?** Timeline and removal process?
7. **How is quality maintained?** Review process before merging new components?
## Ownership Models
### Centralized (Core Team)
A dedicated design system team owns all components. Consumers submit requests; the core team builds and maintains.
- High consistency, high quality
- Can become a bottleneck; slow to respond to product team needs
- Works best in large orgs with budget for a dedicated team
### Federated (Distributed)
Any product team can contribute components. A lightweight governance layer reviews and accepts contributions.
- Fast to grow; reflects actual product needs
- Requires strong review standards to maintain quality
- Works best in mid-size orgs with mature design practice
### Hybrid
Core team owns foundational components; product teams own domain-specific components with support from core.
- Balances quality with velocity
- Requires clear ownership boundaries ("core" vs "extended" library)
- Most common model in practice
## Contribution Process
Define the lifecycle of a new component or change:
1. **Request/Proposal**: product team identifies a need; submits a request with use case and context
2. **Triage**: core team assesses: is this generalizable? Does something similar exist? What's the priority?
3. **Design**: component designed and specced (states, variants, accessibility, tokens)
4. **Review**: design critique + accessibility review + engineering feasibility
5. **Build and test**: implementation, documentation, accessibility testing
6. **Release**: versioned release with changelog entry
7. **Communication**: announce to consumers with migration notes if applicable
## Versioning
Use semantic versioning (semver) as the communication contract:
| Version type | When to use |
|---|---|
| **Patch** (1.0.x) | Bug fixes, documentation corrections, no API changes |
| **Minor** (1.x.0) | New components or variants added; backwards compatible |
| **Major** (x.0.0) | Breaking changes: renamed props, removed components, changed behavior |
- Tag every release in version control
- Maintain a public changelog — consumers need to know what changed and why
- Keep major version bumps rare and well-communicated
## Deprecation Process
- Announce deprecation with the release that introduces the replacement
- Provide a migration guide: what replaces the deprecated item, with code examples
- Keep deprecated items functional for at least one minor version cycle before removal
- Use in-product warnings (console warnings, Figma annotations) to surface deprecations to consumers
- Communicate timelines clearly: "Deprecated in 2.3, removed in 3.0 (Q3)"
## Breaking Change Policy
Before releasing a breaking change:
- Give consumers a migration path (a codemod, a replacement component, a spec change)
- Document the change in the changelog with "BREAKING:" prefix
- Provide a migration guide in docs
- Consider a compatibility shim for critical consumers who can't migrate immediately
## Quality Standards
Define what a component must have before it can enter the system:
- Documented props, variants, and states
- Accessibility review (WCAG AA minimum, keyboard navigation, screen reader tested)
- Responsive behavior specified
- Design token usage (no hardcoded values)
- Usage guidance (when to use, when not to use)
- Design file component (Figma or equivalent) synced with code
## Best Practices
- Publish a clear contribution guide so product teams know how to participate
- Hold regular office hours or open reviews — governance works better as a conversation than a ticket queue
- Review adoption metrics (which components are used most/least) to guide investment
- Document decisions as well as outcomes — why a component works the way it does prevents revisiting settled debates
- Treat governance as a product: it has users (contributors and consumers), and it needs iteration

© Owl-Listener · MIT · Owl-Listener/designer-skills

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой