概要
https://developers.prtimes.jp/2025/11/14/design-system-mcp-figma-development/
詳細内容
## 社内デザインシステムMCPとFigma MCPを活用したゼロから作らない開発
https://developers.prtimes.jp/2025/11/14/design-system-mcp-figma-development/
PR TIMESは、社内デザインシステムとFigmaを連携させ、AI（Claude Code）を活用することで、フロントエンド開発におけるコンポーネント実装の初期工数を大幅に削減する仕組みを構築しました。
**Content Type**: ⚙️ Tools
**Language**: ja
**Scores**: Signal:5/5 | Depth:4/5 | Unique:4/5 | Practical:5/5 | Anti-Hype:4/5
**Main Journal**: 89/100 | **Annex Potential**: 87/100 | **Overall**: 88/100
**Topics**: [[デザインシステム, Figma, AIコード生成, フロントエンド開発, 開発ワークフロー改善]]
PR TIMESは、新入社員が既存のUI刷新プロジェクトにスムーズに参画できるよう、フロントエンド開発の初動を加速する仕組みを導入しました。この取り組みは、AIを活用して実装前の確認作業と初期実装の負荷を軽減することに焦点を当てています。
具体的には、社内デザインシステムをModel Context Protocol (MCP) に準拠させ、Figmaの情報を取得するFigma MCPと連携。さらに、Claude CodeのCustom Slash Commandを作成し、生成ガイドラインや出力形式といったコンテキストを明示的に与えることで、誰が実行しても社内デザインシステムに沿ったUIコンポーネントの叩き台を生成可能にしました。デザインシステムMCPは、TypeScript SDKを用いてコンポーネント検索、使用例取得、デザイントークン取得のツールを提供し、Storybookのビルド成果物やglobal.cssを参照して情報を補完します。
このシステムにより、Figmaデザインからデザインシステムに準拠したReactコンポーネント（TypeScript、CSS Modules、Storybookファイル含む）が70〜80点の完成度で自動生成されます。著者は、これにより既存コンポーネントやデザイントークンの確認コストが削減され、ゼロから組み立てるのではなく、生成された具体物を起点に微調整する開発フローに変わったため、実装のスピードとPull Request作成までの時間が大幅に短縮されたと説明しています。
一方で、Figmaデザインの深いネストが過剰な`div`構造を生み出すことや、Storybookのビルド成果物の手動更新が必要といった課題も残っています。しかし、完全自動化ではなく「使える叩き台を素早く出す」という現実的な方針が、タイトなスケジュールの中での開発加速に大きく貢献したと評価されています。今後は、運用を通じて精度を高め、さらなる活用を目指す方針です。