菜单
Register a design artifact in design-assets.json, capture a thumbnail, and regenerate assets.html overview grid. Use when an artifact is ready for review, or user says "add to overview", "register", "track this".
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
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".
| name | register-asset |
| description | Register a design artifact in design-assets.json, capture a thumbnail, and regenerate assets.html overview grid. Use when an artifact is ready for review, or user says "add to overview", "register", "track this". |
| argument-hint | <html-path> [--asset "Name"] [--group Type|Colors|Spacing|Components|Brand] [--subtitle "..."] [--status needs-review|approved|changes-requested] |
| allowed-tools | Read Write Edit Bash(mkdir:*) Bash(node:*) Bash(realpath:*) mcp__chrome-devtools__* |
Add an artifact to design-assets.json and refresh the visual overview at assets.html.
From $ARGUMENTS:
--asset "<name>": display name (default: derive from filename, Title Cased)--group <X>: one of Type, Colors, Spacing, Components, Brand (default: Components)--subtitle "<text>": short description--status <X>: needs-review | approved | changes-requested (default: needs-review)--auto: silent mode called by /done — skip thumbnail capture (reuses .claude/last-preview.png), don't print confirmation prompts, one-line report onlyCapture thumbnail:
--auto and .claude/last-preview.png exists: Bash(cp .claude/last-preview.png assets/thumbs/<slug>-<ts>.png) — reuse/preview <html-path> → wait 500ms → mcp__chrome-devtools__take_screenshot → save to assets/thumbs/<slug>-<ts>.png (Bash(mkdir -p assets/thumbs) first)Read existing design-assets.json:
{"items": []}Upsert entry:
updated_atSchema:
{
"items": [
{
"asset": "Primary button",
"path": "artifacts/button.html",
"group": "Components",
"status": "approved",
"subtitle": "Filled variant with hover state",
"thumbnail": "assets/thumbs/button-20260420T120000Z.png",
"registered_at": "2026-04-20T12:00:00Z",
"updated_at": "2026-04-20T12:00:00Z"
}
]
}
Write design-assets.json with formatted JSON (2-space indent).
Regenerate assets.html:
Bash(node scripts/make-assets-index.mjs) — see script below/doctor and node is missing, fall back to inline generation via Write tool with HTML templateReport: "Registered <asset> in <group>. View at assets.html."
Sections by group. Each card shows:
The HTML is static — no server. Status changes happen via Claude (user says "approve the button asset" → Claude re-runs /register-asset ... --status approved).