前言¶

做網頁復刻或「照着某站擴幾頁」時，常見做法是直接讓模型寫 HTML/CSS，再在對話裏口頭描述配色和間距。頁面能跑起來，但風格約束散落在聊天記錄裏，後續加頁面時很容易跑偏。下面介紹 SkillHub 上的 圖片網頁設計復刻規範生成器（@user_2516c825/html-replica-style-lock）：在還原頁面的同時，把設計語言寫成可複用的 Markdown 規範與 JSON 設計令牌，便於交給其他前端類 Skill 做同風格擴展。

這是什麼¶

圖片網頁設計復刻規範生成器 是一款面向網頁復刻與風格繼承的高保真 Agent Skill，座標 @user_2516c825/html-replica-style-lock，當前版本 1.0.0，來源爲 SkillHub community，分類 dev-programming，發佈者 user_2516c825（SkillHub 頁面標註作者爲「老廖的Agent實驗室」）。標籤 requires_api_key=false，不依賴額外 API Key 配置。

它解決的核心問題是：在輸入 網頁 URL 或 頁面截圖 後，不只輸出一頁 HTML，還同步產出兩份供後續 AI/Skill 引用的風格約束文件，把視覺氣質「鎖定」下來。

核心功能¶

經官方簡介覈實，Skill 會完成視覺逆向分析，並輸出三類產物：

1. 高還原 HTML 頁面：可直接運行的靜態頁面實現。
2. design-style-spec.md：沉澱整體設計語言、版式邏輯、組件規則與不宜偏移的視覺約束（style-lock 規範）。
3. design-tokens.json：結構化設計令牌，涵蓋顏色、字體、間距、圓角、陰影、柵格等。

完成復刻後，可將上述規範交給 frontend-skill 或其他頁面生成 Skill 繼續擴展新頁面；英文簡介中還提到可與 frontend-slides 等配合，在嚴格對齊原風格的前提下做演示或幻燈類擴展。Skill 基於通用 SKILL.md 格式，由 Agent 讀取後按流程執行。

安裝與啓用¶

方式一：SkillHub CLI（推薦可復現）¶

先確認本機是否已安裝 skillhub：

command -v skillhub && skillhub --version

若未安裝，可按 SkillHub 官方安裝文檔執行完整安裝（CLI + 默認 Skill）：

curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash

僅需要 CLI 時：

curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash -s -- --cli-only

安裝本 Skill 時，必須用 --dir 指向當前 Agent 的 skills 目錄，否則默認落在 ./skills/ 且可能不被識別。示例：

skillhub install @user_2516c825/html-replica-style-lock --dir <你的 skills 目錄>

各客戶端常用路徑（來自 SkillHub 安裝文檔）：

• Cursor：~/.cursor/skills/
• Claude Code：~/.claude/skills/
• Codex：~/.codex/skills/ 或項目下的 .agents/skills/

安裝後按所用客戶端要求刷新或重啓 Agent，使新 Skill 被加載。

方式二：讓 AI 按官方提示安裝¶

SkillHub 頁面提供的安裝提示爲：請根據 SkillHub 安裝與優先源配置，安裝 @user_2516c825/html-replica-style-lock。將上述說明發給支持 Skill 的 AI 客戶端，由 Agent 按文檔完成 CLI 檢查與安裝。

Cursor、Codex CLI、Claude Code 的差異主要體現在 skills 目錄路徑 與是否需重啓；安裝命令與座標一致，無單獨分叉版本。

典型用法¶

官方未給出固定 CLI 子命令，用法是在已啓用 Skill 的對話中提供輸入並說明目標。可復現的流程如下：

1. 準備輸入：提供目標頁面的 URL，或上傳 頁面截圖（整頁或關鍵視口，以你能提供的素材爲準）。
2. 觸發 Skill：在 Agent 中調用或引用 @user_2516c825/html-replica-style-lock，要求完成網頁復刻並生成風格約束文件。
3. 驗收產物：檢查生成的 HTML 是否可本地打開；確認同目錄（或 Skill 約定路徑）下存在 design-style-spec.md 與 design-tokens.json。
4. 風格繼承擴展：需要新增頁面或幻燈時，將 HTML 與兩份約束文件一併交給 frontend-skill、frontend-slides 等 Skill，並明確要求遵守 design-style-spec.md 與 design-tokens.json 中的令牌與不可偏移項。

搜索安裝時也可在 SkillHub 使用：

skillhub search html-replica-style-lock

適用場景與注意¶

適合：網頁復刻、設計還原、多頁面同風格擴展、需要把參考頁沉澱爲設計系統文檔、或需要爲「頁面轉 PPT / 幻燈」準備統一視覺規範的場景。

注意：

• 還原質量取決於 URL 可訪問性、截圖完整度以及 Agent 對 Skill 指令的遵循程度；複雜交互與後端邏輯不在「靜態高還原 HTML」承諾範圍內。
• 擴展階段務必把 design-style-spec.md 與 design-tokens.json 作爲硬約束傳給下游 Skill，否則僅靠 HTML 很難長期保持風格一致。
• SkillHub 統計（以抓取資料爲準）：評分 100000，下載 4815，安裝 29；數據會隨平臺更新變化，以 SkillHub 頁面爲準。

結尾¶

圖片網頁設計復刻規範生成器 把「復刻一頁」和「鎖住風格」拆成可交付的 HTML + 規範 + 令牌，降低後續 AI 擴頁時的漂移。安裝座標 @user_2516c825/html-replica-style-lock，官方入口：

• API / 安裝頁：https://api.skillhub.cn/user_2516c825/html-replica-style-lock
• SkillHub 展示頁：https://www.skillhub.cn/skills/user_2516c825/html-replica-style-lock