Workflow
Copy the following checklist to manage progress:
- [ ] Step 1: デザイン情報を収集（Figma MCP）
- [ ] Step 2: 既存コードベースを確認
- [ ] Step 3: コンポーネント構造を計画
- [ ] Step 4: ユーザーに方針を確認
- [ ] Step 5: プレビュー付きで実装
- [ ] Step 6: デザインと照合して検証
Step 1: Gather design information
Use the Figma MCP tool with its fully qualified name:
1. figma:get_design_context(nodeId, clientLanguages: "swift", clientFrameworks: "swiftui")
→ コード生成用のデザインデータを取得
2. figma:get_screenshot(nodeId)
→ 実装時の視覚的リファレンス
3. figma:get_variable_defs(nodeId)
→ 色・フォント・スペーシング変数をSwiftUIにマッピング
4. figma:get_metadata(nodeId) [構造が複雑な場合]
→ 子ノード一覧を取得してコンポーネント分割を検討
Exclude system UI: status bar, home indicator, safe area display.
Step 2: Check the existing codebase
Before implementation, check:
- Reusable Views: existing components such as Button, Card, Cell, and elements involved in global transitions such as Navigation Bar and TabView
- Resources: Color/Font extensions, Image assets, spacing constants
- Naming patterns: View suffixes, file structure, property naming
Step 3: Plan the component structure
When to split:
- UI elements used repeatedly
- Independent sections (header, list cells)
- The View exceeds about 50 lines
- The element has its own state
When not to split:
- Simple one-off elements
- Under 10 lines
- Tightly coupled with the parent
Step 4: Confirm with the user
If anything is unclear, confirm before implementation:
| Topic | Confirmation example |
|---|---|
| Naming | "ExistingCommonHeaderViewto use? Create a newProductDetailHeaderView?" |
| File placement | 「Features/ProductDetail/to place it in?" |
| Existing components | "A similarPriceLabelexists—reuse it? Create a variant?" |
| Design interpretation | "This spacing is ambiguous—16pt? 20pt?" |
| State management | 「@Stateto manage it? Pass it from the parent?" |
If the options are clear, use the AskUserQuestion tool(e.g., reusing an existing component vs creating a new one, multiple file placement options).
Step 5: Implementation
For every View, add#Preview:
#Preview { ComponentView(model: .preview) }
// 複数の状態がある場合
#Preview("Default") { ComponentView(model: .preview) }
#Preview("Loading") { ComponentView(model: .previewLoading) }
Use Figma values exactly—do not round or approximate.
figma:get_variable_defsMap the output of to existing Color/Font extensions (when available).
Ensure no warnings remain in the implemented View.
Even during implementation, confirm with the user if anything is unclear.
Step 6: Verification
figma:get_screenshotCompare the output of with the implementation to verify accuracy.