---
title: "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管理）** します。
### メリット
1. **同期スナップショットの確立**: コミット履歴を見るだけで「このコミット時点のコードが、このFigmaの状態である」と一目で証明・復元できます。
2. **Git DiffによるUI差分チェック**: コード改修後にClaude Codeが吐き出した新旧のJSONを `git diff` することで、コンポーネント構造の変更点をテキストベースで容易に検知・レビューできます。
3. **Claude Codeの文脈（コンテキスト）化**: JSONがファイルとして同居しているため、Claude Codeに「今のJSONの差分を元に、GitHub PRのUI変更点の箇条書きを自動生成して」といった周辺作業を任せやすくなります。
### 運用鉄則
- **「手動でJSONファイルを直接書き換えない」**
- 変更は常に `コード（人間/Claude） -> JSON（Claude Code自動出力） -> Figma` の一方通行を徹底し、コンフリクトを完全に防ぎます。
---
## 4. 💡 繁忙期（トークン制限対策）のバックアップ運用
Claude Proに紐づくClaude Codeを短時間に連続して大量駆動させ、5時間ごとの利用制限に達した場合は、月額プランをアップグレードするのではなく**「Anthropic ConsoleでAPIアカウントを作成し、従量課金（Pay-as-you-go）で数ドルだけチャージして、一時的にAPIキーを渡す（`claude --api-key=...`）」**手法をとるのが最も安価（数十円〜数百円単位）で確実です。
---
## 5. 即座に開始できるアクションプラン
1. **追加契約はすべて不要**: クレジットカード登録が必要な外部サービス（Google AI Studio等）の設定はすべて不要です。
2. **JSON管理用のフォルダ作成**: リポジトリ内に `/.figma/` ディレクトリを作成。
3. **Zedのセットアップ**: Zedを立ち上げ、設定からキーバインドを「VSCode」に合わせます。
4. **イテレーションの開始**: Zedのターミナルで `claude` を起動してIssueを消化し、そのままJSONファイルの出力までClaudeに一任する「超効率化ループ」を体験しましょう。