你有沒有試過，叫 AI 幫你做一個網站？第一次它給你藍色按鈕、圓角、無襯線字。你說「不錯，再加一頁關於我們」。結果第二頁變成綠色按鈕、直角、換了另一種字體。你只是想要同一個品牌，AI 卻像每次都失憶，重新發明一次設計。
這個讓人抓狂的問題，Google Labs 最近悄悄開源了一份東西來解決它，叫 DESIGN.md。短短幾天衝上 GitHub 趨勢日榜、星數破萬。它不是一個 App，也不是又一個 AI 工具，而是一份「給 AI 看的設計說明書」格式。今天這篇就把它講清楚：它是什麼、長什麼樣、怎麼用，以及對「想靠 AI 自己做點東西」的你有什麼用。
一句話結論：DESIGN.md 是 Google 開源、給 AI Agent 看的「設計系統規格檔」。把品牌的顏色、字體、間距寫成一份檔放進專案，ChatGPT、Claude、Cursor 這些 AI 做出來的畫面就會每次都照同一套風格，不再走樣。
（截至 2026 年 6 月，DESIGN.md 處於 alpha 階段，由 Google Labs 以 Apache 2.0 授權開源；版本與用法以官方 GitHub 為準。）
DESIGN.md 到底是什麼？
它是一份純文字檔，用來把「一個品牌長什麼樣」講給 AI 聽。官方的定義是：一份描述視覺識別、給編程 Agent 看的格式規格，讓 AI 對你的設計系統有「持久、結構化」的理解。翻成白話就是：以前你每次都要重新跟 AI 描述「我的網站要走深色、字用 Public Sans、主色是磚紅」，現在你寫一次，存成 DESIGN.md，丟進專案，AI 自己會讀。
這份檔分成兩層，這是它設計得聰明的地方：
- 上半部 YAML（機器讀的精確數值）：顏色、字體、圓角、間距、元件，全部用 token 寫死。例如
primary: "#1A1C1E"。AI 拿到的是精確值，不會自己亂猜色碼。 - 下半部 Markdown（人讀的設計理由）：用文字解釋「為什麼是這些值、該怎麼用」。例如「磚紅色 #B8422E 是唯一的互動驅動色，只用在按鈕和連結」。AI 不只知道色碼，還知道規矩。
數值負責「精準」，文字負責「分寸」。這兩層加起來，AI 才不會做出一個色碼對、但用得亂七八糟的畫面。
為什麼 Google 要做這個？它跟 AGENTS.md、CLAUDE.md 是親戚
如果你跟過 AI 編程的潮流，應該聽過 AGENTS.md 或 CLAUDE.md。那是放在專案裡、告訴 AI「這個專案怎麼跑、規矩是什麼」的說明檔。AI 進到你的資料夾，先讀這份，才知道該怎麼動手。
DESIGN.md 走的是同一條路，只是專管「長相」這一塊。一個負責「程式怎麼寫」，一個負責「畫面怎麼看」。Google 這份規格本來長在自家的 Stitch（AI 生 UI 的工具）裡，這次把它抽出來、開源出去，目的很明確：讓任何平台、任何 AI Agent 都能讀同一份設計檔。換句話說，你今天用 Claude 寫的 DESIGN.md，明天換去 Cursor、後天換去別的工具，品牌風格能一路帶著走，不用重講。
它想當的，是設計界的「通用語」。誰先變成標準，誰就掐住了 AI 做設計的入口。這也是它一開源就被圈內當大事討論的原因。
一份 DESIGN.md 長什麼樣？看一眼就懂
官方範例叫「Heritage」，走的是高級報紙＋畫廊那種沉穩風。下面是精簡版，你不用看懂每一行，抓個感覺就好：
---
name: Heritage
colors:
primary: "#1A1C1E" # 深墨色，標題與主文
secondary: "#6C7278" # 板岩灰，邊框、註解
tertiary: "#B8422E" # 磚紅，唯一的互動色
neutral: "#F7F5F2" # 暖石灰底，比純白柔
typography:
h1:
fontFamily: Public Sans
fontSize: 3rem
body-md:
fontFamily: Public Sans
fontSize: 1rem
rounded:
sm: 4px
spacing:
md: 16px
---
## Overview
建築式的極簡，配上報導式的份量感。整體像高級霧面紙質。
## Colors
這套色以高對比中性色為底，只搭一個重點色。
- **磚紅 (#B8422E)：** 唯一的互動驅動色，只用在按鈕與連結。
AI 讀完這份，做出來的就會是：深墨色標題、暖石灰背景、磚紅色按鈕。你不用再一句一句下指令，它照單全收。官方還訂了固定的段落順序（Overview、Colors、Typography、Layout、Elevation、Shapes、Components、Do’s and Don’ts），讓不同 AI 讀同一份檔時理解一致。
它實際怎麼幫到你？三個你會遇到的場景
講格式有點抽象，直接說場景。下面這三種，只要你有用 AI 做過東西，多半中過招：
- 場景一：自己「vibe coding」做個小網站。你用 Lovable、Bolt 或 Claude 一頁一頁生，做到第五頁發現風格全花了。有了 DESIGN.md，每一頁都讀同一份，風格自然鎖死。
- 場景二：接案幫客戶做。客戶給你一套品牌規範（色票、字體），你把它寫成 DESIGN.md，交給 AI 量產頁面，省掉每頁手動對色的功夫，交件也更專業。
- 場景三：多個工具來回切。今天用 A 工具切版、明天用 B 工具改文案，以前換工具就要重講風格，現在帶著同一份 DESIGN.md 走，到哪都認得你的品牌。
更狠的是，它附了一套命令列工具（npm 套件 @google/design.md），能幫你「驗收」這份設計檔。比方 lint 指令會自動檢查：有沒有引用了不存在的顏色、按鈕的文字和底色對比夠不夠（會直接幫你算 WCAG 無障礙對比值，例如白字配深底是 15.42:1，過關）。它把這些結果吐成 AI 看得懂的 JSON，等於連「設計品管」都自動化了。
DESIGN.md、直接打 prompt、Figma 設計稿，差在哪？
差在「AI 能不能每次都照做」。下面這張表一眼看完：
| 做法 | 一致性 | 給 AI 用順不順 | 上手難度 | 適合誰 |
|---|---|---|---|---|
| 每次打 prompt 描述 | 低（每次都會飄） | 要一直重講 | 零門檻 | 一次性、隨手試 |
| DESIGN.md | 高（寫一次鎖死） | 原生支援，AI 直接讀 | 低～中 | 有品牌、要量產頁面 |
| Figma 設計稿 | 高（但在設計檔裡） | AI 不一定讀得到 | 中～高 | 專業設計團隊 |
看出來了嗎？DESIGN.md 卡的位置很巧：它有 Figma 那種「規範一致」的好處，但又是純文字、AI 直接讀得懂，不像 Figma 設計稿那樣 AI 還要靠外掛猜。對非設計科班、但要靠 AI 量產畫面的人，這個位置剛剛好。
不會寫程式，也能用 DESIGN.md 嗎？怎麼開始？
能，而且比你想的簡單。你不用會手寫 YAML，三步就能上路：
- 讓 AI 幫你生第一版。直接跟 Claude 或 ChatGPT 說：「幫我照 Google 的 DESIGN.md 格式，做一份設計檔，品牌走暖色調、字體現代一點。」它會把整份 YAML＋文字一次寫好。你連格式都不用記。
- 放進你的專案資料夾。把這份存成
DESIGN.md，放在專案根目錄，跟 AGENTS.md 或 README 放一起。之後 AI 動手前會自己讀。 - 用一行指令檢查。在終端機打
npx @google/design.md lint DESIGN.md，它會幫你抓錯、檢查顏色對比。看不懂結果也沒關係，把它丟回給 AI，請它照建議修。
老實說一句：DESIGN.md 預設的使用情境，是「你正在用 AI 做某個專案」。如果你只是偶爾跟 ChatGPT 聊聊、生張圖，那用不上。它真正的甜蜜點，是當你開始「認真用 AI 做出可以交付的東西」——網站、App、作品集——那一刻。
30 秒自測：你現在需要寫一份 DESIGN.md 嗎？
勾選符合你的狀況，看看值不值得花十分鐘寫一份：
對想靠 AI 接案、做副業的人，這意味什麼？
這才是我覺得最該講的一段。DESIGN.md 表面是工程師玩具，底層其實是一個變現槓桿。
過去「幫人做網站」這門副業，卡點在交付速度和一致性——你手快，但一頁一頁對色很慢；你用 AI 量產，但風格會花，客戶嫌不專業。DESIGN.md 等於把「品牌規範」變成 AI 能直接吃的燃料：客戶給你色票，你十分鐘寫成一份設計檔，AI 幫你把十頁、二十頁一次拉齊，每一頁都對得上品牌。同樣的時間，你能接的單變多、交付看起來更像一間正規工作室。
把 AI 工具接到「能交付、能收錢」的出口，一直是普通人用 AI 最該想的事。DESIGN.md 剛好補上「做出來的東西夠專業」這一塊。這也是為什麼，會用它的人和只會打 prompt 的人，產出的質感會慢慢拉開。
我會怎麼用？不同人的選法對照
- 純新手、還在玩：先別碰，把 AI 工具本身用熟。等你做出第一個想留下來的專案，再回來寫。
- 會用 AI 做網站／作品集：強烈建議寫一份。讓 AI 生、你微調，半天就能把風格一致性這個老問題解決掉。
- 接案、做客戶專案：當成標準流程。每個客戶一份 DESIGN.md，是效率，也是專業度的證明。
- 設計／工程團隊：當成跟 Figma、Design Token 並存的「給 AI 的那一份」，用
export還能轉成 Tailwind 設定，接回現有流程。
如果不用 DESIGN.md，還有什麼替代方案？
有，看你的情況：
- 只是隨手試：就直接在 prompt 裡寫清楚風格，省事。一致性差一點，但你也不在乎。
- 已經用 Figma：可以用 Figma 的 Design Tokens 外掛，把 token 匯出再餵 AI，只是中間多一道工。
- 想要中立標準：W3C 有一套 Design Tokens 格式（DTCG）。DESIGN.md 其實也支援匯出成這個格式，兩者不衝突——你可以把 DESIGN.md 當成「對 AI 更友善的包裝」。
一個提醒：DESIGN.md 現在是 alpha 版，格式和指令都還會變。它星數衝得快、Google 出品、定位清楚，看起來很有機會變成標準，但「會不會真的變成標準」這件事，現在下定論還太早。值得學、值得試，但別把整套生產流程壓在一個 alpha 規格上。
常見問題 FAQ
Q：DESIGN.md 要錢嗎？
免費，Apache 2.0 開源授權，命令列工具也是免費的 npm 套件，商用也可以。
Q：我一定要會寫程式才能用嗎？
不用會寫程式。你可以請 AI 幫你生整份 DESIGN.md，檢查也只是一行 npx 指令。唯一的前提是你正在用 AI 做某個專案。
Q：它跟 AGENTS.md、CLAUDE.md 有什麼不同？
定位一樣（都是放進專案、給 AI 讀的說明檔），管的東西不同：AGENTS.md／CLAUDE.md 管「程式怎麼寫」，DESIGN.md 管「畫面長什麼樣」。可以並存。
Q：ChatGPT、Claude 現在就讀得懂 DESIGN.md 嗎？
因為它本質是純文字（YAML＋Markdown），任何 AI 都讀得進去。只是「會不會主動照做」要看工具有沒有針對它做支援；保險做法是把這份檔的內容也貼進你的指令裡。
新手行動清單（照做就能上手）
- ☐ 想清楚你的品牌三件事：主色、字體、整體調性（深色還是淺色、現代還是復古）。
- ☐ 跟 AI 說「照 Google DESIGN.md 格式，幫我做一份設計檔」，把上面三件事餵給它。
- ☐ 把產出存成
DESIGN.md，放進專案根目錄。 - ☐ 跑
npx @google/design.md lint DESIGN.md檢查，有錯就丟回給 AI 修。 - ☐ 之後叫 AI 做任何頁面，先提醒它「照 DESIGN.md」，比對前後風格有沒有一致。
延伸閱讀：如果你想看「把 AI 變成一整支專業團隊」的更進階玩法，可以看這篇 用 Claude Code 組一個四大師投研團隊，思路跟 DESIGN.md 一脈相承——都是把「規矩」寫成 AI 能直接吃的檔。
想第一手追 AI 工具與這類「省下時間、換成出路」的實戰打法，歡迎追蹤 slash-invest.com，我會把好用、能變現的新東西持續拆給你看。
利益揭露：本文不含任何贊助，DESIGN.md 為 Google Labs 開源專案，與本站無商業關係。文中工具版本與功能截至 2026 年 6 月，AI 工具更新極快，實際以官方 GitHub（github.com/google-labs-code/design.md）為準。本文為資訊整理與個人觀點，不構成任何投資或商業建議。
發表迴響