設計簡報 是做什麼的？
若放任不管，編碼代理會根據記憶進行設計，而記憶給出的是平均值：置中英雄區、紫色漸層、三個各帶一個圖標的卡片。真實的產品早已解決了你即將建構的每一個畫面，並且已存在比任何一次性即興創作更好的完整元件。因此，請將自己的設計直覺視為平庸，停止發明。你的工作是尋找、比較、挑選和適配。
兩個來源各司其職，它們負責不同工作：
| 來源 | 提供的內容 | 用途 |
|---|---|---|
| Refero | 來自真實已發佈產品的畫面、流程與風格 | 決定一個畫面應該做什麼、長怎樣 |
| 21st.dev | 由人們製作並經社群評級的完整元件 | 實際放入程式碼中的元件 |
Refero 告訴你要建構什麼；21st.dev 把零件交到你手上。兩者都要用。未經參考就挑選的元件通常好看但不適合該畫面；有參考卻沒有對應元件，則會導致手動重建（而且往往重建得很糟）。
設定
# Refero（一個 MCP 伺服器）。然後執行 /mcp 並登入。
claude mcp add --transport http refero https://api.refero.design/mcp
# 21st.dev CLI
npx @21st-dev/cli login # 打開瀏覽器；之後的命令是 `21st`
21st whoami # 檢查你是否已登入
在 21st.dev 上搜尋和預覽是免費的。拉取元件的程式碼會使用每日配額（21st usage 顯示剩餘量），所以請先比較，只拉取你選中的元件。
如果某個工具缺失或已登出，請告知用戶一次（附上修復命令），然後繼續使用可用的工具。不要默默地退回到手動建構 UI。
工作順序
- 確定方向：顏色與字體。
- 在 Refero 中為每個畫面和流程尋找模式。
- 從 21st.dev 為每個區塊挑選元件。
- 將所有內容適配為同一組 Token。
- 在運行的應用程式中檢查結果是否符合品質標準。
對於大於一個元件的任何工作，請在編碼前寫下 UI 計畫（結尾有範本）。這是一個小表格，它能防止畫面在建構過程中半途即興發揮。
1. 方向
- 顏色與字體來自用戶已有的內容：他們的
DESIGN.md、他們現有的設計系統，或他們指定的參考來源。不要覆蓋它。 - 如果用戶沒有提供任何內容，則以業界最佳產品的 Refero 風格為基礎來確定方向：先
refero_search_styles，然後針對最強的兩到三個風格執行refero_get_style。不要預設使用框架的內建主題，或你所建構平台本身的品牌調色盤。那樣會讓該平台上的每個專案看起來一模一樣。 - 挑選一個主要風格並保留其鮮明特徵。從其他風格借一兩個細節。將多個參考平均化會得到你原本想要避免的安全中間值。
- 支援淺色與深色模式。
- 交付一個設計。不要給用戶三個選項組來選擇，除非他們要求選項；選擇正是他們交給你的工作。
- 在安裝任何元件之前，將結果記錄為 Token（顏色角色、字體比例、間距、圓角、陰影），以便後續每個選擇都能對應到一個 Token。
2. 來自 Refero 的模式
| 工具 | 回答的問題 | 查詢範例 |
|---|---|---|
refero_search_styles，然後 refero_get_style | 它該有什麼外觀與感覺？ | premium fintech website with restrained typography |
refero_search_screens，然後 refero_get_screen | 這個畫面該放什麼，以及在哪些狀態下？ | dashboard empty state, data table filters |
refero_search_flows，然後 refero_get_flow | 這個流程包含哪些步驟？ | signup onboarding, subscription cancellation |
畫面與流程搜尋需要一個 platform：web 或 ios。
- 搜尋畫面上實際存在的東西（例如「
pricing page annual monthly toggle」），而不是形容詞。形容詞屬於風格搜尋的範疇。 - 每個畫面嘗試三到五個角度，包括一個已知做得好的產品。第一個結果很少是最佳選擇。
- 也要查閱狀態，而不只是正常畫面：空、載入、錯誤、成功。
- 當一個畫面很接近時，
refero_get_similar_screens可以快速找到其相似畫面。 - 每個畫面保留兩到三個參考，並記下你從每個參考中汲取了什麼：結構、層級、狀態、用詞。參考資料是用來啟發畫面，而不是複製的範本。
3. 來自 21st.dev 的元件
21st.dev 是一個經過策展的完整元件目錄，而非 AI 生成。對於每一塊 UI（頁首、輸入框、卡片、下拉選單、聊天、載入狀態、動畫），請搜尋、比較並使用最好的那個。
21st search "<component>" --type c --limit 10 # 僅限元件
21st get <id> # 印出你選中的元件的程式碼與示範
21st add <author>/<slug> # 安裝它（底層使用 shadcn）
npx shadcn@latest add "https://21st.dev/r/<author>/<slug>" # 使用標準 shadcn 進行相同安裝
21st logo <brand> # 真實品牌 SVG 標誌，免費
如何挑選：
- 根據插槽（slot）搜尋，而非氛圍。 「Pricing table」、「command menu」、「file upload」，而不是「modern clean section」。嘗試兩到三種不同的關鍵字。
- 比較數個，且永遠不要拿第一個結果。 打開預覽。名稱與描述無法告訴你元件看起來或動起來如何。
- 偏好最多人下載或收藏的。 計數在 21st.dev 上每個元件的頁面中。受歡迎程度證明該元件在真實專案中有效。但它不保證合適度，這是下一步的檢查。
- 根據該畫面的 Refero 參考檢查合適度。 它應該以正確的密度完成相同的工作，並具備你需要的狀態（懸停、聚焦、禁用、載入、空）。檢查它在手機寬度下以及使用鍵盤時是否仍然穩固，並查看它所引入的依賴項。
- 調整一兩個東西 以符合你的 Token：顏色、圓角、字體。如果你發現自己正在重寫該元件，代表你選錯了。回頭重新挑選。
- 保持同類型元件的一致性。 來自不同作者的元件在重新設定樣式後，必須讀起來像同一個產品。
- 只手動建構沒有候選元件的膠水程式碼，並明確說明原因。
報告每個挑選結果，以便用戶可以替換：區塊 · 元件 · 作者 · 一行原因。
4. 品質標準
- 使用真實標誌，而非通用圖示和彩色點點。
- 文字精簡。沒有大段文案；讓介面本身來承載資訊。
- 真實 UI 模式：分頁、下拉選單、模態框、切換開關、圖表。不是所有東西都是一疊卡片。
- 良好的載入、空與錯誤狀態，並為緩慢的操作提供進度指示。
- 動畫，以及適合情境的音效與觸覺回饋。
- 所有功能都可被發現：每個頁面都能從人們所在之處抵達，且任何可點擊的東西看起來都像可點擊的。
- 低摩擦的入門流程。
- 流程保持在應用程式內部，而不是將用戶導向第三方網站。
- 響應式設計，且行動版感覺像原生應用，而非縮小的桌面版。
- 一個抱怨就是一種模式。當用戶指出一個問題時，找出並修復應用程式中其同類問題。
平庸永遠不是選項。
5. 在運行的應用程式中檢查
在瀏覽器或模擬器中打開應用程式並實際使用：淺色與深色模式、桌面與手機寬度、空狀態與載入狀態。將每個畫面與其參考資料進行比較，並修正偏差。研究不是終點線；渲染出的螢幕才是。
UI 計畫範本
**方向：** <用戶的 DESIGN.md，或 Refero 風格：名稱、名稱> · 淺色與深色
**Token：** <顏色角色、字體、圓角、間距>
| 畫面或流程 | Refero 參考 | 我們汲取的內容 | 21st.dev 元件 |
|---|---|---|---|
| 入門流程 | <應用程式: 畫面>, <應用程式: 流程> | 三個步驟、進度條、跳過 | <作者>/<slug> |
**手動建構（無候選元件）：** <什麼東西，以及原因>