13 · AI 协作、规格与交付验收
适用:向 AI 派 UI 任务,或审查其交付。目标是把设计意图变成可追踪的约束,同时保留合理的设计判断。
DEL-01 · 先建立一页设计简报
project: 项目工作台
audience: 每天管理多个项目的团队成员
primary_task: 找到项目,查看进展,继续编辑
platform: 响应式 Web,键盘与触控
design_reference: 已确认的项目列表母版及现有组件库
visual_direction: 中性工具,清楚层级,适中密度
tokens: 当前项目 token;新 token 需说明用途
content: 真实中文长标题、不同状态、零数据与缺图
constraints: 不改变已有路由;保留 URL 筛选
open_questions: 是否支持跨项目批量归档
可下载 JSON 示例。已有项目先整理实际约束,不必重新发明一套视觉系统。
DEL-02 · 每页一份规格
# projects.list · 项目列表
用户目标:找到项目并继续工作。
依据:项目设计稿 / 已确认母版 / 本次明确采用的手册建议。
模块顺序:页标题与创建入口 → 搜索筛选 → 列表 → 分页。
主要操作:创建项目;每行打开项目。
## 行为
- 筛选与页码可通过 URL 恢复。
- 刷新失败保留已有内容。
- 取消搜索不触发旧结果覆盖。
## 可见表达
- 标题:项目。
- 无匹配:没有找到匹配的项目;清除筛选。
- 刷新失败:未能更新项目;重试。
## 缺口与假设
- 批量操作暂按已有列表模式,不新增跨页选择能力。
## 状态
状态 ID / 进入方式 / 内容 / 操作 / 出口 / 验证证据。
行为与可见表达分开,避免把“保留内容、使用 token、支持响应式”直接印在产品页面上。
DEL-03 · 派给 AI 的任务卡
实现:projects.list 的 ready、first-use、no-match、refresh-error。
参考:页面规格路径、设计稿或母版、现有组件与 token。
先读:手册 00、23;布局与状态任务补读 02、04、05。
基线:面向用户写文案,按语义复用,数值有来源,个例有作用域。
边界:声明字段计数规则、并发策略、副作用清理和跨页影响范围。
采用:列出适用规则 ID、理由与例外,不机械套用全部建议。
实现前:列模块、状态转移和待决问题;常规细节可沿用已有模式。
交付:变更说明、运行方法、状态进入方式、截图与检查结果。
边界:写清未验证的设备和技术;生产能力必须由实际系统支持。
任务过大时按页面模式和状态拆分,而不是让 AI 一次“优化全站”。共享组件或全局 token 改变后,按影响范围复查。
DEL-04 · 用页面 × 状态矩阵验收
| 页面 | 正常 | 首次使用 | 无匹配 | 加载 | 失败 | 权限 | 长内容 | 大字号 |
|---|---|---|---|---|---|---|---|---|
| 项目列表 | 待检查 | 待检查 | 待检查 | 待检查 | 待检查 | 待检查 | 待检查 | 待检查 |
| 项目编辑 | 待检查 | 不适用:无独立首次态 | 不适用:无搜索 | 待检查 | 待检查 | 待检查 | 待检查 | 待检查 |
每一格附状态进入方式、依据、视口、截图和检查结果。根据实际进展标为未实现、环境阻塞、已检查、已截图、待人工确认、已验收或需复验。只有有权确认设计的人才能标记人工验收通过。
DEL-05 · 八项检查
- 任务:主任务与入口清楚,页面有真实内容。
- 结构:模块、顺序与层级符合规格,没有无依据新增的容器和功能。
- 状态:适用的加载、空、失败、权限等都有设计和恢复。
- 文案:使用用户语言,必要帮助在合适时机出现,不暴露调试信息。
- 操作:主要流程、取消、重复操作、返回与直接访问有效。
- 适配:窄屏、大字号、长内容、主题与输入方式符合范围。
- 稳定:图片有预留空间,异步结果不乱序,不以假数据表示加载完成。
- 证据:报告实际命令和结果,截图来自对应实现,未验证项明确。
功能检查、视觉确认和无障碍检查分别记录。一次成功构建不能替代后两项。
DEL-06 · 把证据与版本绑定
保存源码版本或工作区摘要、场景数据、浏览器环境与截图。未提交改动时,单独的 commit 不能证明截图对应哪个实现。共享样式或行为改变后,相关确认应重新检查。
本系列的演示是教学参考;自动检查结果应只陈述实际检查的范围,不将作者自检等同于用户验收。
DEL-07 · 实现结构也属于交付质量
交付时列出文案与业务规则来源、共享组件与行为、局部例外和受影响页面。修改一个字段上限不应分别寻找提示、计数和校验;调整控件高度不应逐页手改,也不应误伤画布的专用工具条。
按 17–23 篇的质量关卡检查这些内容。功能能运行不能证明分层合理,截图漂亮也不能证明后续页面保持设计。