設計 SKILL：提取網站規範 DESIGN md 和 HTML 預覽
整理版優先睇
rico-design-md：一個將網站自動轉成設計系統文檔同HTML預覽嘅SKILL，幫你結構化提取顏色、排版、組件等設計資產。
呢篇文章係作者介紹自己開發嘅SKILL「rico-design-md」，屬於GitHub上嘅rico-skills系列，目前有183個Star。作者發現好多開發者睇到靚網站，淨係識得截圖同吸色，好難系統化還原設計語言。
為瞭解決呢個問題，作者設計咗一個工具：你只要俾一個網站URL，佢就會自動拆解顏色、排版、間距、圓角、陰影、組件狀態，然後生成一份結構化嘅設計規範文件（DESIGN.md）同一個可視化預覽頁（preview.html）。而且輸出格式好靈活，可以按需要生成tokens.json、variables.css或Tailwind v4嘅theme.css。
作者強調，呢個SKILL唔係幫你抄襲，而係幫你理解一個好網站點樣被組織。對於個人開發者可以快速學習成熟視覺語言，對於團隊可以減少口頭溝通，對於AI編程用戶更加可以將參考網站變成明確規格，等Agent按規則寫頁面，準確度大幅提升。
- rico-design-md可以將任何網站URL轉成完整設計系統文檔，包括DESIGN.md同HTML預覽，唔再停留喺截圖同主觀模仿。
- 支援按需生成多種格式：tokens.json（DTCG格式）、variables.css、Tailwind v4 theme.css，方便直接導入前端項目。
- 提取設計信息時會轉成語義化token，例如canvas、surface-1、ink，組件記錄hover/focus/active/selected狀態，避免模糊描述。
- 具備格式轉換能力，可以由DESIGN.md轉tokens.json，或者由variables.css反推文檔，方便跨工具搬運設計資產。
- 對個人開發者、團隊同AI編程用戶都好有用：學習視覺語言、減少溝通成本、提供明確規格俾Agent生成頁面。
呢個SKILL係做咩？
rico-design-md係我喺 rico-skills 系列中開發嘅一個SKILL，定位係「DESIGN MD生成器」。佢嘅目標係幫你將一個優秀網站嘅設計語言拆解成結構化規範，同時輸出HTML預覽圖同多格式文件。
簡單講：你俾一個 網站URL，佢會自動提取顏色、排版、間距、圓角、陰影、組件狀態，然後生成 DESIGN.md 同 preview.html。前者係文字規範，後者係可視化預覽。
點樣用？
最常用嘅命令係：rico DESIGN.md [域名]，執行後會默認生成DESIGN.md同preview.html。如果想提取token，可以用 rico tokens [url] 生成tokens.json；要CSS變量就用 rico variables [url] 生成variables.css。
rico DESIGN.md github.com
rico tokens github.com
rico variables github.com
rico theme.css github.com
rico 全部輸出 github.com如果你用 Tailwind v4，仲可以用 rico theme.css [url] 生成 @theme 格式。想一次攞曬全套，就用 rico 全部輸出 [url]，一次過生成DESIGN.md、preview.html、tokens.json、variables.css同theme.css。
結構化嘅設計資產
呢個SKILL重點唔係「生成文件」，而係將設計信息結構化。顏色會變成 語義化token，例如 canvas、surface-1、ink、accent-blue，表達用途而唔係外觀。排版會記錄字體族、字號、字重、行高同字間距，避免淨係抽字號導致還原唔完整。
組件方面會記錄可觀察到嘅狀態，包括 hover、focus、active、selected。陰影同圓角會保留可執行嘅CSS值，唔會用「輕微陰影」「柔和圓角」呢啲模糊字眼。
對你有咩用？
對個人開發者嚟講，可以更快學習 成熟網站嘅視覺語言。對團隊嚟講，可以減少好多 口頭溝通。對AI編程用戶嚟講，尤其有用：你可以先將參考網站變成明確規格，再叫Agent按規則寫頁面，比「做得像Linear」呢類提示可靠得多。
作者最後總結：rico-design-md 唔係幫你偷一個網站嘅樣，而係幫你理解一個好網站點樣被組織。如果你想整理品牌視覺、提取設計令牌、構建設計系統，或者輔助AI生成前端頁面，呢個工具都值得一試。
rico-design-md 呢個係我喺 rico-skills 系列入面開發嘅一個 SKILL，定位係「DESIGN MD 生成器」。
目前 rico-skills 喺 GitHub 上已經有 183 個 Star。
地址係：github.com/ricocc/rico-skills
呢個 SKILL 面向嘅場景好明確：當你見到一個好嘅網站，想分析佢嘅顏色、排版、間距、圓角、陰影、組件狀態同整體視覺語言嘅時候，rico-design-md 可以將呢啲資訊拆解成結構化規範，同時輸出 HTML 設計系統預覽圖同埋開發需要嘅多格式檔案，而唔係淨係截圖、吸色同主觀模仿。
簡單嚟講，你畀佢一個網站 URL，佢會將呢個網站轉成一套設計系統文檔，提取顏色、排版、間距、圓角、陰影、組件狀態，再輸出成開發同設計都可以繼續用嘅檔案，同埋 HTML 預覽圖。
我最常用嘅指令係：
rico DESIGN.md [域名]
執行之後會預設生成兩個檔案，DESIGN.md 和 preview.html。
前者係完整樣式參考，寫明品牌聲音、token、組件、Do's 同 Don'ts。後者係一個可以直接打開嘅可視化預覽頁，有顏色色板、字體刻度、間距、陰影、組件示例。
我當時設計成咁，係因為我發現淨係畀 Markdown 係唔夠嘅。
因為 Markdown 適合畀開發睇，HTML 適合畀設計、產品、客戶睇。一個講規則，一個畀直覺。
如果你淨係想提取 token，可以用 `rico tokens[url]` 如果你淨係要 CSS 變量，可以用 rico variables [url] 如果你用 Tailwind v4，仲可以生成 theme.css。想一次攞齊全套，就用 rico 全部輸出 [url]
除咗預設輸出，rico-design-md 都支援按需要生成單一格式。
rico tokens github.com 會生成 tokens.json，遵循 DTCG 設計令牌格式，每個 token 都包含 $description。
rico variables [url] 會生成 variables.css，適合直接導入前端項目。
rico theme.css [url] 會生成 Tailwind v4 嘅 @theme 格式。
如果需要完整輸出，可以用用rico全部輸出github，一次生成 DESIGN md，preview.html，tokens.json，variables.css 同 theme.css 。
呢個 SKILL 嘅重點唔係淨係「生成檔案」，而係將設計資訊結構化。
顏色會被整理成語義化 token，例如 canvas、surface-1、ink、accent-blue。呢類命名錶達嘅係用途，而唔係單純描述顏色外觀。
排版會記錄字體族、字號、字重、行高同字間距，避免淨係提取字號導致還原唔完整。
組件會記錄可以觀察到嘅狀態，包括 hover、focus、active、selected。陰影同圓角會保留可執行嘅 CSS 值，避免用「輕微陰影」「柔和圓角」呢類模糊描述。
仲有一個容易被低估嘅能力，就係格式轉換。
你已經有 DESIGN.md可以轉成 tokens.json。你手上有 variables.css都可以反推成文檔。咁樣一來，佢唔單止係生成文檔，仲幫緊唔同工具之間搬運設計資產。
你都可以加啲要求，跟住主題嘅風格嚟重構 Preview 預覽頁，例如下圖，就係用主題嚟重新設計 html 圖片嘅視覺同排版
最後
對個人開發者嚟講，佢可以令你快啲學識成熟網站嘅視覺語言。對團隊嚟講，佢可以減少好多口頭溝通。對 AI 編程用戶嚟講，佢尤其有用，因為你可以先將參考網站變成明確規格，再叫 Agent 按規則寫頁面。
呢個比起一句「做得似 Linear 啲」，要可靠好多。
我做 rico-design-md 嘅價值亦都係喺度。
github.com/ricocc/rico-skills
佢唔係幫你偷一個網站嘅樣，而係幫你理解，一個好網站到底係點樣被組織起嚟嘅。
對於需要整理品牌視覺、提取設計令牌、構建設計系統，或者輔助 AI 生成前端頁面嘅用戶嚟講，rico-design-md 係一個實用嘅設計資產提取工具。
rico-design-md 是我在 rico-skills 系列中中開發的一個 SKILL，定位是“ DESIGN MD 生成器”。
目前 rico-skills 在 GitHub 上已有 183 個 Star。
地址是：github.com/ricocc/rico-skills
這個 SKILL 面向的場景很明確：當你看到一個優秀網站，希望分析它的顏色、排版、間距、圓角、陰影、組件狀態和整體視覺語言時，rico-design-md 可以把這些信息拆解成結構化規範，同時輸出 HTML 設計系統預覽圖以及開發需要的多格式文件，而不是停留在截圖、吸色和主觀模仿上。
簡單的說，你給它一個網站 URL，它會把這個網站轉成一套設計系統文檔，提取顏色、排版、間距、圓角、陰影、組件狀態，再輸出成開發和設計都能繼續使用的文件，以及 HTML 預覽圖。
我最常用的命令是：
rico DESIGN.md [域名]
執行後會默認生成兩個文件，DESIGN.md 和 preview.html。
前者是完整樣式參考，寫清楚品牌聲音、token、組件、Do's 和 Don'ts。後者是一個可以直接打開的可視化預覽頁，有顏色色板、字體刻度、間距、陰影、組件示例。
我當時設計成這樣，是因為我發現只給 Markdown 還不夠。
因為 Markdown 適合給開發看，HTML 適合給設計、產品、客戶看。一個講規則，一個給直覺。
如果你只想提取 token，可以用 `rico tokens[url] 如果你只要 CSS 變量，可以用 rico variables [url] 如果你用 Tailwind v4，還可以生成 theme.css。想一次拿全套，就用 rico 全部輸出 [url]
除了默認輸出，rico-design-md 也支持按需生成單一格式。
rico tokens github.com 會生成 tokens.json，遵循 DTCG 設計令牌格式，每個 token 都包含 $description。
rico variables [url] 會生成 variables.css，適合直接導入前端項目。
rico theme.css [url] 會生成 Tailwind v4 的 @theme 格式。
如果需要完整輸出，可以使用rico全部輸出github，一次生成DESIGN md，preview.html，tokens.json，variables.css 和 theme.css 。
這個 SKILL 的重點不只是“生成文件”，而是把設計信息結構化。
顏色會被整理成語義化 token，例如 canvas、surface-1、ink、accent-blue。這類命名錶達的是用途，而不是單純描述顏色外觀。
排版會記錄字體族、字號、字重、行高和字間距，避免只提取字號導致還原不完整。
組件會記錄可觀察到的狀態，包括 hover、focus、active、selected。陰影和圓角會保留可執行的 CSS 值，避免使用“輕微陰影”“柔和圓角”這類模糊描述。
還有一個容易被低估的能力，是格式轉換。
你已經有 DESIGN.md，可以轉成 tokens.json。你手裏有 variables.css，也能反推成文檔。這樣一來，它不只是在生成文檔，也是在幫不同工具之間搬運設計資產。
你也可以增加一些要求，按照主題的風格來重構 Preview 預覽頁，比如下圖，就是用主題來重新設計 html 圖片的視覺和排版
最後
對個人開發者來說，它能讓你更快學習成熟網站的視覺語言。對團隊來說，它能減少很多口頭溝通。對 AI 編程用戶來說，它尤其有用，因為你可以先把參考網站變成明確規格，再讓 Agent 按規則寫頁面。
這比一句做得像 Linear 一點，要靠譜太多。
我做 rico-design-md 的價值也在這裏。
github.com/ricocc/rico-skills
它不是幫你偷一個網站的樣子，而是幫你理解，一個好網站到底是怎麼被組織起來的。
對於需要整理品牌視覺、提取設計令牌、構建設計系統，或輔助 AI 生成前端頁面的用戶來說，rico-design-md 是一個實用的設計資產提取工具。