推薦一個讓你的AI直接掌握各大網站設計風格的項目

大家好，我係淺墨。

呢兩日碌 GitHub，見到一個倉庫，叫做 awesome-design-md。

項目介紹

呢個倉庫喺 2026 年 3 月 31 日創建，寫呢篇文嘅時候係 2026 年 4 月 7 日，唔夠一個禮拜，已經有 2.5 萬 Star，3.1k fork。

佢做嘅嘢，坦白講，就係一件事，將一堆網站嘅設計語言，整理成 AI 可以直接讀得明嘅 DESIGN.md。

你如果淨係睇呢個描述，可能會覺得，咪又係一個 UI 靈感倉庫，有咩新鮮。GitHub 上面叫 awesome 嘅倉庫太多，好多後來都變成收藏夾墳場。你撳入去，星好多，真係用嘅時候根本唔知從邊度落手。

但呢個倉庫真係有啲唔同，佢唔係俾你睇截圖，而係俾 AI 一份可以執行嘅審美說明書。

awesome-design-md 嘅核心思路簡單到有啲離譜。你將某個網站對應嘅 DESIGN.md 抄去自己項目根目錄，然後話俾你嘅 Coding Agent 聽，跟呢個風格幫我做一個頁面。

就咁樸素。倉庫 README 入面甚至講得好直接，AGENTS.md 係話俾 agent 知點樣構建項目，DESIGN.md 係話俾 agent 知呢個項目應該係咩樣。

項目內容

你撳開呢個倉庫之後會發現，佢唔係隨便寫幾句 prompt 敷衍過去。

截至今日，倉庫入面已經有 58 份 DESIGN.md，由 Apple、Claude、Vercel、Cursor、Notion、Stripe、Airbnb 到 Tesla、Ferrari、BMW，全部都跟同一套框架拆開。

我隨便打開 Apple 個目錄睇咗下，除咗 DESIGN.md，還有 preview.html、preview-dark.html，即係話，佢唔係淨係俾 agent 讀，仲俾人留咗一層可視化校對。

例如下面呢兩張圖片就係 preview.html、preview-dark.html呢兩個 HTML 對應嘅 Light 同 Dark 模式下嘅各種組件效果圖預覽。

我初頭以為 DESIGN.md呢個嘢大概就係幾行顏色同字體說明。真係唔係。

其實每個DESIGN.md入面都包含咗以下 9 個方面嘅說明：

• Visual Theme & Atmosphere（視覺主題同氛圍）

• Color Palette & Roles（色彩配搭同角色）

• Typography Rules（字體規則）

• Component Stylings（組件樣式）

• Layout Principles（排版設計原則）

• Depth & Elevation（深度同海拔）

• Responsive Behavior（響應行為）

• Accessibility & States（無障礙同狀態）

• Agent Prompt Guide（Agent 提示指南）

我撳開咗 Vercel 嗰份，連 Geist 字體喺大標題用到嘅負字距都寫咗入去，-2.4px 到 -2.88px，仲有佢嗰個好有代表性嘅 border as shadow 玩法，即係唔用傳統 border，而係用 box-shadow 0 0 0 1px 去做邊界感。

再睇 Notion，唔係簡單一句 minimal 就搞掂，而係連 warm neutral、whisper border、正文點解唔用純黑、陰影點解特登壓到好輕，都寫咗入去。

Claude 嗰份我都去睇咗，更加有趣。羊皮紙咁嘅底色，偏陶土嘅品牌色，serif 標題。

突然發現，原來所謂品牌氣質，真係可以壓縮成一份文字檔案，而且 AI 仲真係讀得明。

呢個倉庫仲有一個我好鍾意嘅位：佢將每個站點嘅味道準確咁描述出嚟。

冇錯，就係味道，例如 Vercel 嘅剋制，Notion 嘅温度，Claude 嘅編輯感，Stripe 嘅精緻紫色，Tesla 嘅極致留白，呢啲差異都盡量保留咗。即係話，佢收集嘅唔係組件代碼，而係味道。

因為真正稀缺嘅從來唔係按鈕點樣寫，而係你點解會覺得呢個按鈕似 Vercel，唔似 Notion，似 Claude，唔似 Stripe。

當然，如果你係設計師，你會覺得，呢個咪就係將成熟品牌嘅視覺語言拆開俾人複用，咁原創性點算，品牌邊界點算，慢慢會唔會成個互聯網越嚟越似。

倉庫自己嘅 License 寫得都比較剋制，佢明確話呢啲 DESIGN.md 嚟自公開網站可見嘅 design tokens，唔宣稱擁有任何站點嘅視覺身份，文件只係為咗幫助 AI 生成更一致嘅 UI。

最後

所以呢樣嘢最適合用嚟做咩，我自己嘅感覺係，用嚟學習、分析、快速搭建原型，訓練你同 AI 溝通設計嘅能力。佢好適合做腳手架、參照物。

但你真係要做品牌，真係要做長期產品，真係要建立自己嘅識別度，歸根究底都係要返去你自己。

冇任何一個 DESIGN.md 可以幫你建立判斷力。

awesome-design-md 真正補充嘅，唔係設計靈感，而係設計接口。

以前我哋講 API，係程式同程式之間嘅接口。後來我哋有咗 prompt，變成人同模型之間嘅接口。而家 DESIGN.md 好似係填補多一層，人類審美同機器生成之間嘅接口。

如果你平時就用緊 AI 寫前端，我真係建議你去睇下呢個倉庫。

去撳開一份 DESIGN.md，認真睇一次。再揀一個你鍾意嘅風格，掟入自己嘅項目入面，話俾 agent 聽，跟呢個嚟做一版。

以上，如果覺得呢篇文章幫到你，都歡迎點個讚、推薦、轉發三連。

多謝你睇我嘅文章，我哋，下次再見。

特別推薦：

1. 兩個系列文章

系統咁記錄咗我嘅創業週報，同埋喺 Shopify App 開發過程入面嘅一啲知識點，歡迎大家睇下。

我嘅創業週報系列文章

Shopify App 開發系列

2. Shopify 開發交流社羣

目前國內 Shopify 開發資料好少，基本上冇交流社區，所以我創建咗一個專注討論 Shopify 開發相關嘅各種技術問題嘅交流圈子。喺呢度你可以得到：

• 學習 Shopify App 開發由入門到上架嘅流程。

• 同其他 Shopify 開發者諮詢開發遇到嘅問題，交流經驗。 

• 同大家一齊交流副業、創業嘅經驗同心得。 

• 星主會不定期分享 Shopify 開發同建站、web 開發、移動端開發相關嘅私活，有需要嘅同學可以接。

歡迎你嚟加入，我哋知識星球見 🤝

歡迎大家㩒下面張卡片同我交流關於創業、副業、職場嘅一切~

大家好，我是淺墨。

這兩天刷 GitHub，看到一個倉庫，名字叫 awesome-design-md。

項目介紹

這個倉庫創建於 2026 年 3 月 31 日，寫這篇文章時是 2026 年 4 月 7 日，不到一週，已經 2.5 萬 Star，3.1k fork。

它乾的事，坦率的講，就一件事，把一堆網站的設計語言，整理成 AI 能直接讀懂的 DESIGN.md。

你如果只看這個描述，可能會覺得，不就是一個 UI 靈感倉庫嗎，有啥新鮮的。GitHub 上叫 awesome 的倉庫太多了，很多後來都變成收藏夾墳場。你點進去，星很多，真用的時候根本不知道從哪下手。

但這個倉庫真的不太一樣，它不是在給你看截圖，它是在給 AI 一份可以執行的審美說明書。

awesome-design-md 的核心思路簡單到有點離譜。你把某個網站對應的 DESIGN.md 拷到自己項目根目錄，然後告訴你的 Coding Agent，按這個風格給我做一個頁面。

就這麼樸素。倉庫 README 裏甚至把話說得很直白，AGENTS.md 是告訴 agent 怎麼構建項目，DESIGN.md 是告訴 agent 這個項目應該長成什麼樣。

項目內容

你點開這個倉庫之後會發現，它不是隨便寫幾句 prompt 糊弄過去。

截止今日，倉庫裏已經有 58 份 DESIGN.md，從Apple、Claude、Vercel、Cursor、Notion、Stripe、Airbnb 到 Tesla、Ferrari、BMW，全都按同一套框架拆開。

我隨便打開 Apple 這個目錄看了下，除了 DESIGN.md，還有 preview.html、preview-dark.html，也就是說，它不是隻給 agent 讀的，還給人留了一層可視化校對。

比如下面這兩個圖片就是 preview.html、preview-dark.html這兩個 HTML 對應的Light 和 Dark 模式下的各種組件的效果圖預覽。

我開始以為 DESIGN.md這玩意大概就是幾行顏色和字體說明。真不是。

其實每個DESIGN.md裏面都包含了以下9個方面的說明：

• Visual Theme & Atmosphere（視覺主題和氛圍）

• Color Palette & Roles（色彩搭配及角色）

• Typography Rules（字體規則）

• Component Stylings（組件樣式）

• Layout Principles（排版設計原則）

• Depth & Elevation（深度和海拔）

• Responsive Behavior（響應行為）

• Accessibility & States（無障礙和狀態）

• Agent Prompt Guide（Agent 提示指南）

我點開了 Vercel 那份，連 Geist 字體在大標題上用到的負字距都寫寫進去了，-2.4px 到 -2.88px，還有它那個很有代表性的 border as shadow 玩法，也就是不用傳統 border，而是用 box-shadow 0 0 0 1px 去做邊界感。

再看 Notion，不是簡單一句 minimal 就完事，而是連 warm neutral、whisper border、正文為什麼不用純黑、陰影為什麼故意壓得很輕，都被寫進去了。

Claude 那份我也去翻了，更有意思。羊皮紙一樣的底色，偏陶土的品牌色，serif 標題。

突然發現，原來所謂品牌氣質，真的可以被壓縮成一份文字文檔，而且 AI 還真讀得懂。

這個倉庫還有一個我很喜歡的點：它把每個站點的味道精確地描述了出來。

沒錯，就是味道，比如Vercel 的剋制，Notion 的温度，Claude 的編輯感，Stripe 的精緻紫色，Tesla 的極致留白，這些差異都被儘量保住了。也就是說，它收集的不是組件代碼，而是味道。

因為真正稀缺的從來不是按鈕怎麼寫，而是你為什麼會覺得這個按鈕像 Vercel，不像 Notion，像 Claude，不像 Stripe。

當然，如果你是設計師，你會覺得，這不就是把成熟品牌的視覺語言拆開給別人複用嗎，那原創性怎麼辦，品牌邊界怎麼辦，慢慢會不會整個互聯網越長越像。

倉庫自己的 License 寫得也比較剋制，它明確說這些 DESIGN.md 來自公開網站可見的 design tokens，不聲稱擁有任何站點的視覺身份，文件只是為了幫助 AI 生成更一致的 UI。

最後

所以這東西最適合拿來幹什麼，我自己的感受是，拿來學習，分析，快速搭原型，訓練你和 AI 溝通設計的能力。它很適合當腳手架，參照物。

但你真要做品牌，真要做長期產品，真要建立自己的識別度，歸根到底還是得回到你自己。

沒有任何一個 DESIGN.md 能替你長出判斷力。

awesome-design-md 真正補的，不是設計靈感，而是設計接口。

以前我們說 API，是程序和程序之間的接口。後來我們有了 prompt，成了人和模型之間的接口。現在 DESIGN.md 像是在補上另一層，人類審美和機器生成之間的接口。

如果你平時就在用 AI 寫前端，我是真的建議你去看一下這個倉庫。

去點開一份 DESIGN.md，認真看一遍。再選一個你喜歡的風格，丟進自己的項目裏，告訴 agent，按這個來一版。

以上，如果覺得這篇文章對你有幫助，也歡迎點個贊、推薦、轉發三連。

謝謝你看我的文章，我們，下次再見。

特別推薦：

1. 兩個系列文章

系統地記錄了我的創業週報，以及在Shopify App開發過程中的一些知識點，歡迎大家查看。

我的創業週報系列文章

Shopify App開發系列

2. Shopify 開發交流社羣

目前國內Shopify開發資料稀缺，基本沒有交流社區，所以我創建了一個專注討論Shopify開發相關的各種技術問題的交流圈子。在這裏你可以獲得：

• 學習Shopify App開發從入門到上架的流程。

• 和其他Shopify開發者諮詢開發遇到的問題，交流經驗。 

• 和大家一起交流副業、創業的經驗和心得。 

• 星主會不定期分享Shopify開發&建站、web開發、移動端開發相關的私活，有需要的同學可以接。

歡迎你來加入，我們知識星球見 🤝

歡迎大家點擊下方卡片與我交流關於創業、副業、職場的一切~