AIコーディングツールを使ってデザインデータからSwiftUIのコードを安定的に生成する by kenmaz

iOSアプリ開発においても、AIコーディングツールを活用して開発効率を向上させる事例が増えています。日々の業務でもさまざまな開発タスクでAIを活用していますが、私はその中でも特にFigmaのデザインデータをもとにSwiftUIコードを自動生成する取り組みに挑戦しています。

とはいえ、AIに「コードを生成してほしい」と指示を出すだけでは、期待どおりのコードを得ることは難しいのが実情です。特に独自のDesign Systemライブラリを使用しているような場合、適切なコンポーネントを使った狙いどおりのコードを生成させるにはいくつかの工夫が必要です。

このトークでは、安定的に品質の高いSwiftUIコードを生成するために行なった、以下のような試みについてお話しします。

• MCP Serverを用いてFigmaからデザインデータを正確に取得する
• Claude Code を使って既存のコードからSwiftUIとDesign Systemの関連性を学習し、ナレッジとして蓄積させる
• 生成されたSwiftUIのスナップショット画像とFigmaからエクスポートした画像データを比較し、AI自身に誤りを検知させ、自己修正を行わせる
• 自己修正と開発者からのフィードバックをもとにナレッジを自己更新させる
• AIを使ったコード生成における、学習 → 生成 → 検証 → 改善 のループの重要性
• 現時点における限界、理想と現実

AIコーディングツールの進化は非常に速く、追いかけるのが大変ですが、このトークを通じて、AIを活用した開発のヒントやアイデアを得て、日々の作業に取り入れるきっかけになれば幸いです。