概要
https://uxdesign.cc/dear-llm-heres-how-my-design-system-works-b59fb9a342b7
詳細内容
## 親愛なるLLMへ、私のデザインシステムがどのように機能するかをお伝えします
https://uxdesign.cc/dear-llm-heres-how-my-design-system-works-b59fb9a342b7
**Original Title**: Dear LLM, here’s how my design system works
本記事は、LLMが本番環境で利用可能なコードを生成できるよう、デザインシステムとFigmaファイルを構造化し、明確なコンテキストと規則を与える具体的な手法を解説する。
**Content Type**: ⚙️ Tools
**Language**: en
**Scores**: Signal:4/5 | Depth:4/5 | Unique:4/5 | Practical:5/5 | Anti-Hype:4/5
**Main Journal**: 86/100 | **Annex Potential**: 84/100 | **Overall**: 84/100
**Topics**: [[デザインシステム, Figmaからコード生成, LLMコード生成, AIエージェントワークフロー, セマンティックデザイントークン]]
本記事は、AIが生成するコードの信頼性不足（開発者の32%しか信頼していない現状）を問題提起し、本番環境で利用可能な品質のコードを得るためには、AIに「明確なコンテキストと構造化されたデータ」を提供することが不可欠であると主張します。特に、FigmaファイルをLLMに理解させるための「Model Context Protocol（MCP）」の活用に焦点を当て、デザインシステムをAIフレンドリーにするための具体的な手法を提示します。
著者はまず、Figmaファイル内で堅固な基盤を構築することの重要性を強調します。AIがDOM構造を正確に理解できるよう、レイヤーツリーをセマンティックな名称で整理し（例：「CreateProjectModal」）、不必要なネストを避けてフラットな構造を保つべきだと提言。また、開発者がAPIを定義するようにコンポーネントを設計し、状態管理にバリアント、表示/非表示に真偽値プロパティ、柔軟なコンテンツ領域にFigmaの「slots」機能を用いることで、コードに直接マッピングしやすいデザインを実現できると説明します。レイアウトにはAuto Layoutを標準とし、色指定には「color-button-background-brand」のようなセマンティックトークンを使用し、その目的をAIに伝えるべきだと提案。さらに、視覚的に表現できないコンテキスト（インタラクション詳細、アクセシビリティ要件など）は、Figmaの注釈ツールで明示的に記述するよう推奨しています。
次に、デザインを既存のコードベースにマッピングする重要性を説きます。AIが新しいコンポーネントを生成するのではなく、既存のコンポーネントを活用することが理想であり、FigmaのCode Connectなどのツールを通じて、Figmaコンポーネントをリポジトリ内の実際のコンポーネントにリンクさせるべきだと主張。コードベースがない場合でも、AIに初期の「足場」となるコンポーネントを生成させ、それをデザインシステムのコードベースの最初のバージョンとして洗練させていく方法も提案しています。究極的には、コンポーネントを構造化データ（JSON）として定義する「Components as Data」のアプローチが、AI対応デザインシステムの未来であるとしています。
最後に、AIの振る舞いをガイドするための「チートシート」の作成を促します。これには、より具体的でコンテキスト豊かなプロンプトの記述と、AIが参照するルールファイルの整備が含まれます。プロジェクトルートに`.docs/`や`.ai/`フォルダを設け、そこに`README.md`（技術スタック、AIエージェントのペルソナ、基本的な開発原則を定義）、`design-system-rules.md`（カスタムデザインシステムコンポーネントの正しい使用法、避けるべきパターンなどを詳述）、`figma-mcp-rules.md`（Figmaからコードを生成する際の具体的なワークフロー手順）という3つのコアなルールファイルを作成する具体的な構成例が示されています。
著者は、これらの「地道な」準備作業が、デザインと開発がシームレスに連携する未来の基盤を築き、反復的な翻訳作業の時間を削減し、真に価値のあるものの構築に集中できるようになると締めくくっています。