Spec Workflow MCP — 설치 & 라이브 데모

Name: Spec Workflow MCP Server
Author: Pimzino

왜 쓰나요

핵심 기능

순차적 요구 사항 → 설계 → 각 간 승인 작업
실시간 업데이트가 포함된 localhost:5000의 웹 대시보드
IDE 내 사이드바가 포함된 VSCode 확장
11개 언어 UI
코드 통계가 포함된 검색 가능한 구현 로그

라이브 데모

실제 사용 모습

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

분위기 프롬프트가 아닌 사양으로 기능 구축

👤 중간 정도의 복잡성 기능을 제공하는 개발자 ⏱ ~90 min intermediate

언제 쓸까: 당신은 Claude에게 "OAuth 추가"를 요청하려고 하며 한 번에 500줄의 차이가 발생하는 것을 두려워합니다.

사전 조건

알려진 프로젝트 경로 — MCP는 /path/to/project를 arg로 사용하여 시작됩니다.

흐름

요구사항

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?✓ 복사됨

→ Requirements doc drafted, link to dashboard for approval
승인 + 디자인

I approved in the dashboard. Now write the design: components, data model, sequence diagram, error cases.✓ 복사됨

→ Design doc with concrete architecture
작업 + 실행

I approved. Break into tasks. Then execute task 1.1 — just that one, stop after.✓ 복사됨

→ Task list created; only task 1.1 implemented with log entry

결과: 미스터리 차이점이 아닌 검토 가능한 중간 아티팩트와 함께 제공되는 기능입니다.

함정

Claude tries to skip straight to code — The MCP blocks it — but be explicit in prompts anyway: "do not implement yet"

함께 쓰기: 깃허브 · 파일 시스템

코드가 발생하기 전에 엔지니어가 아닌 이해관계자가 사양을 승인하도록 하세요.

👤 PM/설계 승인 루프가 있는 팀 ⏱ ~60 min intermediate

언제 쓸까: 구현하기 전에 PM 승인이 필요하며 PM은 GitHub PR을 읽지 않습니다.

사전 조건

대시보드 URL 공유 가능 — 원격 PM을 위해 ngrok를 통해 포트 전달 또는 localhost:5000 노출

흐름

Spec

Draft the requirements doc for checkout-v2 and share the dashboard URL.✓ 복사됨

→ Doc + shareable link
피드백을 통해 반복

PM left 3 revision comments in the dashboard. Fetch them and revise the doc.✓ 복사됨

→ Doc updated with revision history visible
사후 승인 실행

Approval just went through — proceed to design.✓ 복사됨

→ Next stage starts; approval timestamp logged

결과: 엔지니어가 아닌 이해관계자로부터 추적 가능한 승인 체인.

함정

Dashboard not reachable for remote users — Use Tailscale or ngrok with auth

함께 쓰기: 깃허브

조합

다른 MCP와 조합해 10배 효율

spec-workflow-mcp + github

Open a PR per approved task

작업 2.1을 실행한 후 diff가 포함된 "feat(oauth): task 2.1"이라는 제목의 GitHub PR을 엽니다.✓ 복사됨

spec-workflow-mcp + filesystem

Store specs in-repo alongside code

승인된 사양을 /docs/specs/oauth-login.md에 저장하고 커밋합니다.✓ 복사됨

도구

이 MCP가 노출하는 것

도구	입력	언제 호출	비용
create_spec	name: str	새로운 기능 시작	free
write_requirements	spec_id, content: markdown	모든 사양의 첫 번째 단계	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 쿼터: 현지의
호출당 토큰: 문서/작업 크기에 비례
금액: Free
팁: 요구 사항을 간결하게 유지하세요. 승인 비용은 토큰이 아닌 사람의 시간입니다.

보안

권한, 시크릿, 파급범위

최소 스코프: filesystem-write (for spec docs)

자격 증명 저장: None

데이터 외부 송신: 없음 — localhost 대시보드

인증 없이 localhost:5000을 공용 인터넷에 노출하지 마세요.

문제 해결

자주 발생하는 오류와 해결

대시보드가 로드되지 않습니다.

명시적으로 시작: npx -y @pimzino/spec-workflow-mcp@latest --dashboard

확인: Visit localhost:5000

포트 5000이 이미 사용 중입니다(macOS AirPlay).

--port 5050을 전달하거나 시스템 설정에서 AirPlay Receiver를 비활성화합니다.

확인: Check with `lsof -i :5000`

승인 후 작업이 보류 중 상태로 유지됩니다.

MCP 클라이언트가 이전 도구 결과를 캐싱하고 있을 수 있습니다. 클라이언트를 다시 시작하세요.

대안

Spec Workflow 다른 것과 비교

대안	언제 쓰나	단점/장점
Plain Markdown in /docs	승인 루프가 필요 없는 단독 개발	구조 시행 없음, 대시보드 없음
Linear MCP	이미 작업에 선형을 사용하고 있으며 Claude가 문제를 직접 다루기를 원합니다.	사양 문서 레이어 없음

Spec Workflow

왜 쓰나요

핵심 기능

라이브 데모

실제 사용 모습

설치

클라이언트 선택

사용 사례

실전 활용법: Spec Workflow

분위기 프롬프트가 아닌 사양으로 기능 구축

사전 조건

흐름

함정

코드가 발생하기 전에 엔지니어가 아닌 이해관계자가 사양을 승인하도록 하세요.

사전 조건

흐름

함정

조합

다른 MCP와 조합해 10배 효율

도구

이 MCP가 노출하는 것

비용 및 제한

운영 비용

보안

권한, 시크릿, 파급범위

문제 해결

자주 발생하는 오류와 해결

대안

Spec Workflow 다른 것과 비교

더 보기

리소스