跳转到使用指南
design-handoff作者 Anthropic

Design Handoff Skill.

一个用于品牌和设计系统工作的 Claude Code 和 Codex skill:从设计中生成开发者交接规范,包括布局、token、组件状态、断点。

  • Brand & Design Systems
  • 交接规范
anthropics/knowledge-work-plugins · design/skills/design-handoff/SKILL.mdSKILL.md
--- name: design-handoff description: Generate developer handoff specs from a design. Use when a design is ready for engineering and needs a spec sheet covering layout, design tokens, component props, interaction states, responsive breakpoints, edge cases, and animation details. --- ## Usage ## What to Include ## Principles ## Output ## Handoff Spec: [Feature/Screen Name] ## If Connectors Available
前置信息和章节标题读取自 2026-09-14 的上游文件 · 完整内容 3,939 字符

01 功能说明

design-handoff Skill 在 Claude Code 和 Codex 中的作用

摘要、工作流与产物,均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

从设计中生成开发者交接文档,面向设计已准备好交付工程、需要规格说明书的团队。将其指向一个 Figma URL,或退而使用描述或截图,它会依次处理视觉规格、交互规格、内容规格、边界情况与无障碍要求。

输出是一份 Markdown 交接规范(Handoff Spec),包含概述、布局、使用的设计 token、组件、状态与交互、响应式行为、边界情况,以及动画与运动、无障碍说明等章节。它遵循四条原则:明确指定一切而非假设、引用 token 而非原始数值、展示每种状态、并解释行为背后的原因。

它产出什么

  • 一份设计 token 表格,列出每个 token 及其数值和用途。
  • 一份组件表格,给出每个组件的变体、props 以及特殊行为说明。
  • 一份动画与运动表格,记录元素、触发条件、动画、时长和缓动函数。
查看示例提示词 ↗

工作方式

  1. 01
    确定设计来源

    提供 Figma URL 意味着设计将从 Figma 中提取;若没有,则 skill 会基于文字描述或截图来工作。

  2. 02
    明确视觉细节

    精确的内边距、外边距和宽度,颜色、字体和间距的设计 token 引用,响应式断点,以及组件的变体与状态。

  3. 03
    明确交互细节

    点击和轻触行为、悬停状态、手势支持,以及记录了时长和缓动函数的过渡效果。

  4. 04
    覆盖内容与边界情况

    字符限制、截断、空状态、加载与错误状态,以及最小与最大内容量、更长的多语言字符串、慢速网络连接和数据缺失的情况。

  5. 05
    补充无障碍细节

    焦点顺序、ARIA 标签与角色、键盘交互,以及屏幕阅读器播报内容。

  6. 06
    按模板输出规范

    最终结果会按照该文件的章节与表格结构写成一份 Markdown 交接规范(Handoff Spec)。

02 找到适合场景

何时使用 design-handoff Skill

当工作是此类品牌与设计系统工作时,在 Claude Code 或 Codex 中使用 design-handoff skill。下方的适用范围和限制取自该 skill 自己的文件。

适合场景

  • 设计已经完成并准备交付工程团队,团队需要一份涵盖布局、token、组件 props、状态、断点、边界情况和动画的规范文档。
  • 已连接项目跟踪工具,你希望将交接内容与实现工单关联起来。

了解边界

  • 只有连接了设计工具,才能获得精确的 Figma 衍生测量值、token 数值、导出的资源以及完整的规范文档。
  • 为每个规范章节设置子任务,取决于是否已连接项目跟踪工具。

需要提供的信息

  • 一个 Figma URL 或一段设计描述这是该命令所期望的参数,规范正是基于此生成的。

03 Skill 内部

design-handoff Skill 赋予 Claude Code 和 Codex 的规则

SKILL.md 为 Agent 设定的 7 条具体指令、默认值与限制——正是文件中真正改变结果的部分。

  1. 明确指定一切

    第一条原则是不做假设:如果某项内容没有被明确说明,开发者就会去猜测,因此交接文档必须涵盖这些内容。

  2. 引用 token,而非原始值

    数值以 token 名称(如 spacing-md)书写,而非像素数字。

  3. 展示所有状态

    每种状态都必须出现:默认、悬停、激活、禁用、加载、错误和空状态。

  4. 说明原因

    行为说明中附带理由,让开发者能够做出合理判断,例如解释为什么某个元素在移动端会折叠。

  5. 明确询问边界情况

    提出边界问题,例如 100 条数据时会怎样,能让这些边界条件被明确规定。

  6. 告知它技术栈

    指明技术栈,例如 React 加 Tailwind,能生成与该技术栈相关的实现说明。

  7. 分享 Figma 链接

    链接能让精确的测量值、token 和组件信息被直接提取,而非靠推测得出。

04 投入使用

在 Claude Code 或 Codex 中安装 design-handoff

一条 npx skills add 命令,然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 design-handoff 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行;安装程序会询问要把它添加到哪个 Agent。

Terminal
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-handoff

针对 design/skills/design-handoff/SKILL.md 的通用 skills CLI 命令形式;具体仓库可能记录其自身路径。

为 Skill 分配第一个品牌和 design-system 工作任务

按 skill 自身的术语撰写;把括号中的部分换成你的内容。

Starter prompt
Generate a developer handoff spec for the [checkout confirmation screen] in [Figma URL]. I need exact padding and margins, design token references instead of raw values, all component states including loading and error, and the responsive behavior at each breakpoint. We use [React + Tailwind], and please spec the empty state and what happens with [very long product names].

来源:依据 SKILL.md,按 skill 自身的术语撰写。

检查首次结果

SKILL.md 本身如何描述正确的结果:

  • 响应式行为表中 768px 以下的移动端行已填写内容,而非空白占位。
  • 边界情况会说明在没有数据时应显示什么,以及截断、加载和错误行为。
  • 无障碍说明会指明焦点顺序以及所需的 ARIA 标签。

在 OpenDesign 中通过其 SKILL.md 链接导入 design-handoff:Plugins → Add → Skill → Import from link,然后在顶部栏中选择它。

05 开源、可追溯

来源、许可与验证

本页面事实的来源,以及最后检查时间。

Author
Anthropic
Skill 文件
design/skills/design-handoff/SKILL.md 验证时记录的内容校验和;commit 8f877b6
License
Apache-2.0 来自 LICENSE。
仓库星标数
24,012 GitHub 快照拍摄于 2026-09-14,针对整个 anthropics/knowledge-work-plugins 仓库,该仓库在此目录中包含 7 个 skills。不是 design-handoff 的评分或使用计数。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序(检查日期 2026-08-28);本页面未记录实际运行。

SKILL.md 内部

  1. 用法展示 /design-handoff 的调用方式,以及 $ARGUMENTS 和 @$1 占位符。
  2. 应包含的内容列出需要涵盖的类别:视觉、交互、内容、边界情况和无障碍规范。
  3. 原则四条规则:不要假设、使用 token、展示所有状态、说明原因。
  4. 输出提供 Markdown 交接规范模板,包含其标题和表格。
  5. 如有可用连接器针对已连接的设计工具和项目跟踪工具提供的附加条件内容。
  6. 小贴士三条建议:分享 Figma 链接、提及边界情况、指明技术栈。
Skill 自身的描述
"从设计生成开发交接规范。当设计准备好进行工程开发并需要一份涵盖布局、design token、组件 props、交互状态、响应式断点、边缘情况和动画细节的规范文档时使用。"

来自 SKILL.md 的前置描述。完整文件约 3,939 字符。在 GitHub 上阅读完整文件。

06 安装之前

关于 design-handoff Skill 的常见问题

以下回答来自 2026-09-14 读取到的 SKILL.md,而非某次实际运行的记录。

如果连接了设计工具,会有什么变化?

它会直接从 Figma 拉取精确的测量值、token 和组件规格,并能导出资源和生成完整的规格说明书。

Design Handoff

在真实品牌和 design-system 工作任务上运行 design-handoff。

下载 OpenDesign,从其 SKILL.md 链接导入 design-handoff,粘贴上面的提示,在结果之前阅读计划。

终端
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-handoff

OpenDesign 桌面客户端

一套设计系统,让每一次创作都保持品牌一致

在完整的 Vibe Design Workspace 中,用同一套品牌规则生成网页、PPT、可交互原型、数据看板、图像与 HTML 视频。连接本地 Codex、Claude Code、Cursor 等编程助手,即可免费创作。

  • 覆盖网页、PPT、原型、数据看板、图像与视频
  • 140+ 设计系统,以及完整模板与技能库
  • 连接本地 Codex 与 21+ 款编程助手 · 免费使用
免费下载

支持 macOS 与 Windows