handoff-to-claude-code

当用户要求将已完成的设计交给开发者或编码 Agent，以便在真实代码库中实现时加载。此技能的输出是一个自包含的交接文件夹，打包为 ZIP 并提供给用户下载。

文件夹设置

• 在 ./opendesign/handoffs/<feature-slug>/ 下创建文件夹。Slug 用于描述功能（例如 onboarding-flow、settings-redesign）。项目根目录下绝不能使用 handoff/、export/ 或类似的泛化名称。
• 将所有相关的 HTML 原型、组件文件、图像、字体和引用的资源复制到该文件夹中。开发者不应需要回到主项目目录树中追踪路径。
• 在文件夹根目录生成 README.md。开发者所需的一切操作信息都必须包含在 README 中。

README 结构

以下各节均为必需内容。请严格按照以下顺序使用这些标题。

1. 概述。 用一段简短文字说明此功能是什么，以及它实现了什么。不要介绍设计历史。
2. 关于设计文件。 开头必须包含免责声明，措辞可不同但含义必须一致：此包中的 HTML 文件是设计参考，不是可直接复制的生产代码。开发者的任务是在目标代码库的既有框架（React、Vue、SwiftUI、原生等）中，使用既定模式和库重新实现这些设计。如果项目尚无代码库，则选择最适合该项目的框架。
3. 保真度。 明确说明设计是高保真（像素级还原；精确重现）还是低保真（线框图；用于参考布局和流程，样式则应用现有设计系统）。此判断会影响 README 其余内容的权威程度。
4. 屏幕 / 视图。 记录设计中的每个屏幕，包含：
   • 名称和用途。
   • 布局 — 网格结构、弹性布局方向、宽度、高度、边距、内边距。提供精确数值。
   • 组件。逐一说明其位置和尺寸、精确颜色（十六进制）、排版（字体系列、字号、字重、行高、字间距）、圆角半径、阴影、边框、悬停 / 激活 / 焦点状态，以及精确文案。
5. 交互和行为。 点击处理器、导航流程、动画（时长、缓动、动画属性）、悬停状态、加载状态、错误状态、表单验证规则，以及适用时的响应式行为。
6. 状态管理。 状态变量、状态转换及其触发条件、数据获取要求。
7. 设计令牌。 颜色（含十六进制）、间距比例、字号比例、圆角半径、阴影。使用扁平列表，不要写成段落。
8. 资源。 列出设计中使用的每张图像、每个图标、每种字体及其他资源，并注明其来源。
9. 文件。 列出包中包含的 HTML/CSS/JS 文件，并说明每个文件对应的内容。

硬性规则

• 对尺寸、颜色和排版的描述必须极其精确。开发者将依据此文档实现，而不是凭目测还原 HTML。
• 开头必须明确说明 HTML 仅供参考，不是最终交付产物。这是开发者最需要理解的一点；否则他们可能会直接把原型粘贴进代码库并发布。
• 如果设计使用了品牌资源，请告知开发者从代码库现有的品牌系统中调用，而不是复制 HTML 中嵌入的资源。
• 完成前，询问用户是否希望在包中包含设计截图。默认不要包含截图。
• 写好文件夹后，将其打包为 ZIP 并提供给用户下载。ZIP 文件名为 <feature-slug>.zip。

README 语气

• 面向未参与设计讨论的开发者撰写。不要写“如我们讨论过”，也不要假定对方了解背景。
• 使用祈使句，表达具体明确。例如：“主要按钮使用 #246BFD”，优于“主要按钮应使用蓝色调。”
• 除非开发者需要相关说明才能正确实现，否则不要解释理由或设计依据。这是一份规格说明，不是宣传材料。