imagine-it은(는) 무엇을 하나요?
명세를 예시 목업으로 변환하세요: 이 제품 내에서 기능이 어떻게 보일지 보여주는 작은 .html 파일 세트입니다. 사람들이 반응할 대화 소재이지 프로덕션 코드가 아니므로, 속도와 그럴듯함이 완전함보다 중요합니다.
입력 (모두 선택 사항, 순서 무관): 이슈/PR URL 또는 #123, Jira 키 또는 URL, 파일 경로, 자유 텍스트, 그리고 플래그:
--wireframe— 저장소의 외형 대신 흑백 와이어프레임을 강제합니다.--out <dir>— 출력 루트 디렉토리 (기본값은 저장소 루트의.imagine-it/). 출력은 항상<out>/<slug>/에 저장됩니다.--screens <n>— 화면 파일 수를 제한하거나 강제합니다.--screenshot[=png|jpeg]— 화면 이미지도 캡처합니다 (기본값 PNG).--states— 스크린숏과 함께 사용하면 초기 상태뿐만 아니라 모든 상태를 캡처합니다.--viewport <WxH>— 캡처 크기 (기본값 1440x900; 모바일 우선 제품의 경우 390x844).--notes— 명세 노트 오버레이를 켠 상태로 캡처합니다 (기본값 꺼짐).
입력이 없으면 현재 대화 내용이 명세가 됩니다.
워크플로우
단계를 순서대로 실행하세요. 각 단계는 다음 단계에서 사용할 결과물을 생성합니다. 이를 작업 노트에 보관하세요. HTML만 디스크에 기록됩니다.
1. 명세 요약 (Spec digest)
명세를 가져와 다음을 포함하는 명세 요약으로 추출합니다: 제목, 슬러그, 목표, 행위자, 진입점, 기본 흐름, 실제 샘플 값을 가진 엔티티, 상태, AC-1… 형식으로 번호가 매겨진 수용 기준, 범위 외, 가정, 미결 질문.
채워진 모든 빈 칸은 가정이 됩니다. 사람만이 결정할 수 있는 사항은 미결 질문이 됩니다. 계속 진행하세요 — 아무 곳에도 명세가 없을 때(인자 없음, 대화 내용 없음)만 사용자에게 물어보세요.
완료 조건: 모든 요약 필드가 채워졌거나(또는 명시적으로 "없음") 모든 AC에 번호가 매겨졌을 때. 세부 사항, 소스별 가져오기 방법 및 예시: references/context-intake.md.
2. 디자인 브리프 (Design brief)
저장소를 읽기 전용으로 훑어보고 디자인 브리프를 작성합니다: 모드 (고화질 또는 와이어프레임), 스택, 표준 변수 이름을 사용하여 바로 붙여넣을 수 있는 :root 토큰 블록, 다크 모드, 앱 셸, 컴포넌트 노트, 기능에 가장 가까운 참조 화면 1~3개, 아이콘 스타일, UI 로케일, 그리고 모든 정보의 출처가 된 소스 파일.
환경이 하위 에이전트를 지원하면 이 작업을 하위 에이전트에 위임하고 브리프만 가져오세요. 그렇지 않으면 동일한 읽기 예산 내에서 작업을 인라인으로 수행하세요. --wireframe이 전달되었거나 저장소에 모방할 UI가 없으면 모드는 와이어프레임입니다. 그 이유를 브리프에 명시하세요. 그런 다음 실제 경로/레이블로 요약의 진입점을 업데이트하세요.
완료 조건: 토큰 블록이 모든 표준 변수 이름을 사용하고(와이어프레임인 경우: 토큰 = 없음) 각 토큰 그룹이 소스 파일을 인용할 때. 스택 탐지 매트릭스, 토큰이 있는 위치, 표준 이름: references/design-discovery.md.
3. 화면 계획 (Screen plan)
HTML을 작성하기 전에 파일을 결정합니다: # | 파일 | 목적 | 상태 | 포함된 AC 형식의 표를 흐름 순서로 작성합니다. 각각의 고유한 뷰 또는 콘텐츠가 많은 오버레이당 하나의 파일입니다. 상태(비어 있음, 로딩 중, 오류, 성공…)는 해당 화면 내에서 섹션으로 존재합니다. 필요한 만큼, 가능한 한 적게 — 일반적으로 2~6개.
완료 조건: 모든 AC가 적어도 하나의 행의 "포함된 AC" 열에 나타날 때. 규칙 및 예시: references/screen-planning.md.
4. 생성 (Generate)
<out>/<slug>/ 안에 다음 파일을 작성합니다:
index.html 허브: 요약 요약, 흐름, AC 적용 범위, 가정, 미결 질문, 디자인 출처
styles.css 디자인 브리프 토큰 + assets/base.css 원문 + 기능 컴포넌트 스타일
ii.js assets/ii.js에서 그대로 복사 (목업 툴바: 탐색, 노트, 상태, 테마)
01-<screen>.html 화면 계획의 각 행당 하나씩
02-<screen>.html
assets/index-template.html 및 assets/screen-template.html을 시작점으로 사용하고, 이 스킬 폴더에서 assets/base.css와 assets/ii.js를 복사하세요. 참조 화면을 모방하세요: 동일한 셸, 탐색 레이블, 컴포넌트 모양 및 문체를 저장소의 UI 언어로 사용합니다. 현실적인 도메인 데이터로 채우세요. AC를 충족하는 각 요소에는 data-note="AC-n: …"를, 각 예비 설계 선택에는 data-note="NOTE: …"를 표시하세요.
출력은 독립적인 일반 HTML/CSS와 아주 작은 바닐라 JS로, 디스크에서 바로 열 수 있습니다: 상대 링크만 사용, 인라인 SVG 아이콘, 저장소 폰트의 시스템 폰트 대체. 전체 출력 계약 및 전달 전 체크리스트: references/html-conventions.md.
5. 검증 (Verify)
references/html-conventions.md의 전달 전 체크리스트를 실행하세요. 모든 체크리스트 항목이 통과되면 완료됩니다. 그렇지 않으면 수정하고 다시 확인하세요.
6. 캡처 (Capture) (--screenshot이 있는 경우에만)
스크린숏 플래그 없이 이 단계는 완전히 건너뜁니다. 그렇지 않으면 계획된 화면(그리고 허브는 마지막)을 <out>/<slug>/screenshots/의 이미지로 렌더링하고 index.html에 스크린숏 섹션을 추가합니다. 캡처 문제는 실행을 차단하지 않습니다.
완료 조건: 계획된 모든 이미지가 존재하고, 비어 있지 않으며, 올바른 매직 바이트를 가지고, 첫 번째 이미지가 보여졌을 때. 건너뛴 샷은 수동 명령과 함께 보고됩니다. 플래그, 라이트/다크, 명명 규칙, 도구 계층 및 대체: references/screenshots.md.
7. 전달 (Hand off)
다음 내용으로 응답하세요: index.html의 경로, 화면 계획 표, 스크린숏 경로(건너뛴 샷과 해당 수동 명령 포함), 가정 및 미결 질문, 그리고 파일 열기 제안(Windows는 start, macOS는 open, Linux는 xdg-open). <out>이 저장소 내부에 있고 아직 .gitignore에 없다면 추가를 제안하세요.
후속 작업: <out>/<slug>/index.html(가정, 디자인 출처) 및 styles.css에서 컨텍스트를 재구성합니다. 저장소를 다시 훑지 마세요. 슬러그를 유지하세요. index.html을 일치하도록 업데이트하세요. 5단계를 다시 실행하세요(그리고 스크린숏이 있었다면 영향을 받은 화면과 허브를 다시 캡처하세요).