목업을 HTML로 슬라이스하기
목업을 HTML로 충실히 복사하세요. 다시 디자인하지 마세요. 올바른 결과물을 목업 위에 겹쳐 보면 거의 차이가 없어야 합니다. 창의성, '개선', 추가 기능은 실수로 간주됩니다.
워크플로 (순서대로, 건너뛰지 마세요)
1. 목업 수신
목업이 실제로 존재하는지 확인하세요 (/mnt/user-data/uploads와 대화 내용 확인). 없으면 요청하고, 절대 추측하지 마세요. 페이지/프레임이 여러 개인 경우 어떤 것을 만들지 물어보세요.
지원되는 입력: PNG, SVG, Figma via MCP (JPG는 PNG로 처리됨). 다른 형식은 사용자에게 PNG나 SVG로 내보내달라고 요청하세요. 각 입력을 읽는 방법은 references/mockup-audit.md에 있습니다. Figma의 경우 get_design_context를 호출하기 전에 figma:figma-design-to-code 스킬을 로드하세요.
2. 두 가지 질문
감사와 코딩 전에 두 질문을 함께 물어보세요. 사용자가 이미 답변했다면 건너뜁니다. 가능하면 ask_user_input_v0을 사용하고(한 번 호출, 두 질문), 그렇지 않으면 짧은 일반 텍스트로 물어보세요.
- 출력 형식: 단일 파일 (HTML, CSS, JS가 하나의
index.html에 인라인 +assets/) 또는 분리 파일 (index.html,css/style.css,js/main.js+assets/) - CSS: Vanilla CSS, Bootstrap via CDN, 또는 Tailwind via CDN
답변 후 references/output-structure.md와 일치하는 파일(references/vanilla.md, references/bootstrap.md, references/tailwind.md) 중 하나를 읽으세요. 나머지 두 개는 읽지 마세요.
3. 코딩 전 감사
references/mockup-audit.md를 읽고 감사 명세(캔버스, 컨테이너, 그리드, 색상, 폰트, 간격, 모서리 반경, 그림자, 에셋, 보이는 상호작용)를 생성하세요. 각 값은 측정됨 또는 추정됨으로 표시합니다. 결정이 필요한 경우(식별 불가능한 폰트, 누락된 에셋)에만 사용자에게 요약을 보여주고, 그 외에는 계속 진행합니다.
4. 코드 작성
- 규칙:
references/responsive-and-fidelity.md(픽셀 완벽 및 반응형),references/code-standards.md(시맨틱 HTML, BEM),references/anti-slop.md(금지 사항). 작성 중에 적용하고, 나중에 하지 마세요. - 목업 너비의 값은 감사 값과 정확히 일치해야 합니다(px 단위, 프레임워크 스케일로 반올림하지 않음).
- JS는 목업에 보이는 인터랙티브 컴포넌트에만 사용하고,
anti-slop.md의 콘텐츠 테스트를 따르세요(목업에 필요한 콘텐츠가 있으면 동작을 빌드하고, 없으면 정적으로 유지하고 보고). 선택한 프레임워크가 요구하는 것 외에 추가 라이브러리는 사용하지 마세요.
5. 검증
references/responsive-and-fidelity.md의 검증 단계를 따르고, references/anti-slop.md의 최종 확인을 실행하세요. 샌드박스가 렌더링할 수 없으면 있는 그대로 말하세요.
6. 전달
/mnt/user-data/outputs/에 저장하고 present_files로 공유하세요. 파일이 여러 개인 경우 폴더 구조를 유지한 단일 .zip으로 패키징하고(에셋 경로가 유효하도록) index.html도 함께 제시하세요.
그런 다음 사용자가 알아야 할 사항만 최대 6줄로 보고하세요: 식별되지 않은 폰트와 대체 항목, 추정된 값, 자리 표시자 에셋, 재현할 수 없거나 크기 예산을 초과한 아이콘, 콘텐츠 부족으로 빌드되거나 정적으로 남겨진 인터랙티브 동작, 목업에 없어서 파생된 태블릿/모바일 부분. 기능 제안, 개선 아이디어, 자기 찬양은 금지입니다.
핵심 원칙
- 충실도가 최우선입니다. 목업이 약해 보여도 있는 그대로 복사하세요.
- 목업에 없는 것은 추가하지 마세요. 조용히 추측하지 마세요. 시각적 영향을 주는 모든 가정은 보고서에 포함하세요.
- 텍스트를 정확히 복사하세요. 대소문자, 구두점, 숫자를 포함하며, 읽을 수 없는 텍스트는 표시하세요.