design-systemlisted

# Skill: design-system Generates three artifacts that together define a brand's visual system: 1. **`DESIGN.md`** — portable spec following the [Google design.md format](https://github.com/google-labs-code/design.md). YAML frontmatter (machine-readable tokens) + 8 markdown sections (human rationale). 2. **`tokens.css`** — CSS custom properties exported from the YAML, consumed by `design-ui-components` and every platform skill. 3. **`showcase.html`** — single self-contained HTML page that renders every token in context. The visual proof that the system holds together. ## When to use - After `/design-plan` has produced `DESIGN-PLAN.md` - Before any platform artifact skill (LinkedIn, Twitter, YouTube, etc.) — they all read `DESIGN.md` and `tokens.css` - When iterating on brand: re-run to regenerate downstream files when the plan changes ## Inputs - **Required:** brand slug (e.g. `shane-personal`) - **Preferred:** existing `./design/<brand-slug>/DESIGN-PLAN.md` (read with Read tool) - **Fallback:** if no plan exists, ask the user for a 3-question inline brief (visual direction, voice adjectives, hard NOs) ## Outputs ``` ./design/<brand-slug>/ DESIGN.md # Google spec format tokens.css # CSS custom properties showcase.html # visual proof ``` ## Steps ### 1. Locate and read the plan ```bash test -f ./design/<brand-slug>/DESIGN-PLAN.md ``` If present, read it. If absent, ask the user 3 quick questions (visual direction, voice adjectives, hard N