用途
page-structure 用于设计单个功能页面的结构和线框图，适合功能页面设计、内容布局、主次操作排布，以及给前端提供页面骨架说明。
核心原则
- 页面目标先行：每个页面只解决 1~3 个核心目标，不要让一个页面承担过多。
- 用户视线流动：按 F 模式 / Z 模式 / 古登堡图，按用户阅读顺序排列内容。
- 主次清晰：一个页面只有 1 个主操作，次操作弱化处理，危险操作隔离。
- 内容优先：内容驱动设计，不是装饰驱动。
5 个关键问题
每个页面必须回答：
1. 页面目标：这个页面帮助用户完成什么？
2. 核心信息：用户必须先看到什么？
3. 主操作：用户最重要的动作是什么？
4. 次操作：哪些动作可以弱化？
5. 反馈区域：系统如何告诉用户结果？
常见页面模式
列表页
- 顶部：筛选 + 搜索 + 主操作（如“新建”）
- 中间：列表本身（表格 / 卡片 / 时间轴）
- 底部：分页
- 状态：加载中、空列表（无数据）、有数据、错误（加载失败）、无权限
详情页
- 顶部：返回 + 标题 + 状态徽章 + 主操作
- 左/中：核心信息分组展示
- 右：辅助信息 / 相关操作 / 历史记录
- 底部：危险操作（删除）
- 状态：加载中、详情数据、资源不存在、无权限、已删除
表单页
- 顶部：标题 + 进度（多步表单）
- 中间：表单字段（按重要性分组）
- 底部：提交 + 取消 + 保存草稿
- 状态：默认（空）、有数据（编辑模式）、校验中、校验失败（字段级错误）、提交中（loading）、提交成功、提交失败
仪表盘
- 顶部：时间筛选 + 全局指标
- 中间：图表区（按重要性排列）
- 右侧：最新动态 / 待办
- 状态：加载中、数据正常、部分数据缺失、完全无数据
输出格式
页面结构说明包含以下部分：
基本信息
- 页面目标：[1 句话]
- 用户角色：[谁用]
- 进入路径：[从哪进入]
- 视觉风格：[来自 visual-style skill]
内容层级
┌──────────────────────────────────┐
│ 顶部：[内容] │
├──────────────────────────────────┤
│ 主区域：[内容] │
│ │
│ - 核心信息： │
│ - 主操作： │
│ │
├──────────────────────────────────┤
│ 底部：[次操作 / 分页] │
└──────────────────────────────────┘
主要元素
| 元素 | 类型 | 用途 | 优先级 |
|---|---|---|---|
| 页面标题 | h1 | 标识页面 | P0 |
| 操作按钮 | 按钮组 | 主操作 | P0 |
| 数据列表 | Table | 展示数据 | P0 |
| 筛选器 | Filter | 缩小范围 | P1 |
| 分页 | Pagination | 数据导航 | P1 |
状态说明
| 状态 | 触发条件 | 显示内容 | 用户行动 |
|---|---|---|---|
| 加载中 | 页面初始加载 | Skeleton + Spinner | 等待 |
| 有数据 | 加载成功 | 完整列表 | 浏览/操作 |
| 空状态 | 无数据 | 空状态图 + 引导文案 + 主操作 | 创建第一项 |
| 错误 | 加载失败 | 错误信息 + 重试按钮 | 重试 |
| 无权限 | 权限校验失败 | 权限提示 + 联系管理员链接 | 申请权限 |
异常处理
- 网络错误：[处理方式]
- 表单校验失败：[处理方式]
- 操作冲突：[处理方式]
响应式要求
- 桌面端 (>1024px)：[布局]
- 平板 (768-1024px)：[布局]
- 移动端 (<768px)：[布局]
工作流程
- 读取 PRD / 用户故事
- 确定页面目标（不超过 3 个）
- 列出必要内容元素
- 按重要性排序
- 选择页面模式（列表/详情/表单/仪表盘）
- 设计内容层级（顶/中/底 或 左/中/右）
- 区分主次操作
- 列出所有状态（用 component-states skill）
- 检查响应式
- 输出页面结构说明
质量自检
- 页面目标是否清晰（1~3 个）
- 是否只有 1 个主操作
- 内容层级是否合理（重要内容靠上）
- 是否覆盖了所有状态
- 异常情况是否定义
- 响应式是否考虑
- 前端能否据此实现
常见坑
- 页面目标太多——一个页面想干所有事
- 多个主操作——用户不知道点哪个
- 危险操作不隔离——“删除”放在主区域
- 空状态缺失——用户第一次进入看到空白
- 错误状态缺失——加载失败什么都不显示
- 响应式没考虑——桌面设计在移动端崩溃
- 没有视线流动——内容散乱无序
配套模板
- templates/page-spec-template.md — 通用页面结构说明（含列表/详情/表单/仪表盘四种模式）
- templates/wireframe-spec-template.md — 线框图说明模板
- templates/design-brief-template.md — 设计 brief 模板（项目入口）
与其他 skill 的协作
- 上游：user-flow → 提供流程节点；information-architecture → 提供页面在整体中的位置
- 平行：component-states → 详细定义每个状态；responsive-design → 详细定义响应式规则；visual-style → 视觉风格指引
- 下游：design-handoff → 交接给前端