SuperAPI AI 工具集

handoff-to-claude-code

智能体与模型

查看项目

更新于 10-16 00:05

技能介绍

用途:当用户要求把已完成的设计交给开发者或编码智能体、在真实代码库中落地实现时加载本技能。输出为一个自包含的交付文件夹,压缩成 <feature-slug>.zip 交给用户下载。

文件夹设置:在 ./opendesign/handoffs/<feature-slug>/ 创建文件夹,slug 描述功能(如 onboarding-flow、settings-redesign);不要在项目根目录使用 handoff/、export/ 之类的通用名。把相关 HTML 原型、组件文件、图片、字体及被引用的资源都复制进该文件夹,开发者不应再去主项目树里追溯路径。在文件夹根部生成 README.md,开发者所需的一切都在其中。

README 结构(各节必填,按下述顺序使用相同标题):Overview,一段话说明功能是什么、达成什么,不写设计历史;About the design files,开头即声明包内 HTML 是设计参考而非可直接复制的生产代码,开发者任务是用目标代码库既有框架(React、Vue、SwiftUI、原生等)及其模式与库重建设计,若尚无代码库则选择最合适的框架;Fidelity,明确说明是高保真(像素级,需精确还原)还是低保真(线框图,用于布局与流程,样式套用既有设计系统);Screens / views,逐个界面记录名称与用途、布局(栅格、flex 方向、宽高、内外边距等精确值)、组件(位置尺寸、十六进制颜色、字体族/字号/字重/行高/字距、圆角、阴影、边框、悬停/激活/聚焦状态、精确文案)、交互与行为(点击处理、导航流、动画的时长缓动与属性、加载与错误状态、表单校验规则、响应式行为)、状态管理(状态变量、转换及触发条件、数据获取需求);Design tokens,颜色(含十六进制)、间距尺度、字号尺度、圆角、阴影,用平铺列表而非散文;Assets,列出用到的每个图片、图标、字体及其他资源的来源;Files,列出包内 HTML/CSS/JS 文件及各自对应内容。

硬性规则:测量值、颜色与排版必须极其精确,开发者是照此文档实现而非肉眼比对 HTML;必须在开头说明 HTML 是参考而非交付产物,这是最关键的一点,否则可能把原型直接粘贴进代码库上线;若设计使用品牌资产,应让开发者取用代码库既有品牌系统,而非复制 HTML 中的内嵌副本;完成前询问用户是否要把设计截图加入包中,默认不包含;写完文件夹后压缩并命名为 <feature-slug>.zip 交付下载。

README 语气:面向未参与设计讨论的开发者,不用“如我们所讨论”,不假设上下文;用祈使句和具体表述,如“主按钮使用 #246BFD”优于“主按钮应用蓝色调”;除非实现所必需,不写设计理由与论证,这是规格而非提案。

限制:具体收费、平台与效果信息资料未提供。