# 线框图设计Skill

> 页面线框图的设计规范与表达方法。当 PRD 明确后需要输出页面布局线框(ASCII/HTML/Figma 均可),表达信息优先级与区域功能时使用。

- Skill: `sky-cube/skill-27` (Agent Skill)
- Install (CLI): `npx skillmds@latest add sky-cube/skill-27`
- Raw SKILL.md: https://api.skillmd.com/api/skills/sky-cube/skill-27/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Product & Planning
- Author: Sky-Cube (https://skillmd.com/u/sky-cube)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/sky-cube/skill-27

---

# 线框图设计Skill

## 适用场景
PRD 完成后,把功能需求转化为页面布局与信息架构的可视化表达,作为前端开发与视觉设计输入。

## 执行步骤
1. 从 PRD 功能清单提取页面清单(页面 → 功能 → 元素)。
2. 按「信息优先级」排布区域:核心操作区 > 主内容区 > 辅助信息区。
3. 输出线框:布局结构 + 每个区域的名称与功能说明 + 交互要点。
4. 标注关键状态:默认态 / 空态 / 加载态 / 错误态 / 权限受限态。

## 规范要点
- 线框表达结构不表达视觉(不指定颜色、字体、装饰),视觉是后续设计环节的事。
- 每个可交互元素必须标注行为(点击 → 跳转/弹窗/提交)。
- 一屏内信息要有主次:每个页面标注「第一优先级操作」。
- 多端(Web/移动)时分别出线框,标注响应式断点行为。

## 输出模板
```
页面:登录页
┌─────────────────────────┐
│ Logo        帮助/语言    │  ← 顶部品牌区
│ ┌─────────────────────┐ │
│ │ 手机号输入框          │ │  ← 主操作区(第一优先级)
│ │ 验证码输入框 [获取]    │ │
│ │ [登录按钮]            │ │
│ └─────────────────────┘ │
│ 协议勾选 + 其他登录方式   │  ← 辅助区
└─────────────────────────┘
状态:默认 / 手机号错误提示 / 验证码倒计时 / 登录失败
```

## 自检清单
- [ ] 页面清单与 PRD 功能全覆盖
- [ ] 每个区域有功能说明
- [ ] 每个交互元素有行为标注
- [ ] 五态(默认/空/加载/错误/权限)已覆盖