wireframe

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%，验证信息权重的分配合理性