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

> Refero Styles 設計脈絡：DESIGN.md 結構、如何選擇視覺系統、匯入 CLAUDE.md、建立頁面的四個步驟，以及常見錯誤。

Source: https://ailoot.ai/blog/zh-hant-tw/claude-code-refero-design-md/
Canonical: https://ailoot.ai/blog/zh-hant-tw/claude-code-refero-design-md/
Language: zh-Hant-TW
Publisher: Ailoot (https://ailoot.ai/)
Translation: guide-205
Revision: sha256-9f72d7ff45f3d355eb82402a30850251b4118132b0c693a5bb75b9fc48ddf712


<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

重點摘要

Claude Code「開箱即用」產生的網站看起來全都一樣：深色背景、紫色漸層、無襯線字型、預設的 shadcn 卡片。以下將說明如何取得 Apple、Linear、Stripe 或 ElevenLabs 的現成 DESIGN.md（資料庫中有 2,000 多套設計系統），將它放進專案，並讓 Claude 按照該風格撰寫。完成後的網站就不再像 AI 模板了。

</div>

專案與模型使用實用資料：[Ailoot 文件](https://ailoot.ai/docs/)。



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

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

重點摘要

沒有設計系統時，Claude Code 會根據訓練資料畫出平均化的介面。而那些訓練資料就是整個網際網路：充斥著 Tailwind、shadcn/ui，以及數千個一模一樣的登陸頁。若沒有明確提供顏色、字型和間距等輸入脈絡，代理程式產出的就會是「所有範本的算術平均」。

</div>

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

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

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

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

## Refero Styles 是什麼？

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

重點摘要

Refero Styles 是一個設計系統資料庫，收錄從真實網站擷取並整理成 `DESIGN.md` 檔案的 2,000 多套設計系統。每套系統都代表一個品牌，例如 Apple、Stripe、Linear、Notion、Vercel、Airbnb、ElevenLabs、Cursor。前往 styles.refero.design 選擇品牌，複製它的 Markdown 檔案，並將它加進專案，作為 Claude Code、Cursor、Codex、v0 或 Lovable 的脈絡。

</div>

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 包含哪些內容？

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

重點摘要

一份檔案包含設計系統的所有基本層次：十六進位色彩配置（含深色與淺色模式）、字體排印（字型、尺寸級距、粗細、行高）、間距規則（8px 網格或其他節奏）、元件說明（按鈕、卡片、表單）、動態效果規則（動畫、緩動），以及「品牌語氣」（訊息語調）。整份檔案約有 100 到 400 行 Markdown。

</div>

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

<figure>
<blockquote>
<p>先說明產品語氣與設計原則，接著定義顏色、字體排印、間距、元件、版面、動態效果、無障礙設計，以及禁止使用項目的規則。</p>
</blockquote>
<figcaption>— Refero Styles 團隊，https://styles.refero.design/design-md/design-md-template</figcaption>
</figure>

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

| 區段 | 內容 | 代理程式需要它的原因 |
|----|----|----|
| **產品語氣** | 2–3 句說明介面的語調 | 為微文案定調 |
| **設計原則** | 4–6 條規則，例如「不犧牲可讀性的極簡設計」 | 在多個同樣合適的選項中引導代理程式做決定 |
| **顏色** | 附有名稱的十六進位色彩配置（primary、secondary、accent、surface、text）＋深色／淺色模式 | 代理程式使用精確色碼，而非自行編造 |
| **字體排印** | 字型（名稱與備援字型堆疊）、尺寸級距（10–12 級）、粗細（regular、medium、bold）、行高 | 避免整個網站都變成單一的 Inter 16px |
| **間距** | 基本單位（4px、8px、16px）及其倍數級距 | 讓內距和外距不再「到處飄」 |
| **元件** | 按鈕、卡片、表單、導覽的規則：尺寸、狀態、變體 | 代理程式不會自行發明新變體 |
| **版面** | 網格、斷點、容器最大寬度 | 網站所有頁面都以同一網格建構 |
| **動態效果** | 時長、緩動、允許的轉場 | 動畫保持克制，不會變成 Bootstrap-2010 風格 |
| **品牌語調** | 按鈕、標題、錯誤訊息的文字範例 | 網站文案呈現品牌調性 |
| **禁止使用** | 禁止項目清單（例如「不要使用 `box-shadow: 0 10px 30px`」） | 避免代理程式又回到範本式做法 |

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

<figure>
<blockquote>
<p>具體的脈絡比描述品味的形容詞更有效。</p>
</blockquote>
<figcaption>— Refero Styles 團隊，https://styles.refero.design/ai-agents/design-md-examples</figcaption>
</figure>

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



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

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

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

重點摘要

流程很簡短：安裝 Claude Code，開啟 styles.refero.design，選擇品牌（例如 Linear），將 DESIGN.md 複製到 `docs/DESIGN.md` 或 `.claude/DESIGN.md`，在 `CLAUDE.md` 加入一行說明這份檔案，然後請 Claude 建立頁面。實際上，從空白專案到可運作的首頁只需 30 分鐘。

</div>

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

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 共用一份指示檔的指南](https://ailoot.ai/blog/zh-hant-tw/agents-md-claude-md-one-instruction-file/)。

4.  ### 提示建立特定頁面

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

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

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

<figure>
<blockquote>
<p>選擇任務，開啟相關資源，提供脈絡給代理程式：將 DESIGN.md 放進代理程式的脈絡、說明產品，並要求建立特定畫面。</p>
</blockquote>
<figcaption>— Refero Styles 團隊，https://styles.refero.design/ai-agents/design-resources</figcaption>
</figure>

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

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

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

重點摘要

依資訊密度和語調選擇，而非依品牌選擇。團隊 SaaS 工具（介面密集、資料繁多）—Linear 或 Vercel。金融產品（信任、精準）—Stripe、Mercury、Column。消費產品（溫暖、情感）—Duolingo、團隊版 Notion、Airbnb。AI／開發工具（極簡、深色主題）—ElevenLabs、xAI、Modal。會員產品（無障礙、易讀）—Duolingo。拿不定主意時，可選擇安全且用途廣泛的 Linear。

</div>

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

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

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

| 產品類型 | 適用的 Refero 風格 | 共同特點 |
|----|----|----|
| 團隊 SaaS 儀表板 | Linear、Vercel、Notion、PostHog；Apple token 搭調整後緊湊版面 | 可讀的密集介面、清楚層級、精簡排版 |
| 金融產品 | Stripe、Mercury、Column | 值得信任的色彩配置、清晰的字體排印、數字使用等寬字型 |
| AI／開發工具 | ElevenLabs、xAI、Modal、Anthropic | 深色主題、克制的點綴色、單色搭配一種鮮明色彩 |
| 消費產品 | Duolingo、Airbnb、Notion | 溫暖的色彩配置、生動的插圖、親切的語調 |
| 行銷網站 | Linear、Vercel、Stripe（首頁） | 大標題、清楚的層級、沉穩的背景 |
| 極簡作品集 | Apple、Mercury、Modal | 最大程度留白、無襯線字型、克制的點綴色 |

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

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

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

重點摘要

DESIGN.md 不是一次性的成果。它是專案永久脈絡的一部分，就像 `CLAUDE.md` 和 `business/` 資料夾一樣。檔案放在儲存庫中後，每個 Claude 工作階段、每位團隊成員，以及每個新的 AI 代理程式（Codex、Cursor、Gemini CLI）都能使用相同的視覺標準。知識只需結構化一次，就能持續使用。

</div>

在文中所述的實務做法中，每個使用 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 是什麼？

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

重點摘要

Refero MCP 是位於 api.refero.design/mcp 的伺服器，讓 Claude Code 能直接在聊天中存取來自真實應用程式的 150,000 多個畫面和 6,000 多個使用者流程。Refero_skill 是 Claude Code 的官方技能（`npx skills add`），它包裝了 MCP，並將「設計研究」設為撰寫程式碼前必須執行的第一步。

</div>

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

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

```bash
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 種錯誤會破壞工作流程？

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

重點摘要

第一，沒有附上 DESIGN.md，卻提示「做得看起來現代一點」（代理程式會回到訓練資料的平均值）。第二，將 DESIGN.md 貼在聊天中，而不是放進儲存庫（脈絡無法延續到其他工作階段）。第三，只依品牌而非具體畫面與密度選擇，例如把寬鬆行銷版面搬進會計儀表板。第四，沒有在提示詞中明確提及 DESIGN.md（即使檔案已在脈絡中，代理程式也會忽略它）。

</div>

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

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

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

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

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

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

## 接下來該做什麼？

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

重點摘要

DESIGN.md 是建立視覺標準的第一個建構區塊，但不是唯一一個。接下來有三個發展方向：在 Claude Code 中使用 Frontend Design Skill，透過螢幕截圖取得視覺回饋；使用 Refero MCP 定期處理不同風格；以及將 DESIGN.md 和你的脈絡工程結合，讓代理程式先讀取視覺標準，再建立頁面，最後用螢幕截圖自行檢查結果。

</div>

你現在已經掌握基本流程：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 建立頁面時，就會參考視覺、受眾和產品結構。從本質上來說，這就是[脈絡工程](https://ailoot.ai/blog/zh-hant-tw/context-engineering/)：有系統地設計請求前要提供給代理程式的資訊。

實用資料：[Ailoot 文件](https://ailoot.ai/docs/)。

<div class="section" role="doc-bibliography" aria-label="Sources">

### 來源

- [Refero Styles - 首頁](https://styles.refero.design/)
- [Refero Styles - DESIGN.md 範例](https://styles.refero.design/ai-agents/design-md-examples)
- [Refero Styles - design-resources](https://styles.refero.design/ai-agents/design-resources)
- [GitHub 上的 Refero Skill](https://github.com/referodesign/refero_skill)
- [Claude Code Docs - 官方文件](https://code.claude.com/docs/en/overview)
- [Claude Code 快速入門 - 官方安裝說明](https://code.claude.com/docs/en/quickstart)

</div>

實用資料：[Ailoot 文件](https://ailoot.ai/docs/)。





更多資料與工具：[Ailoot](https://ailoot.ai/)。

## 常見問題：使用 Claude Code 和 Refero DESIGN.md 打造非範本風格網站 | Ailoot

### Apple 參考風格能用於資訊密集 SaaS 儀表板嗎？

可以，需依任務調整。保留合適色彩、字體、層級與克制動態，明確設定緊湊列高、間距與資訊密度，不直接照搬寬鬆行銷版面。

### 保存 DESIGN.md 後，為什麼新頁面仍不受影響？

確認檔案在儲存庫、由 CLAUDE.md 引入，設計請求也明確提到它。要求實際色彩、字體及間距值，再把渲染頁面與目標參考比較。


## Ailoot · 公司及其專案組合

Ailoot以累積的營運經驗、廣大的客戶群、穩定的服務及持續的KPI管理為基礎。

公司及其專案組合：數百萬客戶，每月銷售額達數十億。

Ailoot將這些營運經驗用於API存取，讓客戶的產品、代理、應用程式及自動化流程使用AI功能。