层级
四级 surface ladder
bg → paper → paper2 → paper3，不跳级，每级配 1px hairline。禁投影、玻璃态、氛围渐变。
UI 设计交付
9 屏 30 态高保真设计稿 · 设计 Token · 信息架构与交互规则。
01 / 高保真 UI 设计稿9 屏 · 30 态 · 三端
全部设计稿由生产 HTML 在固定 viewport 下渲染，与可运行 Demo 逐像素一致——设计稿即真源。每屏含默认态与全部异常／结果态。
项目工作台 workbench
横切 · 按角色聚合的待办、里程碑、风险与指标 · 2 个状态
默认态390x844
空态390x844
需求中心 · 列表 requirement-list
环节①② · 七态需求流转与筛选 · 3 个状态
默认态390x844
加载态390x844
空态390x844
台账导入 · AI 结构化 requirement-import
环节① · Excel 一键导入、字段置信度、可重解析 · 4 个状态
默认态390x844
加载态390x844
成功态390x844
错误态390x844
需求详情 · 基线 requirement-detail
环节② · 条款、评审、确认基线与版本记录 · 3 个状态
默认态390x844
成功态390x844
错误态390x844
AI 生产中心 ai-production
环节③④⑤ · 同一需求上下文驱动原型／UI／代码三条生产线 · 4 个状态
默认态390x844
加载态390x844
成功态390x844
错误态390x844
评审与放行（diff） diff-review
横切回路 · 新旧版本 diff 内完成通过或驳回 · 3 个状态
默认态390x844
成功态390x844
错误态390x844
血缘图谱 · 变更冲击波 lineage
★ hero · 需求为根的血缘图，波及节点按红／黄等级点亮 · 4 个状态
默认态390x844
加载态390x844
成功态390x844
错误态390x844
变更追溯中心 change-center
横切 · 变更单、时间线回放、回滚至历史基线 · 3 个状态
默认态390x844
空态390x844
成功态390x844
验收交付中心 acceptance-center
环节⑥ · AI 用例回指条款、缺陷回归、归档 · 4 个状态
默认态390x844
加载态390x844
成功态390x844
错误态390x844
02 / 设计 TOKEN层级靠 surface ladder，不靠投影
视觉方向：Linear · 信号台。取其纪律不取其身份——近黑四级 surface ladder、1px hairline、负字距字阶、单一强调色；不用其字族、不沿用其品牌色。全站深浅双主题。
色彩 暗色 / 亮色
画布 bg
#010102 / #f7f8f8一级面板 paper
#0f1011 / #ffffff二级面板 paper2
#141516 / #f6f7f7三级面板 paper3
#18191a / #eff0f1hairline 描边
#23252a / #e6e7e9★ 信号青 · 唯一强调色
#3fc8dc / #0a6a7c危险红 · 必改
#f0605f / #c62b31琥珀 · 需评估
#e0a13a / #8f570b绿 · 放行
#3fb950 / #156d2c铅灰 · AI 未定稿
#8a9099 / #5f6871信号青只出现在品牌标记、主 CTA、焦点环、链接、AI 标识、选中态与信号流七处，绝不装饰性使用。红／琥珀／绿是语义色，只上状态 pill、色条与图标，不做面板填充。
字阶（移动 / 桌面）
| 用途 | 移动端 | 桌面端 |
|---|---|---|
| 页面标题 h1 | 20 | 22 |
| 区块标题 h2 | 15 | 16 |
| 正文 | 13 | 14 |
| 指标数值 | 32 | 36 |
| ID / 版本号 / 时间戳 / 置信度 | 一律等宽，可逐字核对、可跨屏对账 | |
层级、圆角、间距与动效
圆角
阶梯化
4 chips · 8 按钮与输入 · 12 卡片 · 16 画布面板 · 9999 仅 pill。CTA 一律 8px。
间距
4px 基准
4 / 8 / 12 / 16 / 24 / 32 / 48。页边距移动 16、桌面 24；卡片内距 14×12，间距 8。焦点环＝强调色 50% 的 2px 外环。
动效
三条，无位移
信号流 2.4s 循环描边虚线偏移 · 波及行提升 0.24s ease-out 逐项延迟 0.15s · 成功落定 0.4s 淡入。全部无阴影、无回弹。
三重补偿规则
任何「被波及／需处理」的强调禁止只靠颜色，必须同时具备三项编码：
| 状态 | 三重编码 |
|---|---|
| 必改 | surface 提升一级 + 危险红 2px 色条 + 「必改」pill |
| 需评估 | surface 提升一级 + 琥珀 2px 色条 + 「需评估」pill |
| 已剔除 | 半透明 + 删除线 + 虚线描边 + pill + 可恢复说明（保持可点击） |
| 已过时 / 已确认 | 绿色 2px 色条 + 对应 pill + 留存说明 |
| 未波及 | 一级面板静置，仅 hairline，无色条无 pill |
设计红线
- AI 输出必须有草稿标识、来源说明、人工放行入口与降级状态，四者缺一不可。
- 强调色不装饰性使用，不引入第二个装饰彩色。
- 状态禁止只靠颜色表意，走三重补偿规则。
- 单一 SVG 图标体系，禁 emoji 当图标。
- 移动端血缘图禁做可缩放大画布，一律分层钻取。
03 / 信息架构与交互规则需求为根，产物为枝
核心对象关系
Requirement 需求（根，含条款与基线版本）→ ArtifactVersion 产物版本（原型／UI／代码，五态含「已过时」）→ TestCase 用例 → AcceptanceRecord 验收记录。
ChangeRequest 挂在需求上，沿血缘计算 impactNodes 波及节点；ReviewRecord 锚定到具体产物版本——这条链就是「关联、同步、追溯」的实现基础。
功能组
| 功能组 | 环节 | 内容 |
|---|---|---|
| 项目工作台 | 横切 | 概览与里程碑 · 按角色聚合的待办 · 协作动态 · 风险与指标 · 角色切换 |
| 需求中心 | ①② | 台账导入与 AI 结构化 · 七态列表 · 详情与条款 · 评审 · 确认基线 · 版本记录 |
| AI 生产中心 | ③④⑤ | 原型／UI／代码三条生产线 · 状态总览 · 草稿放行工位 |
| 协作评审中心 | 横切回路 | 产物预览 · 新旧 diff 通过／驳回 · 锚定评论 · 阶段确认与责任记录 |
| 变更追溯中心 ★ | 横切 | 血缘图谱 · 变更冲击波 · 范围勾选与定向派发 · 回滚基线 · 变更时间线 |
| 验收交付中心 | ⑥ | AI 验收用例 · 多端检查 · 缺陷与回归 · 验收确认 · 发布包与归档 |
三端导航与血缘图谱形态
| 形态 | 导航与布局 | 血缘图谱怎么放 |
|---|---|---|
| 移动端 320–767 题面指定 H5 | 底部页签 56px；单列滚动流 + 固定页头与底部结算区 | 分层钻取（需求／产物／任务三层），影响清单单列承载——不做可缩放大画布 |
| 平板 768–1279 | 沿用底部页签；单列居中，页边距 24，卡片最大宽 640 | 同移动端 |
| 桌面端 ≥1280 | 左侧竖排导航 216px；grid 多栏 | 血缘铺开为画布主舞台，影响清单为右侧常驻面板 372px，结算条横跨底部 |
四个交互锚点
锚点 一
等宽编号
ID、版本号、时间戳、置信度一律等宽，可逐字核对、可跨屏对账。含图谱节点编号。
锚点 二
hairline 分隔
血缘／层级／时间序一律 1px 垂直 rail + 逐行左伸刻度，不退化为分组卡或多列网格。
锚点 三
单一强调色
信号青只在需要人做决定的地方亮起，不做卡片填充与大面积底色。
锚点 四
信号流
强调色沿血缘连线以描边虚线偏移传导，表达变更正在传播。
五态通则
| 屏态 | 表达 | 硬要求 |
|---|---|---|
| 默认 | 面板静置，1px hairline，无投影 | 首屏 1.5 屏内出现当前角色的主任务 |
| 加载 | 骨架 + AI 目录页逐项打勾 | 分步骤可见，步骤名说人话，不用无意义转圈 |
| 空 | 线性图标 + 单一 CTA | 只给一个出口，不制造选择负担 |
| 错误 | 危险红横幅 + 同屏降级动作 | 文案必须回答「现在能做什么」，禁止只说失败了 |
| 成功 | 绿色勾选 + pill toast（0.4s 淡入） | 同屏可见状态已变，不需用户自己去找 |
恢复机制
- 人工优先：字段一经人工编辑即标记 edited，AI 重生成时跳过该字段。
- 不删除只留痕：变更一律生成新版本，旧版本转「已过时」保留在血缘中。
- 可回滚：可回滚至任意历史基线，回滚事件写入时间线。
- 状态持久：会话内刷新保持；工作台一键重置演示数据。