AIでデザインシステムをまるごと作れる? まだそこまでは無理です。でも、デザインシステムの中で最も地味な作業 — トークン監査、文書化、一貫性の検証 — をAIに任せると、50倍は速くなります。UI CollectiveのKirkが実際に使っているワークフローを公開していて、ポイントはFigma MCP + Cursorの組み合わせです。
これは何?
AIとデザインシステムの現状を正直に整理するとこうなります。AIが苦手なことがまだたくさんあるんです:
- 変数ライブラリをゼロから作ること
「SaaSヘルステックスタートアップ用の変数ライブラリを作って」— これは無理です。かなりの入力値と繰り返し作業が必要になります。 - デザインシステムを使ってFigmaデザインを作ること
Figma Makeでも試みられていますが、精度が落ちます。パディング138.07px、テキストスタイル未適用といった問題が出てきます。 - コンポーネントを作ること
AIがデザインは作っても、オートレイアウトフレームの代わりにグループを使うなど、実務では使えない結果になりがちです。
では、AIが得意なことは何でしょう? 監査（audit）と文書化（documentation）です。人がやると目が疲れる反復検証作業を、AIが瞬時に処理してくれます。
Model Context Protocol（MCP）を通じて、Cursor AIがFigmaファイルを直接読み取れるようにする接続です。 デザインファイルのカラー、パディング、フォント、コンポーネント構造をAIがリアルタイムで把握します。設定は、Cursorの設定 → MCP → Figmaサーバーを追加するだけです。
何が変わるのか?
これまでデザインシステムのトークンが正しく適用されているか確認するには、デザイナーがコンポーネントをひとつひとつクリックしながら変数を検証する必要がありました。ダッシュボード1枚に数百の要素があったら? それは大変な作業です。
| 手動監査 | AI自動監査（Figma MCP + Cursor） | |
|---|---|---|
| 所要時間 | コンポーネントあたり数分 | ページ全体で数秒 |
| 精度 | 人の目に依存（ミスが起きやすい） | ルールベースで自動検出 |
| 一貫性 | 担当者によって異なる | 同じルールで常に同じ結果 |
| スケール | ページが増えるほど比例して増加 | ページ数にほぼ左右されない |
Kirkの実践ワークフローは、2つの主要な自動化に分かれています:
自動化1: デザイントークン監査
Figmaに整理されたトークンテーブル（トークン名、ライト/ダークモードの値、説明）をFigmaリンクでCursorに渡すと、AIが自動的にCursor Ruleを生成します。 このRuleは、「surface-defaultは背景にのみ、text-primaryはテキストにのみ」といった変数の使用ルールです。
次に再利用可能なCommandを作ります。@check-variablesを呼び出してFigmaリンクを貼るだけで、AIが対象デザインの全要素を分析し、誤った変数を検出します。 たとえば「テキストにborder変数が適用されている → text-primary-on-colorを使ってください」「borderがハードコードされたhex値 → border-defaultを適用してください」といった具体的な修正案を提示してくれます。
自動化2: コンポーネントドキュメント生成
Figmaコンポーネントのリンクを渡すと、AIがコンポーネントを分析して、名前、目的、使用すべき場面、使用しない場面、アクセシビリティガイドライン、プロパティ、バリアントを自動的に文書化します。 それをZero HeightやSupernovaといったドキュメントサイトにそのまま掲載できます。
注意
AIが生成したドキュメントは出発点であり、完成品ではありません。 必ずレビューしてコンテキストを加える必要があります。AIがコンポーネントの用途を推測する際に確認を求めるよう、Ruleに明示しておくことが重要です。
始め方のポイント
- Cursorのインストール + Figma MCPの接続
cursor.comからダウンロードし、Figma MCPカタログで「Add MCP to Cursor」をクリック。FigmaのPersonal Access Tokenを環境変数として設定します。 - トークンテーブルの準備
Figmaにトークン名、ライト/ダークモードの値、説明が整理されたテーブルが必要です。まだなければ今すぐ作りましょう — AI自動化の基本となる入力値です。 - Cursor Ruleの生成
トークンテーブルのFigmaリンクをCursorに渡し、「これをもとに変数の使用ルールを作って」とリクエストします。AIが各トークンの用途とコンテキストをまとめたRuleファイルを生成します。 - 再利用できるCommandの作成
Cursorの設定 → Rules and Commandsで「check-variables」Commandを作ります。Figmaリンクを受け取って変数を監査するステップごとの指示を入れます。 - 実行 + 繰り返し
デザインやコンポーネントのFigmaリンクでCommandを呼び出すと、すぐに監査結果が出てきます。文書化も同じ方法でCommandを作って活用します。
