# Design System

> Design System

- Skill: `devotionn/design-system` (Agent Skill)
- Install (CLI): `npx skillmds@latest add devotionn/design-system`
- Raw SKILL.md: https://api.skillmd.com/api/skills/devotionn/design-system/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: devotionn (https://skillmd.com/u/devotionn)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/devotionn/design-system

---

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