Design Handoff

作者 anthropicsae1513ea94dc无许可证27K 个星标收录于 2026年10月8日更新于 2026年10月8日仓库今天更新

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.

精选仅含说明Design & CreativeProductivity & Workflow
AI 生成的概览

根据设计稿生成开发者交付规格，涵盖布局、设计令牌、状态与无障碍说明。

功能
该技能根据设计稿生成结构化的开发者交付文档，设计稿可来自 Figma 链接，也可基于文字描述或截图。产出为 Markdown 规格表，涵盖精确尺寸、设计令牌、组件变体与属性、交互状态、响应式断点、内容与边界情况、动画细节以及无障碍说明。当相关连接器可用时，还会建议将交付文档关联到项目跟踪工单并创建子任务。
适用场景
适用于设计稿已就绪、需要在开发前形成书面规格的场景。适合开发者需要明确精确尺寸、令牌引用、状态覆盖和响应式行为的情况。也适合在视觉规格之外记录边界情况与无障碍要求。
运行要求
仅为指令，不附带脚本。需要提供 Figma 链接，或设计描述、截图作为输入。文中提到可选连接设计工具与项目跟踪工具，用于拉取精确规格和关联工单，但没有这些连接器时也可依据描述工作。

/design-handoff

If you see unfamiliar placeholders or need to check which tools are connected, see CONNECTORS.md.

Generate comprehensive developer handoff documentation from a design.

Usage

/design-handoff $ARGUMENTS

Generate handoff specs for: @$1

If a Figma URL is provided, pull the design from Figma. Otherwise, work from the provided description or screenshot.

What to Include

Visual Specifications

  • Exact measurements (padding, margins, widths)
  • Design token references (colors, typography, spacing)
  • Responsive breakpoints and behavior
  • Component variants and states

Interaction Specifications

  • Click/tap behavior
  • Hover states
  • Transitions and animations (duration, easing)
  • Gesture support (swipe, pinch, long-press)

Content Specifications

  • Character limits
  • Truncation behavior
  • Empty states
  • Loading states
  • Error states

Edge Cases

  • Minimum/maximum content
  • International text (longer strings)
  • Slow connections
  • Missing data

Accessibility

  • Focus order
  • ARIA labels and roles
  • Keyboard interactions
  • Screen reader announcements

Principles

  1. Don't assume — If it's not specified, the developer will guess. Specify everything.
  2. Use tokens, not values — Reference spacing-md not 16px.
  3. Show all states — Default, hover, active, disabled, loading, error, empty.
  4. Describe the why — "This collapses on mobile because users primarily use one-handed" helps developers make good judgment calls.

Output

markdown
## 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]

If Connectors Available

If ~~design tool is connected:

  • Pull exact measurements, tokens, and component specs from Figma
  • Export assets and generate a complete spec sheet

If ~~project tracker is connected:

  • Link the handoff to the implementation ticket
  • Create sub-tasks for each section of the spec

Tips

  1. Share the Figma link — I can pull exact measurements, tokens, and component info.
  2. Mention edge cases — "What happens with 100 items?" helps me spec boundary conditions.
  3. Specify the tech stack — "We use React + Tailwind" helps me give relevant implementation notes.

来源与署名

来源：anthropics/knowledge-work-plugins位于design/skills/design-handoff提交ae1513e

许可证： 无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

更多来自 anthropics/knowledge-work-plugins 的技能

Ticket Deflector

anthropics

精选

Reads a forwarded customer email or ticket, pulls order and refund status from a payments connector (PayPal, Square, or Stripe) or Shopify, account history from the CRM, and open tickets from a support desk (Zoho Desk), drafts a tone-matched reply in the owner's writing voice, and can issue a refund through the payments connector with explicit owner approval. With Shopify connected it also runs a proactive order-triage mode that surfaces orders needing attention — unfulfilled past the promised window, payment problems, pending refunds, stuck shipments — and drafts the next action for each before the customer has to ask. Use when the user says "draft a response," "answer this customer," "where's my order," "I want a refund," "check my orders," or "anything about to blow up."

待分类27K今天更新

Tax Season Organizer

anthropics

精选

Prepares tax-season materials for the owner's accountant, not tax advice. US federal tax; a non-US business gets its closed-books packet instead. Two modes: (1) quarterly estimated tax from YTD net income in the ledger (MYOB, NetSuite, QuickBooks, Xero, or Zoho Books); (2) year-end 1099 prep, scanning the ledger, PayPal, and Stripe for contractors paid over USD 600 into a 1099-NEC list with missing W-9 flags. Any tax request routes first to /tax-prep, which confirms the books are closed and reconciled before running this skill. Use this skill directly only when the owner says the period's books are already closed: "books are closed, now do the 1099s," "run the quarterly estimate off the closed numbers," or "just the contractor W-9 list."

待分类27K今天更新

Tax Prep

anthropics

精选

基于已结账的账目准备税务材料：季度预估缴税明细，或年终 1099-NEC 清单与会计师资料包。

Business & Finance27K今天更新

Smb Onboard

anthropics

精选

引导小微企业主完成首次设置：连接工具、运行一次体现价值的配方、记录业务背景并设定每周检查节奏。

Productivity & Workflow27K今天更新

Smb Router

anthropics

精选

将小企业主的需求转接到合适的插件技能或命令，并说明可用功能。

Productivity & Workflow27K今天更新

Month End Prep

anthropics

精选

Reconciles the accounting ledger (MYOB, NetSuite, QuickBooks, Xero, or Zoho Books) against PayPal, Shopify, Square, and Stripe settlements, flags transactions that need attention, suspicious duplicates, and missing receipts, then writes a plain-English P&L narrative and exports a close packet (xlsx + one-page PDF). This is the first link of the /close-month command; a request to close the month or the books routes there, and the command runs this skill before refreshing the forecast and distributing the packet. Use this skill directly only when the owner wants the reconciliation alone, with no forecast refresh and no distribution: "just reconcile, no packet," "what's missing from the books," "flag the duplicates and missing receipts," or "write the P&L narrative for this month."

待分类27K今天更新

更多Design & Creative技能

Theme Factory

anthropics

精选

提供 10 套预设配色与字体主题，并可即时生成新主题，用于为幻灯片、文档、报告和 HTML 页面统一风格。

Design & Creative179K今天更新

Slack Gif Creator

anthropics

精选

为 Slack 创建尺寸与体积经过优化的动画 GIF，提供 PIL 绘图辅助、缓动函数与校验工具。

包含脚本
Design & Creative179K今天更新

Frontend Design

anthropics

精选

在构建或改造用户界面时，提供打造独特、有意图的视觉设计的指导。

Design & Creative179K今天更新

Canvas Design

anthropics

精选

依据写好的设计理念创作原创视觉艺术，输出 PNG 或 PDF，适用于海报、艺术作品等静态成品。

Design & Creative179K今天更新

Brand Guidelines

anthropics

精选

将 Anthropic 官方品牌配色与字体应用到需要体现 Anthropic 外观风格的各类产物上。

Design & Creative179K今天更新

Frontend Design

anthropics

精选

指导智能体为新界面或改版界面进行独特、有意图的视觉设计。

Design & Creative149K今天更新