快速開始：從想法到應用程式

學完你能做什麼

讀完本課，你將：

了解 AI App Factory 如何幫你快速將想法轉化為可執行的應用程式
完成第一個 Factory 專案的初始化
啟動流水線並跟隨 7 個階段產生你的第一個 MVP 應用程式

你現在的困境

「有個產品想法，但不知道從哪開始」

你是不是也遇到過這種情況：

有一個產品想法，但不知道如何拆解成可執行的需求
前端、後端、資料庫、測試、部署……每一項都要花時間
想快速驗證想法，但搭建開發環境就要好幾天
寫完程式碼才發現需求理解錯了，推倒重來

AI App Factory 就是為解決這些問題而生的。

什麼時候用這一招

AI App Factory 適合這些場景：

✅ 快速驗證產品想法：想試試這個想法是否可行
✅ 創業專案的 0-1 階段：需要快速交付可展示的原型
✅ 內部工具和管理系統：不需要複雜權限，簡單實用就好
✅ 學習全端開發最佳實踐：看 AI 如何產生正式環境等級的程式碼

不適合這些場景：

❌ 複雜的企業級系統：多租戶、權限系統、高並行
❌ 需要高度客製化的 UI：有獨特設計系統的專案
❌ 即時性要求極高的系統：遊戲、視訊通話等

🎯 核心思路

AI App Factory 是一個基於檢查點的智慧應用程式產生系統，透過多 Agent 協作流水線，自動將你的產品想法轉化為包含前後端程式碼、測試、文件的完整可執行應用程式。

三個核心價值：

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 驗證：資料庫 Schema 是否正確？

階段 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 未安裝

本課小結

下一課預告

附錄：原始碼參考