5.9 萬 Star 的 Markdown 工程，核心居然是一個 DESIGN.md 技能
整理版優先睇
用 DESIGN.md 喂飽 AI，設計規範文本化先係 AI 編程嘅下一步
呢篇文章出自小智，佢成日用 Claude Code 做 vibe coding 小項目，功能好快搞得掂，但係生成嘅頁面成日顏色普通、字體普通、排版都普通，觀感唔多掂。佢發現問題唔係模型或者提示詞，而係設計資訊冇完整餵俾 AI。傳統項目有設計師用 Figma 做規範，但而家一個人搞嘅項目多咗，設計要自己補位。
Google Stitch 提出一個新思路：將設計規範寫入 DESIGN.md 放喺項目根目錄，等 AI 讀取執行。咁樣生成嘅頁面有統一感，後續改版都有依據。小智實測認為呢個思路真係有效，但難點係冇設計背景嘅人要從零寫一份規範唔容易。剛好有個開源項目 Awesome DESIGN.md，短時間拎咗 59000+ Star，佢整理咗 66 個頂級網站嘅設計規範，好似 Notion、Linear、Figma 呢啲風格都有，仲有 preview.html 可以先睇效果。
整體結論係：AI 寫代碼能力已經冇問題，差距在於規範輸入。將設計規範文本化係 AI 編程嘅關鍵節點，Awesome DESIGN.md 唔單止係資源庫，更係推動設計由視覺稿轉向機器可讀文本嘅一步。
- DESIGN.md 可以令 AI 生成嘅頁面有統一設計感，解決 vibe coding 常見嘅觀感問題
- 方法係將主色、字體、圓角、按鈕狀態等關鍵規則寫喺項目根目錄嘅 DESIGN.md，俾 AI 讀取執行
- 傳統項目靠設計師出 Figma 規範，而家一個人嘅項目可以靠呢份文本規範補位，係效率同品質嘅平衡
- Awesome DESIGN.md 項目整理咗 66 個頂級網站風格，每個都附有 preview.html，可以即時試睇色板同組件
- 實戰用 npx getdesign@latest add notion 下載模板，喺 Claude Code 直接引用 DESIGN.md 即可，唔使再手動查色值
Awesome DESIGN.md 項目 GitHub
收錄咗 66 個頂級網站嘅 DESIGN.md 設計規範，包括 Notion、Linear、Figma 等風格，每個都附有 preview.html 預覽
快速下載模板指令
用 npx getdesign@latest add <style> 可以將指定風格嘅 DESIGN.md 放落項目根目錄，例如 npx getdesign@latest add notion
設計痛點：AI 寫到功能但寫唔到美感
小智成日用 Claude Code vibe coding 小項目，功能好快搞得掂，但生成嘅頁面顏色普通、字體普通、排版都普通。佢發現問題唔係模型或者提示詞，而係設計資訊冇完整餵俾 AI。
傳統項目有設計師用 Figma 做規範，但而家一個人搞嘅項目多咗，設計要自己補位。Google Stitch 提出一個新思路：將設計規範寫入 DESIGN.md，放喺項目根目錄等 AI 讀取執行。
Awesome DESIGN.md：66 個頂級網站風格任揀
為咗解決由零寫規範嘅難度，開源項目 Awesome DESIGN.md 短時間拎咗 59000+ Star。佢參考咗66 個頂級網站風格，整理成可以直接用嘅 DESIGN.md 檔案。覆蓋範圍好廣，包括：
- AI 工具、開發者工具、設計工具（Notion、Linear、Figma 等）
- 電商、金融、汽車等行業網站
- 每個站點都有設計規範文件同埋 preview.html，可以先睇色板、字階、按鈕、卡片再決定用邊套
呢個preview.html 細節好實用，少咗好多試錯時間。小智用Notion 風格做過一個小站，流程好順。
實戰用法：下載模板、喺 Claude Code 引用
用法好簡單：先去 GitHub 倉庫下載對應嘅 DESIGN.md 放落項目根目錄，或者直接用 npx 指令快速安裝：
npx getdesign@latest add notion喺 Claude Code 用嘅時候，直接咁樣 prompt：「請參考項目根目錄下嘅 DESIGN.md 風格，幫我構建一個關於 Hermes Agent 介紹網站。」生成後如果有細節唔滿意，繼續對話微調就得，唔使再手動查色值同字重。
- 下載對應 DESIGN.md 放落項目根目錄
- 去 https://getdesign.md 選模板直接匯入
- 喺 Claude Code prompt 入面引導 AI 參考 DESIGN.md
大家好，我係小智，專注 AI 工具、AI 智能體同編程提效
功能快界面好AI
呢排我不斷用 Claude Code vibe coding 整啲小項目。整到功能唔難，有時幾分鐘就搞得掂。但整出嚟嘅頁面總是差少少。顏色普通，字體普通，排版都係普通。
代碼冇問題，就係觀感唔夠好。後來發現，問題唔喺模型本身亦唔喺提示詞，問題係設計資訊冇完整餵俾 AI。
大家知道傳統嘅開發項目會配一個設計師，佢會透過 Figma 將規範標得好仔細。但係而家好多項目可能得一個人做，設計呢件事只可以自己頂上。最近喺 X 度睇帖子，Google Stitch 提出咗一個全新思路，核心就係將設計規範寫入 DESIGN.md。
DESIGN.md 嘅價值
我自己即刻試咗一下，DESIGN.md 嘅價值表現得真係好直觀。佢將主色、字體、圓角、按鈕狀態、資訊密度呢啲關鍵規則都寫喺項目根目錄，等 AI 讀取並執行。咁樣生成出嚟嘅頁面有統一感，之後改版都有依據，唔會每一頁都似唔同人整嘅。
之前好多人用 AGENTS.md 約束開發流程，而家再配一份 DESIGN.md，代碼層同設計層就都可以落到文本規範度。
實測落嚟，呢個思路的確有效。難點在於一個冇設計背景嘅人由零開始寫一份規範並唔容易。顏色系統、字體層級、組件樣式都要表達清楚，寫得太模糊就會直接影響生成質量。
Awesome DESIGN.md 嘅介紹
呢個項目將好多龍頭網站嘅設計規範整理好，開源之後增長好快，短時間就拎到 59000+ Star。
睇完之後我最大嘅感受係慳時間。因為佢參考咗 66 個頂級網站風格之後，整理成 DESIGN.md，你可以直接擺落項目度用。Notion、Linear、Figma 呢啲常見風格都揾到。覆蓋範圍亦好廣，AI 工具、開發者工具、設計工具、電商、金融、汽車都有相應參考。
每個站點除咗規範文件，仲提供咗 preview.html。可以先睇色板、字階、按鈕、卡片，再決定用唔用呢套風格。呢個細節好實用，少咗好多試錯。
點樣用
我用 Notion 風格整過一次小站，流程好順。可以先喺 GitHub 倉庫下載對應嘅 DESIGN.md 放喺項目根目錄，亦可以直接去 https://getdesign.md 揀模板。
安裝指令
npx getdesign@latest add notion喺 Claude Code 入面用
請參考項目根目錄下的 DESIGN.md 風格，幫我構建一個關於 Hermes Agent 介紹網站。我喺 Claude Code 就係直接咁樣落指令。生成之後如果有細節唔滿意，繼續對話微調就得，唔使再手動查色值同字重。
一啲諗法
今次實踐嘗試令我確定咗一件事。AI 寫代碼嘅能力已經冇得質疑，差距就喺規範輸入度。Awesome DESIGN.md 嘅意義唔只係一個資源庫，佢將設計規範從視覺稿推進到機器可讀嘅文本。
設計向文本轉型，呢個係 AI 編程嘅下一個關鍵節點。呢個方向我會持續關注，亦會繼續拎佢嚟做項目實驗。有興趣嘅朋友，歡迎大家一齊學習交流。
GitHub 項目地址：https://github.com/VoltAgent/awesome-design-md
如果呢篇文章對你有幫助，亦請幫手㩒個 贊👍 + 在看 啦！❤️關注小智AI指南公眾號，AI 路上唔會迷路
大家好，我是小智，專注 AI 工具、AI 智能體和編程提效
功能快界面很AI
這段時間我一直在用 Claude Code vibe coding小項目。功能做出來不難，有時候幾分鐘就能跑通。但開發出來的頁面總是差點意思。顏色普通，字體普通，排版也普通。
代碼沒有問題，就是觀感不夠好。後來發現，問題不在模型本身也不再提示詞，問題在設計信息沒有完整餵給 AI。
大家知道傳統的開發項目會配一個設計師，他會通過Figma 把規範標仔細。但是現在很多項目可能都是一個人做，設計這件事只能自己補位。最近在X上瀏覽帖子，Google Stitch 提出了一個全新的思路，核心就是把設計規範寫進 DESIGN.md。
DESIGN.md 的價值
我自己趕緊試了一下，DESIGN.md 的價值表現的確實很直觀。它把主色、字體、圓角、按鈕狀態、信息密度這些關鍵規則都寫在項目根目錄，讓 AI 讀取並執行。這樣生成出來的頁面有統一感，後續改版也有依據，不會每一頁都像不同人做的。
之前很多人用 AGENTS.md 約束開發流程，現在再配一份 DESIGN.md，代碼層和設計層就都能落到文本規範裏。
實測下來，這個思路確實有效。難點在於一個沒有設計背景的人從0到1寫一份規範並不輕鬆。顏色體系、字體層級、組件樣式都要表達清楚，寫得模糊就會直接影響生成質量。
Awesome DESIGN.md 的介紹
這個項目把很多頭部網站的設計規範做了整理，開源後增長很快，短時間就拿到了 59000+ Star。
看完後我的最大感受是省時間。因為它是參考了 66 個頂級網站風格之後，整理成了 DESIGN.md，你可以直接把它放到項目裏使用。Notion、Linear、Figma 這些常見風格都能找到。覆蓋範圍也很廣，AI 工具、開發者工具、設計工具、電商、金融、汽車都有對應參考。
每個站點除了規範文件，還提供了 preview.html。可以先看色板、字階、按鈕、卡片，再決定要不要用這套風格。這個細節很實用，少了很多試錯。
如何使用
我用 Notion 風格做過一次小站，流程很順。可以先在 GitHub 倉庫下載對應的 DESIGN.md 放到項目根目錄，也可以直接去 https://getdesign.md 選模板。
安裝命令
npx getdesign@latest add notion在 Claude Code 中使用
請參考項目根目錄下的 DESIGN.md 風格，幫我構建一個關於 Hermes Agent 介紹網站。我在 Claude Code 裏就是直接這樣下指令。生成後如果有細節不滿意，繼續對話微調就行，不用再手動查色值和字重。
一點思考
這次實踐嘗試讓我確定了一件事。AI 寫代碼的能力已不容置疑，差距就在規範輸入上。Awesome DESIGN.md 的意義不只是一個資源庫，它把設計規範從視覺稿推進到機器可讀文本。
設計向文本轉型，這是 AI 編程的下一個關鍵節點。這個方向我會持續關注，也會繼續拿它做項目實驗。感興趣的朋友，歡迎大家一起學習交流。
GitHub 項目地址：https://github.com/VoltAgent/awesome-design-md
如果本文對您有幫助，也請幫忙點個 贊👍 + 在看 哈！❤️關注小智AI指南公眾號，AI 路上不迷路