用途：在正式配色前进行低保真探索，围绕不同维度生成至少 3 个设计变体，并用 design_canvas.jsx 并排呈现以便比较。
主要能力：灰度设计（灰阶加必要时单一强调色）；图像、图标、标签一律用占位符；变体沿布局、交互隐喻、视觉处理、密度、层级等轴变化；混合保守与新颖方案，例如一个按常规、一个探索新方向。
使用方式：先做上下文预检，静默检查 .claude/design-tokens.json、~/.claude/design-systems/ 品牌目录、项目根目录的代码库 token，并扫描简报中的 github、Figma、图片或 .md 附件以分派摄取技能；若都没有，最多问一个问题（设计系统/代码库/截图/Figma/无/自行决定），随后无论结果如何都按灰度继续。构建 artifacts/<slug>-wireframes.html，使用 React + Babel + design_canvas.jsx，并用 Bash(cp starters/design_canvas.jsx "$(dirname <html>)/") 将画布文件复制到 HTML 同目录。画布结构使用 DesignCanvas columns={3} 与 DesignCanvas.Cell 标注 Option A/B/C。占位内容用虚线边框（border: 1px dashed #999）和 greybox，用方块字母或 [Image] 标签而非真实 SVG。完成后运行 /serve（因 design_canvas.jsx 为外部文件），再运行 /done http://127.0.0.1:4567/artifacts/<slug>-wireframes.html；修复时静默调用 Skill: verify-artifact；最后询问用户要发展哪个方向，并对选中项调用 /interactive-prototype。
适用场景：需要快速比较多套低保真方案、在投入视觉设计前确定方向时。
限制：仅灰度，不使用彩色；不提供真实图像或图标；具体收费、平台支持等信息暂未提供。