Aider + Figma — コンテキストバンドルからUIをペアコーディング

Aiderはターミナルベースの AIペアプログラマーです。指定したファイルを読み込み、unified diff形式で編集を生成し、コードベースに直接適用します。すべての変更はマージ前にレビューできます。このdiff優先のワークフローはトークン対応のデザインハンドオフと相性が良く、生成されたコードがトークンファイルの spacing.16 を使用しているか、ハードコードされた 16px になっていないかを正確に確認できます。

このガイドでは、Aider + figmascope の完全なパイプラインを解説します。バンドルの生成、Aiderセッションへの読み込み、初期スキャフォールドのためのArchitectモード活用、そして個別の編集プロンプトによる反復作業を網羅します。

前提条件

Aiderをまだインストールしていない場合はインストールしてください：

pip install aider-chat
# または
brew install aider

Aiderは複数のモデルバックエンドをサポートしています。ここではAnthropic APIを介したClaude Sonnetを使用した例を示しますが、OpenAIやローカルモデルでもワークフローは同じです。

export ANTHROPIC_API_KEY=sk-ant-...
# または OPENAI_API_KEY（GPT-4oの場合）

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

figmascope.dev にアクセスし、FigmaファイルのURLを貼り付けて エージェントコンテキストをエクスポート をクリックします。エクスポーターはブラウザ内で動作します。Figmaのパーソナルアクセストークンは localStorage に保存され、外部に送信されることはありません。

ダウンロードされるファイルは context-bundle.zip です。

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

unzip ~/Downloads/context-bundle.zip -d ./design/

ls design/
# CONTEXT.md  _meta.json  components/  screens/  strings.json  tokens.json

ステップ3：バンドルファイルをスコープに含めてAiderを起動する

必要なバンドルファイルをコマンドラインで指定します。Aiderはそれらを読み取り専用コンテキストとして読み込みます。モデルは参照できますが、/add で明示的に編集可能なファイルに昇格させない限り編集しません。

aider \
  --read design/CONTEXT.md \
  --read design/tokens.json \
  --read design/strings.json \
  design/screens/home.json \
  src/screens/HomeScreen.kt

パターンは次の通りです：--read はバンドルファイル（コンテキストのみ、編集不可）、位置引数はAiderに変更させたいソースファイルです。これによりバンドルが保護されます。Aiderのdiff機能が tokens.json を編集しようとすることがありません。

既存ファイルを編集するのではなく新しいファイルを作成したい場合は、まだ存在しないターゲットパスを指定するだけです。Aiderがそれを作成します。

ステップ4：参照PNGを追加する

Aiderはマルチモーダルモデルのコンテキストとして画像を含めることができます。起動後に /add コマンドを使用します：

/add design/screens/home.png

PNGはFigmaから2×レンダリングされたものです。マルチモーダルモデル（Claude Sonnet、GPT-4o）では、Aiderはそれを視覚的な参照として含めます。レビュー時の確認に使用してください。仕様の正式なソースはJSONであり、画像ではありません。

ステップ5：Architectモード — 初期スキャフォールド

Aiderの /architect コマンドは2ステップのモデルを使用します。1回目のパスで計画し、2回目のパスで実装します。これは、個々のパーツを編集する前に一貫した構造が必要な全画面の出発点として適しています。

/architect Implement design/screens/home.json as a Jetpack Compose screen.

Context:
- Read CONTEXT.md for framework constraints and target conventions.
- All spacing, color, and radius values come from tokens.json.
  Map token keys directly: spacing.16 → 16.dp, color.7f5cfe → Color(0xFF7F5CFE).
- Use string keys from strings.json via stringResource() with the fallback field as the literal fallback.
- IR node kinds: stack(vertical)→Column, stack(horizontal)→Row, overlay→Box,
  absolute→Box+Modifier.offset, leaf(text)→Text, leaf(rect)→Box+Modifier.background.
- Do not hardcode any value that has a token equivalent.

Output to: src/screens/HomeScreen.kt

Aiderはまず計画を生成して表示し、その後diffを生成します。計画を確認してください。ノードのマッピングが正しくない場合は、実装パスが実行される前に修正してください。

ステップ6：トークン参照を使って特定のファイルを編集する

スキャフォールドが完成したら、特定の問題を修正するために個別の /edit プロンプトを使用します。ここでAiderのdiffワークフローが威力を発揮します。各編集は小さなレビュー可能な変更であり、全体の再生成ではありません。

The card component in HomeScreen.kt uses hardcoded 12dp for corner radius.
Check tokens.json for the correct radius token and replace it.

Aiderは最小限のdiffを生成します。1〜2行の変更で、それ以外は何も変わりません。何が変わったかを正確に確認できます。

ファイル全体のスペーシング監査には：

Audit every .dp value in src/screens/HomeScreen.kt against the spacing tokens in design/tokens.json.
Produce a diff that replaces any hardcoded value with its token equivalent where one exists.
Leave a // TODO comment for any value that doesn't match a spacing token.

ステップ7：仕様に対してdiffをレビューする

Aiderのdiffビューはレビューの場です。変更を承認する前に確認してください：

追加された行はリテラル値ではなくトークンキーを参照しているか？
文字列リテラルは strings.json に存在するか、ハードコードされたUIコピーではないか？
生成されたコードのノードのネストはIR JSONの親子の順序と一致しているか？

diffが正しくない場合は、プロンプトで n を入力して拒否し、修正内容をAiderに伝えます。プロンプト → diff → 承認/拒否 → 改善という短いフィードバックループにより、大量のコードが生成された後ではなく、すぐにドリフトを検出できます。

なぜAiderのdiffワークフローはバンドルと相性が良いのか

トークンドリフトはdiffで可視化されます。 生成された行が color = tokens.colorPrimary ではなく color = Color(0xFF7F5CFE) となっている場合、マージ前にそれを確認できます。「後で確認する」ということはありません。レビューはインラインで行われます。

反復的な改善は低コストです。 変更のたびに全画面を再生成しているわけではありません。各フォローアッププロンプトは個別のdiffを生成します。バンドルが安定したコンテキストを提供し、Aiderが精密な編集を行います。

バンドルはコードと並んでバージョン管理されます。 デザインが更新されたら、figmascope からバンドルを再エクスポートし、以前のバージョンと差分を確認し、変更されたノードのみを適用するようAiderに指示します。このワークフローは、全面的な再実装なしに複数のデザインイテレーションにわたってスケールします。

よくあるパターンと落とし穴

すべての画面を一度に追加しないでください。 画面JSONは1つずつ渡してください。コンテキストが多ければ良いというわけではありません。Aider（および基盤となるモデル）は、すべての画面を一度にダンプするよりも、焦点を絞ったコンテキストの方がパフォーマンスが向上します。

バンドルには --read を使用し、位置引数は使わないでください。 tokens.json を位置引数として渡すと、Aiderがそれを編集しようとする可能性があります。読み取り専用コンテキストとしてマークするには --read を使用してください。

最初のプロンプトの前に _meta.json を確認してください。 warnings 配列には、エクスポーターが完全に解決できなかったフィルやエフェクトが列挙されています。それらをAiderに事前に伝えることで、黙って近似値を使うことを防ぎます：

cat design/_meta.json | python3 -c "import sys,json; w=json.load(sys.stdin).get('warnings',[]); print('\n'.join(w))"

警告はarchitectプロンプトに含めてください。「ヒーロー背景フィルはスキップ — グラデーションは非対応。TODOコメントを残してください。」

精密でレビュー可能な編集にはAiderを活用し、多くのファイルにわたるフルセッションのコンテキストが必要な場合は Cursor や Claude Code を使用してください。すべてのワークフローの起点は同じです。figmascopeアプリがブラウザでエクスポートを処理します。