canvas-designlisted

# canvas-design — 내부 UI 기준 확보 스킬 > 이 스킬은 **공개 진입점이 아니다**. 사용자가 외우는 workflow 는 `/spec -> /design -> /impl -> /acceptance` 그대로이며, canvas-design 은 `/ux`, `/impl`, `/impl-loop` 이 UI 기준 확보나 선행 목업 탐색이 필요하다고 판정했을 때 호출하는 내부 wrapper 다. `/canvas-design` 으로 노출하지 않는다. ## 목적 신규 시각 구조 작업에서 구현자가 대조할 기준을 확보하고, 기준이 확정되면 그 기준을 `docs/design-variants/` canvas SSOT 에 반영한다. canvas SSOT 변경은 이 스킬 경유가 단일 경로다. `/ux`, `/impl`, `/impl-loop` 는 승격·canvas 등록 절차를 각자 복제하지 않고 이 스킬을 호출한다. ## 입력 - 대상 화면 `<screen-id>` — kebab-case. ux-flow 화면 인벤토리, `data-node-id`, 구현 컴포넌트와 같은 id 체계를 쓴다. - 기준 소스: - `existing-confirmed`: 이미 있는 `docs/design-variants/<screen-id>.html` - `user-provided`: 사용자 제공 이미지, 스케치, HTML, 기존 외부 시안 - `new-draft`: 신규 시각 구조 + 기준 없음 - `skip`: 사용자가 "목업 없이"라고 했거나 시각 구조 불변 - 구현 맥락 — 관련 issue, impl task, ux-flow, design.md, 기존 제품 화면 포인터 ## 산출물 규약 `docs/design-variants/` 한 지붕이 확정본 SSOT 다. - `docs/design-variants/canvas.html` — 프로젝트 전체 화면 지도. 확정 화면을 iframe frame 으로 등록한다. 화면별 캡션과 2D 위치가 필요한 플로우 보드는 `.screen-node` 로 등록하고, 필요하면 라벨 달린 흐름 화살표를 둔다. - `docs/design-variants/_lib/` — `canvas.js`, `show-ids.js` 같은 공유 helper. - `docs/design-variants/<screen-id>.html` — 화면별 확정본. v 접미사는 쓰지 않는다. 히스토리는 git 이 보존한다. - `docs/design-variants/drafts/` — 탐색용 draft. `.gitignore` 로 무시한다. ## 절차 `canvas-design` 은 main-owned 내부 checkpoint 이며 helper begin/end-step 비대상이다. 이 스킬 자체를 helper step 으로 열지 않는다. draft 생성이 필요할 때만 mode 없는 foreground designer Agent를 호출하며 outer step은 SubagentStart/PostToolUse lifecycle hook이 기록