# Wireframe

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

- Skill: `infometa/wireframe` (Agent Skill)
- Install (CLI): `npx skillmds@latest add infometa/wireframe`
- Raw SKILL.md: https://api.skillmd.com/api/skills/infometa/wireframe/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: infometa (https://skillmd.com/u/infometa)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/infometa/wireframe

---


# 线框探索（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 ]│
└───────────┘
```

### 输出格式

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