菜单
Explore 3+ design variations in low-fi/greyscale on a labeled canvas for comparison. Use when user asks for wireframes, lo-fi, ideas, variants, sketches, many options.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | wireframe |
| description | Explore 3+ design variations in low-fi/greyscale on a labeled canvas for comparison. Use when user asks for wireframes, lo-fi, ideas, variants, sketches, many options. |
| argument-hint | <what to wireframe> |
| allowed-tools | Read Write Edit Bash(cp:*) Bash(open:*) Bash(mkdir:*) mcp__chrome-devtools__* |
Low-fidelity exploration with ≥3 variations along different axes. Uses design_canvas.jsx for side-by-side presentation.
Before exploring variations, silently check for context:
Read .claude/design-tokens.json if exists (but wireframes are greyscale — use only for layout hints)Bash(ls ~/.claude/design-systems/ 2>/dev/null) — brand folder matchGlob codebase tokens at project root.md attachments → dispatch ingestion skillsIf nothing — ONE AskUserQuestion: design system / codebase / screenshot / Figma / none / decide. Report "Using . Proceeding." — then proceed greyscale regardless (wireframes are pre-color).
artifacts/<slug>-wireframes.html with React + Babel + design_canvas.jsxBash(cp starters/design_canvas.jsx "$(dirname <html>)/") — copy next to the HTML file<DesignCanvas columns={3} label="Options for {{thing}}">
<DesignCanvas.Cell label="Option A — classic">...</DesignCanvas.Cell>
<DesignCanvas.Cell label="Option B — dense">...</DesignCanvas.Cell>
<DesignCanvas.Cell label="Option C — novel">...</DesignCanvas.Cell>
</DesignCanvas>
border: 1px dashed #999) and greybox for placeholder content. Block letters or [Image] labels, not actual SVG./serve (needed because design_canvas.jsx is external), then /done http://127.0.0.1:4567/artifacts/<slug>-wireframes.htmlSkill: verify-artifact silently/interactive-prototype on chosen optionBuild 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".