Design Handoff

anthropics/knowledge-work-plugins/design/skills/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今天更新