HTML 페이지 표준
앞으로의 정적 HTML을 위한 정식 파이프라인입니다. 이 스킬은 라우터 역할을 합니다. 이 파일 하나만으로 전체 페이지를 구현하지 마세요.
파일을 작성하기 전에 선언하세요:
HTML-PAGE-STANDARD: 1.0
PASS: A-clone | B-tokenize | C-repair | layout-pack
현재 패스의 소유자만 로드하세요. screenshot-to-html과 studio-web이 초안을 공동 작성하지 않도록 하세요.
패스 소유자
| 패스 | 소유자 | 출력물 |
|---|---|---|
| A-clone | screenshot-to-html 전용 | source.png + clone.html |
| B-tokenize | 이 스킬 + references/tokenize-contract.md | core.css + theme-default.css |
| C-repair | studio-web 1.1 web.repair | clone에서 생성된 index.html, 시맨틱, 접근성, 모션 |
| layout-pack | 이 스킬 + references/layout-packs.md | (선택 사항) layout-*.css |
사용자가 라이브 URL이나 기존 HTML(클론할 스크린샷 없음)을 제공한 경우 A를 건너뛰세요. 토큰이 누락되었으면 토큰화한 후 C로 진행하세요.
스크린샷이 정확한 복제본이 아니라 분위기만 참고하는 경우 A를 건너뛰고 studio-web web.build를 대신 사용하세요. 파일을 작성하기 전에 그 사실을 알리세요.
하드 규칙
- 사용자가 명시적으로 연결하지 않는 한 한 번에 하나의 패스만 실행합니다.
- 모든 새 페이지는 단 하나의 디자인이라도 TUNE + 테마 파일을 함께 제공합니다.
- TUNE은 리듬을 소유합니다. 테마는 룩을 소유합니다. 레이아웃 팩은 배열을 소유합니다. HTML은 콘텐츠를 소유합니다.
- 패스 B 이후에는 토큰이 존재하는 경우 원시
font-size,padding,margin, 또는gap을 사용하지 마세요. - 컴포넌트 레이아웃에 뷰포트 너비 중단점을 사용하지 마세요. 영역은
@container+cqi를 사용하세요. - 테마는 DOM을 변경하지 않아야 합니다. 레이아웃 팩은 팔레트를 변경하지 않아야 합니다.
- 요청받지 않았다면 첫 번째 페이지에 두 번째 테마나 레이아웃 팩을 추가하지 마세요.
- Wix Velo 작업은 범위 밖입니다.
폴더 규약
<page>/
source.png
clone.html
core.css
theme-default.css
index.html
선택적으로 추후 추가: theme-<name>.css, layout-<name>.css. 루트 속성: data-theme="default" 및 data-layout="default".
레이어: @layer reset, core, theme, layout, page;
로드 맵
- 패스 A — screenshot-to-html을 로드하세요.
clone.html이 그림과 일치할 때 중지하세요. - 패스 B —
references/tokenize-contract.md를 로드하세요.assets/core.template.css와assets/theme-default.template.css를 복사한 후 클론의 숫자로 채우세요. 재설계하지 마세요. - 패스 C — studio-web 1.1, lane
web.repair, 그리고 해당 스킬의references/page-anatomy.md를 로드하세요. 고정: 시각적 규약, TUNE 숫자, 명시되지 않은 경우 테마 팔레트. 변경: 영역 id, 시맨틱, 실제 컨트롤, 대비, 그림을 변경하지 않는 모션. - 레이아웃 팩 — 요청받았을 때만
references/layout-packs.md를 로드하세요. - 스캐폴드 알림 —
references/project-scaffold.md. - 프롬프트 패턴 —
references/prompts.md.
수술 맵
| 요청 | 파일 |
|---|---|
| 더 좁게, 더 큰 글자, 더 많은 공간, 측정값, 둥글기, 모션 | core.css TUNE 블록 |
| 어두운 배경, 금색, 오버레이, 가는 선 | theme-*.css |
| 세로 vs 가로 히어로 | data-layout + 레이아웃 팩 |
| 잘못된 문장 | index.html |
하지 말아야 할 것
- 패스 A의 시각적 클론과 studio-web 구성을 혼합하지 마세요.
- 그리드 열이나
order를 TUNE에 넣지 마세요. --space-*나 타입 스케일을 테마 파일에 넣지 마세요.index-dark.html/index-camp.html을 포크하지 마세요.- 히어로 + 기본 CTA 외에는 전체 테마 × 레이아웃 시각적 매트릭스를 실행하지 마세요.