それをデザインする。その後は? FigmaからコードへのAI... ノート

それをデザインする。その後は? FigmaからコードへのAIの混乱を明確にする地図

AIによる設計からコーディングまでの道のりは複雑で、完全に実現されておらず、しばしば簡略化されたデモで誤解を招く形で示されています。この複雑さは、設計を機能的なコードに翻訳するために複数の層が連携して機能しなければならないことに起因しています。最初のレイヤーであるModel Context Protocol(MCP)は標準化された接続として機能し、ClaudeのようなAIモデルが画像だけでなく直接デザインファイルにアクセスし理解できるようにします。これによりAIが設計の詳細を確認できない問題は修正されますが、既存のコードコンポーネントへのアクセスは許されません。レイヤー2はマークダウン(md)ファイルで、AIのメモリとして機能し、デザインファイル自体には明確に表示されていない設計ルール、推論、ガイドラインを保存します。これらのプレーンテキストファイルはAIに文脈を提供し、意思決定の参考となり、一貫性を確保しています。しかし、マークダウンファイルは強制力のあるルールではなく助言的なものであり、古くなったり大きすぎて効果的でなくなることがあります。3つ目のレイヤーではスキルが導入されます。これは特定のタスクを一貫して行う方法をAIに指示する特定の指示やコードのセットで、例えばレシピの説明です。スキルは必要な時のみ発動し、繰り返し作業が均一に実行されるようにします。スキルはプロセスを自動化しますが、それでも手動で作成・更新が必要であり、設計の既存のコードコンポーネントと本質的に連携しているわけではありません。最後の層であるマッピングは、設計とコードの世界をつなぐ重要なステップであり、開発者の関与が必要です。このレイヤーは、Figmaのようなソフトウェアの特定の設計要素と、それらに対応するコードベースの実際の構成要素を正式にリンクします。Code Connectのようなツールはこれを実現し、AIが重複を生成するのではなく、既存の機能的なコンポーネントを活用できるようにします。このマッピングは単一の真実の源を確立しますが、開発者による継続的なメンテナンスが必要となり、リソース集約的なプロセスとなっています。
CdXz5zHNQW_C8zPfIU4lt.png