# Design System

> Design system reference — load, browse, or create design system specs

- **Type:** Skill
- **Install:** `agentstack add skill-qgolem-orc-design-system`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [qGolem](https://agentstack.voostack.com/s/qgolem)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [qGolem](https://github.com/qGolem)
- **Source:** https://github.com/qGolem/orc/tree/main/skills/design-system

## Install

```sh
agentstack add skill-qgolem-orc-design-system
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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`
3. **Load**: `Read systems//spec.md`
4. **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
7. **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`

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

3. **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](https://github.com/qGolem)
- **Source:** [qGolem/orc](https://github.com/qGolem/orc)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-qgolem-orc-design-system
- Seller: https://agentstack.voostack.com/s/qgolem
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.