開源！68個品牌設計規範文檔（HTML+DESIGN md + Token ）
整理版優先睇
開源品牌設計參考庫 brands-design-md：將 68 個品牌的視覺語言拆成 7 類文件，人睇風格、AI 讀規則。
呢篇文章係由作者 Rico 介紹佢自己開源嘅品牌設計參考庫 brands-design-md。佢發現平時睇品牌網站通常只會收藏網址或截圖，睇得到風格但攞唔到規則；雖然而家有用 DESIGN.md 去約束設計風格，但瀏覽唔方便。所以佢整咗呢個項目，希望補上中間嗰段：將品牌視覺語言整理成方便人睇、亦方便 AI 讀嘅規範。
倉庫目前收錄咗 68 個品牌，包括 Airbnb、Apple、Figma、Stripe、Vercel、Notion 等。每個品牌目錄都有一組固定結構，包含 preview.html、DESIGN.md、tokens.json、variables.css 等文件。人可以先睇封面同預覽頁建立視覺印象，AI 就可以讀 DESIGN.md 同結構化數據，直接攞到顏色、字體、間距等設計規則。
成個流程係「人先睇，AI 再讀」——設計師確認方向，開發者再將文件交俾 Cursor、Claude 或 Codex 等工具，令佢哋按照品牌規範生成頁面。但要注意呢啲資料只係參考，唔可以替代品牌官方規範，使用時要自己核對官網現狀。
- brands-design-md 將 68 個品牌嘅設計規範整理成 7 類文件，填補咗截圖與設計文檔之間嘅缺口。
- 每個品牌目錄包含 preview.html、DESIGN.md、tokens.json、variables.css 等，人睇預覽、AI 讀規則，各取所需。
- 用法係「人先睇 cover 同 preview 確認方向，再將 DESIGN.md 同 CSS 變量交俾 Agent」——比淨係講品牌名更有效。
- 作者設計呢套結構嘅目的，係等設計參考可以喺人同 AI 之間流轉，減少重複解釋品牌細節嘅成本。
- 實際使用要留意：呢啲資料只係某時間點嘅設計觀察，唔可以替代官方規範，使用前要自己核對現狀。
brands-design-md GitHub 倉庫
收錄 68 個品牌嘅設計規範文檔，包含 preview.html、DESIGN.md、tokens.json、CSS 變量等，適合設計參考同 AI 開發上下文。
由「睇風格」到「攞規則」嘅缺口
平時睇品牌網站，多數人都係停留喺收藏網址或者截圖，睇得到風格，但攞唔到規則。而家雖然有咗 DESIGN.md 呢類文件，可以從規則上約束設計風格，但瀏覽嘅體驗又唔夠直接。
呢個項目想補上中間嗰段：將品牌視覺語言整理成方便人睇、亦方便 AI 讀嘅設計規範。
作者 Rico 自己做咗一個開源參考庫，叫 brands-design-md，目前收錄咗 68 個品牌，好似 Airbnb、Apple、Figma、Stripe、Vercel、Notion 咁。
一個品牌包內有 7 個標準文件
每個品牌目錄都按固定結構組織，以 brands/duolingo/ 做例，包含以下 7 個文件。
- preview.html — 按照品牌自己嘅視覺風格製作嘅預覽頁，直接喺瀏覽器打開就可以睇。
- DESIGN.md — 設計上下文文檔，包含視覺觀察、基礎令牌、排版層級、佈局建議、組件描述同使用邊界。
- cover_duolingo_com.webp — 品牌官方網站截圖，用嚟快速識別原網站嘅視覺形象。
- favicon.ico — 對應網站嘅圖標，方便喺品牌目錄入面辨認來源。
- tokens.json — 結構化嘅顏色、字體、間距、圓角、陰影同佈局信息。
- variables.css — 將 tokens 整理成 CSS 自定義屬性。
- theme.css — 可以作為 Tailwind CSS v4 主題變量嘅參考。
preview.html 同 cover 用途唔同：cover 用嚟睇原網站，preview 用嚟睇整理後嘅規則。
成個結構嘅設計目的，係令唔同角色都揾到適合自己嘅入口。人想快速瀏覽，可以睇 preview；AI 想讀懂品牌，可以讀 DESIGN.md；開發要落地，可以攞 tokens 同 CSS。
呢套 7 文件結構，令品牌規範由靜態截圖變成可以流轉嘅設計資產。
點樣開始用：人先睇，AI 再讀
如果只想瀏覽，直接打開 GitHub 倉庫入面嘅 brands/，揀一個品牌目錄，打開 preview.html 就睇到。如果想保存到本地，可以 clone 落嚟。
想快速揾風格，就睇 cover 同 preview.html；想俾 AI 讀懂品牌，就俾佢 DESIGN.md；想進入開發流程，就繼續睇 tokens.json、variables.css 同 theme.css。
先睇頁面，確認方向，再回頭查規則，理解成本會低好多。
將 DESIGN.md、tokens.json、variables.css 同 theme.css 一齊放入項目上下文，AI 就攞到具體嘅設計約束。
參考 brands/duolingo/DESIGN.md 的視覺觀察和組件規則。
使用 brands/duolingo 樣式文件作為顏色、字體、間距和主題變量的起點。
先搭建頁面結構，再按這套規則實現，不要額外引入不在文檔裏的裝飾風格。單講「參考 duolingo」只係一個方向，文件先可以將方向變成 Agent 可以繼續處理嘅上下文。
參考嘅流轉同使用邊界
作者做呢個倉庫時，重點放喺參考資料嘅流轉上：人睇 cover 同 preview，建立視覺印象；人讀 DESIGN.md，將感覺拆成設計判斷；AI 讀文檔同令牌，得到開發任務嘅約束；前端再從 JSON、CSS 同 Tailwind 主題變量度攞起點。
唔需要再喺截圖網站、設計文檔同代碼片段之間來回拼接，亦唔使每次重新向 AI 解釋品牌顏色同頁面氣質。
呢度嘅文件唔要求原樣複製。品牌原站一定會有同具體業務綁定嘅頁面同組件，可以當設計參考，再按自己產品做取捨。
呢啲設計文檔、預覽頁面、截圖由作者自行整理，參考咗品牌公開網站同公開設計資源。
使用時要注意：資料係某個時間點嘅觀察，唔可以替代品牌方最新嘅官方設計規範。
brands-design-md 係我自己平時收錄嘅一個開源品牌設計參考庫，而家收錄咗 68 個品牌目錄，入面有 Airbnb、Apple、Figma、Stripe、Vercel、Notion、Claude、Duolingo 等品牌嘅設計資料。
倉庫: github.com/ricocc/brands-design-md
一般睇品牌或者網站，都係淨係收藏網址或者截圖，睇到風格，但拎唔到規則；知道頁面靚，但寫唔出佢點解靚。今年有咗 DESIGN md，從規則上約束設計風格，但瀏覽就冇咁方便。
brands-design-md 想補返嘅就係中間呢段，補充預覽同截圖、梳理好顏色、字體、間距、圓角、組件同頁面節奏，整理成一套方便預覽、亦都方便畀 AI 閲讀嘅設計規範。
將一套品牌視覺語言拆成 7 個檔案，人睇視覺，AI 讀規則，開發嘅時候亦都可以攞對應檔案做實現參考。
 |  |
一個品牌包入面有啲咩
每個品牌目錄都按一套固定結構組織。以 brands/duolingo/ 為例，常規品牌包包含以下 7 個檔案。
- preview.html 係按照每個品牌自己嘅視覺風格整嘅預覽頁。 佢會用呢個品牌嘅顏色、字體、間距、圓角、表面同組件處理，將 DESIGN.md 入面嘅規則組織成一個可以直接喺瀏覽器度開嘅參考頁面。
- DESIGN.md 係設計上下文文檔。 入面有品牌視覺觀察、基礎令牌、排版層級、佈局建議、組件描述，同埋使用邊界。人可以讀，AI 都可以從中讀得明一個品牌應該延續啲咩、邊啲地方要收住。
- cover_duolingo_com.webp 呢類 cover 檔案就係品牌官方網站嘅截圖。 佢同 preview.html 嘅用途唔同，cover 用來快速認出原網站嘅視覺形象，preview 就用嚟瀏覽整理好嘅設計規則。
- favicon 係對應網站嘅圖示檔案，方便喺品牌目錄入面快速認出來源。
- tokens.json 儲存結構化嘅顏色、字體、間距、圓角、陰影同佈局資訊。 variables.css 將呢啲資訊整理成 CSS 自定義屬性，theme.css 就可以作為 Tailwind CSS v4 主題變數嘅參考。
點樣開始用
倉庫: github.com/ricocc/brands-design-md
如果淨係想瀏覽，直接打開 GitHub 倉庫，進入 brands/，揀一個品牌目錄，再打開入面嘅 preview.html。
如果想把資料儲存落本地，可以直接下載或者 clone 到本地。
跟住按自己嘅目的揀檔案。
想快啲揾風格，就睇 cover 和 preview.html；想令 AI 讀懂品牌，就畀佢 DESIGN.md；想進入實際開發流程，就繼續睇 tokens.json、variables.css 和 theme.css。
人先睇預覽，AI 再讀規則
如果你淨係想揾一個視覺方向，打開品牌目錄入面嘅 cover 和 preview.html 就夠喇。
 |  |
cover 令你先睇到原網站嘅樣。你可以快速判斷呢個品牌偏向明亮定暗黑，頁面更接近產品介面定編輯風格。然後打開按照嗰個品牌整嘅 preview.html，繼續睇佢點樣處理顏色、字體、層級、組件同頁面片段。
呢個過程唔需要先讀完一份長文檔。先睇頁面，確認方向，再返轉頭查規則，理解成本會低好多。
如果你要將資料交畀 Cursor、Claude 或 Codex，入口就換成 DESIGN.md。
你可以將某個品牌嘅文檔放入項目上下文，再將對應嘅 tokens.json、variables.css 和 theme.css 一齊提供畀 Agent。
咁樣佢讀到嘅就係品牌嘅視覺觀察、設計令牌、組件描述同使用邊界，寫頁面嘅時候都有具體嘅顏色變數、字體層級同間距關係可以參考。
例如，畀 Agent 嘅任務可以咁樣寫。
呢個同淨係講一句參考 duolingo 有分別。品牌名只能提供一個方向，DESIGN.md、JSON 同 CSS 先可以將方向變成 Agent 可以繼續處理嘅上下文。
設計師視角，參考要可以繼續行落去
我做呢個倉庫嘅時候，重點放咗喺參考資料嘅流轉上面。
 |  |
人看 cover 和 preview.html，先建立視覺印象；人讀 DESIGN.md，將感覺拆成設計判斷；AI 讀文檔同令牌，得到可以放入開發任務嘅約束；前端再從 JSON、CSS 同 Tailwind 主題變數入面攞實現起點。
你唔需要喺截圖網站、設計文檔同代碼片段之間來回拼接，亦都唔使每次都重新向 AI 解釋呢個品牌嘅顏色同頁面氣質。
呢度嘅檔案並唔要求你原樣複製。品牌原站入面一定會有同具體業務綁定嘅頁面、組件同內容，你可以將佢當成設計參考，再根據自己嘅產品重新做取捨。
最後
倉庫入面嘅設計文檔、預覽頁面、截圖同相關檔案係由我自己生成、整理同校正，參考咗品牌公開網站同公開設計資源（getdesignmd、refero design等）。
佢哋適合學習、研究同界面創作，唔可以代替品牌方最新嘅官方設計規範，亦都唔代表品牌授權或合作關係。
有啲品牌目錄係基於公開視覺語言整理出嚟嘅參考版本。品牌官網會持續變化，呢度嘅資料應該當作某個時間點嘅設計觀察，用嘅時候仲要自己核對返官網嘅最新狀態。
佢提供嘅係設計上下文，唔提供可以直接安裝嘅 React 組件包，亦都唔提供品牌方嘅商用授權素材。如果你而家喺度揾設計方向、AI 開發上下文同一組可以繼續拆解嘅品牌樣本，可以由呢個倉庫開始。
我係 Rico，多謝閲讀！
brands-design-md 是我自己日常收錄的一個開源品牌設計參考庫，當前收錄 68 個品牌目錄，裏面有 Airbnb、Apple、Figma、Stripe、Vercel、Notion、Claude、Duolingo 等品牌的設計資料。
倉庫: github.com/ricocc/brands-design-md
一般看品牌或者網站，都是停留在收藏網址或者截圖上，看得到風格，拿不到規則；知道頁面好看，寫不出它為什麼好看。 今年是有了 DESIGN md，從規則上約束設計風格，但是瀏覽就沒那麼方便。
brands-design-md 想補上的就是中間這段，補充預覽和截圖、梳理好顏色、字體、間距、圓角、組件和頁面節奏，整理成一套方便預覽、也方便給 AI 閲讀的設計規範。
把一套品牌視覺語言拆成 7 個文件，人看視覺，AI 讀規則，開發時也能拿對應文件做實現參考。
| |
一個品牌包裏有什麼
每個品牌目錄按一套固定結構組織。以 brands/duolingo/ 為例，常規品牌包包含以下 7 個文件。
- preview.html 是按照每個品牌自己的視覺風格製作的預覽頁。 它會使用這個品牌的顏色、字體、間距、圓角、表面和組件處理，把 DESIGN.md 裏的規則組織成一張可以直接在瀏覽器裏打開的參考頁面。
- DESIGN.md 是設計上下文文檔。 裏面有品牌視覺觀察、基礎令牌、排版層級、佈局建議、組件描述，以及使用邊界。人可以讀，AI 也可以從中讀懂一個品牌應該延續什麼、哪些地方需要收住。
- cover_duolingo_com.webp 這類 cover 文件則是品牌官方網站的截圖。 它和 preview.html 的用途不同，cover 用來快速識別原網站的視覺形象，preview 用來瀏覽整理後的設計規則。
- favicon 是對應網站的圖標文件，方便在品牌目錄裏快速辨認來源。
- tokens.json 保存結構化的顏色、字體、間距、圓角、陰影和佈局信息。 variables.css 把這些信息整理成 CSS 自定義屬性，theme.css 則可以作為 Tailwind CSS v4 主題變量的參考。
怎麼開始用
倉庫: github.com/ricocc/brands-design-md
如果只想瀏覽，直接打開 GitHub 倉庫，進入 brands/，挑一個品牌目錄，再打開其中的 preview.html。
如果想把資料保存到本地，可以直接下載或者克隆到本地即可。
接下來按自己的目的選擇文件。
想快速找風格，就看 cover 和 preview.html；想讓 AI 讀懂品牌，就給它 DESIGN.md；想進入實際開發流程，就繼續看 tokens.json、variables.css 和 theme.css。
人先看預覽，AI 再讀規則
如果你只是想找一個視覺方向，打開品牌目錄裏的 cover 和 preview.html 就夠了。
| |
cover 讓你先看到原網站的樣子。你可以快速判斷這個品牌偏向明亮還是暗黑，頁面更接近產品界面還是編輯風格。然後打開按照該品牌製作的 preview.html，繼續看它如何處理顏色、字體、層級、組件和頁面片段。
這個過程不需要先讀完一份長文檔。先看頁面，確認方向，再回頭查規則，理解成本會低很多。
如果你要把資料交給 Cursor、Claude 或 Codex，入口就換成 DESIGN.md。
你可以把某個品牌的文檔放進項目上下文，再把對應的 tokens.json、variables.css 和 theme.css 一起提供給 Agent。
這樣它讀到的是品牌的視覺觀察、設計令牌、組件描述和使用邊界，寫頁面時也有具體的顏色變量、字體層級和間距關係可以參考。
例如，給 Agent 的任務可以這樣寫。
這和只說一句參考 duolingo 有區別。品牌名只能提供一個方向，DESIGN.md、JSON 和 CSS 才能把方向變成 Agent 可以繼續處理的上下文。
設計師視角，參考要能繼續往下走
我做這個倉庫時，重點放在參考資料的流轉上。
| |
人看 cover 和 preview.html，先建立視覺印象；人讀 DESIGN.md，把感覺拆成設計判斷；AI 讀文檔和令牌，得到可以放進開發任務的約束；前端再從 JSON、CSS 和 Tailwind 主題變量裏拿實現起點。
你不需要在截圖網站、設計文檔和代碼片段之間來回拼接，也不用每次都重新向 AI 解釋這個品牌的顏色和頁面氣質。
這裏的文件並不要求你原樣複製。品牌原站裏一定會有和具體業務綁定的頁面、組件和內容，你可以把它當成設計參考，再根據自己的產品重新做取捨。
最後
倉庫裏的設計文檔、預覽頁面、截圖和相關文件由我自行生成、整理和校正，參考了品牌公開網站以及公開設計資源(getdesignmd、refero design等)。
它們適合學習、研究和界面創作，不能替代品牌方最新的官方設計規範，也不代表品牌授權或合作關係。
有些品牌目錄是基於公開視覺語言整理出的參考版本。品牌官網會持續變化，這裏的資料應當看作某個時間點的設計觀察，使用時還要自己核對官網當前狀態。
它提供的是設計上下文，不提供可以直接安裝的 React 組件包，也不提供品牌方的商用授權素材。如果你正在找設計方向、AI 開發上下文和一組可以繼續拆解的品牌樣本，可以從這個倉庫開始。
我是 Rico，感謝閲讀！