/ 目錄 / 演練場 / Spec Workflow
● 社群 Pimzino ⚡ 即開即用

Spec Workflow

作者 Pimzino · Pimzino/spec-workflow-mcp

結構化的需求 → 設計 → 任務工作流程,搭配即時儀表板和人工審核關卡——終結 Claude 無腦寫代碼的問題。

Spec Workflow 將功能開發轉化為三階段管線:需求文件、設計文件、任務清單。每個階段都需要通過審核(透過網頁儀表板或 VSCode 側邊欄)才能進入下一步。Claude 無法跳過步驟,會撰寫實作日誌,並追蹤每個任務的進度條狀態。用起來像是 Claude 版的 Jira。

為什麼要用

核心特性

即時演示

實際使用效果

spec-workflow-mcp.replay ▶ 就緒
0/0

安裝

選擇你的客戶端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "spec-workflow-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@pimzino/spec-workflow-mcp@latest",
        "/path/to/project"
      ]
    }
  }
}

開啟 Claude Desktop → Settings → Developer → Edit Config。儲存後重啟應用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "spec-workflow-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@pimzino/spec-workflow-mcp@latest",
        "/path/to/project"
      ]
    }
  }
}

Cursor 使用與 Claude Desktop 相同的 mcpServers 格式。專案級設定優先於全域。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "spec-workflow-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@pimzino/spec-workflow-mcp@latest",
        "/path/to/project"
      ]
    }
  }
}

點擊 Cline 側欄中的 MCP Servers 圖示,然後選 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "spec-workflow-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@pimzino/spec-workflow-mcp@latest",
        "/path/to/project"
      ]
    }
  }
}

格式與 Claude Desktop 相同。重啟 Windsurf 生效。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "spec-workflow-mcp",
      "command": "npx",
      "args": [
        "-y",
        "@pimzino/spec-workflow-mcp@latest",
        "/path/to/project"
      ]
    }
  ]
}

Continue 使用伺服器物件陣列,而非映射。

~/.config/zed/settings.json
{
  "context_servers": {
    "spec-workflow-mcp": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@pimzino/spec-workflow-mcp@latest",
          "/path/to/project"
        ]
      }
    }
  }
}

加入 context_servers。Zed 儲存後熱重載。

claude mcp add spec-workflow-mcp -- npx -y @pimzino/spec-workflow-mcp@latest /path/to/project

一行命令搞定。用 claude mcp list 驗證,claude mcp remove 移除。

使用場景

實戰用法: Spec Workflow

用 spec 而不是隨興的 prompt 來開發功能

👤 正在開發中等複雜度功能的開發者 ⏱ ~90 min intermediate

何時使用: 你正要請 Claude「加上 OAuth」,但很擔心它一次丟出 500 行的 diff。

前置條件
  • 已知專案路徑 — MCP 啟動時以 /path/to/project 作為參數
步驟
  1. 需求
    Use spec-workflow. Create a spec named oauth-login. Start with requirements — what are we adding, who is it for, what are the non-goals?✓ 已複製
    → 需求文件草稿完成,儀表板連結已生成以供審核
  2. 審核後進入設計
    I approved in the dashboard. Now write the design: components, data model, sequence diagram, error cases.✓ 已複製
    → 具有具體架構的設計文件
  3. 任務拆分並執行
    I approved. Break into tasks. Then execute task 1.1 — just that one, stop after.✓ 已複製
    → 任務清單已建立;只實作了任務 1.1,並有日誌紀錄

結果: 功能交付時附有可審查的中間產物——而非謎一樣的 diff。

注意事項
  • Claude 試圖直接跳到寫代碼 — MCP 會阻止它——但 prompt 裡也要明確說:「do not implement yet」
搭配使用: github · filesystem

讓非工程師的利害關係人在開始寫代碼前審核 spec

👤 有 PM 或設計師簽核流程的團隊 ⏱ ~60 min intermediate

何時使用: 你需要 PM 在實作前核准,但 PM 不看 GitHub PR。

前置條件
  • 儀表板 URL 可分享 — 為遠端 PM 進行 port-forward 或透過 ngrok 公開 localhost:5000
步驟
  1. 撰寫 spec
    Draft the requirements doc for checkout-v2 and share the dashboard URL.✓ 已複製
    → 文件加上可分享的連結
  2. 根據回饋迭代
    PM left 3 revision comments in the dashboard. Fetch them and revise the doc.✓ 已複製
    → 文件已更新,修改歷史可見
  3. 審核通過後執行
    Approval just went through — proceed to design.✓ 已複製
    → 進入下一階段;審核時間戳已記錄

結果: 可追溯的審核鏈,來自非工程師的利害關係人。

注意事項
  • 遠端使用者無法存取儀表板 — 使用 Tailscale 或帶有驗證的 ngrok
搭配使用: github

組合

與其他 MCP 搭配,撬動十倍槓桿

spec-workflow-mcp + github

每個審核通過的任務開一個 PR

After executing task 2.1, open a GitHub PR titled "feat(oauth): task 2.1" with the diff.✓ 已複製
spec-workflow-mcp + filesystem

將 spec 儲存在儲存庫中與代碼並排

Save the approved spec to /docs/specs/oauth-login.md and commit.✓ 已複製

工具

此 MCP 暴露的能力

工具輸入參數何時呼叫成本
create_spec name: str 啟動一個新功能 free
write_requirements spec_id, content: markdown 任何 spec 的第一個階段 free
write_design spec_id, content: markdown 需求通過審核後 free
create_tasks spec_id, tasks: [] 設計通過審核後 free
execute_task spec_id, task_id 每次實作一個任務 free
get_approval_status spec_id, stage 把關下一個階段 free

成本與限制

運行它的成本

API 配額
本機
每次呼叫 Token 數
與文件和任務大小成正比
費用
免費
提示
保持需求文件簡潔——審核的成本是人工時間,不是 token

安全

權限、密鑰、影響範圍

最小權限: filesystem-write (for spec docs)
憑證儲存:
資料出站: 無——本機 localhost 儀表板

故障排查

常見錯誤與修復

Dashboard won't load

明確啟動:npx -y @pimzino/spec-workflow-mcp@latest --dashboard

驗證: Visit localhost:5000
Port 5000 already in use (macOS AirPlay)

傳入 --port 5050,或在系統設定中停用 AirPlay 接收器

驗證: Check with `lsof -i :5000`
Tasks stay in pending after approval

MCP 客戶端可能快取了舊的工具結果——重新啟動客戶端

替代方案

Spec Workflow 對比其他方案

替代方案何時用它替代權衡
Plain Markdown in /docs獨立開發者,不需要審核流程沒有結構強制,也沒有儀表板
Linear MCP你已經用 Linear 管理任務,想讓 Claude 直接操作 issue沒有 spec 文件層

更多

資源

📖 閱讀 GitHub 上的官方 README

🐙 查看未解決的 issue

🔍 瀏覽全部 400+ MCP 伺服器和 Skills