| name | wireframe |
| description | Low-fidelity wireframe exploration to test layout and information hierarchy before committing to hi-fi. Produces 3+ layout variants using ASCII art, each annotated with layout strategy, information priority, and content block breakdown. |
| trigger | ["用户选定美学方向后，需要快速探索布局方案时","ConceptRoutes 选定后、PrototypeSpec 之前"] |
线框探索（Wireframe）
触发时机
- 用户在 ConceptRoutes 中选定了美学方向，需要快速探索布局方案时
- 在进入高保真原型（make-prototype）之前，需要先验证信息架构
前置条件
- ConceptRoutes — 用户已选定美学方向
- DesignBrief — 确定页面唯一目标和内容需求
执行内容
用低保真线框图探索布局，产出 3 个以上变体。线框只关注结构和信息层级，不涉及视觉细节（不出现颜色、字体、图片细节）。
每个变体必须标注
1. 布局策略
- 说明该变体使用什么布局模式：单列、分栏、卡片流、全屏、混合
- 说明为什么这个布局适合当前页面目标
2. 信息优先级
- 第一眼看什么：用户进入页面后最先注意到的内容区块
- 第二眼看什么：视线自然移动到的下一个区块
- 第三眼看什么：后续阅读路径
- 基于页面唯一目标论证优先级排序的合理性
3. 内容区块划分
- 列出所有内容区块的名称和用途
- 标注每个区块的相对面积比例（如 Hero 40%、Features 30%、CTA 10%）
- 标注区块之间的间距层级（Section 级 vs Block 级 vs Element 级）
线框格式
使用 ASCII art 绘制低保真线框，清晰展示结构关系：
┌─────────────────────────────────────┐
│ [ NAV BAR ] │
├─────────────────────────────────────┤
│ │
│ ████████████████████ │
│ ██ HERO TITLE ██ │
│ ██ Subtitle text ██ │
│ ████████████████████ │
│ [ CTA BUTTON ] │
│ │
├─────────────────────────────────────┤
│ ┌────────┐ ┌────────┐ ┌────────┐ │
│ │ Block A │ │ Block B │ │ Block C │ │
│ │ ~~~~~~~ │ │ ~~~~~~~ │ │ ~~~~~~~ │ │
│ └────────┘ └────────┘ └────────┘ │
├─────────────────────────────────────┤
│ [ FOOTER ] │
└─────────────────────────────────────┘
线框规范：
█ 表示标题/强调文字区域~ 表示正文文字区域[ ] 表示按钮/交互元素┌─┐ 表示容器/卡片边界░ 表示图片/媒体占位区域
移动端线框
每个变体同时给出桌面端和移动端的线框，移动端使用单列布局：
┌───────────┐
│ [ NAV ☰ ] │
├───────────┤
│ ████████ │
│ ██ HERO ██ │
│ ████████ │
│ [ CTA ] │
├───────────┤
│ ┌───────┐ │
│ │Block A│ │
│ └───────┘ │
│ ┌───────┐ │
│ │Block B│ │
│ └───────┘ │
├───────────┤
│ [ FOOTER ]│
└───────────┘
输出格式
# WireframeSpec
> 来源方向：{ConceptRoute 选定方向名}
> 页面目标：{DesignBrief 中的页面唯一目标}
> 变体数量：{N}
---
## 变体 A：{变体名称}
### 布局策略
{布局模式 + 理由}
### 信息优先级
1. 第一眼：{区块} — {理由}
2. 第二眼：{区块} — {理由}
3. 第三眼：{区块} — {理由}
### 内容区块划分
| 区块 | 用途 | 面积占比 | 间距层级 |
|------|------|---------|---------|
| {区块名} | {用途} | {%} | {Section/Block/Element} |
### 桌面端线框
{ASCII art}
### 移动端线框
{ASCII art}
---
## 变体 B：{变体名称}
{同上结构}
---
## 变体 C：{变体名称}
{同上结构}
---
## 变体对比
| 维度 | 变体 A | 变体 B | 变体 C |
|------|--------|--------|--------|
| 布局模式 | {模式} | {模式} | {模式} |
| 首屏信息量 | {高/中/低} | {高/中/低} | {高/中/低} |
| 滚动深度需求 | {深/中/浅} | {深/中/浅} | {深/中/浅} |
| CTA 可见性 | {首屏/滚动后} | {首屏/滚动后} | {首屏/滚动后} |
| 适合场景 | {场景} | {场景} | {场景} |
注意事项
- 线框阶段不涉及任何视觉细节——不出现颜色值、字体名、具体文案
- 线框的目的是验证信息架构和布局逻辑，不是画 UI
- 如果 DesignBrief 中有多个页面，每个页面独立做线框探索
- 用户选定某个变体后，该变体的 WireframeSpec 作为
make-prototype 的输入
- 线框中的区块面积占比之和应≈100%，验证信息权重的分配合理性
