Wireframes (와이어프레임)
개요
UI 제안은 그림입니다. 글의 나열이 아닙니다. 각 변경 사항을 저렴한 와이어프레임으로 그리세요: 현재(Now) 와 제안(Proposed) 을 나란히 배치하고, 변경되지 않는 모든 것은 회색 막대로, 논의 중인 요소에만 실제 레이블을, 그리고 한 문장의 이유를 추가하세요. 앱의 실제 모습을 재현하지 않습니다: 브랜드 색상, 실제 폰트, 픽셀 정밀도가 없습니다. 사용자는 변경 사항을 한눈에 볼 수 있으며, 그리는 데 토큰이 거의 들지 않습니다.
사용하지 말아야 할 때: 변경 사항이 순수한 시각적 스타일(색상, 대비, 폰트, 간격 토큰)인 경우 — 이 경우에는 설명하거나 실제 CSS를 보여주세요. 또는 사용자가 이미 결정을 내리고 빌드를 요청한 경우 — 그대로 빌드하세요. 또는 레이아웃, 컨트롤, 흐름에 전혀 변경이 없는 경우.
출력물
하나의 자체 포함 HTML 파일. 다음과 같이 구성됩니다:
- 경로: 프로젝트 내
docs/mockups/YYYY-MM-DD-<topic>.html. 목업을 코드와 함께 유지하고 커밋할 수 있습니다. 프로젝트가 이미 다른mockups/폴더에 목업을 보관 중이라면 해당 폴더를 사용하세요. - Head: kit.html 에서
<!doctype html>부터</style></head><body>까지 있는 그대로 복사하세요.<title>만 변경합니다. kit 클래스만 사용하세요. 인라인style은 크기 및 간격(너비, 높이, 여백,.menu위치) 전용이며, 색상에는 절대 사용하지 않습니다. <h1>과 한 줄의.lede.- 변경 사항당 하나의 섹션:
<h2>N · 사용자 언어로 된 결과</h2>, 그 다음 하나의 레이아웃:
| 상황 | 레이아웃 | 레이블 |
|---|---|---|
| 변경할 사항이 존재함 | .pair: Now, 그 다음 Proposed | .lbl.b "Now: 무엇이 문제인가" · .lbl.g "Proposed: 무엇이 변경되는가" |
| 수정 방법이 결정되지 않음 | .opts: 2-3개 옵션, 존재하는 항목 위에 작은 .solo Now | .lbl.o "A · 이름 (권장)"; .why "+ 이점 · − 비용" |
| 아무것도 존재하지 않음 | .solo: Proposed 만 | .lbl.g; 번호가 매겨진 .n 콜아웃을 .why 에서 설명 |
| 상태 또는 너비에 따른 하나의 요소 | .strip: 상태당 하나의 프레임 | .lbl "Empty", "Loading", "Error", "Phone"…; 스트립 아래에 .why 하나 |
.pair의 각 측면, 그리고 각 옵션은 레이블(최대 10단어), 프레임, 그리고 한 문장의.why를 갖습니다. 변경이 순서(메뉴, 그 다음 토스트)인 경우 한 쪽에 두 개의 프레임을 사용하세요.
kit.html 을 한 번 읽으세요: CSS 아래에 각 레이아웃의 작업 예제와 모든 클래스의 인덱스가 있습니다.
그리기 규칙
- 의사 결정이 있는 곳에만 실제 텍스트: 변경된 컨트롤, 바로 옆 요소, 그리고 방향을 위한 앱 이름 또는 브레드크럼. 그 외의 모든 것은
.box(텍스트 줄,width설정),.img(이미지 또는 차트) 또는 회색 막대의.row입니다. - 변경되는 하나의 컨트롤을 표시:
.bad(빨간 점선)은 Now의 문제에,.good(실선 녹색)은 Proposed의 변경 사항과 각 옵션을 차별화하는 요소에 표시합니다..strip에는 아무것도 표시하지 않습니다. 컨트롤의 윤곽선만 표시하고, 전체 너비 막대나 전체 프레임은 표시하지 않습니다. 프레임이 가장자리에서 윤곽선을 자르기 때문입니다. - 무언가 누락된 경우: 속한 자리에 빈 점선 슬롯을 그립니다 (
<span class="in bad">no search here</span>). 근처 요소에 윤곽선을 그리지 마세요. - 약 800px에 맞춤: 각
.pair열은 약 380px이므로.bar항목을 약 5개로 유지하세요. - 앱 종류: 웹 또는 데스크톱 →
.f; 좁은 화면 또는 네이티브 모바일 →.phone; 터미널 UI →.f.mono.pad와 실제 텍스트 줄 및 변경되지 않은 출력을 위한 회색 막대. - 열린 질문 은 해당 측의
.why에 질문 형태로 넣습니다. - 예산: 파일당 약 15KB 이하. 약 1.5KB를 초과하는 섹션은 아무도 결정하지 않는 내용을 그리는 것이므로, 해당 내용을 회색 막대로 바꾸세요.
보여주기 전에 확인
스크린샷을 찍을 수 있는 브라우저 도구를 사용할 수 있다면 파일을 열고 확인하세요. Claude Desktop 앱에서는 url: file://<절대 경로> 로 mcp__Claude_Browser__preview_start 를 호출한 다음, action 을 screenshot 으로 하여 mcp__Claude_Browser__computer 를 호출합니다. 브라우저가 로컬 파일을 거부하는 경우 페이지를 보지 않은 것으로 간주합니다(아래 참조). 각 윤곽선이 의도한 요소에 위치하는지, 아무것도 잘리거나 줄바꿈되지 않는지, 오버레이가 설명하는 대상을 가리지 않는지 확인하세요. 수정한 후 다시 확인하세요.
스크린샷 도구가 없는 경우(CLI, 헤드리스, 하위 에이전트), 해당 검사 항목에 대해 마크업을 다시 읽고 페이지를 보지 않았다고 핸드오버에 명시하세요.
핸드오버
채팅에는 다음만 작성하세요:
- 프로젝트 루트를 기준으로 한 마크다운 링크로 된 파일;
- 섹션당 한 줄: 번호, 제목, 상태 ("ready", "pick A/B/C", 또는 열린 질문);
- 필요한 결정: 각각 한 문장, 당신의 선택과 단 하나의 주요 이유.
그림과 .why 줄이 세부 사항과 트레이드오프를 담고 있으므로 채팅에서 다시 설명하지 마세요. 사용자의 선택을 기다린 후 빌드하세요. 물어볼 사용자가 없는 경우(하위 에이전트, 헤드리스), 동일한 세 가지 항목을 반환하고 중지하세요.
흔한 실수
| 실수 | 대신 |
|---|---|
| 모든 요소에 레이블 붙이기 | 결정에 관련된 요소에만 레이블 붙이기 |
| 앱에 맞게 스타일 변경 | Kit CSS를 그대로 사용하고 회색 막대 사용 |
| 채팅에서 그림마다 문단 설명 | 링크, 섹션당 한 줄, 결정 사항 |