AI-translated from English; not yet reviewed by a fluent editor.
# 為 Claude Code 建立經擁有者核准的 DESIGN.md
> 依據核准的品牌決策撰寫視覺規格，用它指導 Claude Code 完成兩項小範圍修改，並檢查差異與算繪結果。
By BIG CHANGE Editorial
Published: 2026-10-20T01:05:55.739Z
Updated: 2026-10-20T01:05:55.739Z
Canonical: https://bigchange.ai/blog/claude-code-owner-approved-design-md-guide
AI-generated conceptual illustration by BIG CHANGE.
AI 程式開發代理能否遵循視覺參考，取決於參考中的決策是否明確。如果你擁有專案，而且已有核准的品牌規則，可以將規則寫入一份可供檢閱的 `DESIGN.md` 檔案，再讓 Claude Code 做兩項小修改，由你親自檢查。交付成果是你核准的規格。這兩次修改只能檢驗規格對這兩個特定作品是否有用，不能確定未來修改的結果。
這是根據文件編寫的流程。BIG CHANGE 於 2026 年 10 月 20 日檢閱了固定版本的設計檔案集合及 Anthropic 的 Claude Code 手冊。我們沒有執行 Claude Code、修改或算繪兩個作品，也沒有測量成本或設計品質。
## 關鍵變化
- **改變了什麼：** 擁有者可依據核准的決策撰寫有版本的視覺規格，在一次有界限的修改之前，將這份確切檔案交給 Claude Code。
- **為何重要：** 一份經過核對的統一來源，讓色彩、字體與版面規則可用於比對兩個實際修訂版本；擁有者仍需判斷各項結果是否可以接受。
- **需要留意：** 每次修改前都必須完整讀取檔案。檔案出現在專案中、提到路徑，或 Claude 聲稱讀過，都不能證明檔案已載入或規則已獲遵循。
## 開始前的準備
你需要擁有該專案、獲准修改它、準備兩個可算繪的小型現有作品，以及一份可復原的工作副本或版本控制檢查點。作品可以是兩個頁面，或一個頁面與一份簡報，前提是你了解各專案實際的編輯與算繪流程。分別選定一項有限的視覺修改。保留目前文案、連結及正常運作的互動，以便比較。
收集擁有者核准的色彩值**及其用途**、取得授權或獲准使用的字體與替代字體、標誌和圖片使用規則、目標受眾、尺寸及無障礙需求。使用真實的核准紀錄，或請擁有者處理尚未決定的選項。企業公開網站或其他人的設計分析，並不授權你在專案中使用相關值或素材。擁有者核准素材，也不自動代表允許將它傳送給模型供應商。
使用符合條件的帳號或供應商設定 [Claude Code](https://code.claude.com/docs/en/quickstart)，並在揭露私有程式碼、文案或素材前，檢閱帳號的[資料使用條款](https://code.claude.com/docs/en/data-usage)及[工具權限](https://code.claude.com/docs/en/permissions)。存放在本機的專案仍可能將內容傳送到模型服務。確認誰能看到材料、哪些工具可讀取或修改檔案，以及你是否有權提交各項材料。[費用說明](https://code.claude.com/docs/en/costs)依帳號與供應商而定；本指南無法為你的工作階段訂出固定價格。
可將[固定版本的 Awesome DESIGN.md 集合](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md)作為規劃檔案章節的選用靈感。它分析公開網站，不是擁有者核准的品牌手冊。你可直接依核准決策撰寫檔案。如果複製儲存庫文字，請保留其[MIT 著作權及許可聲明](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE)。該聲明並未授予其他網站商標、字體檔或圖片的權利。
## 製作經擁有者核准的參考檔案
1. 在自有專案中建立 `brand-reference/DESIGN.md`。依核准紀錄填寫這個最小架構。方括號中的文字標示擁有者必須提供的資訊，並非建議品牌。擁有者決定之前，將未決項目繼續標為 `UNRESOLVED`。不要要求 Claude 編造數值來填補缺項。
```markdown
# Visual specification
Owner: [owner or approving role]
Approved version/date: [version and approval date, or UNRESOLVED]
Audience and artifact purpose: [owner-approved description]
Approval evidence: [internal record or location, without private data in a shared copy]
## Color roles and values
- Background: [approved value and color format, or UNRESOLVED]
- Text: [approved value and color format, or UNRESOLVED]
- Primary action: [approved value and color format, or UNRESOLVED]
- Link, border and status roles: [each approved value, or UNRESOLVED]
## Typography and scale
- Heading family and permitted fallback: [approved names, or UNRESOLVED]
- Body family and permitted fallback: [approved names, or UNRESOLVED]
- Heading/body sizes, weights and line heights: [approved scale, or UNRESOLVED]
- Font license or use restriction: [approved terms, or UNRESOLVED]
## Spacing and layout
- Spacing scale, content width and grid: [approved values, or UNRESOLVED]
- Target artifact dimensions: [approved sizes, or UNRESOLVED]
## Components and states
- Buttons, links, inputs and navigation: [approved appearance and behavior]
- Hover, focus, disabled and error states: [approved rules, or UNRESOLVED]
## Responsive and accessibility rules
- Desktop/phone behavior and breakpoints: [approved rules, or UNRESOLVED]
- Contrast, readable type, focus order and touch use: [approved requirements]
## Assets and forbidden substitutions
- Permitted logo/image assets and usage: [approved paths and permissions]
- Do not substitute: [owner-approved prohibited colors, fonts, marks or patterns]
## Owner approval and changes
- Approved by: [person or role and date, or UNRESOLVED]
- Version: [version]
- Changelog: [date, change, approver]
- Unresolved decisions: [list, or "none" after owner review]
```
2. 將填入的每一行與擁有者的原始決策核對，包括字體與圖片的使用權。專案舊樣式若與目前核准規則衝突，應與擁有者解決。請擁有者核准這份確切檔案，並記錄版本。暫緩任何依賴未決值的修改。將核准檔案與兩個起始作品存入版本控制或其他可復原副本。
## 用檔案指導兩項有界限的修改
3. 在自有專案中，使用核查過的帳號與權限啟動 Claude Code 工作階段。提供 `brand-reference/DESIGN.md` 與第一個作品的精確路徑。先要求 Claude **完整**讀取參考檔與作品，然後停止，不進行修改。檢查實際的檔案讀取或工具結果，確認路徑正確且內容完整。讀取遭拒、結果截斷、只提及路徑或口頭摘要都不足夠。Anthropic 將[專案指令檔](https://code.claude.com/docs/en/memory)視為個別的設定選項；不要假設任意 `DESIGN.md` 都會被自動發現，也不要依賴 `@` 參照在不同版本中的表現相同。
4. 看到完整讀取結果後，要求只依核准規則對第一個作品進行選定的那一項視覺修改。限制涉及的檔案；保留文案、連結、控制項及無關程式碼。要求查看擬議差異，以及專案既有的算繪方式。接受前檢查每個已修改檔案。拒絕未核准的色彩、字體、素材、相依項目或額外修改。
5. 使用第一個作品的**實際專案流程**進行算繪。以適合專案的桌面及手機尺寸，將輸出與核准檔案及起始作品比較。檢查已修改檔案中的設計令牌值、可讀的對比、標題與字體層級、裁切或水平溢位、可見焦點、鍵盤及受影響互動，以及文案與連結是否維持不變。記錄參考版本、作品修訂版、檢查及修正。對算繪的文字描述不是算繪結果。
6. 對第二個作品，再次提供其精確路徑與 `brand-reference/DESIGN.md`。要求在**修改前**重新完整讀取，並檢查讀取的工具結果。接著要求一項有限修改、檢閱差異、用第二個作品自身的流程算繪，並重做相同檢查。將兩個修訂版與**同一份核准檔案版本**比較。將每項規則記錄為已遵循、未遵循或需要擁有者核准修訂；修復偏差，若參考檔改變，便重新檢查兩個作品。
完成標準是：取得擁有者核准且有版本的規格、兩個已檢查並算繪的修訂版，以及一份規則符合或遺漏的簡短紀錄。保留原始修訂版以便還原。讀取失敗時，先檢查精確路徑、權限、檔案大小或截斷情形，再要求修改。如果規格與專案樣式或無障礙需求衝突，先取得擁有者的決定並縮小修改範圍。如果作品無法算繪或互動無法檢查，在可檢查之前不要接受修改。日後品牌改變，必須主動重新檢閱先前的輸出。
關於將社群檔案用作單一頁面參考的另一項任務，請參閱[我們的固定版本 DESIGN.md 指南](https://bigchange.ai/blog/claude-code-pinned-design-reference-page-guide)。本指南的工作首先是建立並核准你自己的規格。
## 來源及延伸閱讀
- 這份[固定版本的 Awesome DESIGN.md README](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md)提供範例章節，並將檔案描述為以原樣提供的公開網站分析。其關於輸出品質的說法，不是我們在此測試的結果。[MIT 授權條款](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE)規範複製的儲存庫材料，而不是第三方的識別或素材。
- Anthropic 的[快速入門](https://code.claude.com/docs/en/quickstart)涵蓋帳號與專案設定。其[常見工作流程](https://code.claude.com/docs/en/common-workflows)與[專案記憶手冊](https://code.claude.com/docs/en/memory)介紹檔案及指令流程；兩者都不能證明這個獨立檔案在讀者工作階段中獲得完整讀取。
- Anthropic 的[權限](https://code.claude.com/docs/en/permissions)、[資料使用](https://code.claude.com/docs/en/data-usage)與[費用](https://code.claude.com/docs/en/costs)手冊解釋控制措施及依帳號而異的條款。它們不能證明本指南中觀察到修改、純本機處理、固定帳單或品質提升。
## Sources
- [固定版本的 Awesome DESIGN.md README](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) — 固定版本的社群集合及設計參考章節範例。它分析公開網站並以原樣提供檔案；關於輸出品質和即用性的宣傳，不構成此擁有者成果或核准所展示品牌的證據。核准的選題准入資料中保存完整的私有來源快照及獨立查證。
- [Awesome DESIGN.md MIT 授權條款](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) — 複製儲存庫文字或重要部分時，必須保留固定版本的著作權及許可聲明。它本身並未授予所展示網站的名稱、商標、標誌、專有字體或圖片的權利。
- [Claude Code 快速入門](https://code.claude.com/docs/en/quickstart) — 官方帳號或供應商、登入與專案的必要條件。BIG CHANGE 未為本指南測試安裝、存取或 Claude 工作階段。
- [Claude Code 常見工作流程](https://code.claude.com/docs/en/common-workflows) — 官方專案檔案與修改檢閱流程。本指南要求對每個作品觀察完整讀取及實際差異，而非依賴隨版本變動的檔案參照簡寫。
- [Claude Code 專案記憶](https://code.claude.com/docs/en/memory) — 將專案指令及選用匯入視為設定介紹。不能證明獨立的 brand-reference/DESIGN.md 會自動載入，也不能證明讀者的任何修改遵循它。
- [Claude Code 權限](https://code.claude.com/docs/en/permissions) — 官方工具權限控制。擁有者對品牌內容的核准、給 Claude 的提示指令，與實際檔案或工具權限，以及提交私有材料的許可是不同事項。
- [Claude Code 資料使用](https://code.claude.com/docs/en/data-usage) — 處理與保留方式依帳號和供應商而異。本機專案不能證明模型工作階段只在本機執行；提供私有內容前，讀者必須確認權利。
- [Claude Code 費用](https://code.claude.com/docs/en/costs) — 官方依帳號和供應商區分的使用及計費說明。本流程未測量固定價格、免費額度、節省時間或任務成本。
- [BIG CHANGE：在 Claude Code 中為單一頁面使用固定版本的 DESIGN.md 參考](https://bigchange.ai/blog/claude-code-pinned-design-reference-page-guide) — 相關背景報導，介紹將固定版本的社群參考套用至現有頁面。它不撰寫擁有者專屬的核准規格，不是本指南新增步驟的來源，也不是「In this story」中的後續發展。