mcpField
D
design-handoff

design-handoff

github.com/anthropics设计与 UI33.6k3.6k 次安装1 天前更新
代码仓库

关于 design-handoff

design-handoff 是用于将设计转化为开发交接文档的技能，可依据 Figma 链接、描述或截图编写规格，涵盖视觉、交互、内容、边界情况和无障碍要求。

主要功能

  1. 01从 Figma、描述或截图生成规格
  2. 02记录尺寸、设计令牌与断点
  3. 03说明组件状态和交互行为
  4. 04涵盖内容规则与边界情况
  5. 05列出无障碍要求

适用场景

  1. 01将 Figma 设计交接给开发人员
  2. 02为截图或文字描述补齐实现规格

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/design-handoff确认已加载。

详细介绍

/design-handoff

如果你看到不熟悉的占位符，或需要确认已连接哪些工具，请参阅 CONNECTORS.md。

根据设计稿生成完整的开发者交接文档。

用法

/design-handoff $ARGUMENTS

为以下内容生成交接规格：@$1

如果提供了 Figma 链接，则从 Figma 获取设计稿。否则，基于提供的描述或截图进行工作。

包含内容

视觉规格
  • 精确尺寸（内边距、外边距、宽度）
  • 设计令牌引用（颜色、字体排版、间距）
  • 响应式断点与行为
  • 组件变体与状态
交互规格
  • 点击/点按行为
  • 悬停状态
  • 过渡与动画（时长、缓动）
  • 手势支持（滑动、捏合、长按）
内容规格
  • 字符数限制
  • 截断行为
  • 空状态
  • 加载状态
  • 错误状态
边界情况
  • 最小/最大内容
  • 国际化文本（较长的字符串）
  • 慢速网络
  • 缺失数据
无障碍
  • 焦点顺序
  • ARIA 标签与角色
  • 键盘交互
  • 屏幕阅读器播报

原则

  1. 不要假设：如果没有明确规定，开发者就会自行猜测。请说明一切。
  2. 使用令牌，而非具体数值：引用 spacing-md，而不是 16px。
  3. 展示所有状态：默认、悬停、激活、禁用、加载、错误、空状态。
  4. 说明原因：“此区域在移动端会折叠，因为用户主要单手操作”这类说明有助于开发者做出合理判断。

输出

## Handoff Spec: [Feature/Screen Name]

### Overview
[What this screen/feature does, user context]

### Layout
[Grid system, breakpoints, responsive behavior]

### Design Tokens Used
| Token | Value | Usage |
|-------|-------|-------|
| `color-primary` | #[hex] | CTA buttons, links |
| `spacing-md` | [X]px | Between sections |
| `font-heading-lg` | [size/weight/family] | Page title |

### Components
| Component | Variant | Props | Notes |
|-----------|---------|-------|-------|
| [Component] | [Variant] | [Props] | [Special behavior] |

### States and Interactions
| Element | State | Behavior |
|---------|-------|----------|
| [CTA Button] | Hover | [Background darken 10%] |
| [CTA Button] | Loading | [Spinner, disabled] |
| [Form] | Error | [Red border, error message below] |

### Responsive Behavior
| Breakpoint | Changes |
|------------|---------|
| Desktop (>1024px) | [Default layout] |
| Tablet (768-1024px) | [What changes] |
| Mobile (<768px) | [What changes] |

### Edge Cases
- **Empty state**: [What to show when no data]
- **Long text**: [Truncation rules]
- **Loading**: [Skeleton or spinner]
- **Error**: [Error state appearance]

### Animation / Motion
| Element | Trigger | Animation | Duration | Easing |
|---------|---------|-----------|----------|--------|
| [Element] | [Trigger] | [Description] | [ms] | [easing] |

### Accessibility Notes
- [Focus order]
- [ARIA labels needed]
- [Keyboard interactions]

如果有可用的连接器

如果已连接 ~~设计工具：

  • 从 Figma 获取精确尺寸、令牌和组件规格
  • 导出资源并生成完整的规格表

如果已连接 ~~项目管理工具：

  • 将交接文档关联到实现工单
  • 为规格的每个部分创建子任务

提示

  1. 分享 Figma 链接：我可以获取精确尺寸、令牌和组件信息。
  2. 说明边界情况：例如“如果有 100 个条目会怎样？”，这有助于我规定边界条件。
  3. 说明技术栈：例如“我们使用 React + Tailwind”，这有助于我提供相关的实现建议。

评论

支持 Markdown