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.
中文简介正在准备中。当前显示英语简介。
Retrieve financial data for Chinese markets and selected global markets using akshare-cli. Find stock prices, fund values, exchange rates, economic indicators, and financial news, then extract recent records or save results in common file formats.
中文简介正在准备中。当前显示英语简介。
Compare technology options, review a system design, or plan a new component from requirements and constraints. The skill organizes the reasoning into an architecture decision record, a document covering alternatives, trade-offs, consequences, and next steps.
中文简介正在准备中。当前显示英语简介。
Turn existing or proposed business processes into reusable standard operating procedures. Organize steps, roles, conditions, and known exceptions while marking missing details, producing clear handover documents without inventing approvals or responsibilities.
中文简介正在准备中。当前显示英语简介。
Analyze waiting, rework, and handoff waste in business processes using the facts provided. It proposes concrete improvements and, when verification is needed, defines measurement formulas and the minimum records required to assess specific issues.
中文简介正在准备中。当前显示英语简介。
Assess operational risks in processes, projects, or suppliers using provided evidence. Separate observed facts from possible consequences, propose practical responses, and prepare concise summaries or risk registers without treating unknown controls as confirmed gaps.
中文简介正在准备中。当前显示英语简介。