Design System

Design System

Load an existing design system spec for reference, or scaffold a new one from a template.

---

Mode Detection

Parse $ARGUMENTS:

• If first token is new → Scaffold Mode (remaining tokens = system name)
• Otherwise → Load Mode (first token = system name or query)

---

Load Mode (default)

1. Discover systems: Glob("skills/design-system/systems/*/spec.md") from the repo root
2. Select system:

• If $ARGUMENTS first token matches a discovered system name → use it; remaining tokens are the query
• If no token match and exactly one system exists → default to it silently
• If no token match and multiple systems exist → list available systems via AskUserQuestion

1. Load: Read systems//spec.md
2. Present: Output the spec content. If a query was provided, highlight the relevant section.

---

Scaffold Mode (new )

1. Parse system name from $ARGUMENTS (e.g., new acme-brand → name is acme-brand)
2. Validate name is lowercase kebab-case; reject otherwise
3. Create directory: mkdir -p systems//
4. Copy template: Read templates/spec.md, write to systems//spec.md
5. Replace placeholder: Update [System Name] and [system name] in the copied file with the actual name
6. Ask user:

`` AskUserQuestion: "I've scaffolded systems//spec.md with blank sections. Would you like to fill it in interactively now, or edit the file yourself later?" ``

• Interactive → Walk through each section (Color Palette, Typography, Borders, Layout, Cards, Components, CSS, Shadows, Breakpoints, Scrollbar, Constraints), asking the user for their values
• Later → Report the file path and stop

1. Report: "Design system ` created. Use /orc:vibe-code [component]` to design with it."

---

Examples

Load a system

/orc:design-system orc-brand

Loads systems/orc-brand/spec.md into context — full color palette, typography, layout, component patterns.

Load with a query

/orc:design-system orc-brand typography

Loads orc-brand spec, highlights the Typography section (font families, type scale).

Scaffold a new system

/orc:design-system new acme-brand

Creates systems/acme-brand/spec.md from template with blank sections, asks whether to fill interactively.

Real-world: how orc-brand was created

The orc-brand design system was built in 3 steps:

1. Research — /orc:adr "Design system for a Claude Code plugin landing page — dark theme, developer-focused, terminal aesthetic" researched color palettes, typography, and layout patterns across 100+ developer tool landing pages. Output: docs/adr/ADR5.001-landing-page-design-direction.md

1. Scaffold — /orc:design-system new orc-brand created the empty spec from template.

1. Fill — The spec was filled based on ADR findings: deep charcoal palette (#0D0D0D base), warm amber accent (#E8A04A) for Claude brand tie-in, Inter + JetBrains Mono typography, three-layer CSS token architecture (primitives → semantic → component), terminal block and feature card component patterns. Static HTML + CSS only — no framework.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: qGolem
• Source: qGolem/orc
• License: MIT

Install and usage instructions live in the source repository linked above.