Des2Code — 使い方ガイド
Summary
Des2Code は Figma デザインに対して、プロジェクトにインポート済みのコードコンポーネントを AI で照合するツールです。
コードを生成するのではなく 「このデザインに似たコンポーネントはどれか」 を教えてくれます。
Claude や Cursor などのコーディングツールは、照合結果を参考にしながら最終的なコードを実装します。
事前準備
Des2Code を実行するには事前に以下の準備が必要です。
1. Figma トークンの登録
Figma ファイルにアクセスするための Personal Access Token を登録します。
2. コンポーネントのインポート
照合対象となるコードコンポーネントを事前にインポートしておく必要があります。
コンポーネントが未登録の場合、照合結果は 0 件になります。
Code Import ガイド に従い、Storybook screenshot の準備、component discovery の検証、 少数 component のインポート、component catalog の全件インポートの順に実行します。
3. デザインのインポート
照合したい Figma デザインをインポートします。インポート時に AI がデザインを解析し、ベクトル埋め込みを生成します（1〜5 分程度かかります）。
4. Figma MCPの設定
Claude / Cursor などの AI エージェントで FigmaのMCPサーバーを設定する必要があります。 FigmaのMCPサーバーが未設定の場合、
使い方・セットアップ
1. Cursorを起動し、Cursor Settingsを開きます。
2. Tools & MCPを選択し、Add Custom MCPを押下します。
3. mcp.jsonが開くので、下記をコピペし、保存してください。
{
"mcpServers": {
"guinness-mcp": {
"url": "d1972570k4gd0d.cloudfront.net/mcp",
"headers": {
"Authorization": "Bearer zch-jfg3xhv3rex2MET"
}
}
}
}
4. guinness-mcpが緑色になっていたら接続成功です。
