クイックスタート：アイデアからアプリへ

学んだらできること

このレッスンを読み終えると：

AI App Factory がアイデアを実行可能なアプリに素早く変換する仕組みを理解できる
最初の Factory プロジェクトの初期化を完了できる
パイプラインを起動し、7 つのステージに沿って最初の MVP アプリを生成できる

今の悩み

「製品のアイデアはあるけど、どこから始めればいいかわからない」

こんな経験はありませんか：

製品のアイデアはあるけど、実行可能な要件に分解する方法がわからない
フロントエンド、バックエンド、データベース、テスト、デプロイ……すべてに時間がかかる
アイデアを素早く検証したいけど、開発環境の構築だけで数日かかる
コードを書き終えてから要件の理解が間違っていたことに気づき、やり直し

AI App Factory はまさにこれらの問題を解決するために生まれました。

いつ使うか

AI App Factory は以下のシナリオに適しています：

✅ 製品アイデアの素早い検証：このアイデアが実現可能かどうか試したい
✅ スタートアップの 0→1 フェーズ：デモ可能なプロトタイプを素早く納品する必要がある
✅ 社内ツールや管理システム：複雑な権限は不要、シンプルで実用的であればよい
✅ フルスタック開発のベストプラクティスを学ぶ：AI が本番レベルのコードをどう生成するか見たい

以下のシナリオには適していません：

❌ 複雑なエンタープライズシステム：マルチテナント、権限システム、高並行処理
❌ 高度にカスタマイズされた UI が必要：独自のデザインシステムを持つプロジェクト
❌ リアルタイム性が極めて重要なシステム：ゲーム、ビデオ通話など

🎯 コアコンセプト

AI App Factory は、チェックポイントベースのインテリジェントアプリ生成システムです。マルチエージェント協調パイプラインを通じて、製品アイデアをフロントエンド・バックエンドコード、テスト、ドキュメントを含む完全な実行可能アプリに自動変換します。

3 つのコアバリュー：

1. エンドツーエンドの自動化

アイデアからコードまで、すべて自動で完了：

入力：製品アイデアを一文で説明
出力：完全なフロントエンド・バックエンドアプリ（Express + Prisma + React Native）
中間プロセス：要件分析、UI 設計、技術アーキテクチャ、コード生成を自動完了

2. チェックポイントメカニズム

各ステージ完了後に一時停止し、確認を待ちます：

✅ エラーの蓄積を防ぎ、各ステップが期待通りであることを確認
✅ いつでも方向を調整でき、最後になって軌道がずれていたことに気づくのを防ぐ
✅ 失敗時は自動ロールバック、間違ったコードに時間を浪費しない

3. 本番環境対応

生成されるのはおもちゃのコードではなく、すぐに本番環境にデプロイできる本格的なアプリです：

✅ 完全なフロントエンド・バックエンドコード
✅ ユニットテストと統合テスト（60% 以上のカバレッジ）
✅ API ドキュメント（Swagger/OpenAPI）
✅ データベースシードデータ
✅ Docker デプロイ設定
✅ CI/CD パイプライン（GitHub Actions）
✅ エラーハンドリングとログ監視
✅ パフォーマンス最適化とセキュリティチェック

7 ステージパイプライン：

Bootstrap → PRD → UI → Tech → Code → Validation → Preview
    ↓          ↓    ↓     ↓      ↓         ↓          ↓
構造化     製品   UI   技術    コード    検証      デプロイ
アイデア   要件  設計  設計    生成      品質      ガイド

🎒 始める前の準備

必須ツール

1. Node.js >= 16.0.0

bash

# Node.js バージョンを確認
node --version

未インストールまたはバージョンが古い場合は、nodejs.org からダウンロードしてインストールしてください。

2. AI プログラミングアシスタント（必須） ⚠️ 重要

AI App Factory の Agent 定義と Skill ファイルは Markdown 形式の AI 指示であり、AI アシスタントを通じて解釈・実行する必要があります。人間がこれらのパイプラインを直接実行することはできません。

以下のツールのいずれかを推奨します：

Claude Code (https://claude.ai/code) - 推奨 ⭐
OpenCode またはその他の Agent モードをサポートする AI アシスタント

なぜ AI アシスタントが必須なのか？

このプロジェクトの核心は AI Agent システムであり、各ステージで AI アシスタントが必要です：

.agent.md ファイルを読み取り、自分のタスクを理解する
対応する Skill ファイルをロードして知識を取得する
指示に厳密に従ってコードとドキュメントを生成する

人間がこのプロセスを代替することはできません。メモ帳で Python コードを実行できないのと同じです。

3. CLI ツールのグローバルインストール

bash

npm install -g agent-app-factory

インストールを確認：

bash

factory --version

バージョン番号が表示されるはずです。

製品アイデアを準備

5 分かけて製品アイデアを書き出してください。説明が詳細であるほど、生成されるアプリが期待に沿ったものになります。

良い説明の例：

✅ フィットネス初心者がトレーニングを記録するためのアプリ。運動タイプ（ランニング、水泳、ジム）、時間、消費カロリーの記録をサポートし、今週のトレーニング統計を表示できる。複数人でのコラボレーションは不要、データ分析もしない、個人記録に特化。

悪い説明の例：

❌ フィットネスアプリを作って。

実践してみよう

ステップ 1：プロジェクトディレクトリを作成

任意の場所に空のディレクトリを作成：

bash

mkdir my-first-app && cd my-first-app

ステップ 2：Factory プロジェクトを初期化

初期化コマンドを実行：

bash

factory init

理由これにより .factory/ ディレクトリが作成され、必要なすべての Agent、Skill、Policy ファイルがコピーされ、現在のディレクトリが Factory プロジェクトになります。

期待される結果：

✓ 已创建 .factory/ 目录
✓ 已复制 agents/, skills/, policies/, pipeline.yaml
✓ 已生成配置文件: config.yaml, state.json
✓ 已生成 Claude Code 权限配置: .claude/settings.local.json
✓ 已尝试安装必需插件 (superpowers, ui-ux-pro-max)

エラーが表示された場合は、以下を確認してください：

ディレクトリが空である（または設定ファイルのみを含む）
Node.js バージョンが >= 16.0.0 である
agent-app-factory がグローバルにインストールされている

ディレクトリ構造

初期化後、ディレクトリ構造は以下のようになります：

my-first-app/
├── .factory/
│   ├── agents/              # Agent 定義ファイル
│   ├── skills/              # 再利用可能な知識モジュール
│   ├── policies/            # ポリシーと規範
│   ├── pipeline.yaml         # パイプライン定義
│   ├── config.yaml          # プロジェクト設定
│   └── state.json           # パイプライン状態
└── .claude/
    └── settings.local.json  # Claude Code 権限設定

ステップ 3：パイプラインを起動

AI アシスタント（Claude Code 推奨）で、以下の指示を実行：

pipeline.yaml と agents/orchestrator.checkpoint.md を読んで、
パイプラインを起動し、この製品アイデアを実行可能なアプリに変換してください：

[製品アイデアをここに貼り付け]

理由これにより Sisyphus スケジューラがパイプラインを起動し、Bootstrap ステージからアイデアを段階的にコードに変換します。

期待される結果：

AI アシスタントは：

pipeline.yaml と orchestrator.checkpoint.md を読み取る
現在の状態を表示（idle → running）
Bootstrap Agent を起動し、製品アイデアの構造化を開始

ステップ 4：7 つのステージに沿って進む

システムは以下の 7 つのステージを順番に実行し、各ステージ完了後に一時停止して確認を求めます：

ステージ 1: Bootstrap - 製品アイデアの構造化

入力：製品の説明出力：input/idea.md（構造化された製品ドキュメント）

確認内容：

問題定義：どんな問題を解決するか？
ターゲットユーザー：誰がこの問題に直面するか？
コアバリュー：なぜこの製��が必要か？
主要な仮説：あなたの仮説は何か？

期待される結果：

AI アシスタントが確認を求めます：

✓ Bootstrap ステージ完了
生成されたドキュメント: input/idea.md

確認してください：
1. 次のステージに進む
2. 現在のステージを再試行（修正提案を提供）
3. パイプラインを一時停止

input/idea.md を注意深く読み、期待と異なる点があれば「再試行」を選択して修正提案を提供してください。

ステージ 2: PRD - 製品要件ドキュメントの生成

入力：input/idea.md出力：artifacts/prd/prd.md

確認内容：

ユーザーストーリー：ユーザーはこの製品をどう使うか？
機能リスト：どのコア機能を実装する必要があるか？
非目標：何をしないか明確に（スコープクリープを防ぐ）

ステージ 3: UI - UI 構造とプロトタイプの設計

入力：artifacts/prd/prd.md出力：artifacts/ui/ui.schema.yaml + プレビュー可能な HTML プロトタイプ

確認内容：

ページ構造：どんなページがあるか？
インタラクションフロー：ユーザーはどう操作するか？
ビジュアルデザイン：カラースキーム、フォント、レイアウト

特徴：ui-ux-pro-max デザインシステムを統合（67 種類のスタイル、96 種類のカラーパレット、100 の業界ルール）

ステージ 4: Tech - 技術アーキテクチャの設計

入力：artifacts/prd/prd.md出力：artifacts/tech/tech.md + artifacts/backend/prisma/schema.prisma

確認内容：

技術スタック：どの技術を使用するか？
データモデル：どんなテーブルがあるか？フィールドは何か？
API 設計：どんな API エンドポイントがあるか？

ステージ 5: Code - 完全なコードの生成

入力：UI Schema + Tech 設計 + Prisma Schema 出力：artifacts/backend/ + artifacts/client/

確認内容：

バックエンドコード：Express + Prisma + TypeScript
フロントエンドコード：React Native + TypeScript
テスト：Vitest（バックエンド）+ Jest（フロントエンド）
設定ファイル：package.json, tsconfig.json など

ステージ 6: Validation - コード品質の検証

入力：生成されたコード出力：artifacts/validation/report.md

確認内容：

依存関係のインストール：npm install は成功したか？
型チェック：TypeScript コンパイルは通過したか？
Prisma 検証：データベーススキーマは正しいか？

ステージ 7: Preview - デプロイガイドの生成

入力：完全なコード出力：artifacts/preview/README.md + GETTING_STARTED.md

確認内容：

ローカル実行手順：ローカル��フロントエンド・バックエンドをどう起動するか？
Docker デプロイ：Docker でどうデプロイするか？
CI/CD 設定：GitHub Actions をどう設定するか？

チェックポイント ✅

すべての 7 ステージが完了すると、以下が表示されます：

✓ すべてのパイプラインステージが完了しました
最終成果物:
- artifacts/prd/prd.md (製品要件ドキュメント)
- artifacts/ui/ui.schema.yaml (UI 設計)
- artifacts/tech/tech.md (技術アーキテクチャ)
- artifacts/backend/ (バックエンドコード)
- artifacts/client/ (フロントエンドコード)
- artifacts/validation/report.md (検証レポート)
- artifacts/preview/GETTING_STARTED.md (実行ガイド)

次のステップ: artifacts/preview/GETTING_STARTED.md を参照してアプリを実行

おめでとうございます！最初の AI 生成アプリが完成しました。

ステップ 5：生成されたアプリを実行

生成されたガイドに従ってアプリを実行：

bash

# バックエンド
cd artifacts/backend
npm install
npm run dev

# 新しいターミナルウィンドウを開いて、フロントエンドを実行
cd artifacts/client
npm install
npm run web  # Web 版
# または
npm run ios      # iOS シミュレータ
# または
npm run android  # Android エミュレータ

期待される結果：

バックエンドが http://localhost:3000 で起動
フロントエンドが http://localhost:8081（Web 版）で起動、またはシミュレータで開く

トラブルシューティング

❌ エラー 1：ディレクトリが空でない

エラーメッセージ：

✗ 目录非空，请清理后重试

原因：初期化時にディレクトリにファイルが既に存在する

解決方法：

bash

# 方法 1：ディレクトリをクリーンアップ（隠し設定ファイルのみ保持）
ls -a    # すべてのファイルを表示
rm -rf !(.*)

# 方法 2：新しいディレクトリを作成
mkdir new-app && cd new-app
factory init

❌ エラー 2：AI アシスタントが指示を理解できない

エラー現象：AI アシスタントが「Agent 定義が見つかりません」とエラーを報告

原因：Factory プロジェクトディレクトリ内で実行していない

解決方法：

bash

# .factory/ ディレクトリを含むプロジェクトルートにいることを確認
ls -la  # .factory/ が見えるはず
pwd     # 現在のディレクトリを確認

❌ エラー 3：Claude CLI がインストールされていない

エラーメッセージ：

✗ Claude CLI 未安装，请访问 https://claude.ai/code 下载

解決方法：

https://claude.ai/code から Claude Code CLI をダウンロードしてインストールしてください。

まとめ

このレッスンで学んだこと：

AI App Factory のコアバリュー：エンドツーエンドの自動化 + チェックポイントメカニズム + 本番環境対応
7 ステージパイプライン：Bootstrap → PRD → UI → Tech → Code → Validation → Preview
プロジェクトの初期化方法：factory init コマンド
パイプラインの起動方法：AI アシスタントで指示を実行
パイプラインの進め方：各ステージ完了後に確認し、出力が期待通りであることを確認

重要なポイント：

AI アシスタントと組み合わせて使用する必要がある（Claude Code 推奨）
明確で詳細な製品説明を提供する
各チェックポイントで注意深く確認し、エラーの蓄積を防ぐ
生成されるコードは本番レベルで、そのまま使用可能

次回の予告

次回は インストールと設定 を学びます。
学べること：
Agent Factory CLI のグローバルインストール方法
AI アシスタント（Claude Code / OpenCode）の設定方法
必須プラグイン（superpowers, ui-ux-pro-max）のインストール方法

付録：ソースコード参照

クリックしてソースコードの場所を表示

更新日時：2026-01-29

機能	ファイルパス	行番号
CLI エントリ	`cli/bin/factory.js`	1-123
init コマンド実装	`cli/commands/init.js`	-
run コマンド実装	`cli/commands/run.js`	-
continue コマンド実装	`cli/commands/continue.js`	-
パイプライン定義	`pipeline.yaml`	-
スケジューラ定義	`agents/orchestrator.checkpoint.md`	-

主要な設定：

pipeline.yaml：7 つのステージのパイプライン順序と各ステージの入出力を定義
.factory/state.json：パイプラインの実行状態を維持（idle/running/waiting_for_confirmation/paused/failed）

コアフロー：

factory init → .factory/ ディレクトリを作成し、Agent、Skill、Policy ファイルをコピー
factory run → state.json を読み取り、AI アシスタントタイプを検出し、アシスタント指示を生成
factory continue → Claude Code 権限設定を再生成し、新しいセッションを起動して実行を継続

クイックスタート：アイデアからアプリへ ​

学んだらできること ​

今の悩み ​

いつ使うか ​

🎯 コアコンセプト ​

1. エンドツーエンドの自動化 ​

2. チェックポイントメカニズム ​

3. 本番環境対応 ​

🎒 始める前の準備 ​

必須ツール ​

製品アイデアを準備 ​

実践してみよう ​

ステップ 1：プロジェクトディレクトリを作成 ​

ステップ 2：Factory プロジェクトを初期化 ​

ステップ 3：パイプラインを起動 ​

ステップ 4：7 つのステージに沿って進む ​

ステージ 1: Bootstrap - 製品アイデアの構造化 ​

ステージ 2: PRD - 製品要件ドキュメントの生成 ​

ステージ 3: UI - UI 構造とプロトタイプの設計 ​

ステージ 4: Tech - 技術アーキテクチャの設計 ​

ステージ 5: Code - 完全なコードの生成 ​

ステージ 6: Validation - コード品質の検証 ​

ステージ 7: Preview - デプロイガイドの生成 ​

チェックポイント ✅ ​

ステップ 5：生成されたアプリを実行 ​

トラブルシューティング ​

❌ エラー 1：ディレクトリが空でない ​

❌ エラー 2：AI アシスタントが指示を理解できない ​

❌ エラー 3：Claude CLI がインストールされていない ​

まとめ ​

次回の予告 ​

付録：ソースコード参照 ​

クイックスタート：アイデアからアプリへ

学んだらできること

今の悩み

いつ使うか

🎯 コアコンセプト

1. エンドツーエンドの自動化

2. チェックポイントメカニズム

3. 本番環境対応

🎒 始める前の準備

必須ツール

製品アイデアを準備

実践してみよう

ステップ 1：プロジェクトディレクトリを作成

ステップ 2：Factory プロジェクトを初期化

ステップ 3：パイプラインを起動

ステップ 4：7 つのステージに沿って進む

ステージ 1: Bootstrap - 製品アイデアの構造化

ステージ 2: PRD - 製品要件ドキュメントの生成

ステージ 3: UI - UI 構造とプロトタイプの設計

ステージ 4: Tech - 技術アーキテクチャの設計

ステージ 5: Code - 完全なコードの生成

ステージ 6: Validation - コード品質の検証

ステージ 7: Preview - デプロイガイドの生成

チェックポイント ✅

ステップ 5：生成されたアプリを実行

トラブルシューティング

❌ エラー 1：ディレクトリが空でない

❌ エラー 2：AI アシスタントが指示を理解できない

❌ エラー 3：Claude CLI がインストールされていない

まとめ

次回の予告

付録：ソースコード参照