awesome-design-md 教學：換一份風格檔，AI 網頁會改變哪些地方？

awesome-design-md 是一個社群整理的風格檔資料庫。把檔案交給 AI，可以提供比「做得高級一點」更具體的顏色、字體與元件參考。

但同樣叫 DESIGN.md，內容與整理者可能不同。因此，使用前要看清它描述的風格，再檢查產生的頁面有沒有跟著改變。

AI 郵報 11 月 14 日以同一份虛構 App 需求，做了三組各五頁的比較。換不同風格檔之後，背景與主按鈕採用了不同的指定色碼。

這個結果說明風格參考能影響這批輸出，無法證明 AI 已理解品牌，也無法代表所有模型都會如此。對想改善介面溝通的人，它適合當作起點，之後仍要依自己的產品修改與驗收。

awesome-design-md 是什麼？先看它由誰整理

VoltAgent 的專案收集從公開網站整理的設計描述。內容涵蓋色彩、字體、元件、版面與回應不同螢幕寬度的行為。

這些是 VoltAgent 從公開網站整理的社群分析，並非各品牌官方提供的設計規範。倉庫的授權說明也表明，整理者不主張擁有各網站的視覺識別。

所以，適合借用的是描述視覺的方式。例如把主背景、行動按鈕與文字層級說清楚，再轉成自己產品的需求，無須直接複製整個品牌外觀。

專案採 MIT 授權，這說明檔案的使用條件，不會連帶把第三方品牌商標或專有字型授權給你。商業作品仍須確認自己使用的素材與字體。

和 Google DESIGN.md 的差別，怎麼理解？

一個偏向可挑選的風格參考，另一個提供設計描述的格式與檢查工具。兩者可以放在同一個工作流程，但用途不能互相替代。

風格參考回答「想朝哪個方向做」。格式檢查則回答「檔案是否符合這套規格、引用或部分顏色配對是否有問題」。

即使參考檔有清楚的顏色和文字，也應先用工具檢查，才知道能否放進原本的工程流程。不能只因檔名相同，就推定會通過所有規則。

對實際畫面，還需要另一層驗收。像長標題、手機換行與按鈕狀態，必須把內容放進頁面，才知道參考是否適合。

十五張頁面實驗，換檔之後改了什麼？

這次比較集中在背景、主要行動按鈕與標題宣告字體，沒有評分整體美感。任務是同一個虛構 App「水滴日記」，分成不給檔、給 A 檔、給 B 檔三組。

每組五份，由不同子代理各產生一頁。模型名稱由子代理自報為 Sonnet 5.5，沒有獨立驗證模型身分。

A 檔來自社群整理的 Oura 分析，指定暖奶油背景與藍色行動按鈕。B 檔來自 Spotify 分析，指定近黑背景與綠色行動按鈕。

以下依同一份量測表整理，但按鈕選取方式在檢視後曾修正，限制會接著說明。

給檔的兩組都採用檔案裡的指定色碼。因此，在這組樣本中，具體數值確實改變了輸出方向，無須只用「看起來比較像」來形容。

原先預期不給檔的顏色會分散，卻沒有出現。五頁的按鈕仍集中在藍色附近，這項觀察只限這次需求，不能擴大成所有 AI 網頁的通則。

哪些量測限制，需要和結果一起看？

按鈕的定義在事後改過，因為最初抓的是首屏第一個有實色背景的連結或按鈕，實際選到了導覽列的次要按鈕。這也讓前後兩種量法回答了不同的問題。

檢視後，改成量首屏最大的下載行動按鈕，原表保留兩套欄位。主要按鈕色碼一致，是依修正後定義得到的結果，不能說所有按鈕都變成相同顏色。

字體也只能量到程式宣告的字型清單。因為實驗禁止載入外部字體，所以即使 A 組都宣告襯線字體，也無法據此保證實際顯示了品牌專有字型。

這次也沒有量測間距、字級和所有版面細節，沒有安排使用者操作測試。十五頁在 390px 沒有橫向溢出，仍不能代替完整的手機版驗收。

把這些限制保留下來，才知道結果支持的是「指定數值被採用」，而非更大的品牌理解或使用體驗結論。

怎麼把風格檔改成自己的需求？

先從倉庫的 design-md 目錄選一份檔案，複製到自己的專案根目錄，保留檔名 DESIGN.md。接著明確告訴 AI 使用這份檔案，讓它知道這次要參考的依據。

接著挑出和產品任務有關的決定，例如背景需要安靜、主要按鈕容易辨識，或標題要有明確層級，再把色碼與字體改成自己可用的資產。

如果產品是管理工具，卻選了一份以大型攝影為主的行銷風格，應先刪掉不適用的段落。否則 AI 可能照著做出好看的首頁，卻沒有解決使用者處理資料的工作。

接著只做一個頁面，檢查長文字、錯誤訊息和手機寬度。修改後再回頭更新規則，讓檔案反映已採用的設計，方便下次繼續使用。

只先試一頁，是為了確認這份參考能否支援產品的工作。確定方向合適，再擴展到其他頁面，會比較容易保持一致。

常見問題

awesome-design-md 的內容是品牌官方文件嗎？

不是。倉庫把它定位為從公開網站整理的設計分析，不能把參考檔當成品牌背書。

MIT 授權代表可以直接用品牌 logo 和字體嗎？

不能這樣延伸。檔案授權與第三方商標、字型權利要分開確認，應使用自己有權使用的資產。

顏色一致，就代表介面好用嗎？

不代表。這次比較主要量指定數值是否被採用，沒有完整驗證使用者能否完成任務，也沒有替所有版面品質評分。

先借描述方法，再留下自己的設計決定

如果常覺得給 AI 的視覺需求太抽象，可以挑一份參考，看看它如何描述顏色角色與元件，再寫成自己產品真正需要的規則。先試一頁並保留修改前後，會更容易看見幫助在哪裡。

需要把規則接到檢查流程，可以再看 Google 的格式工具。若還不確定怎麼提供動態與互動參考，則先把驗收對象描述清楚。

延伸閱讀：Google 分享三種 Markdown 分工：AGENTS.md、DESIGN.md、SKILL.md 怎麼寫？

延伸閱讀：AI 設計參考怎麼給？從靜態截圖、動態影片到互動狀態的驗收清單

資料來源

• VoltAgent：awesome-design-md 倉庫
• VoltAgent：MIT 授權條件
• 本站 2026 年 11 月 14 日虛構 App 三組實驗，每組五頁。