Sky-Cube 线框图设计Skill
适用场景
PRD 完成后,把功能需求转化为页面布局与信息架构的可视化表达,作为前端开发与视觉设计输入。
执行步骤
- 从 PRD 功能清单提取页面清单(页面 → 功能 → 元素)。
- 按「信息优先级」排布区域:核心操作区 > 主内容区 > 辅助信息区。
- 输出线框:布局结构 + 每个区域的名称与功能说明 + 交互要点。
- 标注关键状态:默认态 / 空态 / 加载态 / 错误态 / 权限受限态。
规范要点
- 线框表达结构不表达视觉(不指定颜色、字体、装饰),视觉是后续设计环节的事。
- 每个可交互元素必须标注行为(点击 → 跳转/弹窗/提交)。
- 一屏内信息要有主次:每个页面标注「第一优先级操作」。
- 多端(Web/移动)时分别出线框,标注响应式断点行为。
输出模板
页面:登录页
┌─────────────────────────┐
│ Logo 帮助/语言 │ ← 顶部品牌区
│ ┌─────────────────────┐ │
│ │ 手机号输入框 │ │ ← 主操作区(第一优先级)
│ │ 验证码输入框 [获取] │ │
│ │ [登录按钮] │ │
│ └─────────────────────┘ │
│ 协议勾选 + 其他登录方式 │ ← 辅助区
└─────────────────────────┘
状态:默认 / 手机号错误提示 / 验证码倒计时 / 登录失败
自检清单
- 页面清单与 PRD 功能全覆盖
- 每个区域有功能说明
- 每个交互元素有行为标注
- 五态(默认/空/加载/错误/权限)已覆盖