使用 Claude Code 和 Refero DESIGN.md 打造非範本風格網站

專案與模型使用實用資料：Ailoot 文件。

為什麼 Claude Code 做出來的網站看起來像 Tailwind 範本？#

文中提到的 1 月案例，是在建立一個小型副業專案：一個陌生開發撥號器。在空白儲存庫中，使用者請 Claude Code 建立首頁。結果很普通：深色的 slate-950 背景、purple-500 點綴色、粗體無襯線標題，下方有三張陰影完全相同的卡片。版面和 ChatGPT 初版、Lovable 初版、v0 初版都一樣。接著五次修改提示詞，加入「現代」、「高級」和「不要跟別人一樣」等要求，結果仍然毫無改變。頁面看起來依舊像是從 Tailwind UI Templates 範本集中挑出來的。

也就是說，Claude 並非「不知道」如何做出好看的設計。它知道大多數人怎麼做，並重現那個多數。若想得到非平均化的結果，就要給代理程式具體限制：使用哪些顏色、字型和間距，以及哪些元件應視為標準。

這時，設計系統就能作為脈絡提供協助。不是說「做得漂亮」，而是「按照這個特定風格來做；參數在這裡」。

Refero Styles 以現成的成果填補這個差距：一份包含真實產品參數的 DESIGN.md 檔案。

Refero Styles 是什麼？#

styles.refero.design 首頁的說明很直接：「探索來自領先產品網站、可供 AI 代理程式讀取的 2,000 多套設計系統。」目錄收錄了制定視覺標準的品牌：Apple、Linear、Stripe、Notion、Vercel、ElevenLabs、Mercury、PostHog、xAI、Modal、Duolingo。這些內容不是人工擷取的；Refero 團隊會執行指令碼分析網站實際使用的 CSS 和標記，再整理成結構化 Markdown。styles.refero.design 資料庫本身免費。

關鍵字是「結構化」。檔案裡沒有螢幕截圖，也沒有「極簡風格」之類的描述。它是 Markdown，包含明確的十六進位色碼、精確到 pt 的字型大小、間距單位和元件規則。AI 代理程式會讀取這份檔案，依據具體資訊工作，而不是試著用文字描述品味。

Refero 團隊在 ai-agents 頁面列出的支援工具包括「Cursor、Claude Code、Codex、v0 和 Lovable」。換句話說，DESIGN.md 是一份通用成果，適用於所有主要 AI 開發代理程式。

DESIGN.md 包含哪些內容？#

Refero 團隊在 design-md-template 頁面上如此說明檔案結構：

因此，檔案結構通常如下：

建立者也強調一項能解決 80% AI 設計問題的原則：

也就是說，十六進位色碼 #5E6AD2 比「像 Linear」更明確。精確的 font-size: 13px / line-height: 18px 比「緊湊的文字」更明確。具體資訊勝過詮釋。

儲存庫中的 DESIGN.md 不是給團隊看的圖片，而是專案永久脈絡的一個建構區塊：AI 每次收到請求都會讀取的結構化知識。

4 個步驟打造 Linear 風格的網站#

這四個步驟就是所述的新網站啟動流程。不是「一般來說的四個步驟」，而是每一步各有一項具體操作的流程。

1. 安裝 Claude Code

   原生的一行安裝指令：curl -fsSL https://claude.ai/install.sh | bash（官方文件建議的方法）。macOS 可使用 brew install --cask claude-code；Windows 可使用 winget install Anthropic.ClaudeCode。如果已經安裝，請檢查版本：claude --version（需要 2.1.178 以上版本；此版本加入了 Tool(param:value) 權限，以及在自動模式下封鎖危險 git 指令的功能）。登入帳戶：執行 claude 會啟動設定精靈。Claude Code 包含在 Pro 訂閱中（年繳每月 $17，按月付款每月 $20）。

2. 開啟 Refero Styles 並選擇品牌

   前往 https://styles.refero.design 並開啟目錄。主要選擇標準是風格與產品的契合程度，而不是你「喜不喜歡這個外觀」。正在打造 SaaS 儀表板？看看 Linear、Vercel 和 Notion。正在打造金融科技產品？看看 Stripe、Mercury 和 Column。正在打造會員產品？看看 Duolingo。開啟品牌卡片，再點選「Copy DESIGN.md」。

3. 將 DESIGN.md 放進專案，做為脈絡

   在專案根目錄建立 docs/DESIGN.md 檔案，貼上複製的內容。接著開啟 CLAUDE.md 並加入一行：@docs/DESIGN.md。這是一項匯入指示，Claude Code 會在工作階段開始時將檔案內容載入脈絡。關於 CLAUDE.md 匯入的更多資訊，請參閱Claude Code、Codex 和 Cursor 共用一份指示檔的指南。

4. 提示建立特定頁面

   不要只說「做得漂亮」。要具體說明：「使用脈絡中的 DESIGN.md，為 SaaS 工作管理產品建立首頁。結構：標題與副標題組成的主視覺區塊、兩個 CTA 按鈕（主要與次要）、下方包含 3 項功能和圖示的區塊，接著是客戶推薦區塊。請完全依照 DESIGN.md 的顏色和字體排印；不要自行編造。」

第四個步驟完成後，Claude 就會建立頁面。依據所述經驗，首頁平均需要 8–12 分鐘，而且外觀確實會接近所選品牌的風格。雖非像素級複製，但能呈現可辨識的風格：相同的字型、色彩配置、間距節奏，以及按鈕上相同的細節選擇。

Refero 建立者在 ai-agents/design-resources 頁面上，以較簡短的方式描述了相同的三步原則：

這個四步流程遵循相同邏輯，另外明確加入安裝 Claude Code，以及將檔案匯入 CLAUDE.md 的步驟。

該為產品選擇哪種風格？#

Refero 建立者在指南的第一個步驟中就提出這項建議：挑選參考風格時，不只要看品牌名稱，也要考慮資訊密度、語調和受眾。

Apple 衍生色彩、字體、層級與克制動態可以適用 SaaS 儀表板，但特定行銷頁的大留白未必適合。應檢查具體參考，而非只看品牌。會計後台應明確設定緊湊列高、間距及密度，保留數字與控制項可讀性，不直接照搬展示版面。

以下是簡單的產品類型選擇指南：

如果仍然拿不定主意，就選 Linear。它的基礎最為通用：中性色彩配置、易讀的字體排印（Inter／Söhne），以及克制的間距。以 Linear 為基礎的網站，適用於 10 種產品類型中的 9 種，並能呈現專業感。

為什麼要把 DESIGN.md 放進專案的永久脈絡？#

在文中所述的實務做法中，每個使用 AI 代理程式管理的專案，都會將 DESIGN.md 存放在 CLAUDE.md 旁邊。這份檔案並非「只為某個任務暫時使用」。它是所有未來工作階段都會依據的永久標準。一個月後，你可以請 Claude 為專案新增頁面；它會開啟同一份 DESIGN.md，並以相同風格建立頁面。六個月後，你可以把專案交給另一位團隊成員；對方也能執行 Claude 並得到一致的結果，因為 DESIGN.md 已放在儲存庫中。

在設計上，這個原則是這樣運作的：只需決定一次色彩配置、字體排印和間距節奏。之後每個 AI 代理程式都會視為既定條件。

也就是說，設計以程式碼形式存在（Markdown 就是程式碼），而不是 AI 無法讀取的 Figma 檔案。設計若以檔案形式存在於儲存庫中，Claude Code、Codex，以及未來任何工具都能讀取。設計若放在 Figma，就會處於另一個獨立空間，每次工作階段都得手動轉換。

文中所述的副業專案採用這種結構：

project/
├── CLAUDE.md            (imports @docs/DESIGN.md)
├── docs/
│   ├── DESIGN.md        (visual canon, copied from Refero)
│   ├── ARCHITECTURE.md  (project structure)
│   └── BRAND.md         (tone of voice, vocabulary)
└── ...

這三個檔案是整理專案永久脈絡的一種方式。DESIGN.md 負責視覺，ARCHITECTURE.md 負責結構，BRAND.md 負責語調。任何能存取儲存庫的 AI 代理程式，都能取得這三份脈絡。

Refero MCP 和 refero_skill 是什麼？#

Refero Styles 是基礎層（以檔案形式提供 DESIGN.md）。下一波發展是讓 AI 代理程式能「原生」存取資料庫的整合工具。

Refero MCP（官方）。 這是位於 https://api.refero.design/mcp 的伺服器 API，Claude Code 使用 bearer token 連線。接著，代理程式就能存取來自真實產品的 150,000 多個畫面和 6,000 多個使用者流程。你可以透過技能安裝：

npx skills add https://github.com/referodesign/refero_skill --skill refero-design

安裝後，Claude 會在每個工作階段開始時執行「設計研究」，並將其設為必須完成的第一步：檢視適合任務的視覺選擇，並在需要時提出三種與選定參考風格相關的方向。截至 2026 年 6 月 23 日，refero_skill 儲存庫有 67 次提交和 135 顆星。這是一項仍在積極開發的新產品。

文中所述的實務做法很簡單：手動開啟網站、複製 DESIGN.md，並放進檔案。當設計系統成為例行工作時，MCP 就很有用，例如同時管理數個客戶專案、每天在不同視覺標準之間切換。若想進一步了解如何將 MCP 伺服器連接到 Claude Code，請參閱NotebookLM 和 MCP 指南。

哪 4 種錯誤會破壞工作流程？#

在文中所述的設計脈絡工作經驗中，常會遇到這四種錯誤。每一種看似無傷大雅，卻都會讓結果回到標準的 Tailwind 範本。

錯誤 1：「做得現代一點」這種提示詞。 這是最常見的錯誤模式。有人開啟 Claude Code，輸入「幫我做一個現代風格、看起來很高級的 SaaS 網站」。結果得到深色背景和紫色點綴。在訓練資料中，「現代」一詞與 2022–2024 年間以相同範本建構的所有登陸頁相關。沒有 DESIGN.md 的精確參數，「現代」就等於「平均」。

錯誤 2：把 DESIGN.md 當訊息貼到聊天裡。 有時有人會把 DESIGN.md 複製到 Claude Code 聊天視窗，並說：「這是風格，照著做。」這只在當前工作階段結束前有效。開啟新工作階段（或切換到其他任務並執行 /clear）後，脈絡就消失了。若要保留風格，檔案必須放在儲存庫中，並匯入 CLAUDE.md。關於 CLAUDE.md 為何是永久脈絡的關鍵，請參閱Claude 記憶指南。

錯誤 3：因為「喜歡」而選風格。 寬鬆 Apple 行銷頁不適合原樣搬進要顯示 30 筆房源的儀表板，但不排除使用其字體、色彩或層級。應調整間距與列密度，再檢查目標螢幕實際可見資訊。依具體參考的密度、語調與受眾選擇，不只看品牌。

錯誤 4：沒有在提示詞中提及 DESIGN.md。 DESIGN.md 可能已放在儲存庫中、透過 CLAUDE.md 匯入，也對代理程式可見。但若提示詞只說「建立網站」，Claude 可能會採用標準做法，而不明確參照該檔案。每個設計提示詞都適合加上這句話：「請完全使用 docs/DESIGN.md 中的顏色、字型和間距。不要自行編造數值，請從檔案中取得。」這能確保代理程式使用 DESIGN.md，而不是跳過它。

精確的 token 是十六進位色碼、以 pt 為單位的字型大小，以及 DESIGN.md 中的間距單位。自然語言則是「現代」、「高級」、「乾淨」或「像 Apple」。精確的 token 有效；自由發揮的文字則無效。

接下來該做什麼？#

你現在已經掌握基本流程：Claude Code ＋ Refero 的 DESIGN.md ＋ 4 個步驟 ＝ 非範本風格網站。這能滿足 70% 的需求。其餘 30% 是需要更高精確度、更快速度或驗證的情況。

掌握基本做法後，可繼續朝三個方向發展：

1. Frontend Design Skill。 這是 Claude Code 的官方技能，可加入視覺回饋。代理程式使用 Puppeteer 為組好的頁面擷取螢幕截圖，再用它的「眼睛」（視覺模型）檢視，與 DESIGN.md 比較，並自行提出修正建議。這是一個自動化的「提示詞 → 程式碼 → 螢幕截圖 → 評析 → 提示詞」循環。適用於頁面複雜、無法一次迭代就做對的情況。

2. 以正式運作模式使用 Refero MCP。 同時管理 3–5 個專案時，逐一手動加入 DESIGN.md 會變得乏味。Refero MCP 可根據專案描述找出 3 種合適風格並提供選擇。它能將新專案的啟動時間從 30 分鐘縮短至 3 分鐘。

3. 結合脈絡工程。 DESIGN.md 是脈絡成果之一。除此之外，通常還有 ARCHITECTURE.md（專案結構）、BRAND.md（語調）和 business/audience.md（目標受眾）。這些檔案都會匯入 CLAUDE.md。Claude 建立頁面時，就會參考視覺、受眾和產品結構。從本質上來說，這就是脈絡工程：有系統地設計請求前要提供給代理程式的資訊。

實用資料：Ailoot 文件。

實用資料：Ailoot 文件。

更多資料與工具：Ailoot。