我把這 62 個大廠設計風格總結成一個 skill
整理版優先睇
用一個 Skill 整合 62 個大廠設計規範，為 AI 提供審美參照系，解決 Vibecoding UI 風格單一問題
呢篇文章出自一位關注 AI 效率嘅開發者，佢發現用 AI 寫 code（Vibecoding）時，生成嘅 UI 風格成日撞樣，主色多數係紫色，好易睇得出係 AI 整嘅。作者認為大廠嘅設計規範係最好嘅審美教科書，但直接叫 AI 模仿太模糊。
剛好有人整理咗一個叫 getdesign.md 嘅網站，將 Apple、Google、Notion、Linear 等 62 個品牌嘅設計語言，濃縮成一份份結構化嘅 DESIGN.md 檔案，包括字體、主色、組件規範、質感、排版邏輯。用法好簡單：用 npx 指令下載，再喺 prompt 加一句「參考 DESIGN.md」。
作者嫌每次手動下載麻煩，就整咗一個 Claude Code Skill「brand-design-md」，只需講「用 Stripe 風格」，AI 就會自動拉取最新規範嚟生成 UI。佢仲用同一個內容分別用 Apple、Notion、Claude 風格測試，效果截然不同。總結嚟講，呢套方法為 AI 提供咗一個明確嘅審美參照系，令輸出有方向、唔隨機。作者最後鼓勵大家將類似 workflow 開源，因為分享越多，遇到同頻人嘅機會越大。
- Vibecoding 常見問題係 UI 風格單一，大廠設計規範可作為高質量參照，但需要轉換成 AI 可讀格式先有效。
- getdesign.md 網站收錄 62 個品牌嘅 DESIGN.md 文件，涵蓋字體、主色、組件規範等，Agent 可直接讀取執行。
- 使用步驟簡單：用 npx getdesign@latest add [品牌] 下載文件，再喺 prompt 指定參考 DESIGN.md，即可生成對應風格 UI。
- 作者開發咗 Skill「brand-design-md」，令 Claude Code 自動識別品牌、拉取規範並生成 UI，仲支援多品牌混搭。
- 鼓勵將呢類 workflow 開源，創作者嘅價值在於持續創造，開源可以吸引同頻人，分享越多擁有越多。
getdesign.md 網站
收錄 62 個全球頂級品牌設計語言嘅 DESIGN.md 文件，可直接俾 AI Agent 讀取。
VoltAgent/awesome-design-md GitHub 倉庫
開源項目，包含所有 DESIGN.md 文件，社區持續更新。
brand-design-md Skill
Claude Code Skill，自動拉取指定品牌嘅 DESIGN.md 並生成 UI，支援多品牌混搭。
Vibecoding 嘅審美通病，同 getdesign.md 點樣幫手
Vibecoding 有個通病：做出嚟嘅嘢太統一，主色多數係紫色，審美疲勞，一眼就認得出係 AI 做。AI 做 UI 嘅時候，唔會自動揀一個像樣嘅風格，如果唔限定風格描述，佢永遠都係默認出廠設定。
有人將呢啲規範整理成 MD 文件，放上 getdesign.md 網站。62 個全球頂級品牌嘅設計語言，提煉成結構化嘅 DESIGN.md 文件，令 AI 編碼 Agent 能直接讀懂並執行。
每份 DESIGN.md 包含字體體系、主色調、組件規範、表面質感、排版邏輯。用 CLI 工具，一條 npx 命令就裝入本地：npx getdesign@latest add apple。項目本身開源喺 VoltAgent/awesome-design-md，社區持續加新品牌。
有了 DESIGN.md，Agent 做產品好似廚師有咗菜譜，知道用咩食材、咩火候、咩擺盤。
DESIGN.md 點用法？簡單兩步
- 1 第一步：揀品牌，裝文件。例如 npx getdesign@latest add apple，項目根目錄會多咗個 DESIGN.md。
- 2 第二步：話畀 AI 知。喺 prompt 加一句：「參考項目根目錄的 DESIGN.md，按照裏面的設計規範來寫呢個頁面的 UI。」AI 有咗具體參照物，唔靠估。
仲可以 風格混搭：同時裝多個品牌嘅 DESIGN.md，然後叫 AI 用 Notion 嘅暖色調結合 Linear 嘅極簡排版。相當於畀 Agent 58 個可選擇嘅審美維度。
我整咗個 Skill：brand-design-md
每次都要手動下載 DESIGN.md 都係有啲麻煩，所以我整咗一個 Skill，叫 brand-design-md。效果係：喺 Claude Code 講「用 Stripe 風格幫我做一個登錄頁」，佢會自動識別品牌名，調用 npx getdesign@latest add stripe 拉取最新 DESIGN.md，然後生成 UI。
相比直接用 getdesign.md 網站，呢個 Skill 唔需要提前下載文件，網站更新咗都用到，支援 62 個品牌，中英文都識別，仲支援 多品牌混搭。安裝好簡單：將 Skill 文件放進 ~/.claude/skills/brand-design-md/ 目錄就得。GitHub 倉庫：github.com/zephyrwang6/brand-design-md
測試效果：同一內容，三種風格
我用一個叫 Lumina 嘅虛構 AI 寫作工具做內容，分別叫 Claude Code 按 Apple、Notion、Claude 三套 DESIGN.md 生成完整落地頁。內容完全一樣，只係設計風格唔同。
三種風格，三間完全唔同嘅公司。呢個 Skill 解決嘅，就係畀 AI 一個明確嘅審美參照系，令輸出有方向，唔隨機。
最後：開源係一種投資
getdesign.md 係寫畀 Agent 嘅審美說明書。而家網上呢類「寫畀 AI 睇」嘅神仙文檔好多，例如 .cursorrules、claude.md。只要你需要，就可以叫 Agent 幫你整理。
開始絕對係為瞭解決自己嘅效率痛點，但呢個工作流跑通之後，我好建議大家將佢 開源出去。唔好怕好嘢被學走，創作者嘅價值在於「持續創造」嘅能力。開源係做貢獻，更加係揾 同頻的人。分享得越多，擁有嘅其實越多。
關於 skill 同生產力提升嘅系統學習，如果有需要，可以訂閲專欄加入社羣。
Vibecoding 有個共通嘅問題：做出嚟嘅嘢太一式一樣。
主色成日都係紫色，睇得多就會審美疲勞，一眼就知係 AI 整嘅，好似下面呢個咁。
AI 整 UI 嘅時候，唔會自動揀一個似樣嘅風格。
如果你唔限制佢嘅風格描述，佢永遠都用預設嘅出廠設定風格。
而風格呢樣嘢，一向都係大廠帶頭。
Apple 自己有設計規範，每個版本升級都會改自己嘅設計，影響曬成個設計行業。
其他大廠都有自己嘅設計風格，例如 Google 嘅 Material Design、字節跳動嘅 Semi Design、阿里巴巴嘅 Ant Design、Notion 嘅黑白極簡、Linear 嘅極簡紫⋯⋯
呢啲大廠嘅設計規範，就係成個行業嘅審美教科書。
用家對「靚」嘅感覺，都係俾呢啲產品訓練咗好多年。
所以當你同 AI 講「整成 Apple 風格」，背後係一套累積咗幾十年、幾百頁規範、幾千個組件決策嘅系統。
唔係一句說話就可以講得清楚。
有人將呢啲規範全部整理成 MD 檔案，放咗喺呢個網站 getdesign.md。
62 個全球頂級品牌嘅設計語言，提煉成結構化嘅DESIGN.md檔案，等 AI 編碼 Agent 可以直接讀取同執行。
覆蓋嘅品牌橫跨科技、消費品、奢侈品、金融：
常見嗰啲「設計口碑好」嘅產品，基本上都有喺度。
DESIGN.md 檔案：每個品牌背後都有一份 Markdown 檔案，描述字型體系、主色調、組件規範、表面質感、排版邏輯
用 CLI 工具，一條npx指令將檔案下載到本地
個項目本身開源喺 VoltAgent/awesome-design-md 嘅倉庫，社羣持續緊添加新品牌
有咗每個大廠詳細嘅 DESIGN.md 文件，Agent 做產品就好似廚師有咗食譜，知道用咩食材、咩火候、點樣擺盤。
只需要兩步，好簡單。
第一步：揀品牌，裝檔案
執行完之後，項目根目錄會多咗個DESIGN.md。
第二步：話俾 AI 知
喺你嘅 prompt 入面加一句：
「參考項目根目錄嘅 DESIGN.md，跟住裡面嘅設計規範嚟寫呢個頁面嘅 UI。」
就係咁。AI 有咗具體嘅參照，唔使靠估。
仲可以風格混搭
同時裝多個品牌嘅 DESIGN.md，然後同 AI 講：
「參考 DESIGN.md，用 Notion 嘅暖色調，結合 Linear 嘅極簡排版，幫我整呢個組件。」
即係俾 Agent 58 個可以揀嘅審美維度，可以單選，可以混搭，產品嘅風格辨識度即刻提升。
不過咁樣都係有啲麻煩，每次都要 Agent 下載讀取 DESIGN.md 網站內容。所以
我做咗一個 Skill：brand-design-md。
效果係咁嘅：同 Claude Code 講「用 Stripe 風格幫我做一個登入頁」，佢會自動認出品牌名，調用npx getdesign@latest add stripe拎最新嘅 DESIGN.md，生成 UI。
同直接用 getdesign.md 網站相比，唔需要預先下載檔案，網站更新咗都用得，支援 62 個品牌，中英文都認得。支援多品牌混搭。
安裝方法好簡單，將 Skill 檔案放入~/.claude/skills/brand-design-md/目錄。
GitHub 倉庫地址：github.com/zephyrwang6/brand-design-md
我用咗一個叫 Lumina 嘅虛構 AI 寫作工具做內容，call skill 叫 Claude Code 分別按 Apple、Notion、Claude 三套 DESIGN.md 生成了完整嘅 landing page。
內容完全一樣，產品名一樣，功能描述一樣
只係設計風格唔同。
關鍵詞：Premium white space / SF Pro / Cinematic imagery
適合：高端產品頁、精品 SaaS landing page、任何想傳達「貴」嘅嘢。
關鍵詞：Warm minimalism / Serif headings / Soft surfaces
適合：工具類產品、知識庫界面、想要「專業但唔疏離」嘅場景。
關鍵詞：Warm terracotta accent / Clean editorial layout
呢個風格我最鍾意。
適合 AI 產品頁、知識密集型界面、想傳達「有温度嘅智識感」嘅場景。
做完呢三個 Demo，感覺好直接。
同一套內容，三種風格，三間完全唔同嘅公司整嘅產品。
呢個 skill 解決嘅就係俾 AI 一個明確嘅審美參照系統，令輸出有方向，唔會亂嚟。
getdesign.md 就係寫俾 Agent 嘅審美說明書，
而家網上呢啲「寫俾 AI 睇」嘅神級文件真係好多（例如必備嘅 .cursorrules，claude.md）。再好似嗰啲產品設計思維、名人公開嘅內容，都可以整成 skill。
只要自己需要，就可以叫 Agent 幫我整理。
將你嘅核心要求話俾 AI 知，等佢食透呢啲開源文件，然後吐出一個為你度身訂造嘅 skill。
一開始梗係為咗解決自己嘅效率痛點。但只要呢個工作流程行得通，我非常建議大家將佢開源出去。
唔好怕好嘢俾人學咗，創作者嘅價值在於「持續創造」嘅能力。
開源係做貢獻，更加係喺度揾同頻嘅人。
分享得越多，擁有嘅其實越多。
關於 skill 同生產力提升嘅系統學習，如果有需要，可以訂閲專欄加入社羣：
我係空格，持續分享 AI 產品嘅思考同實踐。
Vibecoding 有個通病：做出來的東西太統一了。
主色多為紫色，看的多了審美疲勞，一眼就能認出是 AI 做的，就像下面這個。
AI 做 UI 的時候，不會自動去選擇某個像樣的風格。
如果不去限定風格描述，他永遠都是默認的出廠設置風格。
而風格這件事，一直是大廠在引領。
蘋果有自己的設計規範，每個版本升級都會迭代自己設計，整個設計行業都被影響
而其他大廠也有自己的設計風格，谷歌的 Material Design、字節的 Semi Design、阿里的 Ant Design、Notion 的黑白極簡、Linear 的極簡紫…
這些大廠的設計規範，是整個行業的審美教科書。
用戶對「好看」的感知，也被這些產品訓練了多年。
所以當給 AI 說「做成蘋果風格」，背後是一套幾十年積累、幾百頁規範、幾千個組件決策的系。
不是一句話能描述清楚的。
有人把這些規範都整理成了 MD 文件，都在這個網站上 getdesign.md。
62 個全球頂級品牌的設計語言，提煉成結構化的DESIGN.md文件，讓 AI 編碼 Agent 能直接讀懂並執行。
覆蓋的品牌橫跨科技、消費品、奢侈品、金融：
常見的那些「設計口碑好」的產品，基本都在上面。
DESIGN.md 文件：每個品牌背後是一份 Markdown 文件，描述字體體系、主色調、組件規範、表面質感、排版邏輯
用CLI 工具，一條npx命令把文件裝進本地
項目本身開源在 VoltAgent/awesome-design-md 的倉庫，社區在持續添加新品牌
有了每個大廠詳細的 DESIGN.md 文檔，Agent 做產品就像廚師有了菜譜，知道了用什麼食材、什麼火候、什麼擺盤。
只需兩步，很簡單。
第一步：選品牌，裝文件
跑完之後，項目根目錄會多一個DESIGN.md。
第二步：告訴 AI
在你的 prompt 里加一句：
「參考項目根目錄的 DESIGN.md，按照裏面的設計規範來寫這個頁面的 UI。」
就這樣。AI 有了具體的參照物，不靠猜了。
還可以風格混搭
同時裝多個品牌的 DESIGN.md，然後告訴 AI：
「參考 DESIGN.md，用 Notion 的暖色調，結合 Linear 的極簡排版，幫我做這個組件。」
相當於給 Agent 58 個可選擇的審美維度，可以單選，可以混搭，產品的風格標識度一下子就上來了。
但是這樣感覺還是有點麻煩了，每次都要Agent下載讀取DESIGN.md 網站內容。所以
我做了一個 Skill：brand-design-md。
效果是這樣的：跟 Claude Code 說"用 Stripe 風格幫我做一個登錄頁"，它自動識別品牌名，調用npx getdesign@latest add stripe拉取最新的 DESIGN.md，生成 UI。
和直接用 getdesign.md 網站相比，不需要提前下載文件，網站更新了也能用，支持 62 個品牌，中英文都能識別。支持多品牌混搭。
安裝方式很簡單，把 Skill 文件放進~/.claude/skills/brand-design-md/目錄。
GitHub 倉庫地址：github.com/zephyrwang6/brand-design-md
我用一個叫 Lumina 的虛構 AI 寫作工具作為內容，調用 skill 讓 Claude Code 分別按 Apple、Notion、Claude 三套 DESIGN.md 生成了完整落地頁。
內容完全一樣，產品名一樣，功能描述一樣
只是設計風格不同。
關鍵詞：Premium white space / SF Pro / Cinematic imagery
適合：高端產品頁、精品 SaaS 落地頁、任何想傳達「貴」的東西。
關鍵詞：Warm minimalism / Serif headings / Soft surfaces
適合：工具類產品、知識庫界面、想要「專業但不疏離」的場景。
關鍵詞：Warm terracotta accent / Clean editorial layout
這個風格我最喜歡。
適合AI 產品頁、知識密集型界面、想傳達「有温度的智識感」的場景。
做完這三個 Demo，感受很直接。
同一套內容，三種風格，三家完全不同的公司做的產品。
這個 skill 解決的就給 AI 一個明確的審美參照系，讓輸出有方向，不隨機。
getdesign.md 就是寫給 Agent 的審美說明書，
現在網上這種「寫給 AI 看」的神仙文檔真的很多（比如必備的 .cursorrules，claude.md）。再比如那些產品設計思維，名人公開的內容，都可以製作成 skill。
只要自己需要，就可以讓 Agent 幫我整理。
把你的核心訴求告訴 AI，讓它去吃透這些開源文檔，然後吐出一份為你量身定製的 skill。
開始絕對是為了解決自己的效率痛點。但只要這個工作流跑通了，我非常建議大家把它開源出去。
不要怕好東西被別人學走，創作者的價值在於「持續創造」的能力。
開源是做貢獻，更是在找同頻的人。
分享得越多，擁有的其實越多。
關於 skill 和生產力提升的系統學習，如果需要，可以訂閲專欄加入社羣：
我是空格，持續分享 AI 產品的思考與實踐。