別再手動扒官網樣式了！這個 Skill 直接生成設計系統文檔
整理版優先睇
rico-design-md：一鍵將網站轉換為設計系統文檔，支援多種格式輸出同轉換
呢篇文章介紹一個叫 rico-design-md 嘅 Skill，由開發者 Ricol C. 整出嚟，專門用嚟將任意網站轉換成完整嘅設計系統文檔。作者見到好多人見到靚網站想借鏡，但係手動提取顏色、字體、間距等資料好浪費時間，所以整咗呢個工具。佢嘅結論係：呢個 Skill 可以自動化提取設計令牌，產生多種格式嘅檔案，方便前端開發同設計系統維護。
工具支援命令行同自然語言輸入，可以輸出 DESIGN.md、preview.html、tokens.json、variables.css 同 theme.css 等格式。仲可以喺唔同格式之間互轉，好靈活。用法簡單，一句命令或者自然語言指令就搞掂。
呢個工具適合放進「睇網站、拆風格、做前端」嘅工作流。佢唔會取代設計師判斷，但係可以快速整理基礎資料，令後期修改有依據。
- 自動提取網站設計令牌，生成完整設計系統文檔，大幅減少手動整理時間。
- 支援命令行同自然語言輸入，可指定輸出格式，靈活配合不同需求。
- 唔單止提取，仲支援多種格式互轉（DESIGN.md, tokens.json, variables.css, theme.css），方便整合到現有項目。
- 呢類工具可嵌入「睇網站、拆風格、做前端」嘅工作流，提升效率。
- 可立即安裝到 Agent，用自然語言指令提取任何網站嘅設計系統。
rico-design-md
將任意網站轉換為設計系統文檔，支援多種格式輸出與轉換
安裝指令
安裝 rico-design-md skill。
問題：手動扒官網樣式好浪費時間
見到設計靚嘅網站想借鏡，但係手動查詢、整理相關數據
費時又費力
。為瞭解決呢個問題，開發者整咗一個叫 rico-design-md 嘅
Skill
，可以自動提取網站嘅設計系統。
核心功能：自動提取設計令牌，支援多種輸出
呢個 Skill 嘅核心功能係將任意網站 URL 輸入之後，自動提取
設計令牌
，包括
顏色
、
排版
、
間距
、
陰影
同
組件樣式
。
輸出格式好多種，包括
DESIGN.md
、
preview.html
、
tokens.json（DTCG）
、
variables.css
同
theme.css（Tailwind v4）
。
格式轉換
功能支援喺唔同格式之間互轉，好靈活。
安裝與使用：一句指令即用，支援自然語言
安裝好簡單，最慳力嘅方法係直接叫 Agent 幫你安裝：
安裝 rico-design-md skill。或者去 GitHub 項目 https://github.com/ricocc/rico-skills 睇詳細教學。
使用方面，支援
顯式命令
同
自然語言
。例如：
- rico DESIGN.md https://linear.app
- rico tokens https://stripe.com
- rico variables https://vercel.com
- rico theme.css https://linear.app
- rico 全部輸出 https://linear.app
自然語言例子：
- 為 linear.app 創建 DESIGN.md
- 提取 stripe.com 嘅設計令牌
- 分析 GitHub 嘅設計系統
格式轉換：唔同格式之間靈活互轉
除咗提取，仲可以將已有嘅文檔轉換成其他格式，例如
DESIGN.md 轉 tokens.json
，或者
variables.css 轉 DESIGN.md
。
用一句命令就做到：
rico 把 DESIGN.md 轉為 tokens適用場景：前端開發同設計系統維護必備
呢個 Skill 好適合以下情況：
- 1 需要為現有網站生成設計系統文檔
- 2 想要提取設計令牌用於開發實現
- 3 需要在不同設計令牌格式之間轉換
- 4 想要一個品牌設計系統嘅可視化參考頁面
總括來講，rico-design-md 可以放入
「看網站、拆風格、做前端」
嘅工作流。佢唔會取代設計師判斷，但係可以加快基礎資料整理，令後續修改有依據。
見到一個設計靚嘅網站，想借鏡落自己個 project 度，手動查詢、整理相關數據又嘥時間又嘥力。唔使急，寶藏 Skill 嚟幫手！
rico-design-md —— 可以將任何網站轉做設計系統文件，亦支援喺唔同設計令牌格式之間轉換。
GitHub：https://github.com/ricocc/rico-skills
核心功能
網站轉做設計系統 - 輸入任何網站 URL，自動提取設計令牌、顏色、排版、間距、陰影同組件樣式 多種輸出格式 - 生成 DESIGN.md、preview.html、tokens.json（DTCG）、variables.css 同 theme.css（Tailwind v4） 格式轉換 - 喺任何支援嘅格式之間轉換（例如 DESIGN.md 轉 tokens.json、variables.css 轉 DESIGN.md） 可視化預覽 - 生成一個獨立嘅 preview.html 頁面，展示完整嘅設計系統
安裝方法
最簡單嘅方法，係直接叫 Agent 幫你裝。將下面呢句說話 send 畀佢就得：
安裝 rico-design-md skill。
github地址：https://github.com/ricocc/rico-skills/tree/main
使用方法
rico-design-md 支援顯式指令，亦支援自然語言。
生成默認文件同預覽頁：
rico DESIGN.md https://linear.app
只提取設計令牌：
rico tokens https://stripe.com
生成 CSS 變數：
rico variables https://vercel.com
生成 Tailwind v4 主題檔案：
rico theme.css https://linear.app
全部輸出：
rico 全部輸出 https://linear.app
亦可以用自然語言講：
為 linear.app 創建 DESIGN.md
提取 stripe.com 的設計令牌
分析 GitHub 的設計系統
項目說明文件仲提到，佢可以做格式轉換，例如將現有 DESIGN.md 轉成 tokens.json，或者喺 tokens.json、variables.css、theme.css 之間互相轉換。
rico 把 DESIGN.md 轉為 tokens適用場景
需要為現有網站生成設計系統文件 想提取設計令牌用嚟開發實現 需要喺唔同設計令牌格式之間轉換 想要一個品牌設計系統嘅可視化參考頁面
寫喺最後
rico-design-md 幾啱放喺「睇網站、拆風格、做前端」嘅工作流程入面。佢唔會取代設計師嘅判斷，但可以幫手將顏色、字體、組件呢啲基本資料整理出嚟，之後再改就有得跟手。
如果你用過類似嘅設計系統提取工具，歡迎留言分享。
過往回顧
看到一個設計漂亮的網站，想借鑑到自己的項目裏，手動查詢、整理相關數據費時又費力。莫急，寶藏 Skill 來幫忙！
rico-design-md —— 可以將任意網站轉換為設計系統文檔，也支持在不同設計令牌格式之間轉換。
GitHub：https://github.com/ricocc/rico-skills
核心功能
網站轉設計系統 - 輸入任意網站 URL，自動提取設計令牌、顏色、排版、間距、陰影和組件樣式 多種輸出格式 - 生成 DESIGN.md、preview.html、tokens.json（DTCG）、variables.css 和 theme.css（Tailwind v4） 格式轉換 - 在任意支持的格式之間轉換（如 DESIGN.md 轉 tokens.json、variables.css 轉 DESIGN.md） 可視化預覽 - 生成一個獨立的 preview.html 頁面，展示完整的設計系統
安裝方法
最省事的方式，是直接讓 Agent 幫你安裝。把下面這句話發給它就行：
安裝 rico-design-md skill。
github地址：https://github.com/ricocc/rico-skills/tree/main
使用方法
rico-design-md 支持顯式命令，也支持自然語言。
生成默認文檔和預覽頁：
rico DESIGN.md https://linear.app
只提取設計令牌：
rico tokens https://stripe.com
生成 CSS 變量：
rico variables https://vercel.com
生成 Tailwind v4 主題文件：
rico theme.css https://linear.app
全部輸出：
rico 全部輸出 https://linear.app
也可以換成自然語言：
為 linear.app 創建 DESIGN.md
提取 stripe.com 的設計令牌
分析 GitHub 的設計系統
項目文檔裏還寫到，它可以做格式轉換，比如把已有 DESIGN.md 轉成 tokens.json，或者在 tokens.json、variables.css、theme.css 之間互轉。
rico 把 DESIGN.md 轉為 tokens適用場景
需要為現有網站生成設計系統文檔 想要提取設計令牌用於開發實現 需要在不同設計令牌格式之間轉換 想要一個品牌設計系統的可視化參考頁面
寫在最後
rico-design-md 比較適合放進“看網站、拆風格、做前端”的工作流裏。它不會替代設計師判斷，但能先把顏色、字體、組件這些基礎資料整理出來，後面再改就有抓手。
如果你用過類似的設計系統提取工具，歡迎留言分享。
往期回顧