AI駆動型Next.js開発フロー＆エージェント契約プラン定義書（決定版）

本書は、契約中の Claude Pro と最新の高速エディタ Zed、および補完用の VSCode を組み合わせ、ブラウザを一切挟むことなくターミナル（Claude Code）から「実装 ⇄ 構造化JSONファイル生成 ⇄ Figma同期」をシームレスに行うための開発プラン（定義書）です。

1. 最終契約・コストプラン（追加コスト0円）

クレジットカード登録が必要な外部APIや追加の有料サブスクリプションを完全に排除し、現状の「Claude Pro」のみで最高効率のパイプラインを構築します。

ツール / サービス	選択するプラン	月額コスト	実際の運用方法・役割
Claude	Claude Pro (既存契約を維持)	$0 (追加なし)	【絶対的主軸・自動化ハブ】 Zedのターミナル上で「Claude Code」として稼働。コードの自律実装、セルフレビューに加え、Figma同期用JSONの自動生成・保存までをワンストップで担当。
Zed	Community / Free	$0	【メインエディタ】超高速なRust製環境。キーバインドをVSCodeに合わせ、メインのコード閲覧・編集やターミナルでのClaude駆動に使用。
VSCode	Free	$0	【サブエディタ】 Prisma、Linter/Formatterの視覚補助など、特定の強力な拡張機能が必要な時だけ並行して立ち上げる。
Figma	Starter / Free	$0	【全体地図】 Claude Codeがローカルに自動出力したJSONを無料の自作プラグイン経由で流し込み、デザインを常に最新状態に保つ。

2. ターミナル完結型開発イテレーション（1サイクル）

ブラウザの起動やコードのコピペといった「人間の手作業」を極限まで削ぎ落とし、すべてのワークフローを 「Zed ＋ターミナル（Claude Code）」 の中で完結させた究極にシンプルな反復ループです。

【1. 計画】 Issue List（GitHub等）から着手する課題を確認
      ↓
【2. 実装】 Zedのターミナルで Claude Code を起動し、自律実装＆テストを実行
      ↓
【3. 生成】 そのままターミナル上で Claude Code に「Figma用のJSONファイルも自動更新して」と命令（★コピペ不要）
      ↓
【4. 検証】 Claudeによるセルフレビュー後、Gitマージ（コード正本の確定）
      ↓
【5. 同期】 Figma（無料プラン）の自作プラグインでJSONをインポートし、デザイン（地図）を最新化

ステップ別詳細

Step 1: 計画 (Human)

GitHubのIssue ListやMilestoneを確認し、着手するターゲット課題を決めます。

Step 2: 爆速自律実装 (Claude Code × Zed)

Zedの下部ターミナル（Ctrl + \``）で claude` コマンドを実行し、Claude Codeを起動します。
Claude Codeに「このIssueを解決するNext.jsのコンポーネントを実装し、テストをパスさせて」と指示します。
人間はZedの画面上でリアルタイムにコードが書き換わるのを確認・微調整します。

Step 3: Figma同期用JSONの自動出力 (Claude Code)

実装が完了したら、引き続き同じターミナル上でClaude Codeに以下のように1行だけ命令します：

「今回の修正を反映したNext.jsのコードを解析して、Figma同期用のUI構造JSONを出力し、./.figma/ui-structure.json に上書き保存しておいて」
Claude Codeが自動的にローカルの該当ファイルを読み込んで解析し、構造化JSONを組み立てて指定パスに自動でファイルを作成・上書き保存します。人間がブラウザを開く手間も、コピペの手間も一切発生しません。

Step 4: レビュー・検証 (Claude Code → Git)

Claude Codeにロジックやデータ処理（Neon/Vercel Blobまわり）のエッジケースをレビューさせます。
問題がなければ、変更されたNext.jsのコードと、自動更新された ui-structure.json をセットでGitコミットし、マージします。この時点のコードがUIの「正本（真実）」となります。

Step 5: Figmaデザインの最新化 (Figma Plugin)

Figma（無料プラン）を開き、「Development（プラグイン開発）」メニューから、ローカルの /.figma/ui-structure.json を読み込むシンプルな自作スクリプト（figma.createRectangle() などが走るもの）を実行します。
コードの見た目がFigmaに一発で反映され、手動の修正なしで「最新のアプリの地図」が維持されます。

3. バージョン管理（Git）の運用ルール

Claude Codeが自動出力する JSONファイル（ui-structure.json）はリポジトリで必ずバージョン管理（Git管理） します。

メリット

同期スナップショットの確立: コミット履歴を見るだけで「このコミット時点のコードが、このFigmaの状態である」と一目で証明・復元できます。
Git DiffによるUI差分チェック: コード改修後にClaude Codeが吐き出した新旧のJSONを git diff することで、コンポーネント構造の変更点をテキストベースで容易に検知・レビューできます。
Claude Codeの文脈（コンテキスト）化: JSONがファイルとして同居しているため、Claude Codeに「今のJSONの差分を元に、GitHub PRのUI変更点の箇条書きを自動生成して」といった周辺作業を任せやすくなります。

運用鉄則

「手動でJSONファイルを直接書き換えない」
変更は常に コード（人間/Claude） -> JSON（Claude Code自動出力） -> Figma の一方通行を徹底し、コンフリクトを完全に防ぎます。

Claude Proに紐づくClaude Codeを短時間に連続して大量駆動させ、5時間ごとの利用制限に達した場合は、月額プランをアップグレードするのではなく**「Anthropic ConsoleでAPIアカウントを作成し、従量課金（Pay-as-you-go）で数ドルだけチャージして、一時的にAPIキーを渡す（claude --api-key=...）」**手法をとるのが最も安価（数十円〜数百円単位）で確実です。

5. 即座に開始できるアクションプラン

追加契約はすべて不要: クレジットカード登録が必要な外部サービス（Google AI Studio等）の設定はすべて不要です。
JSON管理用のフォルダ作成: リポジトリ内に /.figma/ ディレクトリを作成。
Zedのセットアップ: Zedを立ち上げ、設定からキーバインドを「VSCode」に合わせます。
イテレーションの開始: Zedのターミナルで claude を起動してIssueを消化し、そのままJSONファイルの出力までClaudeに一任する「超効率化ループ」を体験しましょう。

AI駆動型Next.js開発フロー ＆ エージェント契約プラン定義書（決定版）

AI駆動型Next.js開発フロー＆エージェント契約プラン定義書（決定版）