sketch-wireframe

根据 spec.md 自动生成 HTML 와이어프레임以验证布局。

把 spec.md 里的需求自动变成一个可打开的 HTML 와이어프레임，用来快速验证页面布局、信息层级和屏幕流转是否合理。通常在要改布局、做新页面或新增界面流时用，不适合只改文案或后台数据的微小变更。特别之处是能从 spec.md 自动推导组件摆放和流程，让设计、产品和开发在浏览器里直观对齐并快速拿反馈。

---
name: sketch-wireframe
description: spec.md를 기반으로 HTML 와이어프레임을 생성한다. 레이아웃 구조가 바뀌는 UI feature에서 사용한다 (예: 새 화면, 새 레이아웃, 화면 간 흐름). 서버·데이터 전용 변경이나 단일 카피·토글처럼 레이아웃이 그대로인 변경에는 쓰지 않는다 — 레이아웃을 시각적으로 검증하고 피드백 루프를 도는 게 본질이기 때문이다. "/sketch-wireframe", "wireframe", "와이어프레임", "레이아웃 확인"으로도 호출한다.
argument-hint: "feature name"
---

# Sketch Wireframe

spec.md를 기반으로 컴포넌트 배치·정보 계층·화면 간 흐름을 검증하는 HTML 와이어프레임을 만든다.

## Inputs / Outputs

| 입력 | 출력 |
|---|---|
| `artifacts/<feature>/spec.md`, 참조 이미지(있으면) | `artifacts/<feature>/wireframe.html` |

spec.md가 없으면 "`/write-spec <feature>`를 먼저 실행하세요." 출력 후 중단 — wireframe은 spec의 시나리오를 입력으로 받기 때문이다. 변경이 필요하면 wireframe을 멈추고 `/write-spec`으로 돌아간다.

## Workflow

### Step 1