메뉴
Explicitly load a design system from the org-level registry at ~/.claude/design-systems/<name>/ for the current project. Use when user says "use the Acme design system", "apply company-x tokens", or similar.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | use-design-system |
| description | Explicitly load a design system from the org-level registry at ~/.claude/design-systems/<name>/ for the current project. Use when user says "use the Acme design system", "apply company-x tokens", or similar. |
| argument-hint | <design-system-name> |
| allowed-tools | Read Write Bash(ls:*) Bash(mkdir:*) Bash(cp:*) |
Load an org-level design system from ~/.claude/design-systems/<name>/ into the current project.
If $0 (name) is missing → Bash(ls ~/.claude/design-systems/ 2>/dev/null) and show the list, ask which one.
Verify the folder exists:
Bash(test -d ~/.claude/design-systems/$0 && echo ok || echo missing).
If missing → tell the user, list what's available, stop.
Read the tokens file:
Read ~/.claude/design-systems/$0/tokens.json
Copy to project-level for faster subsequent reads:
Bash(mkdir -p .claude)
Bash(cp ~/.claude/design-systems/$0/tokens.json .claude/design-tokens.json)
If ~/.claude/design-systems/$0/preview.html exists, offer to open it for visual reference via /preview ~/.claude/design-systems/$0/preview.html — lets the user remember what the system looks like before starting work.
Report: "Loaded design system $0 — colors, fonts, spacing, radii written to .claude/design-tokens.json. Subsequent /make-deck, /interactive-prototype, /wireframe will use it automatically."
/create-design-system instead/create-design-system with "from scratch" mode~/.claude/design-systems/
├── acme/
│ ├── tokens.json # required
│ └── preview.html # optional
├── company-x/
│ └── tokens.json
└── minimal-mono/
└── tokens.json
tokens.json schema:
{
"name": "acme",
"colors": { "primary": "#D97757", "accent": "...", "bg": "...", "text": "..." },
"fonts": { "display": "...", "body": "...", "mono": "..." },
"spacing": [4, 8, 12, 16, 24, 32, 48, 64],
"radii": { "sm": 4, "md": 8, "lg": 16 },
"shadows": [...]
}
Build an HTML slide deck (1920×1080, keyboard nav, exportable) when user asks for a presentation, pitch deck, slides, or keynote. Uses deck_stage.js starter and Claude Design taste rules.
Screenshot + console sweep + visual inspection of an artifact for layout/color/typography regressions. Silent on pass, reports only on issues. Use after /done reports clean and before end-of-turn.
Build animated motion design (explainer, transition reel, product intro). Uses Stage/Sprite timeline from animations.jsx for in-browser compositions or Remotion for full video/MP4 workflows.
Apply buffered tweaks from pending.yaml to the source HTML file. Invoked when user says "save tweaks", "apply tweaks", "persist panel changes", or runs /apply-tweaks.
Generate a working demo artifact on dummy content so the user can see a reference implementation. Use when user says "show me an example deck", "what does a prototype look like", "give me a starter", "I want to see an example of X". Generates live — not from a static gallery.
Extract or build a design system (tokens, components, style guide). Use for "design system", "style guide", "tokens", "UI kit".