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.
Review the instructions the agent will receive before you install.
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:
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
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.