Community程式設計與開發github.com

getrdone/html-page-standard

靜態 HTML 頁面的規範化流程,適用於從截圖、點陣圖稿或光柵設計建立新頁面。

html-page-standard 是什麼?

此技能定義了將設計(例如截圖、點陣圖稿或現有 HTML)轉換為合規、高品質靜態 HTML 頁面的標準管道(稱為「通行證」)。它作為一個路由器,引導 AI 代理完成四個不同的階段:A-clone(僅使用 screenshot-to-html 從圖像建立 `clone.html`)、B-tokenize(從設計收穫 CSS token,填充 `core.css` 和 `theme-default.css`)、C-repair(使用 studio-web 進行語意、可及性與動畫修復)以及 layout-pack(若要求,可選擇性地套用版面配置包)。此技能在支援平台(如 Claude Code 或 Cursor)上執行時,會強制執行嚴格的規則,包括分離關注點(例如 TUNE 控制節奏,主題控制外觀)、使用 CSS 容器查詢進行容器查詢(`@container` + `cqi`),以及禁止在 token 存在時使用原始值(如 `font-size`、`padding`)。它還定義了檔案合約與資料夾結構(例如 `source.png`、`clone.html`、`core.css`、`theme-default.css`、`index.html`),並提供詳細的載入地圖以根據目前的通行證載入正確的工具與文件。

相容平台~Claude Code~Codex CLI~Cursor
Part ofReact
npx skills add https://github.com/getrdone/agent-skills/tree/main/skills/html-page-standard

Installed? Explore more 程式設計與開發 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

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-htmlsource.png + clone.html
B-tokenize此技能 + references/tokenize-contract.mdcore.css + theme-default.css
C-repairstudio-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。在寫入前如此說明。

硬性規則

  1. 除非使用者明確串聯,否則每次交談只進行一個通行證。
  2. 每個新頁面都附帶 TUNE + 主題檔案,即使只有一種外觀也是如此。
  3. TUNE 擁有節奏。主題擁有外觀。版面配置包擁有排列。HTML 擁有文字。
  4. 在通行證 B 之後,若已有對應的 token,則不得使用原始 font-size、padding、margin 或 gap。
  5. 組件佈局不使用視口寬度斷點。區域應使用 @container + cqi。
  6. 主題不得更改 DOM。版面配置包不得更改色板。
  7. 除非被要求,否則不要在首頁添加第二個主題或版面配置包。
  8. 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 之外。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

相關技能