Design System

Design System

devotionn Updated

File contents

Design System

Use when

Creating or materially evolving a product-wide design system.

Procedure

  1. Inventory existing product surfaces, tokens, components, frameworks, themes, and accessibility requirements.
  2. Establish design principles tied to product/domain needs rather than aesthetic slogans.
  3. Define token architecture from primitives through semantic intent to component-level decisions.
  4. Define component anatomy, variants, states, composition rules, and accessibility contracts.
  5. Establish typography, spacing, layout/grid, iconography, motion, content, and responsive conventions.
  6. Map the system into each supported framework without erasing native framework conventions.
  7. Provide migration guidance for legacy values/components.
  8. Add deterministic validation where rules can be measured.
  9. Create representative rendered harnesses for system-level regression checks.

Failure conditions

A design system is not complete if it is only a palette or component gallery. It must encode reusable decisions, interaction/state contracts, accessibility requirements, and an implementation path.

devotionn/codex-ux-ui-agent-skills/tree/main/.agents/skills/design-system commit 50e2a46daf

Frequently asked questions

npx skillmds@latest add devotionn/design-system