Design System

Design System

Invoke as $design-system.

Use this skill after $consolidate-variations to lock design decisions into machine-readable tokens before implementation begins. It bridges the gap between prose UI specs and code — without it, agents interpret "dark surface with primary accent" differently each session, causing UI consistency drift.

Also use this skill retroactively on an existing codebase (--scan) to generate a DESIGN.md from tokens already in use.

Modes

• Default: reads specs/ui-final-*.md (or a user-provided spec path) and extracts tokens.
• --scan: scans the codebase for CSS custom properties, Tailwind config, theme files, and component patterns to reverse-engineer a DESIGN.md.
• --update: reads an existing DESIGN.md alongside new spec changes and produces an updated version.

Workflow

1. Resolve context

   • Read .agents/project.json, README.md, AGENTS.md, CLAUDE.md when present.
   • Locate the input source:
     • Default: find specs/ui-final-*.md or accept a path argument.
     • --scan: find tailwind.config.*, globals.css, CSS custom property files, theme files, component directories, and any existing design token files.
     • --update: read the existing DESIGN.md and the changed spec or codebase files.
   • If no input can be found, ask the user to point to the source.

2. Extract raw tokens

   • From spec: pull every concrete visual decision — colors (hex, HSL, OKLCH), font families, font sizes, weights, line heights, spacing values, border radii, shadows, elevation layers, and component-level styling.
   • From codebase (--scan): parse Tailwind config extends, CSS custom properties, repeated Tailwind classes, theme provider values, and component prop defaults. Deduplicate and group by semantic role.
   • Normalize all colors to hex. Record OKLCH or HSL originals as comments when present.
   • Identify semantic roles: primary, secondary, accent, surface, background, on-primary, on-surface, error, warning, success, info, border, muted.

3. Interview to confirm tokens

   • Present the extracted token inventory grouped by category (Colors, Typography, Spacing, Shapes, Elevation, Components).
   • For each category, ask one primary confirmation or adjustment question per turn. If the session is already in Plan mode and there are 2-3 concrete options for the current token decision, prefer request_user_input; otherwise ask one concise plain-text question.
     • Are these the correct values? Flag any that look like defaults vs intentional choices.
     • Are there missing semantic roles? (e.g., no error color found, no hover state defined)
     • For typography: confirm the scale — is this intentional or inherited from a framework default?
     • For spacing: confirm the scale — 4px base? 8px base? Irregular?
   • Do not batch unrelated token categories into the same question. Continue one category or decision at a time so the user can have a deeper discussion before moving on.
   • Record user confirmations and adjustments.

4. Validate accessibility

   • Check WCAG 2.1 AA contrast ratios for all foreground/background color pairings:
     • Normal text: minimum 4.5:1
     • Large text (≥18px bold or ≥24px): minimum 3:1
     • UI components and graphical objects: minimum 3:1
   • Report failures with the specific pairing, current ratio, and minimum required.
   • Resolve failures one at a time: adjust the color, accept the risk, or mark as decorative-only. If already in Plan mode, request_user_input may present those options for the current failure; otherwise ask one concise plain-text question.

5. Draft DESIGN.md

   • Follow the Google Labs Stitch format. The file has two parts:

   Part 1 — YAML frontmatter with machine-readable tokens:

   ---
   version: "1.0"
   name: "Project Design System"
   colors:
     primary: "#1A1C1E"
     on-primary: "#FFFFFF"
     secondary: "#4A6741"
     surface: "#FAFAFA"
     background: "#FFFFFF"
     error: "#BA1A1A"
     border: "#E0E0E0"
   typography:
     h1:
       fontFamily: "Inter"
       fontSize: "2.25rem"
       fontWeight: 700
       lineHeight: 1.2
     body:
       fontFamily: "Inter"
       fontSize: "1rem"
       fontWeight: 400
       lineHeight: 1.5
   spacing:
     xs: "4px"
     sm: "8px"
     md: "16px"
     lg: "24px"
     xl: "32px"
   rounded:
     sm: "4px"
     md: "8px"
     lg: "16px"
     full: "9999px"
   elevation:
     sm: "0 1px 2px rgba(0,0,0,0.05)"
     md: "0 4px 6px rgba(0,0,0,0.1)"
     lg: "0 10px 15px rgba(0,0,0,0.1)"
   components:
     button:
       backgroundColor: "{colors.primary}"
       textColor: "{colors.on-primary}"
       rounded: "{rounded.md}"
       paddingX: "{spacing.lg}"
       paddingY: "{spacing.sm}"
     card:
       backgroundColor: "{colors.surface}"
       border: "1px solid {colors.border}"
       rounded: "{rounded.lg}"
       padding: "{spacing.lg}"
       shadow: "{elevation.sm}"
   ---
   

   Part 2 — Prose sections (all optional, must appear in this order if present):

   Each prose section must be written as a Markdown heading, not a bold paragraph label. Use ## Overview, ## Colors, ## Typography, and the other section names below exactly when present.

   1. ## Overview — brand identity, visual tone, and design philosophy.
   2. ## Colors — palette rationale, dark mode strategy, semantic color usage.
   3. ## Typography — type scale rationale, heading hierarchy, body text rules.
   4. ## Layout & Spacing — grid strategy, spacing scale rationale, container max-widths, content density.
   5. ## Elevation & Depth — shadow usage, layering rules, z-index strategy.
   6. ## Shapes — corner radius philosophy, form language.
   7. ## Components — styling guidance for UI atoms including state variants (hover, active, disabled, focus). Reference tokens using {token.path} syntax.
   8. ## Do's and Don'ts — concrete guardrails. Include at least: colors to never use, spacing anti-patterns, component misuse patterns observed in prior implementations.
   • Use {colors.primary} cross-reference syntax in component definitions and prose.
   • Present the draft to the user and ask one concise approval or adjustment question before writing.

6. Write deliverables

   • Write DESIGN.md to the project root.
   • If --update: archive the previous version to docs/history/archive/YYYY-MM-DD/HHMMSS/DESIGN.md first.

Deliverables

• DESIGN.md in the project root — the single source of truth for visual identity, consumed by both Claude Code and Codex.
• Interview log written to design-system-interview.md in the project root.

Constraints

• Do not invent token values. Every value must come from the spec, codebase scan, or explicit user confirmation.
• Do not skip the accessibility check. Report all contrast failures even if the user is likely to accept them.
• Do not include tokens for features that don't exist yet — scope to the current spec or codebase.
• Keep the YAML frontmatter machine-readable. No comments in YAML. Put rationale in prose sections.
• Token cross-references use curly braces: {colors.primary}, {spacing.md}, {rounded.lg}.
• When updating an existing DESIGN.md, preserve token names and values that haven't changed. Only modify tokens that the new spec explicitly changes.

Alignment Page

When this skill produces durable deliverables (research, specs, plans, reports, prototypes, or any document output), build a full-depth HTML alignment page at alignment/design-system-{topic}.html. Use a normalized topic slug derived from the app, feature, research subject, report subject, or output filename.

Full content requirement. The alignment page must contain the complete content of every proposed markdown deliverable -- every section, every finding, every detail, every list item. It is a thorough interactive review document, not a summary. Render the full deliverable content in clean, readable HTML with appropriate hierarchy, styling, and navigation. If the skill writes multiple scoped deliverables in one run, build one alignment page that contains all deliverables with anchor-linked navigation. Durable tracker artifacts, such as research/assumption-tracker.md, remain canonical markdown outputs but must also be fully rendered into the alignment page before approval.

Dark-mode styling. Use a dark color scheme by default. Base CSS variables: --bg: #0d1117; --surface: #161b22; --border: #30363d; --text: #c9d1d9; --text-muted: #8b949e; --accent: #58a6ff; --green: #3fb950; --red: #f85149; --orange: #d29922; --purple: #bc8cff;. Apply background: var(--bg); color: var(--text); on body. Use --surface for cards, nav, and table headers. Use --border for all borders. Use --purple for question blocks and gate headings. Use --accent for links and section headings. Keep headings color: #fff or var(--accent) for hierarchy. Question block backgrounds should use #1c2333.

Alignment gates. Treat gates as explicit review sections inside the HTML page. A gate blocks finalization until its required inline questions are answered and compiled into YAML. Include every gate that applies to the skill output, and include these gate types whenever relevant: evidence coverage, assumptions/confidence, scope/non-goals, candidate/verdict decisions, artifact destination, proposed file changes, coverage checkpoint, and post-approval route.

Report-only research gates. For report-only or pre-approval research skills, the alignment page must explicitly contain evidence coverage, assumptions/confidence, recommended path, proposed file changes, and approval gates before any canonical research, spec, or task file is created or updated.

Required inline questions. Each gate must contain at least one required inline question placed directly under the content it governs, inside a visually distinct question block. Each question must use radio-button inputs and include two standing options after the skill-generated choices: "Other / None of the above" backed by a multi-line text box for free-form input, and "Need clarification" backed by an optional notes box where the user can explain what is unclear. When any radio option other than "Other" or "Need clarification" is selected, show an optional "Additional notes" text box beneath it so the user can qualify their choice. Generate questions based on what genuinely needs user input -- do not add filler questions. Do not create a separate bottom "Decisions & Clarifications" section.

Gate YAML contract. At the bottom of the page, include a "Compile Answers" button that aggregates answers from all inline gate questions throughout the page, including free-text notes. The button remains disabled until every required question has a selection, shows a count of remaining unanswered questions, and scrolls to the first unanswered question if clicked early. When every question is answered, generate a structured YAML block with one item per gate answer using this stable shape: section, gate_type, status (answered, other, or needs-clarification), answer, optional notes, and optional target_artifact or target_path when the gate controls file output. After successful compilation, automatically attempt to copy the YAML to the clipboard with the Clipboard API, display copy status, and display the YAML in a read-only textarea with an explicit "Copy YAML" button. The copy button must retry clipboard copy when supported and fall back to selecting the textarea contents when clipboard access is unavailable or blocked.

Pre-approval stop. Before user approval, the next action is review of the HTML alignment page, not downstream routing. Ask the user to review the page and provide the compiled YAML answers. Do not include Recommended next skill, Recommended next command, or downstream routing language until after compiled YAML has been provided and the approved artifacts have been written or updated.

Diff highlighting on updates. When the agent updates an existing alignment page after receiving compiled answers, highlight what changed since the previous version. The agent chooses inline annotation or side-by-side layout per situation.

Archiving. Before replacing an existing alignment page, archive it to docs/history/archive/YYYY-MM-DD/HHMMSS/alignment/design-system-{topic}.html.

Browser open. Attempt to open the resulting HTML page in the browser and report whether the open succeeded or was blocked. A blocked browser-open attempt does not make the skill fail when the files were written correctly.

Archive-First Replacement Policy

• Before replacing or substantively rewriting an existing DESIGN.md, copy the current file to docs/history/archive/YYYY-MM-DD/HHMMSS/DESIGN.md.
• Preserve the archived snapshot exactly as it existed before the change.
• After the archive snapshot exists, write the updated document to the original path.
• Report both the archive path and the updated path in the final output.
• New files do not need archive snapshots.

Default Shipping Contract

• Default next-step routing: when reporting completion, include either Recommended next skill: <command> or the two-line pair **Next work:** <specific task or "none"> and **Recommended next command:** <one command or route> so the next operator has a concrete handoff.
• After writing DESIGN.md, recommend $roadmap or $run for implementation. If the project has no roadmap yet, recommend $roadmap.
• If this skill creates or modifies tracked repository files, finish by committing and pushing all intended changes to the repository primary branch (main when present, otherwise master) before stopping, even if the user did not explicitly ask for commit/push.
• Do not leave tracked changes or unpushed commits behind.
• This contract does not override stricter safety rules about secrets, destructive history changes, release publication/tag confirmation, or production deploy confirmation.