wireframe

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Wireframe

线框图

Low-fidelity exploration with ≥3 variations along different axes. Uses design_canvas.jsx for side-by-side presentation.

沿不同维度探索至少3种低保真设计变体，使用design_canvas.jsx进行并排展示。

Phase 0 — Context pre-flight (auto-detect, ONE question max)

阶段0 — 上下文预检（自动检测，最多一个问题）

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 match

```
Glob
```
codebase tokens at project root
Scan brief for github / Figma / image /
```
.md
```
attachments → dispatch ingestion skills

If nothing — ONE

AskUserQuestion

: design system / codebase / screenshot / Figma / none / decide. Report "Using <context>. Proceeding." — then proceed greyscale regardless (wireframes are pre-color).

在探索变体之前，静默检查上下文：

若存在则读取
```
.claude/design-tokens.json
```
（但线框图为灰度风格——仅用于布局参考）

执行

Bash(ls ~/.claude/design-systems/ 2>/dev/null)

——匹配品牌文件夹

在项目根目录全局搜索代码库令牌
扫描任务简报中的github / Figma / 图片 /
```
.md
```
附件 → 调用导入技能

若未找到任何上下文——仅提出一个

AskUserQuestion

：是否使用设计系统/代码库/截图/Figma/无/自行决定。报告“正在使用<上下文>。继续执行。”——随后无论如何都采用灰度风格（线框图属于预上色阶段）。

Rules

规则

No color — greyscale only (grays + single accent if needed)
Placeholders everywhere for imagery, icons, labels — a placeholder is better than a bad attempt
Varying axes — layout, interaction metaphor, visual treatment, density, hierarchy
Mix conservative and novel — one "by-the-book", one exploring new territory

禁止使用色彩 — 仅使用灰度（灰色调，必要时可搭配单一强调色）
所有图像、图标、标签均使用占位符——占位符比拙劣的尝试更合适
维度多样化 — 布局、交互隐喻、视觉处理、密度、层级结构
保守与创新结合 — 一个“循规蹈矩”的方案，一个探索新方向的方案

Build

构建步骤

artifacts/<slug>-wireframes.html

with React + Babel +

design_canvas.jsx

Bash(cp starters/design_canvas.jsx "$(dirname <html>)/")

— copy next to the HTML file

Shell:

html

<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>

Use dashed borders (
```
border: 1px dashed #999
```
) and greybox for placeholder content. Block letters or
```
[Image]
```
labels, not actual SVG.

生成包含React + Babel +

design_canvas.jsx

的

artifacts/<slug>-wireframes.html

文件

执行

Bash(cp starters/design_canvas.jsx "$(dirname <html>)/")

——将文件复制到HTML文件所在目录

代码示例：

html

<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
```
）和灰色块作为占位符内容。使用大写字母或
```
[Image]
```
标签，而非实际SVG。

Verify + next steps

验证与后续步骤

Run

/serve

(needed because design_canvas.jsx is external), then

/done http://127.0.0.1:4567/artifacts/<slug>-wireframes.html

Fix →
```
Skill: verify-artifact
```
silently
Ask user which direction(s) to develop → invoke
```
/interactive-prototype
```
on chosen option

运行
```
/serve
```
（因design_canvas.jsx为外部文件，此步骤必需），然后执行
```
/done http://127.0.0.1:4567/artifacts/<slug>-wireframes.html
```
静默调用
```
Skill: verify-artifact
```
进行修复
询问用户要深入开发哪个方向→对选定选项调用
```
/interactive-prototype
```