# Superpowers Sage:sage Design System

> Design system implementation in Sage/Tailwind v4 — Figma to @theme tokens, design tokens CSS, Tailwind v4 @theme, color tokens, typography tokens, spacing scale, Blade UI components, kitchensink page, design-to-code, @layer base @layer components, CSS custom properties, resources/css/app.css, Paper MCP, Figma MCP, design file to code, SVG icons, responsive layout, design system audit, UI component library, atom design, layout components

- Skill: `hekivo/superpowers-sage-sage-design-system` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds add hekivo/superpowers-sage-sage-design-system`
- Raw SKILL.md: https://api.skillmd.com/api/skills/hekivo/superpowers-sage-sage-design-system/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: hekivo (https://skillmd.com/u/hekivo)
- Updated: 2026-08-19
- Page: https://skillmd.com/skills/hekivo/superpowers-sage-sage-design-system

---


# Sage Design System — Visual Foundation

Establish the complete visual foundation of a Sage/Acorn theme: design tokens → UI atoms → layout components → kitchensink → structural layouts. This must run before any block, view, or page implementation.

**Announce at start:** "I'm using the sage-design-system skill to establish the visual foundation."

## When to use

- **Standalone**: user invokes `/sage-design-system` at project start
- **Auto-gate from `/architecting`**: before any architecture discovery, `/architecting` checks if design system is validated (kitchensink route exists + `design-tokens.css` present). If not, it invokes this skill first and waits.
- **Resuming**: if some phases are already complete, detect which files exist and skip completed phases

## Inputs

$ARGUMENTS

If a design tool URL or path is provided, use it. Otherwise invoke `/designing` to detect the active design tool (Figma / Paper / Pencil / Stitch).

---

See [references/tokens-setup.md](references/tokens-setup.md) for design token extraction workflow.

See [references/component-phases.md](references/component-phases.md) for component implementation phases.

---

## Completion

After all phases:

1. Confirm `resources/css/design-tokens.css` exists with traceability comments
2. Confirm `resources/views/components/ui/` has all 5 atoms
3. Confirm `resources/views/components/layout/` has all 5 structure components
4. Confirm kitchensink screenshot was taken and saved
5. Commit:

```bash
git add resources/css/design-tokens.css \
        resources/views/components/ui/ \
        resources/views/components/layout/ \
        resources/views/kitchensink.blade.php \
        routes/web.php \
        docs/plans/<active-plan>/assets/kitchensink-ref.png
git commit -m "feat(theme): design system foundation — tokens, ui, layout components, kitchensink"
git push
```

**Do NOT proceed to `/architecting` or `/building` until this commit exists.**