본문으로 건너뛰기
cccskills
무료GitHub에 공개

design-system-governance

Define rules for maintaining a shared design system across teams. Clarify ownership, contribution reviews, release numbering, and how to retire components, giving contributors and users a clear process for managing changes.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

원문원문 설명 보기

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).

연동 도구Figma

실행 점수 미검증

설치 방법 보기

이럴 때 유용합니다

  • Clarifying ownership across design teams
  • Defining component contribution and review steps
  • Planning breaking changes and migration support
  • Setting quality standards for shared components

포함된 파일(1)

  • SKILL.md5.0 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

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 typeWhen 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

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Plan A/B experiments to measure the effect of a design change. Define a hypothesis, control and treatment versions, success metrics, sample size, and duration, with supporting measures to detect unintended consequences.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Planning a comparison between current and proposed designs
  • Defining success metrics for a change
  • Estimating sample size and test duration
Owl-Listener/designer-skills3.1천2026년 9월 6일 업데이트

Assess an existing interface against WCAG 2.2 accessibility guidelines. Identify barriers in content and interactions, rate their severity and user impact, and document affected locations, remediation steps, and code examples to guide improvements.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Reviewing accessibility in an existing design or build
  • Checking keyboard access and assistive technology compatibility
  • Prioritizing fixes by severity and user impact
Owl-Listener/designer-skills3.1천2026년 9월 6일 업데이트

Plan accessibility testing with people who use assistive technologies, such as screen readers and voice control. Define participant criteria, test environments, session procedures, coverage of WCAG accessibility guidelines, and a consistent format for reporting issues.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Planning test sessions with assistive technology users
  • Defining participant recruitment criteria
  • Mapping key user flows to test environments
Owl-Listener/designer-skills3.1천2026년 9월 6일 업데이트

Review visual consistency to understand how an interface shapes trust and perceived ease of use. Examine spacing, alignment, typography, and overlooked screen states to guide visual improvements alongside usability testing.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Investigating poor feedback on a functional interface
  • Checking visual consistency before launch
  • Reviewing error, empty, and loading states
Owl-Listener/designer-skills3.1천2026년 9월 6일 업데이트

Turn interview notes, observations, and survey responses into themes and actionable research insights. Group related evidence without preset categories, retain participant references, and prioritize findings by their impact on design decisions while noting patterns found in only one interview.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Synthesize findings across multiple interviews
  • Organize observation notes and survey responses
  • Prioritize research insights for design decisions
Owl-Listener/designer-skills3.1천2026년 9월 6일 업데이트

Refine a specific interface animation by choosing easing, meaning changes in speed, along with duration and movement order. Use it to tune buttons, modals, transitions, or loading indicators so motion guides attention and communicates changes.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Tune how a modal enters and exits
  • Adjust button and toggle animations
  • Coordinate the order of related movements
Owl-Listener/designer-skills3.1천2026년 9월 6일 업데이트

Owl-Listener의 스킬 모두 보기

이 스킬의 문제 신고