whit3rabbit/designer-mcp

Designer MCP — 研究為先的設計

在實作前，將每一個設計都建立於真實的產品證據之上。此技能結合了研究為先的方法論，以及一個本地、免費包含 1,342 個提取設計系統的程式庫。

研究庫有一層：

1. 風格 — 從真實網頁行銷/產品頁面提取的視覺方向與品味。

畫面與流程存在於付費的 Refero 產品中，但在本次部署中不包含。對於涉及畫面層級或流程層級的問題，請使用捆綁的工藝參考以及使用者自己的素材，並且明確說明，而非憑空編造先例。

不可妥協的原則

• 設計工作前必須研究。 每個設計在實作前都必須以參考為基礎。不要依賴模型的一般性設計品味。
• 視覺工作優先使用風格。 如果 MCP 伺服器不可用，請使用捆綁的工藝參考，並保持相同的鎖定參考工作流程。
• 不要複製單一參考。 研究多個強力的參考，並為使用者的產品綜合出一個新的方向。
• 不要將參考平均成安全的折衷方案。 當參考衝突時，選擇一個主要方向並保留其鮮明的特徵。次要參考僅用於添加狹義的細節。
• 不要改變記號的意義。 如果一個參考指出某個顏色、字體、圓角、陰影、漸層或元件是為了特定角色，請僅用於該角色或省略它。
• 尊重圖像指引。 如果一個風格依賴於攝影、插圖、產品截圖或圖形，請保留媒體角色。在可能的情況下使用真實/生成/庫存素材；否則創建一個帶有意圖指導的佔位符。不要用弱 CSS、文字或裝飾性區塊來偽造複雜的圖像。
• 當此技能可用時，不要將一般的前端/產品設計技能作為並行的設計權威。 這是設計方法論；一般的設計技能傾向於將工作拉回一般的 AI 設計。
• 研究輸出必須具體。 指出參考名稱，描述具體的選擇，並解釋將改編哪些內容。
• 不要根據感覺記憶進行設計。 每個主要的視覺、佈局、內容或互動決策都必須追溯到研究、使用者的簡報或工藝參考。
• 在實作之前進行綜合。 在繪製或編碼之前，將研究轉化為一個概念、記號方向和具體的決策清單。
• 簡報不是建置目標。 在實作之前，鎖定一個使用者提供的視覺來源、一個現有的產品/設計系統目標、一個選擇的生成模型，或一個明確的鎖定參考方向並獲得批准後直接建置。
• 僅在圖像生成能改變結果時使用它。 圖像生成可能很慢，且可能不存在於每個編碼環境中。將其用於視覺探索、模型、圖像、插圖、紋理和困難的素材；跳過小修復、明顯的生產編輯或代碼原生的 UI 工作。
• 建置視覺作品後進行驗證。 在移交之前，將渲染的實作與鎖定的目標/參考進行比較。修復可操作的設計偏差，而不是認為研究就足夠了。

MCP 設定

此技能本身作為一個研究為先的設計方法論和工藝參考就很有用。研究是強制性的——在可用時使用 MCP 工具進行即時風格研究，否則使用捆綁的工藝參考和使用者提供的參考進行研究。

本地伺服器在 Docker 中執行：

# 註冊 MCP 伺服器 (Hermes / 任何 stdio MCP 客戶端)
hermes mcp add designer \
  --command docker \
  --args run --rm -i -v "$HOME/.refero-cache:/cache:ro" \
         designer-mcp:latest node scripts/mcp-entry.mjs

然後重新啟動閘道器（或 /reload-mcp）以註冊工具。

如需相同資料的瀏覽器圖庫——縮圖、色票、字型比例：

cd designer-mcp-docker && docker compose up -d   # http://127.0.0.1:8787

有關工具的完整詳細資訊，請閱讀 references/mcp-tools.md。

探索

在研究之前，擬定一個簡短的設計簡報。僅詢問那些會實質改變結果的缺失資訊；否則做出合理的假設並繼續。

釐清：

• 正在設計什麼
• 平台：網頁、iOS 或兩者
• 受眾和技術水平
• 主要使用者目標
• 期望的感覺或品牌方向
• 需要克服的業務/使用者反對意見
• 限制條件：現有品牌、框架、截止日期、無障礙設計、內容
• 任務是否需要視覺方向、具體的 UI 模式、流程邏輯，或混合
• 任務是否應直接進入代碼、先產出視覺選項，或在實作期間創建生成素材

簡報格式：

正在為 [WHO] 在 [PLATFORM] 上設計 [WHAT]。
目標：[PRIMARY USER GOAL]。
調性：[DESIRED FEELING]。
主要反對意見/風險：[OBJECTION]。
必須記住：[HOOK OR DISTINCTIVE IDEA]。
限制條件：[CONSTRAINTS]。
所需研究：[styles/screens/flows]。
路徑：[direct build / visual exploration / audit / asset generation]。

工作流程路由

選擇能夠產生高品質結果的最輕量工作流程。

• 直接建置： 用於小型 UI 修復、明確的生產編輯、現有設計系統工作，或有具體來源需要匹配的任務。研究並鎖定方向，然後編碼。
• 視覺探索： 當使用者要求變體、新的視覺語言、重大重新設計、登陸頁面或其他有多個合理方向的高可見性表面時使用。預設提供三個鎖定參考的選項並讓使用者選擇；參見 references/visual-workflow.md。
• 審計： 在批評之前，使用捕獲的螢幕截圖或風格參考作為證據。
• 素材生成： 僅當參考鎖定需要代碼、圖示或現有素材無法忠實提供的點陣圖媒體時，才使用生成的圖像；參見 references/visual-workflow.md。

工具路由

視覺工作優先使用風格

當使用者要求設計、重新設計、改善、修飾或創建任何具有視覺元素的東西時，使用 refero_search。

風格是從真實網頁行銷/產品頁面提取的語義設計參考。它不是螢幕截圖，也不是元件庫。搜尋結果提供預覽；來自 refero_get 的完整風格參考提供設計指導，例如視覺論點、記號、排版、佈局/構圖、區域節奏、間距、層級、表面、元件、圖像處理、實作注意事項以及做/不做的規則。

覆蓋範圍：網頁行銷/產品頁面——登陸頁面、定價頁面、產品行銷網站、編輯品牌網站和 SaaS 網站。應用程式內儀錶板、認證畫面、設定畫面和 iOS 應用畫面不作為風格系統覆蓋。對於產品 UI 任務，從風格建立視覺語言，然後使用工藝參考進行產品邏輯。

風格用於：

• 外觀和感覺
• 品牌方向
• 登陸頁面和行銷頁面
• 排版、色板、佈局、區塊結構、間距、圓角、層級、表面
• 元件處理，有時包括元件/代碼範例
• 圖像和產品截圖處理
• 設計系統靈感
• 讓一般介面感覺更有品味

找到強力的風格後：

• 使用 refero_get 取得完整詳細資訊
• 使用 refero_design_md 渲染可攜帶的 DESIGN.md 文件
• 在承諾一個方向之前，使用 refero_facets 查看目錄中實際包含哪些字體、顏色、主題和行業

產品模式與流程

此部署沒有畫面或流程層。當任務需要具體的 UI 模式（特定畫面類型、表單狀態、定價頁面佈局）或流程邏輯（入職、結帳、取消）時：

• 使用捆綁的工藝參考——它們涵蓋表單、焦點、空狀態、入職模式和轉換工藝
• 使用使用者提供的現有產品、螢幕截圖或設計系統
• 明確說明這些是基於工藝而非基於參考的

不要偽造你沒有查閱過的先例。

使用視覺工作流程處理圖像與品質檢查

對於圖像生成、視覺選項、生成素材和視覺品質檢查，當任務需要時，請閱讀 references/visual-workflow.md。

研究工作流程

1. 使用風格研究視覺方向

對於任何視覺設計任務，從這裡開始。

推薦循環：

1. 搜尋 3-5 個不同的視覺角度。
2. 包含一個廣泛的美學查詢。
3. 包含一個領域/類別查詢。
4. 在相關時包含一個知名品牌或強力產品的查詢。
5. 使用 refero_get 檢索 3-4 個強力風格；完整風格很大，因此將較大的研究拆分為多個批次。
6. 比較每個風格的貢獻。
7. 選擇一個主要基礎，並從其他風格借用 1-2 個具體細節。
8. 在實作之前鎖定主要參考的特徵。

良好的風格查詢和完整的提取檢查清單（從每個風格提取什麼：論點、類型、顏色角色、間距、佈局、元件、圖像、媒體策略、做/不做規則）列在 references/research-playbook.md。

綜合規則：

• 主要風格：整體情緒、密度和結構。
• 次要風格：特定的借用細節。
• 使用者情境：根據產品、受眾和任務調整一切。
• 不要使用所有參考的平均/交集。如果一個參考是暗色，一個是酸性，一個是襯線字體，答案不會是溫暖的米色 + 柔和的橙色 + 禮貌的襯線。

永遠不要將結果呈現為「複製 X」。將其呈現為受多個參考啟發的新方向。

在實作之前，創建一個參考鎖定：

主要參考/方向：[一個主導來源]
保留：[必須保留的 3-5 個特徵：畫布、類型、強調色、佈局、密度、媒體]
僅借用：[1-2 個具體的次要細節]
角色規則：[要保留的來源記號/元件含義，例如僅限 CTA、僅限代碼、僅限裝飾]
媒體策略：[真實/生成/庫存/代碼原生/佔位符，附有長寬比和藝術指導]
拒絕：[會使方向崩潰的預設值/平均值]
記號承諾：[背景、類型、強調色、圓角、邊框/陰影、圖像處理，附有角色]

如果實作偏離了鎖定，停止並修正它。不要將鮮明的特徵軟化為更安全的顏色、更安全的字體、更柔和的圓角或一般的區塊佈局。參考鎖定不是克隆；它在調整內容、品牌和互動細節以適應使用者產品的同時，保留了選定的特徵。

組合風格時，為每個來源分配一個有邊界的工作。例如：一個來源可能擁有畫布/類型，另一個擁有代碼視窗處理，另一個擁有主要 CTA。切勿將記號移出其來源角色：CTA 顏色保持僅限 CTA，語法顏色保持在代碼內部，裝飾性漸層保持裝飾性，卡片/按鈕規則保持指定的圓角、陰影和狀態行為。

如果主要風格是以圖像為主導，不要用純文字佈局取代它。如果你無法生成所需的圖像或圖形，請以穩定的尺寸、長寬比、標題/替代文字和簡短的藝術指導註釋保留該位置。僅在匹配來源風格時，建置簡單的圖表、圖示、代碼視窗或幾何圖形。

對於大量的視覺探索、生成的模型、點陣圖素材或建置後的視覺品質檢查，請遵循 references/visual-workflow.md。

2. 沒有畫面層的產品模式

當任務需要知道介面應包含什麼或真實產品如何解決特定 UI 問題時，使用工藝參考。

需求	參考
表單設計、焦點狀態、空狀態、表格、入職模式	references/craft-details.md
CTA 文案、信任信號、反對意見處理、轉換結構	references/copywriting.md
元件/圖示選擇	references/icons.md
類型角色和層級決策	references/typography.md
顏色角色、對比度、調色板紀律	references/color.md

從這些中提取：

• 佈局結構
• 資訊層級
• 元件選擇
• CTA 模式
• 內容/文案模式
• 狀態和邊緣情況
• 信任或轉換策略
• 值得改編的具體細節

3. 沒有流程層的流程邏輯

當任務有多個步驟或使用者隨著時間改變狀態時，從互動模式推理，而不是聲稱先例：

• 入口點和退出狀態
• 步驟數量
• 使用者做出的決定
• 摩擦減少器
• 所需的確認
• 儲存/恢復狀態
• 錯誤處理
• 留存或說服時刻
• 每個步驟的系統回應

研究深度與綜合

將深度與任務風險相匹配，然後將發現分成三個類別：視覺方向（來自風格）、產品模式（來自工藝參考和使用者素材）和流程邏輯（來自互動推理）。

關於每個任務類型的深度階梯、每個類別的輸出格式、研究摘要模板和決策清單表格，請閱讀 references/research-playbook.md。

設計工藝

研究之後，像資深產品設計師一樣執行。僅在相關時使用捆綁的參考；不要預設載入每個檔案。

• 排版：references/typography.md
• 顏色：references/color.md
• 動畫：references/motion.md
• 圖示：references/icons.md
• 表單、焦點、圖像、觸控、效能、無障礙設計：references/craft-details.md
• 文案與說服：references/copywriting.md
• 反 AI 垃圾內容檢查：references/anti-ai-slop.md