Markdown 版本

AI-translated from English; not yet reviewed by a fluent editor.

# 在 Claude Code 中用固定版本的 DESIGN.md 參考修改單一頁面

> 選定一個固定版本的 DESIGN.md 檔案，交給 Claude Code 修改你有權編輯的頁面，再檢查程式碼及桌機和手機的實際呈現。

By BIG CHANGE Editorial

Published: 2026-10-20T00:01:06.937Z
Updated: 2026-10-20T00:01:06.937Z
Canonical: https://bigchange.ai/blog/claude-code-pinned-design-reference-page-guide

![Conceptual charcoal illustration of one clipped design-reference sheet beside an unbranded display showing a simple webpage layout.](https://bigchange.ai/api/media/file/pinned-design-reference-one-page-hero-v1.png)
AI-generated conceptual illustration by BIG CHANGE; no Claude Code run, Notion or edited and tested page is depicted.

既有頁面讓你清楚哪些地方要改善、哪些內容要保留。VoltAgent 的[Awesome DESIGN.md 合集](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md)提供公開網站的純文字分析，可作為 AI 程式代理的參考。本指南選用儲存庫 2026 年 10 月 14 日提交中的一個檔案，為範圍明確的 Claude Code 修改提供視覺參考。只有親自檢查變更後的程式碼及實際頁面，才能確認成果。

BIG CHANGE 查閱了固定版本儲存庫和 Claude Code 文件。我們沒有執行 Claude Code、編輯頁面、計時或檢查生成結果。該版本的目錄樹直接包含 84 個`design-md/*/DESIGN.md`檔案；這個數量只對應該提交，不代表永久的目錄規模。

## 重大變化

- **改變了什麼：** 一份鎖定特定版本的設計分析，可作為明確的上下文，用於修改一個獲准編輯的頁面。
- **為何重要：** 頁面負責人可以借鏡有用的版面或間距想法，同時依頁面實際內容、品牌識別和行為檢查成果。
- **需要留意：** 參考出自社群分析，其中品牌細節甚至部分內部指令可能錯誤，或不適合你的頁面。

## 開始之前

你需要有權修改的頁面及儲存庫、工作副本或分支、本機呈現頁面的方法，以及透過合資格帳戶或服務供應商使用[Claude Code](https://code.claude.com/docs/en/quickstart)的權限。確認要修改的頁面檔案，以及專案平常啟動和檢查該頁面的方法。寫下目標讀者、必要文案和連結、核准色彩、字型與標誌，以及本次唯一要解決的視覺問題。將這些負責人的決定放在工作副本旁，以便評估修改建議。

提供客戶私密資料前，請檢查帳戶的[資料政策](https://code.claude.com/docs/en/data-usage)與[工具權限](https://code.claude.com/docs/en/permissions)。Claude Code 依帳戶條款處理提示及專案內容；專案位於本機並不表示模型工作階段完全在本機執行。確認你有權分享這項任務可能揭露的私密文案、資源或程式碼。

## 一個頁面使用一份參考

1. 開啟[固定版本合集的 README](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md)。選擇一個`design-md/<name>/DESIGN.md`，其中想法應切合已定義的頁面問題。使用前讀完整份檔案。[Notion 範例](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md)展示格式：版面、字型、間距和元件建議。它同時描述膠囊形及矩形按鈕。這種矛盾意味著應自行判斷，而非要求 Claude Code 逐行遵從。
2. 將這唯一的固定版本`DESIGN.md`複製到工作專案中，例如放在`design-reference/DESIGN.md`。在旁記錄原始 URL、路徑及提交`3b605329240ce735b510037cca322f1831fdd7f8`。複製時保留儲存庫的[MIT 著作權及授權聲明](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE)。Markdown 參考本身不需安裝套件。授權涵蓋儲存庫資料，但不授予使用所述公司標誌、字型檔案、圖像或商標的權利。
3. 在獲准專案中開啟 Claude Code，明確提供複製檔案作為上下文。Anthropic 分別說明了[檔案參照](https://code.claude.com/docs/en/common-workflows)與[專案指令檔案](https://code.claude.com/docs/en/memory)；將獨立的`DESIGN.md`放在資料夾內，並不能證明 Claude Code 已載入。請將下方方括號中的頁面路徑及負責人規則換成真實值，並在接受修改前確認 Claude Code 已讀取參考。

```markdown
Read @design-reference/DESIGN.md as a visual reference. Edit only [path/to/owned-page] and the existing styles that page needs. Improve [one specific layout or hierarchy problem]. Keep the page's current audience, approved copy, links, brand colors, font and logo. Use only layout, hierarchy or spacing ideas that fit those rules. Do not copy the example site's name, assets or identity. Preserve working interactions and keyboard access. Show the proposed file changes and tell me how to render and check this page with this project's existing commands.
```

4. 執行或接受前，閱讀建議的差異。檢查所有變更檔案、文案與連結。拒絕未要求的新相依套件、資源或無關頁面修改。用專案現有文件中的執行命令呈現頁面。分別以桌機和手機寬度開啟；檢查實際頁面，而非代理對其原意的描述。
5. 依書面需求比較呈現結果。檢查預期文案及連結仍在、標題順序合理、文字與控制項對比足夠，且手機版沒有內容裁切或水平捲動。透過鍵盤抵達並操作受影響的連結、按鈕、選單與表單。測試變更的互動，包括可見焦點及錯誤狀態。記錄頁面修訂版本、寬度、檢查項目和缺陷。只有這些檢查在你的頁面上通過後，才接受修改。

如果 Claude Code 忽略參考，重新指出檔案並請它列明使用了哪些部分。若參考與品牌規則衝突，從請求移除相應指示並修改受影響程式碼。若連結、焦點路徑或互動失效，先恢復原本可用行為，再縮小修改。如果無法呈現頁面或檢查結果，請暫不接受變更，直到能夠完成檢查。

這份合集由維護者按原樣提供，內容是社群對其他網站的描述。其 Notion 檔案有互相矛盾的按鈕形狀、未獲文件證實的游標停留行為，以及本指南未驗證的程式碼檢查命令。請使用專案已知檢查，不要使用該建議命令。Claude Code 使用費及之後的託管或資源費取決於帳戶與專案；此處未確立修改時間或最終設計品質。

若想了解另一種 AI 輔助頁面製作方式，[我們的 Genspark 原型指南](https://bigchange.ai/blog/genspark-design-prototype-source-zip)說明如何複製託管原型並檢查匯出的原始碼 ZIP。該任務的起始資料及完成條件不同。

## 來源與延伸閱讀

- [VoltAgent 的固定版本 README](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md)說明合集及按原樣提供的公開網站分析。檔案數來自固定版本的遞迴目錄樹，而非對未來版本的斷言。
- 固定版本的[Notion `DESIGN.md`](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md)展示參考格式及內部矛盾。它不是 Notion 核准的規格，也不授予使用 Notion 資源的權利。
- 儲存庫的[MIT 授權條款](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE)要求在副本或重要部分保留著作權及授權聲明。
- Anthropic 的[Claude Code 快速入門](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/costs)、[資料使用](https://code.claude.com/docs/en/data-usage)與[權限](https://code.claude.com/docs/en/permissions)文件說明依帳戶而異的用量及控制。本指南未測試任何工作階段、帳單或產出頁面。

## Sources

- [Awesome DESIGN.md 固定版本 README](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) — 儲存庫主要說明及不可變提交中的單檔複製指引。它說明材料為按原樣提供的公開網站分析；成果品質說法具有宣傳性質。獨立審查過的該提交完整目錄樹直接包含 84 個 DESIGN.md 檔案，此數量只適用該版本。
- [固定提交中的 Notion DESIGN.md 範例](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md) — 版面、間距、排版及元件分析範例。膠囊形與矩形按鈕的描述互相矛盾，未證實游標停留或動畫行為，並建議未驗證的程式碼檢查命令。這是社群分析，不是 Notion 官方品牌規格，也不是複製資源的許可。
- [Awesome DESIGN.md MIT 授權條款](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) — Copyright (c) 2026 VoltAgent；副本或重要部分必須保留著作權及授權聲明。此儲存庫授權並未確立對所述網站商標、標誌、專有字型或圖像的權利。
- [Claude Code 快速入門](https://code.claude.com/docs/en/quickstart) — 專案、帳戶或服務供應商及登入的官方先決條件。讀者須用合資格管道及自己的專案；BIG CHANGE 未測試 Claude Code 設定或付費帳戶。
- [Claude Code 常用工作流程](https://code.claude.com/docs/en/common-workflows) — 明確 @file 上下文及專案工作的官方指引。它支持在設定與限制範圍內主動參照複製檔案，不代表任意 DESIGN.md 會自動載入。
- [Claude Code 專案記憶](https://code.claude.com/docs/en/memory) — 解釋專案指令檔及依設定而異的載入方式。它未說明獨立 DESIGN.md 只要存在儲存庫就會載入；本指南不變更指令設定。
- [Claude Code 費用](https://code.claude.com/docs/en/costs) — 依帳戶而異的用量與計費背景。Markdown 參考不增加套件相依性，但本指南沒有確立 Claude Code 任務固定價格、免費額度或省時效果。
- [Claude Code 資料使用](https://code.claude.com/docs/en/data-usage) — 依帳戶而異的官方資料處理及本機對話紀錄行為。分享客戶私密程式碼或資源前，負責人須查閱政策；此處不作普遍的純本機處理或訓練用途斷言。
- [Claude Code 權限](https://code.claude.com/docs/en/permissions) — 官方工具權限控制。提示中的指令本身不授予或強制實施工具存取；讀者須檢查建議動作和實際變更的檔案。