wireframe

Installation
SKILL.md

Wireframe: Spec → HTML 와이어프레임

spec 문서로부터 HTML 와이어프레임을 생성한다. Tailwind CDN + CSS 변수로 최소 회색 톤 스타일 적용.

Step 1: 전제 조건

$ARGUMENTS에서 feature명 추출 후 artifacts/<feature>/spec.md 존재 확인. 없으면 "먼저 /spec <feature>를 실행하세요." 출력 후 종료.

Step 2: 시나리오 → 화면 그룹핑 + Layout Structure

spec.md의 ### N. 시나리오를 파싱하고, 시각적으로 구분되는 화면 상태로 그룹핑한다.

  • 하나의 화면 = 하나의 시각적으로 구분되는 UI 상태
  • 같은 베이스에서 작은 상태 차이만 있는 시나리오는 하나로 묶는다
  • 시각적으로 완전히 다른 상태는 별도 화면으로 분리

각 화면의 Layout Structure를 들여쓰기 트리로 작성한다.

Installs
2
GitHub Stars
1
First Seen
Mar 13, 2026
wireframe — toy-crane/harness-engineering-template