AI 做的網站都長一樣？放一份 DESIGN.md，Claude Code 就能換品牌風格

02DESIGN.md 是什麼？裡面寫了什麼

DESIGN.md 是一個純文字（Markdown）檔，用來告訴 AI「這個專案長什麼樣子」。這個格式是 Google Stitch 提出來的。GitHub 專案 awesome-design-md 的 README 說得很白：不需要 Figma 匯出、不需要特殊工具，丟進專案根目錄，AI 就看得懂。

每份檔案照同一個結構寫，README 列出 9 個部分：

1. 視覺主題與氛圍（整體感覺、留白多寡）
2. 顏色與用途（名稱、色碼、用在哪裡）
3. 字型規則（字體、大小層級）
4. 元件樣式（按鈕、卡片、輸入框、導覽列）
5. 版面原則（間距、格線、留白）
6. 陰影與層次
7. 該做與不該做（Do's and Don'ts）
8. 響應式設計（不同螢幕怎麼變）
9. 給 AI 的提示指南（色碼速查、可直接用的 prompt）

我最喜歡的是「不該做什麼」那一段。AI 最容易亂加東西，把禁忌寫清楚，它就比較不會亂來。以 Apple 那份來說，裡面寫的是：不要加第二個強調色、卡片和按鈕不要加陰影、不要用漸層當背景。

03步驟 1：挑一個品牌

1. 打開 github.com/VoltAgent/awesome-design-md。
2. 點進 design-md 資料夾，裡面每個品牌是一個資料夾，例如 apple、notion、starbucks、stripe、vercel、claude。
3. 點進你要的品牌，裡面有 DESIGN.md。
4. 想先看風格，也可以去 getdesign.md，每個品牌有一頁（例如 getdesign.md/apple/design-md），附預覽。

我查證的時候，資料夾總共 84 個品牌（2026 年 10 月 20 日）。getdesign.md 首頁寫的 550+ 是它的整個網站目錄，旁邊有付費方案，所以這篇我只說免費 GitHub 版的 84 個。

04步驟 2：放進專案資料夾（兩種方法）

方法 A：手動。在 GitHub 打開品牌的 DESIGN.md，按右上角的 Raw 或下載鈕存檔，然後放進你的專案資料夾最外層（根目錄）。

方法 B：一行指令。在專案資料夾的終端機裡輸入下面這行，它會把 Apple 的 DESIGN.md 放進來。想要別的品牌，把最後的 apple 換掉。需要先裝好 Node.js，因為 npx 是跟 Node.js 一起來的。

npx getdesign@latest add apple

05步驟 3：跟 Claude Code 說那句話

檔案放好之後，打開 Claude Code，跟它說一句話。影片裡的原版很短：

照著 DESIGN.md 設計這一頁

想要更穩，可以用下面這個加長版。多寫要做的頁面和存檔位置，Claude 比較不會猜。［］換成你的情況。

請先讀專案根目錄的 DESIGN.md，照裡面的顏色、字型、間距和 Don't 規則，設計［要做的頁面，例如：記帳 App 的產品首頁］。
存成［檔名，例如：index.html］，用［純 HTML + CSS／你的專案框架］。
不要用 DESIGN.md 沒有列出的顏色。完成後，列出你用了哪些顏色和字型。

我們實驗用的 prompt 長這樣，你可以改成自己的產品。前半段每一版都一樣，只有最後一句是有 DESIGN.md 的版本才多的。

幫我做一個［產品類型，例如：記帳 App］「［品牌名稱］」的產品首頁，存成這個資料夾裡的單一檔案 index.html（HTML + CSS 寫在同一個檔案，不要外部圖片、不要外部字型、不要 JavaScript 框架）。內容用繁體中文：導覽列、主標「［你的主標語］」、副標、下載按鈕、一個用 CSS 畫的手機畫面、三個功能區塊、使用者評價、頁尾。

請照著這個資料夾裡的 DESIGN.md 設計。

06步驟 4：想換風格？換一份檔案

這是我覺得最好玩的地方。同一個專案，把資料夾裡的 DESIGN.md 換成另一個品牌的，再請 Claude Code 重做一次，整頁風格就跟著換。

1. 把專案裡的 DESIGN.md 換成另一個品牌的（手動覆蓋，或用 npx getdesign@latest add 加另一個品牌名）。
2. 跟 Claude Code 說下面那句。
3. 把新舊兩版放在一起比較，看你喜歡哪個。

DESIGN.md 已經換成［品牌名稱，例如：Notion］的了。請照新的 DESIGN.md，把［頁面檔名，例如：index.html］重新設計一次，內容和文字不要改，只改視覺風格。

07要注意

1. 只參考風格，別直接用別人的 logo 和商標。DESIGN.md 只是「怎麼設計」的紀錄，裡面不含品牌授權。專案 README 也寫明這些是從公開網站整理出來的，不主張那些網站視覺的所有權，getdesign.md 的頁面也註明和 Apple 沒有關係。
2. 做出來的網站要用在自己的品牌上，就換成你自己的顏色、字型和 logo，不要整份照搬。
3. 每次結果不會完全一樣。同一份 DESIGN.md、同一句話，跑兩次可能有些細節不同，不滿意就補一句修改要求。
4. 檔案很長（Apple 那份 562 行、約 36 KB）。檔案在，Claude 就會把它帶進對話，所以只放一份你要的，不要把 84 份全丟進去。
5. 影片裡的「存好」是虛構的示範品牌，終端機、換風格那幾個畫面是我們做的示意動畫。網頁截圖則是 Claude Code 實際做出來的結果。
6. 品牌數量、指令和網址會變。我是在 2026 年 10 月 20 日查證的，之後以 GitHub 和 getdesign.md 上的為準。