$ loading_
将设计稿转为开发交付说明，明确布局、组件、状态与响应式规范
复制安装指令，让 AI 自动完成配置 · 推荐新手
请帮我安装 askskill 上的 "design-handoff" 技能： 1. 下载 https://raw.githubusercontent.com/anthropics/knowledge-work-plugins/main/design/skills/design-handoff/SKILL.md 2. 保存为 ~/.claude/skills/design-handoff/SKILL.md 3. 装好后重载技能，告诉我可以用了
请根据这份移动端结账页设计稿，生成开发交付说明。请包含页面布局尺寸与间距、颜色与字体 token、按钮和输入框组件属性、默认/悬停/禁用/报错状态、iPhone 与 Android 响应式断点、空状态与超长文本等边界情况，以及加载动画说明。输出为结构化文档。
一份结构化的移动端开发说明文档，便于前端准确实现设计。
基于这组标签页组件设计，整理一份开发 handoff 文档。请列出组件用途、尺寸规格、间距规则、颜色 token、文案规则、props 定义、选中/未选中/禁用/聚焦状态、不同屏宽下的表现，以及可访问性注意事项。
一份可直接交给工程团队的组件级规范说明。
请把这份 Web 仪表盘设计稿转换成开发说明，覆盖栅格布局、卡片与图表组件、设计 token、交互状态、断点规则、异常数据与空数据场景、页面过渡和微动画，并标出实现时的注意事项。
一份完整的仪表盘开发交付文档，帮助团队减少沟通成本与实现偏差。
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:
围绕客户问题进行多来源调研与溯源，快速整理背景并支持准确回复。
帮助用户创作海报、插画与静态视觉稿，并输出PNG或PDF文件