How do I install the Design System skill?

Run npx skillmds@latest add dammianmiller/design-system in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Design System safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: makes network calls, reads secrets. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Design System?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Design System free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Design System?

DammianMiller (@dammianmiller) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Design System by dammianmiller — Agent Skill

Name: Design System
Rating: 4.2 (5 reviews)
Author: DammianMiller

Design System

Keep a project's UI/UX on its DESIGN.md design system. Use when building, editing, or reviewing any UI — components, CSS, styling, colors, typography, layout, themes. Auto-interrogates existing UI into a DESIGN.md and guides new UI to stay on-token.

DammianMiller Updated Sep 10, 2026

File contents

Design System (DESIGN.md)

UAP implements the DESIGN.md format — YAML design tokens (colors, typography, spacing, rounded, components) plus prose rationale — as a project's persistent visual identity for agents.

When to use

Before any UI/UX work: building or editing components, CSS/SCSS, Tailwind, styling, colors, typography, layout, themes, or design reviews.

Workflow

Ensure a DESIGN.md exists. If the project has none, derive one from the existing UI:
```
uap design interrogate          # scans CSS vars, Tailwind, theme files, usage
```
This writes DESIGN.md (refine its prose + token roles) and the gate's allow-list .uap/design-tokens.json.
Apply the tokens to new UI. Use the DESIGN.md color/spacing/typography tokens (or CSS var(--…) / {token.ref} references) — never hardcode off-token hex colors or off-scale spacing. The reactor injects the active design summary automatically when it detects UI work.
Keep it in sync. After editing DESIGN.md tokens, regenerate the gate allow-list:
```
uap design sync
```
Validate against the spec (uses the OSS @google/design.md CLI — WCAG contrast, broken token refs, structure):
```
uap design lint
```

Enforcement (hard gate)

The design-token-gate policy blocks UI edits (.css/.scss/.tsx/.jsx/.vue/ .svelte/.html/.astro) that introduce colors or spacing not in the design system. To resolve a block: use an existing token, add the new value to DESIGN.md then uap design sync, or bypass once with UAP_DESIGN_GATE_OFF=1. The gate is inactive (fails open) for projects without a DESIGN.md.

Verification

uap design context     # what the agent is told for UI work
uap design check --file path/to/Component.tsx   # would this edit be blocked?

---name: design-systemdescription: Keep a project's UI/UX on its DESIGN.md design system. Use when building, editing, or reviewing any UI — components, CSS, styling, colors, typography, layout, themes. Auto-interrogates existing UI into a DESIGN.md and guides new UI to stay on-token.---# Design System (DESIGN.md)UAP implements the [DESIGN.md](https://github.com/google-labs-code/design.md)format — YAML design tokens (colors, typography, spacing, rounded, components)plus prose rationale — as a project's persistent visual identity for agents.## When to useBefore any UI/UX work: building or editing components, CSS/SCSS, Tailwind,styling, colors, typography, layout, themes, or design reviews.## Workflow1. **Ensure a DESIGN.md exists.** If the project has none, derive one from the existing UI: ```bash uap design interrogate # scans CSS vars, Tailwind, theme files, usage ``` This writes `DESIGN.md` (refine its prose + token roles) and the gate's allow-list `.uap/design-tokens.json`.2. **Apply the tokens to new UI.** Use the DESIGN.md color/spacing/typography tokens (or CSS `var(--…)` / `{token.ref}` references) — never hardcode off-token hex colors or off-scale spacing. The reactor injects the active design summary automatically when it detects UI work.3. **Keep it in sync.** After editing DESIGN.md tokens, regenerate the gate allow-list: ```bash uap design sync ```4. **Validate** against the spec (uses the OSS `@google/design.md` CLI — WCAG contrast, broken token refs, structure): ```bash uap design lint ```## Enforcement (hard gate)The `design-token-gate` policy **blocks** UI edits (`.css/.scss/.tsx/.jsx/.vue/.svelte/.html/.astro`) that introduce colors or spacing not in the designsystem. To resolve a block: use an existing token, add the new value toDESIGN.md then `uap design sync`, or bypass once with `UAP_DESIGN_GATE_OFF=1`.The gate is inactive (fails open) for projects without a DESIGN.md.## Verification```bashuap design context # what the agent is told for UI workuap design check --file path/to/Component.tsx # would this edit be blocked?```

Frequently asked questions