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

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

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

重大變化

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

開始之前

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

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

一個頁面使用一份參考

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

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 原型指南說明如何複製託管原型並檢查匯出的原始碼 ZIP。該任務的起始資料及完成條件不同。

來源與延伸閱讀

• VoltAgent 的固定版本 README說明合集及按原樣提供的公開網站分析。檔案數來自固定版本的遞迴目錄樹，而非對未來版本的斷言。
• 固定版本的Notion DESIGN.md展示參考格式及內部矛盾。它不是 Notion 核准的規格，也不授予使用 Notion 資源的權利。
• 儲存庫的MIT 授權條款要求在副本或重要部分保留著作權及授權聲明。
• Anthropic 的Claude Code 快速入門、檔案參照指引與專案指令文件說明使用權限和明確提供上下文的方法。它們沒有驗證此次頁面修改，也沒有證實獨立參考會自動載入。
• Anthropic 的費用、資料使用與權限文件說明依帳戶而異的用量及控制。本指南未測試任何工作階段、帳單或產出頁面。