我把這 62 個大廠設計風格總結成一個 skill

作者:空格的鍵盤
日期:2026年4月10日 上午10:07
來源:WeChat 原文

整理版優先睇

速讀 5 個重點 高亮

透過 getdesign.md 結構化文檔,將 62 個大廠設計規範轉化為 AI 可讀的 Skill,徹底解決 AI 生成 UI 風格單一、缺乏辨識度的痛點。

  • AI 默認生成的 UI 往往存在「紫色調審美疲勞」,缺乏大廠級別的設計深度與品牌辨識度。
  • getdesign.md 將 AppleNotion、Stripe 等 62 個品牌的設計語言提煉成結構化的 DESIGN.md 文件。
  • 利用 CLI 工具(npx getdesign)可快速將特定品牌規範導入項目根目錄,供 AI Agent 直接參考執行。
  • 開發 brand-design-md Skill 讓 Claude Code 能自動識別品牌需求並拉取最新規範,實現風格混搭與動態調用。
  • 核心啟發:未來高價值的文檔應是「寫給 AI 看」的,將專業知識轉化為 Skill 是提升 AI 協作上限的關鍵。
值得記低
工具 getdesign.md

getdesign.md

收錄 62 個全球頂級品牌設計語言的結構化文檔庫,支持 CLI 一鍵安裝。

Skill github.com

brand-design-md

為 Claude Code 打造的 Skill,支持自動識別品牌並調用 npx 拉取設計規範。

流程

大廠風格混搭工作流

同時安裝多個 DESIGN.md,在 Prompt 中要求 AI 結合不同品牌的色調與排版邏輯。

整理重點

點解 AI 畫嘅嘢總係「陣 AI 味」?

VibeCoding 雖然快,但有個通病:做出來的東西太過統一,主色調多數是紫色,看多了就會審美疲勞。AI 在做 UI 的時候,如果沒有明確限定,它只會用「出廠設置」風格。而真正的設計美感往往是由大廠引領的,例如 Apple 的設計規範、Google 的 Material Design 或 Notion 的黑白極簡。

整理重點

將 62 個大廠規範裝入 AI 的腦袋

現在有人將這些規範整理成 MD 文件,覆蓋科技、消費品、奢侈品等領域。透過簡單的 CLI 命令,就可以將這些「審美說明書」直接餵給 AI Agent。

快速導入設計規範 bash
# 導入蘋果風格
npx getdesign@latest add apple

# 導入 Claude 風格
npx getdesign@latest add claude

在 Prompt 加入:「參考項目根目錄的 DESIGN.md,按照裡面的設計規範來寫這個頁面的 UI。」

整理重點

進階玩法:自動化 Brand Design Skill

為了更進一步提升效率,作者開發了 brand-design-md Skill。這讓 Claude Code 具備了自動化能力,不需要手動下載文件,直接對話就能切換風格。

這種做法的核心在於給 AI 一個明確的審美參照系,讓輸出有方向,不再隨機。只要工作流跑通了,將這些「寫給 AI 看」的文檔開源出去,能吸引更多同頻的創作者。

Vibecoding 有個通病:做出來的東西太統一了。

主色多為紫色,看的多了審美疲勞,一眼就能認出是 AI 做的,就像下面這個。

飛書文檔 - 圖片

AI 做 UI 的時候,不會自動去選擇某個像樣的風格。

如果不去限定風格描述,他永遠都是默認的出廠設置風格。

而風格這件事,一直是大廠在引領。

蘋果有自己的設計規範,每個版本升級都會迭代自己設計,整個設計行業都被影響

飛書文檔 - 圖片

而其他大廠也有自己的設計風格,谷歌的 Material Design、字節的 Semi Design、阿里的 Ant Design、Notion 的黑白極簡、Linear 的極簡紫…

這些大廠的設計規範,是整個行業的審美教科書。

用戶對「好看」的感知,也被這些產品訓練了多年。

所以當給 AI 說「做成蘋果風格」,背後是一套幾十年積累、幾百頁規範、幾千個組件決策的系。

不是一句話能描述清楚的。

01 匯聚 60+大廠設計規範

有人把這些規範都整理成了 MD 文件,都在這個網站上 getdesign.md

62 個全球頂級品牌的設計語言,提煉成結構化的DESIGN.md文件,讓 AI 編碼 Agent 能直接讀懂並執行。

覆蓋的品牌橫跨科技、消費品、奢侈品、金融:

飛書文檔 - 圖片

常見的那些「設計口碑好」的產品,基本都在上面。

DESIGN.md 文件:每個品牌背後是一份 Markdown 文件,描述字體體系、主色調、組件規範、表面質感、排版邏輯

飛書文檔 - 圖片

用CLI 工具,一條npx命令把文件裝進本地

npx getdesign@latest add apple

項目本身開源在 VoltAgent/awesome-design-md 的倉庫,社區在持續添加新品牌

飛書文檔 - 圖片

有了每個大廠詳細的 DESIGN.md 文檔,Agent 做產品就像廚師有了菜譜,知道了用什麼食材、什麼火候、什麼擺盤。

02 DESIGN.md 怎麼用

只需兩步,很簡單。

第一步:選品牌,裝文件

# 蘋果風
npx getdesign@latest add apple
# Claude 風
npx getdesign@latest add claude

跑完之後,項目根目錄會多一個DESIGN.md

第二步:告訴 AI

在你的 prompt 里加一句:

「參考項目根目錄的 DESIGN.md,按照裏面的設計規範來寫這個頁面的 UI。」

就這樣。AI 有了具體的參照物,不靠猜了。

還可以風格混搭

同時裝多個品牌的 DESIGN.md,然後告訴 AI:

「參考 DESIGN.md,用 Notion 的暖色調,結合 Linear 的極簡排版,幫我做這個組件。」

相當於給 Agent 58 個可選擇的審美維度,可以單選,可以混搭,產品的風格標識度一下子就上來了。

但是這樣感覺還是有點麻煩了,每次都要Agent下載讀取DESIGN.md 網站內容。所以

03 我做這個 Skill

我做了一個 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

04 測試效果

我用一個叫 Lumina 的虛構 AI 寫作工具作為內容,調用 skill 讓 Claude Code 分別按 Apple、Notion、Claude 三套 DESIGN.md 生成了完整落地頁。

內容完全一樣,產品名一樣,功能描述一樣

只是設計風格不同。

Apple 風格:極致留白 + 電影質感

關鍵詞:Premium white space / SF Pro / Cinematic imagery

飛書文檔 - 圖片

適合:高端產品頁、精品 SaaS 落地頁、任何想傳達「貴」的東西。

Notion 風格:暖色極簡 + 襯線閲讀感

關鍵詞:Warm minimalism / Serif headings / Soft surfaces

飛書文檔 - 圖片

適合:工具類產品、知識庫界面、想要「專業但不疏離」的場景。

Claude 風格:赭石強調色 + 編輯排版

關鍵詞:Warm terracotta accent / Clean editorial layout

飛書文檔 - 圖片

這個風格我最喜歡。

適合AI 產品頁、知識密集型界面、想傳達「有温度的智識感」的場景。

做完這三個 Demo,感受很直接。

同一套內容,三種風格,三家完全不同的公司做的產品。

這個 skill 解決的就給 AI 一個明確的審美參照系,讓輸出有方向,不隨機。

05 最後

getdesign.md 就是寫給 Agent 的審美說明書,

現在網上這種「寫給 AI 看」的神仙文檔真的很多(比如必備的 .cursorrules,claude.md)。再比如那些產品設計思維,名人公開的內容,都可以製作成 skill。

只要自己需要,就可以讓 Agent 幫我整理。

把你的核心訴求告訴 AI,讓它去吃透這些開源文檔,然後吐出一份為你量身定製的 skill。

開始絕對是為了解決自己的效率痛點。但只要這個工作流跑通了,我非常建議大家把它開源出去。 

不要怕好東西被別人學走,創作者的價值在於「持續創造」的能力

開源是做貢獻,更是在找同頻的人。

分享得越多,擁有的其實越多。

關於 skill 和生產力提升的系統學習,如果需要,可以訂閲專欄加入社羣:

Image

我是空格,持續分享 AI 產品的思考與實踐。