我開源了復刻網站設計為 DESIGN.md 的 Skill，讓你的 Agent 完美復刻所有網站！
整理版優先睇
用呢個開源 Skill 將任意網站自動生成 DESIGN.md，Agent 跟住做就可以復刻靚 Design
作者 Shaom 之前試過用 Apple 嘅 DESIGN.md 標準去復刻 Apple 官網，但效果未如理想。今次佢索性自己動手，整咗一個叫 brand-to-design-md-skill 嘅開源工具，可以幫我哋將任意網站嘅品牌元素自動轉換成 Google DEISGN.md 格式，方便 Agent 直接跟住執行設計。
呢個 Skill 嘅核心價值唔止喺復刻，而係建立一套可以畀 AI 理解同執行嘅品牌視覺系統。作者分享咗佢整理出嚟嘅七步方法論，包括點樣收集視覺證據、提取設計 token、寫成 DESIGN.md、生成示範頁面，同埋 Browser 驗證嘅流程。
作者希望透過開源呢個 Skill，邀請社羣一齊參與改進，逐步完善復刻效果。文章末段亦有推薦幾篇相關文章，適合想深入瞭解 AI Design 工具生態嘅讀者。
- 呢個 Skill 可以將任意網站嘅品牌視覺轉換成 DEISGN.md 格式，Agent 跟住設計上下文就可以執行具體嘅視覺落地
- 方法論分七步：對齊標準 → 收集證據 → 提取 token → 寫 DESIGN.md → 生成 HTML → Browser 驗證 → 交付
- 設計 token 唔係只記錄顏色值，仲要定義每個 token 嘅角色：主色喺邊度用、強調色幾時出現、字體點分工
- 生成嘅 HTML 唔係說明頁，要體現品牌感，至少覆蓋按鈕、卡片、表單、數據區等典型組件
- 呢個工具喺 GitHub 開源，作者歡迎大家 ⭐️ 同 PR 一齊參與改善復刻效果
Brand to DESIGN.md Skill
npx skills add --skill brand-to-design-md
Brand to DESIGN.md Skill 開源地址
GitHub 倉庫，包含源碼同安裝指引
由一次失敗嘅復刻諗到嘅事
之前用 Apple DESIGN.md 去復刻 Apple 官網，效果真係麻麻。問題唔喺標準本身，而係我哋嘅打法——好似淨係抄咗表面，冇真正拆解清楚佢哋點樣定義一套完整嘅品牌視覺系統俾 Agent 用。
今次決定用自己嘅視角重新整呢個 Skill，試幾個唔同網站睇下效果，發現思路清晰咗好多。如果你都係非專業設計師又想用 AI 復刻靚 Design，呢套方法論或者啱你參考。
七步拆解：點樣將網站品牌變成 Agent 識用嘅 DESIGN.md
第一步要對齊標準，先睇 Google Labs 開源嘅 DESIGN.md，明確目標唔係寫品牌介紹，而係將品牌視覺系統轉化成 Agent 可以執行嘅設計上下文，包括 token、組件規則、佈局規則、圖像規則、Logo 使用邊界同埋 Do / Don’t。
收集證據就要優先睇官方來源：官網、品牌頁、press kit、newsroom、公開 CSS、SVG、圖片資產。設計機構案例可以作補充，但第三方資料只作輔助。
提取 token 唔係淨係記錄顏色值，而係要定義每個 token 嘅角色——主色喺邊度用、強調色幾時出現、字體點分工、圓角同間距點服務品牌氣質。呢個係最關鍵一步，直接決定後面生成效果。
寫成 DESIGN.md 嘅時候，文件結構要包含 frontmatter token 同埋正文說明。正文重點寫清楚顏色、字體、佈局、組件、圖像、Logo 使用邊界，同埋 Agent 應該避免嘅偏差。
生成演示網頁要用呢份 DESIGN.md 做一個真實可睇嘅單文件 HTML，首屏要體現品牌感，唔係做說明頁。頁面起碼要覆蓋按鈕、卡片、表單、數據或代碼區、品牌視覺母題。
最後用 Chrome 檢查桌面同移動端：背景圖係咪加載、係咪有橫向溢出、控制枱係咪報錯、文字係咪可讀、品牌感係咪成立。冇問題就可以交付 DESIGN.md、demo HTML、截圖同來源說明。
安裝同埋使用方式
如果你想試呢個 Skill，可以用以下指令安裝：
npx skills add https://github.com/shaom/brand-to-design-md-skill --skill brand-to-design-md裝完之後使用方法好簡單，直接叫 Agent 執行就可以：
Use brand-to-design-md to extract https://example.com into a DESIGN.md and demo HTML.詳細嘅復刻思路同埋步驟作者都已經沉澱成代碼，你 Fork 落去可以睇得清清楚楚。
我開源咗可以將任意網站品牌轉做 DESIGN.md 嘅 Skill
Google 將 DESIGN.md 開放為標準之後，我哋呢啲唔係設計師嘅人都可以複製到頂級設計品味嘅網站嘞！
之前我哋用 Apple DESIGN.md 試過複製 Apple 官網，效果麻麻，呢次我想用自己嘅 Skill 試下，朋友們可以對比下。
之前嘅複製版本
我哋嘅 Skill 複製版本
今日同我嘅 Codex 一齊整理咗複製網站設計風格嘅步驟，測試落嚟效果真係幾好，我都將佢整理成 Skill 分享俾大家。
安裝方法：
npx skills add https://github.com/shaom/brand-to-design-md-skill --skill brand-to-design-md
使用方法：
Use brand-to-design-md to extract https://example.com into a DESIGN.md and demo HTML.
開源地址：
Brand to DESIGN.md Skill
https://github.com/shaom/brand-to-design-md-skill[1]
歡迎朋友們 ⭐️ 同 PR 👏🏻
一齊睇下複製思路步驟
1. 對齊標準
先參考 Google Labs 開源嘅 DESIGN.md 標準，明確認為目標唔係寫品牌介紹，而係將品牌視覺系統轉做 agent 可以執行嘅設計上下文：token、組件規則、佈局規則、圖像規則、Logo 使用邊界同 Do / Don’t。
2. 收集證據
優先睇官方官網、品牌頁、press kit、newsroom、公開 CSS、SVG、圖片資產。設計機構案例可以作為品牌理念同視覺語言嘅補充。第三方資料只作輔助，唔作為主要依據。
3. 提取設計 token
唔係只係記錄顏色值，而係俾每個 token 定義角色：主色用喺邊度，強調色幾時出現，字體點分工，圓角、間距、組件點服務品牌氣質。
4. 寫成 DESIGN.md
文件結構包括 frontmatter token 同正文說明。正文重點寫清楚顏色、字體、佈局、組件、圖像、Logo 使用邊界，以及 agent 應該避免嘅偏差。
5. 生成演示網頁
用呢個 DESIGN.md 整一個真實可以睇嘅單文件 HTML。首屏要體現品牌，唔做說明頁。頁面至少覆蓋按鈕、卡片、表單、數據或代碼區、品牌視覺母題。
6. 瀏覽器驗證
用 Chrome 檢查桌面同移動端：背景圖係咪加載、係咪有橫向溢出、控制枱係咪報錯、文字係咪可讀、品牌感係咪成立。
7. 交付結果
輸出 DESIGN.md、demo HTML、截圖、來源說明，以及邊啲係直接證據、邊啲係合理推斷。
相關文章推薦
谷歌正式開源 DESIGN.md 為開放標準，屬於 AI Design 嘅 CLAUDE.md 嚟咗，Design 優質資源站亦嚟咗！
我開源了任意網站品牌 -> DESIGN.md 的 Skill
Google 開放標準 DEISGN.md 後，讓咱們這種非專業設計師也能復刻頂級設計品味的網站產品了！
咱們之前使用 Apple DESIGN.md 復刻過 Apple 官網，效果不理想，這回我想用自己的 Skill 復刻，朋友們可以對比看看。
之前復刻版本
咱們的 Skill 復刻版本
今天和我的 Codex 一起整理了復刻網站設計風格的步驟，測試下來效果還真得不錯，我也把它沉澱成了 Skill 分享給大家。
安裝方法：
npx skills add https://github.com/shaom/brand-to-design-md-skill --skill brand-to-design-md
使用方法：
Use brand-to-design-md to extract https://example.com into a DESIGN.md and demo HTML.
開源地址：
Brand to DESIGN.md Skill
https://github.com/shaom/brand-to-design-md-skill[1]
歡迎朋友們 ⭐️ 和 PR 👏🏻
一起看看復刻思路步驟
1. 對齊標準
先參考 Google Labs 開源的 DESIGN.md 標準，明確目標不是寫品牌介紹，而是把品牌視覺系統轉成 agent 可執行的設計上下文：token、組件規則、佈局規則、圖像規則、Logo 使用邊界和 Do / Don’t。
2. 收集證據
優先看官方官網、品牌頁、press kit、newsroom、公開 CSS、SVG、圖片資產。設計機構案例可以作為品牌理念和視覺語言的補充。第三方資料只作輔助，不作為主要依據。
3. 提取設計 token
不只是記錄顏色值，而是給每個 token 定義角色：主色用在哪裏，強調色什麼時候出現，字體如何分工，圓角、間距、組件如何服務品牌氣質。
4. 寫成 DESIGN.md
文件結構包括 frontmatter token 和正文說明。正文重點寫清楚顏色、字體、佈局、組件、圖像、Logo 使用邊界，以及 agent 應該避免的偏差。
5. 生成演示網頁
用這個 DESIGN.md 做一個真實可看的單文件 HTML。首屏要體現品牌，不做說明頁。頁面至少覆蓋按鈕、卡片、表單、數據或代碼區、品牌視覺母題。
6. 瀏覽器驗證
用 Chrome 檢查桌面和移動端：背景圖是否加載、是否有橫向溢出、控制枱是否報錯、文字是否可讀、品牌感是否成立。
7. 交付結果
輸出 DESIGN.md、demo HTML、截圖、來源說明，以及哪些是直接證據、哪些是合理推斷。
相關文章推薦
谷歌正式開源 DESIGN.md 為開放標準，屬於 AI Design 的 CLAUDE.md 來了，Design 優質資源站也來了！