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。如果缺少 token,則進行 tokenize,然後進行 C。
如果截圖僅作為情緒板,而非精確複製,則跳過 A,改用 studio-web web.build。在寫入前如此說明。
硬性規則
- 除非使用者明確串聯,否則每次交談只進行一個通行證。
- 每個新頁面都附帶 TUNE + 主題檔案,即使只有一種外觀也是如此。
- TUNE 擁有節奏。主題擁有外觀。版面配置包擁有排列。HTML 擁有文字。
- 在通行證 B 之後,若已有對應的 token,則不得使用原始
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,然後從 clone 中填入數值。不要重新設計。 - 通行證 C — 載入 studio-web 1.1,車道
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 之外。