LLM Wiki

FSTS Vibe Coding 開發框架

閱讀時間約 6 分鐘

FSTS Vibe Coding 開發框架

fb.fsts repo 的 README 定義的一套與 Claude 協作的全端開發框架，涵蓋 Multi-Agent Pipeline、Git 工作流、設計系統、Skills 系統與測試規範。回到 FSTS 專案總覽。

一句話

Vibe Coding Framework 是 fb.fsts 隨附的 agent 協作框架，clone 此 repo 到新專案後，透過簡單問答即可啟動 Multi-Agent Pipeline 開發流程。1

框架涵蓋範圍

類別內容
Agent 行為規範複雜度分流（Pipeline / Hound Planner / Hound Execution）、分支守衛、強制觸發 Code Review2
Multi-Agent Pipeline(BA Context 可選) → PM → UI Designer → RD → Code Reviewer → (QA + BA 並行)2
Skills 系統19 個 Slash Commands（Git / GitHub Issues / Notion / Pipeline / Design / BA）2
Rules 系統8 個條件載入規則，依 glob pattern 自動觸發2
Git 工作流分支命名、Commit Message 格式（Pipeline 完成標記）、衝突處理報告機制2
GitHub Issues 整合開發任務追蹤、Bug Tracker、.pen 設計稿追蹤2
Worktree 機制多 worktree 同時開發的 Port Slot 衝突解決方案2
前端設計系統Color Token、Typography、Toast、Modal、元件規範、套件使用規範2
UI 設計稿整合Pencil MCP 操作 .pen 設計稿、UI Designer Agent2
文件同步規範功能變更時必須同步更新 scenarios.md / domain.md / .pen 設計稿2
E2E 測試規範Robot Framework + Playwright 結構、OTP 自動化說明2

快速啟動流程

  1. Clone repo 到新專案目錄3
  2. 在 Claude Code 中告知「我要用 Vibe Coding 框架啟動新專案」3
  3. 依 Claude 的問答填入專案細節，自動生成所有 <!-- SETUP --> 區塊3

本地服務啟動

專案根目錄的 start.sh 一鍵啟動前後端：4

./start.sh            # 全部
./start.sh backend    # 只啟動後端
./start.sh frontend   # 只啟動前端
服務URL
後端 APIhttp://localhost:5001
Swaggerhttp://localhost:5001/swagger
前端http://localhost:3000

Log 檔位於 .logs/backend.log 與 .logs/frontend.log。4

初始化問答 Checklist（9 題）

Claude 啟動時會依序詢問：5

#問題產出檔案
1專案名稱、一句話描述、服務對象CLAUDE.md、docs/domain/{domain,architecture,scenarios}.md
2技術棧（Backend / Frontend / DB / Auth / Report / Container / Test）CLAUDE.md、backend/CLAUDE.md、frontend/CLAUDE.md
3部署環境與用途CLAUDE.md、architecture.md
4業務模組scenarios.md、feature-map.md、project.doc-sync.md
5核心術語（中英 + 定義）domain.md
6核心業務流程與商業規則domain.md
7系統架構（前後端結構、目錄分層、Auth 流程）architecture.md、{backend,frontend}/CLAUDE.md
8Port 配置（含多 worktree）project.worktree.md、.claude/launch.json
9任務追蹤平台（GitHub Issues 或 Notion）CLAUDE.md 啟用對應 skills

目錄架構（節錄）

vibe-coding-framework/ 根目錄核心：6

  • CLAUDE.md — 根 agent 行為憲章模板
  • .claude/agents/ — 通用 Agent 定義：code-reviewer, pm-planner, qa-validator, rd-implementer, ui-designer
  • .claude/rules/ — 條件載入規則（domain-knowledge, git-workflow, pipeline, ui-designer, worktree 等 8 份）
  • .claude/skills/ — 19 個 Slash Commands 分組：pipeline / review-code / qa / Git 工作流（git-commit, git-sync, git-pr, git-conflict, git-dev）/ Issue 管理（git-task, git-bug, git-pen, git-fix, git-img, sync-pen, worktree-setup）/ Notion 系列（notion-task, notion-bug, notion-pen）6
  • docs/agents/ — Agent 行為規範：agent.instructions.md, agent.ui-designer.md, agent.workflow.md
  • docs/personality/ — Agent 人格與思考框架：agent.cognitive.md（量子認知、Red-Blue Team 協議）、agent.communication.md
  • docs/pipeline/ — multi-agent-workflow.md
  • docs/project/ — 專案管理規範（Git、Git-Issues、Notion、Worktree、doc-sync）
  • docs/domain/ — 領域知識（需填入專案細節）：domain.md, architecture.md, feature-map.md, scenarios.md
  • design/ — .pen 設計稿（Pencil MCP）
  • frontend/ — 技術棧、元件設計、套件規範（ui.{instructions,components,packages}.md）
  • backend/CLAUDE.md — 技術棧、分層架構、DB 規範
  • tests/CLAUDE.md — Robot Framework 測試規範

HTML 註解標記

框架中的三種註解標記用來指引 Claude 問答填入與人工閱讀：7

標記說明
<!-- SETUP: ... -->新專案啟動時必須填入的區塊，Claude 會詢問對應問題
<!-- OPTIONAL: ... -->視專案需求決定是否啟用的區塊
<!-- EXAMPLE: ... -->範例內容，供參考後替換

使用情境

  • 新專案：完整執行問答 Checklist，讓 Claude 填所有 <!-- SETUP --> 區塊8
  • 既有專案：複製 docs/、.claude/、frontend/ 到專案後填入 SETUP 區塊8
  • 框架更新：選擇性同步 docs/agents/、docs/personality/、.claude/{agents,rules,skills}/ 的通用規範，不影響 domain 文件8

相關頁面

補充資訊

(未來 ingest 新來源會在此追加段落)

參考資料

Footnotes

  1. README §一句話 ↩

  2. README §框架包含什麼 ↩ ↩2 ↩3 ↩4 ↩5 ↩6 ↩7 ↩8 ↩9 ↩10 ↩11

  3. README §快速啟動 ↩ ↩2 ↩3

  4. README §本地服務啟動 ↩ ↩2

  5. README §初始化問答 Checklist ↩

  6. README §目錄架構說明 ↩ ↩2

  7. README §HTML 註解標記說明 ↩

  8. README §使用建議 ↩ ↩2 ↩3

關係圖譜

反向連結