Claude CodeにFigmaのデザインシステムを遵守させる方法

概要

Claude CodeがFigma MCPを通じてUIを生成する際、既存の変数やコンポーネントを強制的に適用させ、メンテナブルな出力を実現するための4つの「スキル」とワークフローを解説した記事。

詳細内容

Claude CodeとFigma MCP（Model Context Protocol）を組み合わせることで、自然言語からUIを直接生成可能になりましたが、デフォルトではデザインシステムを無視し、生のカラーコード（Hex）や独自のコンポーネントを作成してしまうという課題があります。本記事では、この「ガバナンス」の欠如を解決するために著者が開発した、ワークフロー強制レイヤーとしての4つのスキルを提案しています。 1. **Preflight**: セッション開始前にライブラリのトークンやコンポーネントを完全にロードし、ベースラインを確定させる。 2. **Reference Interpreter**: 構築前にデザインブリーフを作成し、どのセクションにどのトークンを適用するかを定義・確認する。 3. **Component Rules**: 常にライブラリ内のコンポーネントを検索し、既存のインスタンスを使用することを最優先させる。 4. **Style Binding**: すべての視覚的プロパティを強制的に変数やスタイルに紐付け、生の値の使用を禁止するQAパスを実行する。これらのルールを導入することで、AIは単なる「ピクセル生成器」から、デザインシステムのルールに沿って共同作業ができる「デザインアシスタント」へと進化します。

元記事を読む他のサマリーを見る