DESIGN.md：一份讓品牌說話的說明書——為什麼你的 repo 也該有一份
▲ DESIGN.md：把散落在腦中的設計決策，收進 repo 的根目錄
TL;DR：每個有網站的人都該寫一份 DESIGN.md——它是放在 repo 根目錄的純 Markdown 檔案，完整記錄你的色彩、字體、間距、動畫、品牌語氣與設計決策的為什麼。它不是設計師的專利。對創作者而言，它是半年後自己還看得懂的品牌說明書；對合作對象（外包、工程師、AI 助理）而言，它是避免搞砸風格的唯一真理源。我剛幫 vista.tw 寫了一份，這篇文章拆解它為什麼重要、長什麼樣、以及你該怎麼做一份屬於自己的。
你有網站，你有品牌意識，但你有設計說明書嗎？
先承認一件事——在昨天以前，vista.tw 的設計系統只存在三個地方：
- 我的腦袋裡
src/styles/global.css前面的一段註解：日系極簡 × 溫暖文青 × 雜誌質感CLAUDE.md裡零散的幾條規則：不要用深色主題、文章圖片要方角、批次不要寫成批量
這是一套隱性系統，可以運作，因為所有決策都長在同一顆腦袋裡。但一旦這個系統要被別人讀懂、被 AI 助理遵守、或被半年後忘事的自己重新理解，它就會崩潰。
問題不是我做得不夠好，而是我沒把它寫下來。
設計系統的本質不是一套視覺，而是一套被明文化的決策。你可以有絕美的視覺卻沒有系統；也可以有不張揚的視覺卻有很強的系統。差別在於——下一個人進來時，他能不能讀懂你當初為什麼那樣做？
什麼是 DESIGN.md
簡單說，它是放在 repo 根目錄的一份 Markdown 檔案，完整記錄你的視覺語言與設計決策。
它不是：
- ❌ Figma 檔（那是視覺源檔，不是說明書）
- ❌ Notion 頁面（容易跟程式碼脫節）
- ❌ Style guide PDF（靜態、過時、沒人讀）
它是：
- ✅ 跟程式碼一起版本化的純文字檔
- ✅ 跟 README.md 同層級的一級文件
- ✅ 人類可讀、AI 可讀、diff 可讀
- ✅ 有決策記錄（Decisions Log），看得見歷史
把它想像成一份品牌的法律條文——每一條規則都有理由，每個例外都被記錄，每次修改都留下時間戳。
為什麼你需要一份（三個真實情境）
情境一：半年後的你，想不起為什麼選這個紅色
你現在知道 #d13a3a 是你的品牌紅。但六個月後呢？兩年後呢？當你想做一個新的名片、一張海報、或一個延伸品牌時，你會不會開始懷疑，是不是換個稍微亮一點的紅更好？
沒有 DESIGN.md 的話，你會每次都重新做一次決定，而每次的決定都會稍微漂移，最後你的品牌變成一團模糊的、大概是紅色的東西。
有 DESIGN.md 的話，你打開文件看到：
--color-accent: #d13a3a— 品牌紅（連結、CTA、強調）Why：暖紙色背景上的書店紅，參考獨立出版與文青書店的視覺傳統。更亮會變成警示紅，更暗會失去溫度。
你就不會再糾結。
情境二：你找外包或合作對象，他做的東西完全不是你的風格
不是他偷懶，是他不知道你的風格。
所謂「我的風格」這種東西存在於你腦中，但對方只能從你的既有內容去逆向工程。他看到你上一篇文章用紅色 CTA，以為紅色就是隨便用；他看到你用襯線字，以為可以換成 Lobster（拜託不要）；他看到你留白，以為可以塞滿廣告。
DESIGN.md 是你給所有合作對象的合約書。你把所有隱性規則寫清楚，他照著做，你就不用一直跟他吵架。
情境三：AI 時代——你的 AI 助理需要知道你的品味
這是 2026 年最獨特、也最被低估的理由。
現在每個創作者的 stack 裡都有 Claude Code、Cursor、Lovable 或類似的 AI 助理。你請它幫你做新頁面、新元件、新 landing page 的時候，它會做什麼？
它會預設所謂常見的網站設計——紫色漸層、三欄 feature grid、置中一切、圓潤的按鈕、一堆表情符號。這就是 AI slop 的樣子。
除非你告訴它：讀 DESIGN.md 再動手。
我在 vista.tw 的 CLAUDE.md 裡加了這段：
Design System: Always read
DESIGN.mdbefore making any visual or UI decisions. All font choices, colors, spacing, and aesthetic direction are defined there. The authoritative source of tokens issrc/styles/global.css. Do not deviate without explicit user approval.
從此以後，每次 Claude Code 開始工作的第一件事，就是讀 DESIGN.md。它再也不會提議紫色漸層給我了。
這是用 AI 放大自己專業的關鍵技巧——你不是跟 AI 對抗它的預設值，而是把你的預設值寫清楚，讓它用你的標準來執行。
我的 DESIGN.md 長什麼樣
完整的檔案在 github.com/iamvista/vista-official-site/blob/main/DESIGN.md，有 396 行、18 個章節。重點不在長度，而在覆蓋面。我分享幾個關鍵段落：
Product Context（產品脈絡）
- 什麼是 vista.tw：Vista Cheng（鄭緯筌）的個人官方網站與數位基地，
累積 1,979+ 篇部落格文章、18,000+ 電子報訂閱者、200+ 場企業演講紀錄
- 目標讀者：繁體中文圈的知識工作者、創作者、內容行銷從業者
- 產品類型：個人品牌驅動的編輯型部落格 + 名單磁鐵 + 工作坊導流
- 空間/產業：內容創作 × AI 應用 × 個人品牌
- 多語系：繁體中文（主）、英文、日文三語並存這段很重要——它讓所有後續的設計決策有一個脈絡根。當你在做決定時，永遠可以回來問：這個決定服務的是哪一類讀者？這個決定符合編輯型部落格的產品類型嗎？
Aesthetic Direction（美學方向）
- 一句話方向：日系極簡 × 溫暖文青 × 雜誌質感
- 情緒：像一本厚實的紙本雜誌，不浮誇，不冷漠，有重量感，
讀起來安靜但不疏離
- 裝飾層級：intentional——以 typography 為主角
- 反模式（明確避開）：
- 深色主題（CLAUDE.md 明確禁止）
- 紫色、霓虹、彩虹漸層
- 圓潤卡通風（border-radius 保守）
- AI slop 的三欄圖示網格、置中一切、泡泡按鈕反模式是最有用的部分——直接告訴讀者不要做什麼，比告訴他要做什麼更能阻止風格漂移。你會驚訝於一條「不要做紫色漸層」的規則會救你多少次。
Color（色彩）
| Token | 值 | 用途 |
|--------------------|---------|---------------------|
| --color-bg | #f9f5f1 | 暖紙色背景 |
| --color-primary | #2c2c2c | 黑灰主文字 |
| --color-accent | #d13a3a | 品牌紅（連結、CTA） |
| --color-border | #e8e2da | 主邊框色 |每個色碼都有：
- Token 名稱（
--color-accent）——程式碼要用 token，不要直接寫 hex - 語意用途（連結、CTA、強調）——避免同一個紅被拿來當背景
- 對比檢核（我的文件裡還標註 WCAG 對比比例：
#2c2c2con#f9f5f1= 13.4:1）
Decisions Log（決策記錄）
這是我最推薦加的章節：
| 日期 | 決策 | 理由 |
|-------------|--------------------------------|-------------------------------|
| 2026-02-24 | 標籤正規化 1,104 → ~50 個 | AEO 主題叢集架構 |
| 2026-04-13 | 首頁重設計：三路分流 Hero | 降低認知負擔、區分讀者類型 |
| 2026-04-13 | Blog 內文字級從 18/17 → 19/18 | 中文長文舒適度 |一年後當你或合作對象問，為什麼要這樣做，你不用再去翻記憶，你翻決策記錄就好。
這也是為什麼 DESIGN.md 要跟 repo 一起版本化——每次改動都有 commit message，每次決策都有歷史。
怎麼做一份自己的（5 步驟）
步驟 1：找出你的 design tokens
打開你網站的主要 CSS 檔案，把所有寫死的色碼、字級、間距找出來。如果它們已經是 CSS variables（--color-accent: #d13a3a;）恭喜你省一步。如果還是 hex 散落各處，先花一個晚上把它們整理成 :root 的變數。
沒有系統就無法寫文件。DESIGN.md 是既存系統的鏡像，不是憑空發明。
步驟 2：寫 Product Context
不要跳過這步。五句話說清楚：
- 這個網站是什麼？
- 給誰看？
- 在哪個領域？
- 什麼類型（部落格／工具／電商／社群）？
- 任何語言／區域限制？
沒有脈絡的設計決策都是浮萍。
步驟 3：寫 Aesthetic Direction（包含反模式）
一句話說完你的美學方向——我的是「日系極簡 × 溫暖文青 × 雜誌質感」。然後列出至少三條明確不做的反模式。
反模式比正向規則更有效，它阻止了 90% 的風格漂移。
步驟 4：整理色彩、字體、間距 token 表格
用 Markdown 表格列出：
- Token 名稱（
--color-accent） - 值（
#d13a3a） - 用途（連結、CTA、強調）
- 可選：對比檢核、使用範例
字體的話寫出：字族名稱、載入策略（Google Fonts / fontsource / 本地）、字重、字級 scale。
間距的話寫出：base unit（通常 4px 或 8px）、完整的 scale、使用情境。
步驟 5：加一個 Decisions Log 並留空，讓它自然長大
不要試圖回頭補齊歷史。就從今天開始——每次做一個重要的設計決策，多花 30 秒在 Decisions Log 加一行。
一年後你會感謝自己。
讓 AI 幫你守護它
這是 2026 年最關鍵的一步——把 DESIGN.md 接進你的 AI 工作流。
對 Claude Code / Cursor 使用者
在你的 CLAUDE.md（或 .cursorrules、AGENTS.md）頂部加入：
## Design System
Always read `DESIGN.md` before making any visual or UI decisions.
All font choices, colors, spacing, and aesthetic direction are defined there.
Do not deviate without explicit user approval.
In QA mode, flag any code that doesn't match DESIGN.md.從此以後，每次 AI 開始工作都會先讀 DESIGN.md。你的時間從糾正 AI 預設值，變成一次寫清楚、終身守護。
對 ChatGPT / Claude 網頁版使用者
把 DESIGN.md 的內容貼進你的 Custom GPT / Project knowledge，或每次對話開頭貼一次。效果一樣。
對外包合作對象
把 DESIGN.md 連結丟進你的合作文件，請他們在動工前讀過並簽字確認。這會把你從風格審查員，變成品牌守護者——你不用一直改他的稿，你只要指向 DESIGN.md 的哪一條規則被違反。
為什麼這個時機特別重要
五年前，設計系統是大公司的奢侈品——只有 IBM Carbon、Material Design、Ant Design 這種規模的組織才會認真做。
三年前，它變成新創的基本配備——因為遠端工作讓口頭傳承失效。
2026 年，它變成每個創作者的生存武器——因為 AI 已經夠強，強到它會替你做 90% 的視覺決策。你不寫 DESIGN.md，它就用它的預設值幫你決定。
在 AI 時代，設計系統不是設計師的專利，而是任何想守住自己品味的人的必要裝備。
你可以今天就開始
不用做 Figma、不用請顧問、不用等完美時機。你只需要：
- 在你 repo 的根目錄開一個
DESIGN.md - 花一個小時寫 Product Context + Aesthetic Direction + 三個核心 token 表格
- 把它 commit 到 main
- 在你的
CLAUDE.md（或 AI 規則檔）加一句，讀 DESIGN.md - 下次改動時，更新 Decisions Log
這套流程的報酬率極高——一個小時換來一套永久守護你品牌的基礎設施。
我的 DESIGN.md 全文 就在 GitHub 上，免費拿去當模板。複製、修改、寫成你自己的。這正是 Markdown 的魅力——它不是專屬工具的資產，而是任何人都能打開、讀懂、改寫的文字。
把你腦中的設計決策，搬進 repo 的根目錄。讓未來的自己、合作對象、和 AI 助理，都能讀同一份說明書。
這就是 2026 年個人品牌的最低配。
延伸閱讀
- AI 時代的個人品牌完整指南：從定位、內容到變現
- 我用 AI 搭建一整條內容生產線：讓一篇文章自動變成六種產出
- Claude Code 不只是工程師的工具：五個讓知識工作者驚豔的實戰用法
- 當 AI 感文章滿天飛——你不是寫得不夠好，而是太容易被替代
