이게 불편했어요

관리자 시스템을 추가 개발할 때마다 같은 내용을 네 번 써야 했어요. 기능정의서에 한 번, 화면설계서에 한 번, 디자인 툴에 한 번, 검수표에 한 번. 그러다 보면 기능 ID가 화면설계서에 없고, 예외 문구가 디자인과 다르고, 검수 시나리오에서 예외 하나가 빠져 있어요.

그래서 이렇게 풀어요

원본을 Markdown 문서 3종(기능정의서·상세명세·WBS)과 화면 시안 파일 하나로 두고, 플로우 맵·화면설계서·디자인 보드를 모두 그 데이터에서 만들어요. 화면을 캡처가 아니라 HTML로 그리기 때문에 「수용 인원」처럼 글자만 가리켜도 빨간 번호 마커가 제자리를 찾아 붙고, 버튼에 적힌 이동 대상에서 화면 사이 연결선이 저절로 뽑혀요. 마지막에는 요구 → 기능 ID → 화면이 끝까지 이어지는지 표로 판정해서 빠진 곳을 「확인 필요」로 띄워요.

안에서는 이렇게 돌아가요

1. 1

   기획자 → Claude Code · screen-spec-kit

   /product_design_dongh:start + 기획서나 아이디어작업 폴더를 정하고, 인자 뒤에 아이디어 문장이 붙어 있으면 묻지 않고 기획 분해부터 시작해요.commands/start.md
2. 2

   Claude Code · screen-spec-kit → spec-kit 문서 3종 · project.js

   research/기획분해.md → 문서 3종 · project.js역할→메뉴→화면→기능→컴포넌트·동작→연결→예외까지 나눈 한 장이 기능정의서·상세명세·시안의 원본이 돼요.skills/plan-decompose/SKILL.md
3. 3

   spec-kit 문서 3종 · project.js → Claude Design 캔버스

   export_design.mjs → 화면별 .dc.html 보드시안 비교·화면·디자인 시스템 보드를 내보내고, 버튼의 data-go는 캔버스에서도 이동되는 링크로 바꿔요.scripts/export_design.mjs
4. 4

   Claude Design 캔버스 → spec-kit 문서 3종 · project.js

   import_design.mjs --apply → design-import/사람이 캔버스에서 고친 보드를 되가져와, 이후 빌드와 내보내기에서 원래 시안보다 먼저 써요.scripts/import_design.mjs
5. 5

   spec-kit 문서 3종 · project.js → build_kit.py

   kit.json · theme.css · project.js · sb-pages.js · docs문서에서 센 기능·예외·검수 개수가 kit.json의 expect와 다르면 빌드를 멈춰요.scripts/build_kit.py
6. 6

   build_kit.py → flowmap.html

   플로우 맵 + 화면설계서 + 문서 패널공통 엔진 템플릿에 프로젝트 파일을 끼우고, kit.json의 lang에 맞춰 화면 문구를 한·영·중·일로 바꿔 한 HTML로 써요.scripts/build_kit.py
7. 7

   Claude Code · screen-spec-kit → flowmap.html

   audits/flowmap-sb.js → 잘림 · 겹침 · 확인 필요 개수127.0.0.1로 연 플로우 맵에서 번호 원 겹침과 잘림, 최종 검증의 확인 필요 개수를 세요.scripts/audits/flowmap-sb.js

나한테 맞을까요

What was hard

Every round of admin-system work meant writing the same thing four times: in the feature spec, the screen spec, the design tool and the QA sheet. Then they drift. A feature ID never reaches the screen spec, an error message in the design differs from the doc, and one exception is missing from the test scenarios.

What it does about it

The source is three Markdown docs (feature spec, detailed spec, WBS) plus a single file of screen drafts, and the flow map, screen spec and design boards are all built from that data. Screens are drawn in HTML rather than pasted as screenshots, so pointing at a label like "capacity" is enough for a red numbered marker to find its place, and the links between screens are pulled from the targets written on each button. At the end a table traces each requirement to a feature ID and a screen, and anything missing shows up as "needs checking".

How it runs inside

1. 1

   Planner → Claude Code · screen-spec-kit

   /product_design_dongh:start + a plan or an ideaIt picks the working folder, and if an idea follows the arguments it goes straight to breaking the plan down.commands/start.md
2. 2

   Claude Code · screen-spec-kit → spec-kit docs · project.js

   research/기획분해.md → three docs · project.jsOne sheet, from roles and menus down to screens, features, links and exceptions, becomes the source of the specs.skills/plan-decompose/SKILL.md
3. 3

   spec-kit docs · project.js → Claude Design canvas

   export_design.mjs → one .dc.html board per screenExports draft, screen and design-system boards, turning each data-go button into a link that works on the canvas.scripts/export_design.mjs
4. 4

   Claude Design canvas → spec-kit docs · project.js

   import_design.mjs --apply → design-import/Brings back boards a person edited on the canvas; later builds and exports use them ahead of the original drafts.scripts/import_design.mjs
5. 5

   spec-kit docs · project.js → build_kit.py

   kit.json · theme.css · project.js · sb-pages.js · docsIf the counts of features, exceptions and tests read from the docs differ from kit.json's expect, the build stops.scripts/build_kit.py
6. 6

   build_kit.py → flowmap.html

   flow map + screen spec + docs panelFills the shared engine template with the project files, its interface in the language kit.json's lang names.scripts/build_kit.py
7. 7

   Claude Code · screen-spec-kit → flowmap.html

   audits/flowmap-sb.js → clipped, overlapping, uncheckedOn the flow map served from 127.0.0.1 it counts overlapping or clipped markers and the open items in the final check.scripts/audits/flowmap-sb.js

Is it for you