design-handoff

/design-handoff

見慣れないプレースホルダーがある場合や、接続されているツールを確認する必要がある場合は、CONNECTORS.mdを参照してください。

デザインから包括的な開発者向け引き継ぎドキュメントを作成します。

使用方法

/design-handoff $ARGUMENTS

次のデザインの引き継ぎ仕様を作成してください：@$1

Figma の URL が指定されている場合は、Figma からデザインを取得します。それ以外の場合は、提供された説明またはスクリーンショットを基に作業します。

含める内容

ビジュアル仕様

• 正確な寸法（パディング、マージン、幅）
• デザイントークンの参照（色、タイポグラフィ、間隔）
• レスポンシブブレークポイントと動作
• コンポーネントのバリエーションと状態

インタラクション仕様

• クリック／タップ時の動作
• ホバー状態
• トランジションとアニメーション（時間、イージング）
• ジェスチャーのサポート（スワイプ、ピンチ、長押し）

コンテンツ仕様

• 文字数制限
• 省略表示の動作
• 空の状態
• 読み込み状態
• エラー状態

エッジケース

• 最小／最大のコンテンツ
• 国際化されたテキスト（長い文字列）
• 低速な接続
• データの欠落

アクセシビリティ

• フォーカス順序
• ARIA ラベルとロール
• キーボード操作
• スクリーンリーダーへの通知

原則

1. 推測しない — 指定されていない内容があると、開発者は推測することになります。すべてを明確に指定してください。
2. 値ではなくトークンを使う — 16px ではなく spacing-md を参照してください。
3. すべての状態を示す — デフォルト、ホバー、アクティブ、無効、読み込み中、エラー、空の状態。
4. 理由を説明する — 「ユーザーは主に片手で操作するため、モバイルでは折りたたみます」と説明すると、開発者が適切に判断しやすくなります。

出力

## 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]

コネクターが利用可能な場合

~~design tool が接続されている場合：

• Figma から正確な寸法、トークン、コンポーネント仕様を取得します
• アセットをエクスポートし、完全な仕様書を作成します

~~project tracker が接続されている場合：

• 引き継ぎを実装チケットにリンクします
• 仕様書の各セクションのサブタスクを作成します

ヒント

1. Figma のリンクを共有する — 正確な寸法、トークン、コンポーネント情報を取得できます。
2. エッジケースに触れる — 「100 個のアイテムがある場合はどうなりますか？」と伝えると、境界条件を仕様に盛り込めます。
3. 技術スタックを指定する — 「React + Tailwind を使用しています」と伝えると、関連する実装上の注意点を提示できます。