Turn a design into a developer handoff document covering layout, shared design settings, component options, interactions, and screen-size behavior. Include loading and error states, animation details, and accessibility notes to clarify implementation requirements.
中文简介正在准备中。当前显示英语简介。
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.
安装前可以查看交给 AI 代理的指令内容。
If you see unfamiliar placeholders or need to check which tools are connected, see CONNECTORS.md.
Generate comprehensive developer handoff documentation from a design.
/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.
spacing-md not 16px.## 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 ~~design tool is connected:
If ~~project tracker is connected:
还没有评价。欢迎分享你的使用感受。
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
Review a design or web page against WCAG 2.1 AA, an accessibility standard. Organize findings on contrast, keyboard access, forms, and screen reader behavior, with severity levels and practical recommendations for fixes.
中文简介正在准备中。当前显示英语简介。
Build a single brief on an existing customer using available sales records, emails, documents, call notes, and internal chat. Understand the current situation, key contacts, recent discussions, and gaps that may need attention.
中文简介正在准备中。当前显示英语简介。
Build or refresh a strategic customer account plan from sales records, emails, and meeting transcripts. Organize goals, stakeholders, growth opportunities, risks, and dated actions into a document, then sync approved highlights to the customer relationship management system.
中文简介正在准备中。当前显示英语简介。
Research prospective companies and contacts, check existing customer records, and assess fit against your ideal customer profile. Receive a sourced brief covering recent developments, likely priorities, outreach talking points, and a suggested next step.
中文简介正在准备中。当前显示英语简介。
Research sales accounts using Common Room data to summarize company details, buying signals, ownership, and key contacts. Answer specific questions directly or prepare a broader briefing with evidence-based next steps, clearly identifying missing information.
中文简介正在准备中。当前显示英语简介。
Score and group accounts by customer fit and engagement, such as recent contact and open sales opportunities. Identify where to focus sales effort, choose next actions, and spot promising accounts with neglected outreach or missing information.
中文简介正在准备中。当前显示英语简介。