Menú
De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.
Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.
npx skills add https://github.com/zhaoxuya520/AI-Fullstack-Delivery-Workflow --skill page-structureEl comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.
¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.
设计 API 认证鉴权和权限矩阵时使用。适用于多角色系统、租户隔离、字段级权限。优先使用 OAuth 2.0 / JWT + RBAC + 资源归属检查。
设计具体 API 端点时使用。适用于资源建模后的下一步、列端点清单、HTTP 方法和状态码选择。优先使用 RFC 7231 HTTP 语义 + GitHub REST 命名规范。
设计 API 错误码和错误结构时使用。适用于错误响应规范、调用方错误处理、调试可观测。优先使用 RFC 7807 Problem Details + 业务错误码 + 调用方处理建议。
Basado en la clasificación ocupacional SOC
Mostrando SKILL.md
| name | page-structure |
| description | 设计单页面结构和线框图时使用。适用于功能页面设计、内容布局、主次操作排布。优先使用页面目标导向方法 + 内容层级 + 主次操作区分。 |
1. 页面目标先行
每个页面只解决 1~3 个核心目标
不要让一个页面承担过多
2. 用户视线流动
F 模式 / Z 模式 / 古登堡图
按用户阅读顺序排列内容
3. 主次清晰
一个页面只有 1 个主操作
次操作弱化处理
危险操作隔离
4. 内容优先
内容驱动设计，不是装饰驱动
每个页面必须回答：
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)：[布局]
1. 读取 PRD / 用户故事
2. 确定页面目标（不超过 3 个）
3. 列出必要内容元素
4. 按重要性排序
5. 选择页面模式（列表/详情/表单/仪表盘）
6. 设计内容层级（顶/中/底 或 左/中/右）
7. 区分主次操作
8. 列出所有状态（用 component-states skill）
9. 检查响应式
10. 输出页面结构说明
□ 页面目标是否清晰（1~3 个）
□ 是否只有 1 个主操作
□ 内容层级是否合理（重要内容靠上）
□ 是否覆盖了所有状态
□ 异常情况是否定义
□ 响应式是否考虑
□ 前端能否据此实现
templates/page-spec-template.md — 通用页面结构说明（含列表/详情/表单/仪表盘四种模式）templates/wireframe-spec-template.md — 线框图说明模板templates/design-brief-template.md — 设计 brief 模板（项目入口）上游：
user-flow → 提供流程节点
information-architecture → 提供页面在整体中的位置
平行：
component-states → 详细定义每个状态
responsive-design → 详细定义响应式规则
visual-style → 视觉风格指引
下游：
design-handoff → 交接给前端