CursorのComposerは大量のUIコードを書けます。しかし、Figmaファイルを読み取ることはできません。スクリーンショットを貼り付けると推測します。スペーシングが間違い、カラー値が作り話、コードベースに存在しないコンポーネント名が作られます。問題はモデルではありません。構造化されたコンテキストが不足していることです。

figmascope がそれを解決します。FigmaファイルをZIPバンドルとしてエクスポートします。デザイントークン、画面ごとのレイアウトツリー、2×参照レンダリング、コンポーネントインベントリ、UIストリング — Cursorのエージェントが正確なコードを生成するために必要なものがすべて揃います。

このウォークスルーでは完全なパイプラインを解説します。Figma URL → コンテキストバンドル → Cursorプロンプト → レビュー済み出力。

バンドルの内容

figmascopeがファイルをエクスポートすると、ZIPには以下が含まれます：

バンドルはあなたのマシン上に留まります。どこにも再アップロードされることはありません。

ステップ1：バンドルを生成する

figmascope にアクセスし、入力フィールドにFigmaファイルのURLを貼り付けます。エクスポーターはFigma REST APIに対してブラウザ内で動作します。初回はパーソナルアクセストークンが必要です（localStorage に保存され、figmascopeサーバーに送信されることはありません）。

エージェントコンテキストをエクスポート をクリックします。ページは各フレームを処理し、トークンを解決し、IRを構築し、context-bundle.zip をあなたのマシンにダウンロードします。

ファイルに多数のフレームがある場合、コンポーネントやサムネイルではないトップレベルのフレームのみが含まれます。_meta.json にはエクスポートされたフレームと警告（グラデーションフィル、サポートされていないエフェクト）が正確に記載されます。

ステップ2：プロジェクトに展開する

Cursorが認識できる場所にバンドルを置きます。リポジトリルートの design/ ディレクトリが最もすっきりしたパターンです。

# プロジェクトルートから
unzip ~/Downloads/context-bundle.zip -d ./design/

# 構造を確認
ls design/
# CONTEXT.md  _meta.json  components/  screens/  strings.json  tokens.json

バンドルをコミットしたくない場合は design/ を .gitignore に追加してください。または、コミットすることもできます。同じFigmaファイルの同じ状態からは常に同じバンドルが生成されるため、diffは意味があります。

ステップ3：.cursorrules スニペットを追加する

Cursorはリポジトリルートの .cursorrules を読み込み、すべてのチャットコンテキストの先頭に追加します。これがエージェントをバンドルに接続する場所です。

# .cursorrules

When building UI screens:
1. Read ./design/CONTEXT.md first. It specifies the target framework and constraints.
2. Use tokens from ./design/tokens.json for all spacing, color, radius, and typography values.
3. Reference ./design/screens/<name>.json for layout structure and node hierarchy.
4. Match ./design/screens/<name>.png for visual confirmation — use it as a sanity check, not the source of truth.
5. Use string keys from ./design/strings.json rather than hardcoding UI copy.
6. Do not invent token values. If a value isn't in tokens.json, flag it.

このひとつのブロックが、最も一般的な3つのドリフトソース（作り話のカラー、ハードコードされた文字列、スクリーンショットからのレイアウト推測）を防ぎます。

ステップ4：Cursor Composerを開いて画面を実装する

Composerを開きます（macOSではCmd+I）。プロンプトの前にファイルをピン留めします：ペーパークリップアイコンをクリックして design/CONTEXT.md、design/tokens.json、design/screens/home.json を追加します。そしてプロンプト：

Implement the home screen from ./design/screens/home.json.

Constraints:
- Target framework and component conventions are in ./design/CONTEXT.md
- All spacing, color, and radius values must come from ./design/tokens.json
- UI strings must use keys from ./design/strings.json
- The root node is a stack (vertical). Children are declared in order in the JSON.
- Do not invent any values not present in the token or IR files.

Cursorはピン留めされたファイルを読み込み、IRノードをフレームワークのプリミティブにマッピングし、実装を生成します。出力はトークン参照されています。生成されたコードを検査すると、すべてのスペーシング値が tokens.json のキーに対応しているはずです。

ステップ5：レビューと反復

レンダリングされた出力と並べて design/screens/home.png を開きます。PNGはFigmaからの2×エクスポートです。デザインがどのように見えるべきかを正確に示しています。差異は意味があります。IRマッピングのギャップまたは適用されなかったトークン値を指しています。

よくある問題とフォローアッププロンプト：

トークンドリフト — エージェントがトークンではなくハードコードされたhex値を使用した：

Compare every color value in the generated component against ./design/tokens.json.
List any colors that don't match a token key. Replace them with the correct token reference.

コンポーネントが見つからない — IRがエージェントが解決しなかったコンポーネントIDを参照している：

The IR references componentId "btn-primary-01". Check ./design/components/inventory.json
for its name and type, then implement a placeholder with that name and the correct token values.

レイアウトがずれている — スペーシングまたは位置合わせがPNGと一致しない：

The vertical gap between the header and the card list should be spacing.24 from tokens.json (24dp).
Your output uses 16px. Fix it.

うまくいくこと、うまくいかないこと

うまくいく： スタックレイアウトを持つフラットな画面、トークン駆動のスペーシングとカラー、文字列参照を持つテキスト、シンプルなカードとリストパターン。IRがコンテキストにあればCursorはこれらをうまく処理します。推測をやめてマッピングを始めます。

うまくいかない： 複雑な絶対位置指定のオーバーレイ（Cursorはオフセット座標を誤読することがあります）、グラデーションフィル（_meta.json で警告としてフラグが立てられます）、ベクターアイコン（IRは参照IDのみを保存し、パスデータは含みません）。

スクリーンショットのみ vs. バンドル： スクリーンショットのみの方が始めるのは速いですが非決定論的です。すべてのセッションは最初からやり直しです。モデルは一度スペーシングをうまく処理しても、次のターンでは外すかもしれません。バンドルはセッション全体で参照可能です。Cursorは何も再アップロードすることなく、いつでもトークンファイルに対して自分の出力を確認できます。

ヒント：プロンプトの前に _meta.json の警告を確認する

最初の実装プロンプトの前に design/_meta.json を読んでください。warnings 配列にはエクスポーターが完全に解決できなかったもの（グラデーションフィル、トークンマッピングの欠落、埋め込み画像を含むフレーム）がリストアップされています。エージェントが黙ってハードコードされた値にフォールバックしないよう、プロンプトにこれらについてのメモを追加してください。

cat design/_meta.json | python3 -m json.tool | grep -A 20 '"warnings"'

出力に特定のノードで "gradientFill: not fully supported" と表示されている場合、Cursorにそのノードの背景をスキップして代わりに // TODO: gradient コメントを残すよう指示してください。

まとめ

ワークフローは：一度エクスポートして、どこでも参照する、です。バンドルはCursorがデザインを再処理することなく複数のターンにわたって参照できる安定した機械可読な仕様です。スクリーンショットの近似値ではなく、トークン正確で文字列参照された、レイアウト正確なコードが得られます。何かがドリフトした場合は、一行でエージェントを真実の情報源に戻すことができます。

figmascope.dev でこれを試してください。FigmaのURLを貼り付け、「エージェントコンテキストをエクスポート」をクリックし、2分以内にバンドルをCursorワークスペースに展開します。