storybook-figma-mcp

概要

Figma デザインを AI に実装させる際の推測を減らすツール。Figma デザインツリーを読み取り、構築に必要なすべてのコンポーネントを特定します。

主な特徴

• フレームワーク非依存で React/Vue/Svelte/Angular に対応
• Storybook を参照して既存コンポーネントを把握
• AIへ「利用可能/軽微更新/新規作成」の3分類を伝える
• 実際の props と design tokens を用いて幻覚を抑制

使い方の要点

• Figma デザインを解析して要素を列挙
• Storybook の現状と照合し不足を特定
• 必要に応じて適切なコンポーネントをライブラリから取り込み、構築

期待される効果

• デザインと実装の整合性を高める
• 複数フレームワーク対応で柔軟性を確保
• 開発見積もりの透明性を提供