From ios-development
Implements SwiftUI Views from Figma designs using Figma MCP tools (figma:get_design_context, figma:get_screenshot, figma:get_variable_defs, figma:get_metadata). Splits large designs into appropriately-sized components, respects existing codebase conventions, and adds previews for each component. Use when implementing SwiftUI from Figma design URLs (e.g., figma.com/design/...), converting designs to code, or building iOS UI from Figma mockups. Do NOT call Figma MCP tools directly without reading this skill first.
How this skill is triggered — by the user, by Claude, or both
Slash command
/ios-development:implementing-figma-to-swiftuiThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
以下のチェックリストをコピーして進捗を管理する:
以下のチェックリストをコピーして進捗を管理する:
- [ ] Step 1: デザイン情報を収集(Figma MCP)
- [ ] Step 2: 既存コードベースを確認
- [ ] Step 3: コンポーネント構造を計画
- [ ] Step 4: ユーザーに方針を確認
- [ ] Step 5: プレビュー付きで実装
- [ ] Step 6: デザインと照合して検証
Figma MCPツールを完全修飾名で使用する:
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) [構造が複雑な場合]
→ 子ノード一覧を取得してコンポーネント分割を検討
システムUIは除外: ステータスバー、ホームインジケーター、セーフエリア表示。
実装前に確認する:
分割する場合:
分割しない場合:
不明な場合は実装前に確認する:
| トピック | 確認例 |
|---|---|
| 命名 | 「既存のCommonHeaderViewを使用?新規でProductDetailHeaderViewを作成?」 |
| ファイル配置 | 「Features/ProductDetail/に配置?」 |
| 既存コンポーネント | 「類似のPriceLabelが存在—再利用?バリアント作成?」 |
| デザイン解釈 | 「このスペーシングが曖昧—16pt?20pt?」 |
| 状態管理 | 「@Stateで管理?親から渡す?」 |
選択肢が明確な場合はAskUserQuestionツールを使用する(例:既存コンポーネントの再利用 vs 新規作成、複数のファイル配置オプション)。
すべてのViewに#Previewを追加する:
#Preview { ComponentView(model: .preview) }
// 複数の状態がある場合
#Preview("Default") { ComponentView(model: .preview) }
#Preview("Loading") { ComponentView(model: .previewLoading) }
Figmaの値を正確に使用する—丸めたり近似したりしない。
figma:get_variable_defsの出力を既存のColor/Font extensionにマッピングする(利用可能な場合)。
実装したViewでは警告が残らないようする。
実装中でも不明点があればユーザーに確認を行う。
figma:get_screenshotの出力と実装を比較して正確性を確認する。
npx claudepluginhub xtone/ai_development_tools --plugin ios-developmentTranslates between Figma designs and SwiftUI code in both directions: design-to-code and code-to-design. Routes to direction-specific reference docs.
Converts Stitch mobile designs to native iOS SwiftUI views with VStack/HStack/ZStack layout mapping, dark mode color assets, NavigationStack/TabView routing, and Xcode project structure.
Converts Claude HTML/CSS prototypes (via design URL or .tar.gz) to single self-contained SwiftUI View files in active Xcode workspaces. Generates code, builds, previews, and visually diffs for layout fidelity.