風格檔庫 awesome-design-md：84 份品牌設計系統直接餵 AI 網頁

用 AI 摘要這篇文章：

ChatGPT Claude Perplexity Google Grok

給 AI 一份設計規範叫它照著畫，這件事在 2026 年出現了清楚分工。Google 那邊給格式：DESIGN.md，一份純文字的設計系統文件，上層是機器可讀的色彩與字體數值，下層是人讀的風格理由，規格至今掛著 alpha 標籤。VoltAgent 那邊給內容：awesome-design-md 收藏庫，從 84 個知名網站的公開 CSS 值萃取出 84 份現成 DESIGN.md，MIT 授權，整包搬走不用註冊帳號。到 2026 年 11 月中，這個庫累積 127,466 顆星、14,115 次 fork。

把它想成風格檔的現成貨架。你不必從空白文件開始描述「我想要那種感覺」，挑一份接近的複製到專案根目錄，告訴 coding agent 照著做。不過拿之前有三件事先弄清楚：檔案內容是社群從公開網站萃取出來的，不是品牌官方規範；MIT 只包文件本身，字體與商標的權利不會跟著搬過來；免費的 84 份，是同一個名字底下付費服務的前門。

DESIGN.md 長什麼樣：上層 YAML 給機器，下層 Markdown 給人

Google Stitch 的官方規格頁把這份檔案定義成兩層。上層 YAML 前置資料放機器可直接套用的設計數值（design tokens）：色票、字級、圓角、間距、元件樣式，這些是規範值。下層 Markdown 正文用 ## 分節，寫人讀的設計理由，說明每個數值用在哪裡、為什麼這樣配。規格頁講得很直白：token 是規範值，內文提供套用的脈絡，散文裡可以叫某個顏色「午夜森林綠」，機器認的仍是 primary 這種系統化名稱。

Pin

token 系統參考 W3C Design Token Format，可以跟 tokens.json、Figma 變數、Tailwind 主題設定互轉；元件區塊裡能用 {colors.primary} 這種參照語法指向其他數值，避免同一個色碼抄五遍。格式版本欄位目前寫著 alpha，段落順序有建議清單但開放自行增補，設計系統可以加自己的領域段落；格式還掛著 alpha，之後調整的可能性要預留，每份檔案開頭的 version 欄位標的就是它，照格式寫的人留一點隨版更新的心理準備。規格頁附的示範檔叫 Daylight Prestige：深墨色 #1A1C1E 當標題與正文色，單一黏土紅 #B8422E 專門驅動互動，Public Sans 半粗體撐住制度感的大標，技術標籤換 Space Grotesk。二十五行上下的 YAML 加幾段說明，就是一份能動的最小 DESIGN.md，門檻比多數人想像的低。

這個兩層設計對 agent 的意義可以攤開來看。純散文的設計文件，模型要自己從形容詞猜數值，容易每次生成一套新色；純 YAML 又只有數值沒有理由，模型不知道什麼場合該破格。兩層並放，等於同時給了機器可執行的規範與人可判斷的取捨，生成的頁面才跟得上後續修改，這也是 token 能直接轉進 Tailwind 主題或 Figma 變數的實際好處：一份檔案同時餵 agent 與設計工具，不需要兩邊各自維護。

在 Google 的規劃裡，它跟 AGENTS.md 各管一攤：AGENTS.md 告訴 coding agent 這個專案怎麼建置，DESIGN.md 告訴設計代理這個專案該長什麼樣。這個三份 Markdown 的分工我們先前介紹過，AGENTS.md 在ChatGPT Work 的官方指南裡還有全域與專案層的分層設計。awesome-design-md 做的事，就是替你把 DESIGN.md 的兩層都先寫好，對象不是你家產品，是 84 個已經存在的知名網站。

時間軸上還有個細節：收藏庫 2026 年 3 月 31 日建立時，Google 的 DESIGN.md 文檔也已問世，兩者幾乎同期。把規格填上內容的需求，從第一天就在。

翻開兩份檔案：Oura 的奶油紙感對上 Spotify 的近黑劇場

收藏庫本體是 GitHub 上的 design-md 目錄，84 個品牌資料夾。實際打開資料夾看，每個品牌真正裝的是一份 DESIGN.md，旁邊一個轉址說明檔把人指向 getdesign.md 的品牌頁；README 寫的每站三檔（DESIGN.md 加 preview.html 與 preview-dark.html 兩份視覺目錄）是預覽搬去網站前的舊敘述，亮暗預覽現在掛在 getdesign.md 上，不在 GitHub 裡。名單橫跨 AI 平台（Claude、Mistral、xAI）、開發工具（Cursor、Vercel、Warp）、金融（Stripe、Revolut）、電商（Airbnb、Shopify）、媒體（Apple、NVIDIA、The Verge）與車廠（Tesla、Ferrari），還有復古系列收了 Dell 1996 與 Nintendo.com 2001，讓 agent 做出那個年代的網頁質感。分類裡也找得到加密賭場與交易平台（1win、Binance），萃取對象沒有設內容篩選。從分布看得出目標讀者是誰：AI 平台與開發工具擺在最前面，檔案描述寫的都是「給代理讀的設計語言」，整個庫的語彙圈著 vibe coding 打轉。

Pin

檔案裡實際裝什麼，拿兩份對照最清楚。

Oura 那份將近 31KB，開頭的描述欄就把氣質定了調：暖紙感的健康品牌，高對比襯線大標配安靜的無襯線內文，奶油與大地色系，只留一個果決的行動藍。YAML 區塊列了超過 25 個色票，從主色、石頭褐、黏土到鼠尾草綠各自有名字；Markdown 區塊交代布局與節奏：七階媒體查詢從 1280px 一路降到 320px，手機上 110px 大標縮到 48px 附近，藥丸按鈕走向全寬，觸控目標不小於 44px，留白被明文定義成設計元素。Spotify 那份換個世界，哲學寫得明白：介面退成黑幕讓專輯封面當主要色彩來源，品牌綠只留給播放與行動按鈕，字型連阿拉伯文到梵文的 fallback 都列出來，按鈕標籤用大寫加 1.4px 到 2px 的字距做出標籤感，浮起元素的陰影 rgba(0,0,0,0.5) 0px 8px 24px 也直接寫進檔案。

README 對檔案結構有正式說明：每份照 Stitch 格式加上延伸段共九段，從視覺主題與氛圍、色彩與角色、字體規則、元件樣式、布局原則、深度與立體、該做與不該做、響應式行為，到最後一段 Agent Prompt Guide，附可以直接貼給代理的提示句與快速色彩對照。換句話說，這一份檔案同時服務兩個讀者：機器讀上半與元件參數，你讀風格理由與地雷清單。

官方用法只有兩步，真功夫在換掉哪些東西

README 的使用說明短到罕見：把某個網站的 DESIGN.md 複製到你的專案根目錄，然後告訴 AI 代理使用它。示範的說法是「build me a page that looks like this」，做一個看起來像它的頁面。沒有安裝程序，沒有指令要跑，也沒有帳號要註冊。檔名維持 DESIGN.md、位置在專案根目錄，是整份說明裡僅有的兩個硬規矩；換了位置或改了名，代理未必找得到，生成結果就會漂回模型自己的預設美感。

真正的工作在把別人的設計系統改成你的。色票要換成你有權使用、也真的在用的顏色；字體段要整段重寫，檔案指定的 Editorial New、AkkuratLL、Futura、SoDoSans、SpotifyMixUI 全是商業字體或品牌專有字體，在檔案裡宣告不代表你取得授權；不適用的段落直接刪，內容密集的後台抄攝影導向的版面只會害到自己。

挑檔的判斷也在此。同一批樣本裡，Stripe 走 300 字重的優雅細線，SAP 是白底平色塊的企業應用框架，Lamborghini 全黑配金字，The Verge 用酸薄荷綠配紫外光。先想自己的頁面一天要讓使用者讀多少字、在什麼狀態下讀，再決定要多少留白與多強的表情，比「哪個牌子有名」重要得多。復古系列則是另一種用法：Dell 1996 的黑框頁緣、色塊緞帶卡片與手切 GIF 貼紙，Nintendo.com 2001 的拉絲金屬面板與像素瑪利歐，做懷舊 side project 或活動頁時，直接讓 agent 生成那個年代才有的質感，比口頭描述「九零年代感」準確太多。

驗收有現成工具。getdesign.md 各品牌頁的亮暗預覽就是色彩、字級、按鈕的對照卡，生成的頁面像不像，打開預覽對一眼就知道，不必憑感覺；亮暗各對一次，能同時抓出深色模式下的對比不足。預覽是參照不是驗收終點，行動版表現仍要自己在瀏覽器縮窗驗，檔案裡的斷點表只是紙面承諾。改完滿意的值，記得回頭把採用的決定寫進你自己的 DESIGN.md，讓檔案反映現況，下一輪生成才不會又漂回樣本的表情。

免費檔案的三條界線：萃取而來、只授文件、商業前門

內容性質上，README 與授權段自己寫得明白：這是從公開網站萃取出來的設計系統文件，token 代表「公開可見的 CSS 值」，而且整理者「不主張擁有任何網站的視覺識別」。Spotify 那份屬於第三方看著公開頁面整理的分析，並非官方規範的流出。拿它當描述視覺的範本合適，當官方規範引用就錯了；品牌改版之後，檔案也不會自動跟上。

授權範圍是另一條線。MIT 條款蓋住的是這些 markdown 檔案本身，你可以複製、修改、再散布檔案；檔案裡描述的商標、字體授權與品牌外觀，權利屬於原廠，不會因為寫進 MIT 檔案就轉移給你。做客戶案的人對這條線最熟：風格可以借鑑，識別不能撞。

商業結構是這個庫最有意思的地方。CONTRIBUTING 明文寫著「為維持收藏品質，我們無法接受新的 DESIGN.md pull request」：你可以開 issue、對照品牌現行網站幫忙修既有檔案的錯誤色碼與弱描述，新品牌檔案則只有維護方自己能加。想要清單外的網站，官方網站賣客製：Private DESIGN.md 定價 59 美元、特價 39 美元，一次付款附亮暗兩份檔案與 HTML 預覽，還有私人 Discord 頻道；Website Starter Kit 搭一份私人 DESIGN.md 開價 299 美元、特價 249 美元，成品是可直接部署的完整程式碼。首頁目錄標著 550 份以上「ready to request」，GitHub 庫裡免費的是 84 份，中間的差距就是付費牆的位置；目錄頁還有安裝數與收藏數欄位、Share & Earn 分潤、29 美元的影片模板與第三方廣告版位，這是一個完整運轉的市集，GitHub 庫是它的櫥窗。

Pin

回頭看 README 就不意外：自家 VoltAgent 的風格檔也在清單內，頁面掛著入門包橫幅、贊助位，以及「GitHub 全球第 150 名」的自我介紹。免費庫是展示，收費層是生意，兩者共用同一個名字與導流路徑。這不損害檔案本身的價值，用它的人知道自己在哪一層就好。

現在能拿它做什麼，還不能指望什麼

合理的起手式是只做一頁。挑一份最接近你產品氣質的檔案，先複製、先改色票與字體兩段，讓 agent 出一頁，對著 getdesign.md 上的品牌預覽頁檢查色準與字級，再決定要不要把整套斷點與元件規則搬進專案。一次搬整套九段規則，出了問題很難知道是哪一段造成的；一頁一頁擴，每一步都驗得出來。

動手前有兩件事要自己確認。生成一致性：檔案交給 agent 之後畫面會多貼近原站，取決於模型與提示方式，README 也只承諾能力面，沒給效果保證，127,466 顆星肯定的是免費資源本身，做不了生成品質的保證；星數要怎麼讀，我們介紹開源星數地圖時講過同樣的提醒，清單文與真專案分開看，才不會被數字牽著走。檔案正確性：84 份是否都跟各品牌現行網站對得上，沒有人逐份核對過，庫方開放回報錯誤色碼，代表它自己也把這當成持續修正的工程。還有一題沒有答案：被萃取的品牌對這件事保持沉默，將來會怎麼表態，沒有人知道。另外，星數、檔案數與定價會跟著庫的更新變動，這個庫從 3 月底一路更新到 10 月底，引用前以官網現值為準。

誰不該用，也要說清楚。經手品牌識別的設計師與代理商，把客戶對手的風格檔直接套進交付物，踩到的不只是授權，還有識別混淆的職業風險；無法取得商業字體授權的專案，抄了字體段也只是把問題寫進文件。這個庫對個人專案、side project 與內部工具最沒有包袱，商業交付就要逐項過前面那三條界線。

想給趕時間的人一句判斷：要有設計感的 AI 網頁，這個庫是目前最便宜的起點之一；要「看起來就是某個品牌」，停在欣賞就好，別搬進自家產品。