← ClaudeAtlas

design-systemlisted

Import the product's Claude Design design system into docs/blueprint/design-system.md — the product-wide UX/visual contract (semantic tokens, typography, spacing, motion, accessibility standard, component behaviors) every blueprint screen references — and pin design.design_system_id in .config/vwf.yaml. A vwf foundation, mandatory once the product has a UI surface. Design systems are authored and iterated on claude.ai/design; this skill imports, it never authors visual language.
virajp/ai-plugins · ★ 1 · Web & Frontend · score 78
Install: claude install-skill virajp/ai-plugins
# design-system — Import the Claude Design Design System **Claude Design owns design-system authoring.** You pick or build the design system on claude.ai/design — its stock systems are strong, and the canvas is where visual language is judged. This skill does one job: resolve the design system, **import** it into `docs/blueprint/design-system.md`, and **pin** `design.design_system_id` in `.config/vwf.yaml`. The repo doc still matters — it is the **offline contract**: the design-system reviewer bar, the execute ux gate, and the coder consume it without network or claude.ai auth, and it is git-versioned and graphify-ingestable. The doc records the *decisions* — semantic token values, type and spacing scales, motion principles, the accessibility standard, global component behaviors — never the component library, CSS framework, or design-file mechanics (that is `plan`). **Drift is one-way.** The canvas is the source; the doc is its distillation. Hand-edits to the doc are drift — resolved by changing the design system on the canvas and re-running this skill, never by publishing the doc back. ## Doc Paths | Doc | Path | | ------------- | ------------------------------------------------------------------------------------------ | | Registry | `docs/blueprint/registry.yaml` | | Design system | `docs/blueprint/design-syst