用途:把当前对话中产出的设计整理为一份完整的交接包,供使用 Claude Code 的开发者在真实代码库中实现该设计。
主要能力:在项目目录创建交接文件夹(mkdir -p <project-folder>/design_handoff_<feature-name>/,名称需来自设计特征);编写自足的 README.md,内容包括功能概述、设计文件说明、保真度(高保真或低保真)、各屏幕/视图的名称、目的、布局、组件细节(位置尺寸、颜色十六进制值、字体排版、圆角阴影边框、悬停/激活/聚焦状态、文案)、交互与行为(点击、导航、动画时长与缓动、加载/错误状态、表单校验、响应式)、状态管理、设计令牌(颜色、间距、排版、圆角、阴影)、资源清单和文件清单。
使用方式:把相关设计文件(HTML 原型、组件文件等)复制进交接文件夹,再用 present_fs_item_for_download 工具传入该文件夹路径,让用户以 zip 下载。完成后询问用户是否要加入设计截图,默认不加入。
重要限制:README 需明确说明打包的 HTML 文件是设计参考件、而非可直接复制的生产代码,任务是在目标代码库现有环境(React、Vue、SwiftUI、原生等)中按既有模式与库重现设计,若尚无环境则选择最合适的框架实现;须精确记录尺寸、颜色和排版;若使用 Anthropic 品牌资产,应说明沿用代码库现有品牌体系。README 应自足,使未参与对话的开发者也能据此实现设计。