设计与开发协作

设计再完美，交付断档就前功尽弃。本页沉淀设计稿到代码的交接协议：交付物规范、协作节奏、走查与还原度验收。令牌的「是什么」见UI 界面与设计系统，CSS 层的「怎么做」见前端样式方案，人怎么配合见产品思维与沟通的协作部分。

交付规范：开发拿到的稿子要「能直接实现」

设计稿需包含

交付物	内容	缺失后果
页面标注	尺寸、间距、圆角、字体/行高、状态	还原靠猜，返工
交互说明	hover / 点击 / loading / 空 / 异常态	开发自己发明一套
令牌清单	用到的新令牌与语义名	色值硬编码，换肤失效
资源导出	图标（SVG）、插画的命名与目录	素材命名混乱
响应式规则	断点下布局如何变化	只适配一种宽度

一个界面交付的「最小标注模板」

组件 / 区块：PrimaryActionButton（复用，不改）
间距：按钮组内 8px，距左边缘 24px
颜色：--color-primary（令牌），hover 用 90% 明度变体（交给令牌映射）
字体：标题 20/600/28，正文 16/400/24
状态：loading 时禁用 + 骨架或 spinner；无数据 → 空状态文案 + 引导按钮

图标与切图命名规范

• 语义命名 + kebab-case：icon-user-add.svg，尺寸信息进文件名（-16 / -24）或由组件控制；
• 统一目录结构：图标按用途分（actions/、status/、objects/）避免「untitled-001.svg」。

协作节奏：在什么节点对齐

设计开发协作的三个关键节点

1. 开工前（对齐）：需求评审后、设计动手前，确认功能范围与约束（技术可行性、数据字段是否拿得到），避免设计出「做不了」的方案；
2. 开发前（交接）：实现启动前有一场交接会：走一遍设计稿、讲清状态与交互、确认令牌与切图位置；
3. 还原后（验收）：走查 + 验收，见下文。

版本与变更管理

• 设计稿按版本管理：改动记录在顶部（日期 / 变更点），避免「设计师已经改了但开发还拿着旧稿」；
• 中大型改动要走变更通知：更新稿子 + 同步到需求单（流程见产品方向的变更管理）；
• 开发实现与设计稿差异超过预期时，先对齐再继续，不要各自默默改。

走查与还原度验收

像素级走查清单（设计 vs 实现）

• [ ] 间距与设计稿一致（用 DevTools 量关键间距，别只靠目测）
• [ ] 颜色与令牌一致（检查无硬编码色值）
• [ ] 字体：字号 / 字重 / 行高 / 字体栈生效
• [ ] 圆角、阴影、边框粗细符合令牌
• [ ] 图标尺寸、对齐、描边一致
• [ ] 响应式断点下表现符合规则

状态走查（每个组件切一遍）

• hover / active / focus-visible / disabled / loading / empty / error 全走一遍；
• 键盘可达 + 焦点环（见可用性与无障碍）。

还原度验收流程

功能冒烟通过 → 像素走查（高频页面优先）→ 状态走查
→ 记录偏差清单（严重度）→ 修复 → 复验 → 签收

• 按影响面定优先级：首页 / 主流程页面 > 内页；
• 偏差记成清单而非口头带过，验收单是复盘依据；
• 非阻塞偏差（不影响功能与可读性）可留待下迭代，但要显式记录。

常见坑速查

坑	现象	解法
稿子无标注	开发按截图猜尺寸	交付含标注/令牌/状态的最小模板
设计做「做不了」的方案	动效/功能超出技术约束	开工前对齐约束，超纲早说
变更不同步	稿子改了开发不知道	版本记录 + 变更通知到需求单
只走查首屏	弹窗/空态/错误态全是乱的	状态全集逐个走查
验收凭感觉	「差不多就行」攒一堆债	走查清单 + 偏差分级记录
偏差不记录	反复出现同样问题	验收单进复盘，找出根因

检查清单

• [ ] 交付稿含：页面标注 / 交互状态 / 令牌清单 / 资源与命名 / 响应式规则
• [ ] 图标语义命名统一，走查无硬编码色值
• [ ] 开工前、开发前、还原后三个节点已对齐
• [ ] 像素走查高频页面通过，状态走查覆盖全集
• [ ] 偏差按严重度记录并复验，非阻塞项显式留待下迭代

令牌体系与状态规范见UI 界面与设计系统与交互与信息架构；开发侧实现见前端样式方案；团队协作方法见产品思维与沟通。