name: design-handoff description: 为开发交接准备设计。记录规范、交互和资产，以实现高效的开发并保持设计质量。
设计交接
概览
设计交接桥接设计与开发，确保开发人员拥有准确高效实现设计所需的所有信息。
何时使用
- 开发开始前
- 设计完成功能
- 组件库更新
- 设计系统变更
- 迭代细化交接
指南
1. 设计文档
设计交接包：
概览：
- 功能描述
- 用户流程
- 关键交互
- 平台（网页、iOS、Android）
屏幕和组件：
- 所有屏幕设计
- 响应式变体（手机、平板、桌面）
- 所有组件状态（默认、悬停、焦点、禁用、错误）
- 暗色模式变体（如适用）
规范：
- 字体（字体、大小、粗细、行高）
- 间距和布局（内边距、外边距、间隙）
- 颜色（十六进制值、不透明度）
- 阴影和高度
- 边框半径
- 动画和过渡
交互：
- 点击/轻触行为
- 悬停状态
- 焦点指示器
- 加载状态
- 错误状态
- 成功状态
资产：
- SVG/PNG图标（带颜色变体）
- 插图
- 背景图片
- Logo文件
- 所有资产按规格导出
可访问性：
- ARIA属性
- 键盘导航
- 颜色对比比率
- 焦点指示器
- 图像的替代文本
响应式断点：
- 手机（320px - 480px）
- 平板（768px - 1024px）
- 桌面（1200px+）
- 每个断点的布局变化
---
## 设计规范：
字体规范示例：
元素：一级标题（h1）
字体家族：Inter
字体大小：48px（桌面），32px（平板），24px（手机）
字体粗细：700（粗体）
行高：1.2（57.6px）
字间距：-0.02em
颜色：#1F2937
颜色规范示例：
主品牌：#2196F3
对比度：在白色背景上为4.5:1
RGB：rgb(33, 150, 243)
用途：主要操作、链接、焦点指示器
间距示例：
容器内边距：32px（桌面），24px（平板），16px（手机）
段落间隙：48px（桌面），32px（平板），24px（手机）
组件间距：16px（默认），8px（紧凑），24px（慷慨）
2. 开发者友好文档
# 创建开发者就绪的交接文档
class DesignHandoff:
def create_spec_document(self, design):
"""生成全面的规范"""
return {
'title': design.name,
'version': '1.0',
'last_updated': '2025年1月15日',
'design_owner': 'Sarah Chen',
'development_owner': 'John Smith',
'status': '准备开发',
'overview': {
'description': '这个功能做什么',
'user_goal': '用户完成什么',
'success_criteria': '我们如何衡量成功'
},
'components': [
{
'name': '主按钮',
'states': ['默认', '悬停', '活动', '禁用', '加载'],
'specs': {
'padding': '12px 24px',
'border_radius': '8px',
'font_size': '16px',
'font_weight': '600',
'min_height': '44px'
},
'colors': {
'default': '#2196F3',
'hover': '#1976D2',
'disabled': '#CCCCCC'
},
'figma_link': 'https://figma.com/...'
}
],
'interactions': [
{
'trigger': '点击主按钮',
'action': '提交表单',
'feedback': '按钮显示加载旋转器',
'success': '导航到成功页面',
'error': '显示错误消息'
}
]
}
def create_component_inventory(self, design):
"""列出所有组件和变体"""
return {
'ui_components': {
'buttons': ['主按钮', '次按钮', '轮廓按钮', '文本按钮'],
'inputs': ['文本', '电子邮件', '密码', '搜索'],
'selects': ['下拉菜单', '自动完成', '单选按钮', '复选框'],
'feedback': ['吐司', '模态框', '警告', '进度'],
'navigation': ['面包屑', '标签页', '抽屉', '分页']
},
'total_components': 50,
'total_variants': 250
}
def export_assets(self, design):
"""准备优化的资产"""
return {
'exports': [
{'name': 'icons-16.svg', 'size': '16x16px', 'format': 'SVG'},
{'name': 'icons-24.svg', 'size': '24x24px', 'format': 'SVG'},
{'name': 'icons-32.svg', 'size': '32x32px', 'format': 'SVG'},
{'name': 'logo.svg', 'format': 'SVG', 'colors': ['主色', '白色', '暗色']},
{'name': 'placeholder-image.png', 'size': '1200x800px', 'format': 'PNG'}
],
'optimization': '所有资产压缩，SVGs最小化',
'storage': '与开发团队共享的云驱动链接'
}
3. 交接清单
设计交接清单：
交接前：
[ ] 所有屏幕完成并审核
[ ] 所有组件状态记录
[ ] 响应式变体指定
[ ] 创建暗色模式变体（如适用）
[ ] 完成可访问性审核
[ ] 用时序记录动画
[ ] 指定所有交互
[ ] 编写规范文档
[ ] 导出并优化资产
[ ] 设计经产品经理批准
[ ] 设计经技术领导批准
文档：
[ ] 编写概览文档
[ ] 记录组件规范
[ ] 指定响应式断点
[ ] 记录交互流程
[ ] 确定复制和标签
[ ] 记录错误状态
[ ] 记录加载状态
[ ] 记录空状态
[ ] 列出可访问性要求
[ ] 记录性能限制
资产：
[ ] 导出图标（所有大小）
[ ] 包括插图
[ ] 优化图像
[ ] 定义调色板
[ ] 字体规范清晰
[ ] 定义间距/网格
[ ] 提供阴影定义
[ ] 组织所有资产
测试：
[ ] 在移动设备上审核设计
[ ] 验证交互流程
[ ] 验证对比比率
[ ] 可见焦点状态
[ ] 计划键盘导航
交接会议：
[ ] 解释设计理由
[ ] 讨论技术限制
[ ] 同意时间范围和范围
[ ] 回答问题
[ ] 澄清下一步
[ ] 设计师可用于回答问题
4. 设计与开发协作
交接最佳实践：
沟通：
- 开发开始前安排启动会议
- 设计师可用于回答问题（每周至少4小时）
- 使用共享设计工具（Figma）作为真相来源
- 使用设计评论进行澄清
- 定期同步会议（推荐每周）
文档：
- 为非明显设计编写规范
- 包括设计决策的理由
- 记录边缘情况
- 链接到设计模式
- 引用设计系统
灵活性：
- 允许开发人员进行技术可行性改进
- 对实现替代品持开放态度
- 测试实现并迭代
- 针对浏览器/设备限制进行调整
- 适应性能需求
流程：
1. 设计完成 → 在Figma中共享
2. 开发人员审核规范，提出问题
3. 启动会议以对齐
4. 开发人员实现，设计师审查
5. 第一次实现审查
6. 设计润色阶段
7. 最终批准
---
常见交接问题和解决方案：
问题：缺少响应式设计
解决方案：在交接中包括平板和手机变体
问题：交互不明确
解决方案：录制原型视频或创建Figma流程
问题：颜色规范模糊
解决方案：导出带有十六进制、RGB和CSS变量的调色板
问题：缺少边缘情况
解决方案：记录错误、加载和空状态
问题：开发过程中断开连接
解决方案：计划定期同步会议和代码审查
最佳实践
✅ 做
- 创建全面的文档
- 导出所有资产和规范
- 记录每个组件状态
- 包括响应式变体
- 解释设计决策
- 提供开发者友好的规范
- 使用共享设计工具
- 安排启动会议
- 可用于回答问题
- 审查实现并迭代
❌ 不做
- 期望开发人员猜测
- 将响应式设计留给机会
- 跳过边缘情况文档
- 使用不清晰的规范
- 交接后消失
- 在开发中更改设计而不通知
- 提供图像而不是矢量文件
- 忽略技术限制
- 交接中跳过可访问性
设计交接提示
- 使用Figma进行设计到开发（自动调整大小，规范）
- 与设计并行在代码中创建组件库
- 记录设计令牌（颜色、字体、间距）
- 为复杂交互录制Figma演示
- 维护设计系统作为真相来源