Claude Code·Cursor 에서 MCP 로 기획 문서를 바로 읽고 씁니다

기획한 그대로,
돌아가는 앱이 됩니다.

PRD·유저플로우·와이어프레임·ERD 를 한 데이터로 묶고, 그 기획에서 Next.js 앱과 코드리뷰·E2E 까지 이어 갑니다.

신용카드 없이 시작 · 무료 플랜에도 매일 크레딧이 채워집니다

DevFlow기획 문서
대화하며 쓰는 PRD. AI 제안은 검토한 뒤에만 반영됩니다

대화하며 쓰는 PRD. AI 제안은 검토한 뒤에만 반영됩니다

4종

MCP 설정을 바로 받아 가는 에디터

93개

Claude Code·Cursor 에서 바로 부르는 MCP 도구

192개

앱 빌더가 고르는 산업군별 디자인 방향

3,000

무료 플랜에도 매일 채워지는 크레딧

문서, 화면, 코드, 에디터. 모두 같은 기획을 봅니다.

문서에서 쓴 요구사항이 플로우와 와이어프레임, 앱 빌더, 그리고 에디터 속 에이전트에게 그대로 전달됩니다. 누가 어디서 시작하든 결과는 한 프로젝트에 쌓입니다.

기획 문서

대화하며 쓰는 PRD.

시작하기
DevFlow기획 문서
AI 와 함께 PRD 를 쓰는 기획 문서 화면

플로우·와이어프레임

흐름이 곧 화면 시안.

시작하기
DevFlow와이어프레임
유저플로우에서 만든 실측 와이어프레임

앱 빌더·배포

기획서가 돌아가는 앱으로.

시작하기
DevFlow개발
기획서로 만든 Next.js 앱을 미리 보는 개발 탭

에디터 · MCP

에디터 안에서 그대로.

시작하기
~/shop · claudedevflow 연결됨

> 쇼핑몰 기획의 결제 확인 화면을 와이어프레임으로 그려 줘

●devflow.read_design_harness프로젝트 디자인 규칙 확인

●devflow.read_projectPRD 12절 · 기능 34개

●devflow.read_user_flow결제 흐름 6단계

●devflow.write_wireframe결제 확인 화면 저장됨

완료. 개발 탭의 같은 화면에서 이어서 고칠 수 있습니다.

이미 쓰는 AI 에디터에 붙습니다.

MCP 설정 한 줄이면 에디터 속 에이전트가 기획서를 읽고, 와이어프레임과 화면을 DevFlow 에 써 넣습니다.

  • Claude Code
  • Cursor
  • VS Code
  • Claude Desktop
  • 그 밖의 MCP 클라이언트

문서 도구가 아닙니다. 기획이 코드까지 이어집니다.

빨리 만들면서도 처음 기획과 어긋나지 않게 하는 세 가지.

01

기획이 화면과 데이터의 정본이 됩니다.

PRD 속 개체가 관계형 테이블과 외래키로, 유저플로우의 단계가 화면 시안으로 이어집니다. 문서를 고치면 그 문서를 읽는 모든 작업면이 같은 내용을 봅니다.

  • 문서에서 뽑은 ERD·DBML 을 실제 PostgreSQL 스키마와 동기화
  • 플로우 화면마다 같은 키로 와이어프레임·개발 화면을 연결
  • Claude Code·Cursor 에서도 MCP 로 같은 정본을 읽고 수정
DevFlow데이터베이스
DevFlow 데이터베이스 탭의 ERD 다이어그램과 DBML

02

바꿀 곳은 AI 가 제안하고, 고르는 건 사람입니다.

AI 가 바꾸려는 내용은 바로 덮어쓰지 않고 제안으로 올라옵니다. 변경 전후를 비교해 고른 것만 반영되고, 버전마다 되돌릴 수 있습니다.

  • 제안 단위로 검토하고 필요한 것만 반영
  • 버전 저장·비교·되돌리기
  • 확정된 문서는 그대로 내보내 팀과 공유
AI 제안 3건2건 선택됨
  • 기능 · 쿠폰 적용

    결제 단계에서 쿠폰 코드를 입력한다.

    결제 단계에서 쿠폰 코드를 입력하고, 할인 후 금액은 0원 아래로 내려가지 않는다.

  • 요구사항 · 만료 쿠폰

    (없음)

    만료된 쿠폰은 사유와 함께 거절한다.

  • PRD · 대상 사용자

    모든 회원

    로그인한 회원

버리기선택한 2건 반영

03

출시 전에 리뷰와 E2E 로 한 번 더 거릅니다.

PR 이 열리면 AI 가 변경을 줄 단위로 읽고 버그·보안 지적을 남깁니다. 기획의 요구사항을 기준으로 Playwright 시나리오가 실제 브라우저에서 돕니다.

  • GitHub PR 인라인 리뷰와 머지 위험도
  • 요구사항 기준 Playwright E2E 시나리오
  • WBS 간트로 남은 일과 인력 배정까지 추적
쿠폰을 결제 단계에 적용#482
devflowbotcheckout.ts 14행에 지적
12   const promo = findPromo(code);
13   if (!promo) return order;
14   order.total -= promo.amount;

Important할인액이 주문 금액보다 크면 합계가 음수가 됩니다. Math.max(0, …) 로 막아 주세요.

E2E

쿠폰 적용 후 결제

통과

E2E

만료 쿠폰 거절

통과

E2E

0원 주문 처리

실패

이런 팀이 이렇게 씁니다.

역할마다 시작하는 곳은 달라도, 끝은 같은 프로젝트에 모입니다.

에이전시 테크 디렉터

외주 제품 개발

  1. 1고객 인터뷰 회의록을 업무노트에 올려 요구사항과 기능명세를 뽑습니다.
  2. 2유저플로우와 와이어프레임으로 고객과 화면 범위를 먼저 확정합니다.
  3. 3앱 빌더로 돌아가는 시제품을 띄우고 GitHub 저장소로 개발팀에 넘깁니다.

1인 창업가

초기 서비스 검증

  1. 1대화형 어시스턴트와 서비스 흐름을 구체화합니다.
  2. 2생성된 ERD 와 와이어프레임을 점검하고 앱을 바로 실행해 봅니다.
  3. 3AI 코드리뷰와 E2E 를 거친 뒤 독립 주소로 공개합니다.

프로덕트 리드

B2B SaaS 제품팀

  1. 1요구사항과 유저플로우를 한 워크스페이스에서 관리합니다.
  2. 2변경이 생기면 PRD·와이어프레임·스키마를 함께 맞춥니다.
  3. 3간트와 주간 보고서로 팀 진척을 한 화면에서 봅니다.

필요한 만큼만.

신용카드 없이 무료로 시작하고, 팀이 커지면 언제든 올리세요. 연간 결제는 20% 할인됩니다.

Starter

무료

혼자 만들어 보기

  • 매일 3,000 크레딧
  • 멤버 1명 · 라이브 사이트 3개
  • 프로젝트 3개
  • 기획부터 개발·게시까지 모든 모듈
  • AI 채팅 · 마크다운 · CSV 내보내기
무료로 시작하기

Pro

추천

₩22,000/ 월

제품 하나를 끝까지

  • 매월 100,000 + 매일 3,000 크레딧
  • 멤버 3명 · 라이브 사이트 3개
  • 프로젝트 무제한
  • MCP 로 Claude Code · Cursor 연결
  • 버전 · 작업 로그 전체 조회
  • 게시 사이트 브랜딩 숨기기
Pro 시작하기

Team

₩59,000/ 월

팀이 함께 만들기

  • 매월 220,000 + 매일 3,000 크레딧
  • 멤버 5명 · 라이브 사이트 10개
  • 그룹 멤버와 기획·디자인·앱 공유
  • 회의 결정사항 반영
  • 변경 검토 · 승인 이력
  • 게시 사이트 브랜딩 숨기기
Team 시작하기

무엇을 보내고 어떻게 지키는지 밝혀 둡니다.

개인정보처리방침 보기

요청마다 권한을 확인합니다

문서는 소유자와 같은 그룹의 구성원만 열 수 있고, 서버가 요청마다 이를 확인합니다. 전송 구간은 HTTPS 로 암호화합니다.

AI 에는 요청한 만큼만 보냅니다

AI 에게 생성·검토를 요청할 때 그 요청에 필요한 기획 문서 내용만 전송합니다. 요청하지 않으면 보내지 않습니다.

어디로 가는지 공개합니다

처리를 맡기는 사업자와 국외 이전 항목은 개인정보처리방침에 표로 적혀 있습니다. 외부 도구 연결 토큰은 해시만 저장하고 언제든 끊을 수 있습니다.

자주 묻는 질문

글을 한 번 뽑고 끝나지 않습니다. PRD·유저플로우·와이어프레임·ERD·앱 코드가 하나의 데이터로 이어져 있어서, 한 곳을 고치면 그걸 읽는 다음 단계가 같은 내용을 봅니다.

기획한 대로 만들고,
만든 대로 확인하세요.

무료 플랜에도 매일 3,000 크레딧이 채워집니다. 브라우저에서 바로 시작하세요.