refero-design

Refero Design

Refero 為代理提供品味與產品證據。在設計工作前使用它，而非依賴模型的一般知識。

Refero 有三個研究層次：

1. 樣式 - 視覺方向與品味。
2. 畫面 - 具體 UI 模式與產品畫面決策。
3. 流程 - 多步驟旅程邏輯。

結合各層次可獲得最佳結果：從樣式取得視覺方向，從畫面取得具體 UI 模式，若任務包含多個步驟則從流程取得順序。

不可妥協的原則

• 設計工作前必須研究。 每個設計在實作前都必須有參考依據。不要依賴模型的一般設計品味。
• 若 Refero MCP 工具可用，視覺工作優先使用樣式。 若工具不可用，則使用內建工藝參考，並維持相同的參考鎖定工作流程。
• 不要只複製一個參考。 研究數個強參考，並為使用者的產品綜合出一個新方向。
• 不要將參考平均化為安全的中間值。 當參考衝突時，選擇一個主導方向並保留其鮮明特徵。次要參考僅可添加狹窄的細節。
• 不要改變標記的意義。 如果參考指出某個顏色、字型、圓角、陰影、漸層或元件用於特定角色，則僅用於該角色，否則省略。
• 尊重圖像指引。 如果某個樣式依賴攝影、插圖、產品照或圖形，請保留媒體角色。當可用時使用真實/生成/圖庫素材；否則建立一個有藝術指導的刻意佔位符。不要用薄弱的 CSS、文字或裝飾性方塊來偽造複雜圖像。
• 當此技能可用時，不要將通用的前端/產品設計技能視為平行的設計權威。 Refero 是設計方法論；通用設計技能往往會將工作拉回一般的 AI 設計。
• 研究輸出必須具體。 指出參考名稱，描述具體選擇，並說明將如何改編。
• 不要憑感覺記憶設計。 每個主要的視覺、佈局、內容或互動決策都必須追溯到 Refero 研究、使用者的簡報或工藝參考。
• 在實作前進行綜合分析。 在繪製或編碼之前，將研究轉化為概念、標記方向和具體的決策記錄。
• 簡報不是建構目標。 在實作之前，鎖定使用者提供的視覺來源、現有產品/設計系統目標、選定的生成模型，或明確的參考鎖定方向。
• 僅在會改變結果時使用圖像生成。 圖像生成可能很慢，且並非每個編碼環境都存在。將其用於視覺探索、模型、圖像、插圖、紋理和困難的素材；對於小修補、明顯的生產編輯或程式碼原生的 UI 工作則跳過。
• 建構視覺作品後進行驗證。 在交接前，將渲染的實作與鎖定的目標/參考進行比較。修復可操作的設計漂移，不要將研究視為足夠。

MCP 設定

此技能可獨立作為以研究為先的設計方法論與工藝參考。研究是強制性的。當可用時，使用 Refero MCP 進行即時樣式、畫面與流程研究；否則使用內建工藝參考及使用者提供的任何參考進行研究。

典型的 MCP 設定：

claude mcp add --transport http refero https://api.refero.design/mcp --header "Authorization: Bearer <token>"

完整的工具詳細資訊，請參閱 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。
• 審計： 在批評之前，使用擷取的螢幕截圖、Refero 畫面或流程作為證據。
• 素材生成： 僅在參考鎖定需要程式碼、圖示或現有素材無法忠實提供的點陣圖媒體時使用生成的圖像；請參閱 references/visual-workflow.md。

工具路由

視覺工作優先使用樣式

當使用者要求設計、重新設計、改善、打磨或建立任何具有視覺成分的內容時，使用 refero_search_styles。

樣式是從真實網頁行銷/產品頁面中提取的語義設計參考。它不是螢幕截圖，也不是元件庫。搜尋結果提供預覽；來自 refero_get_style 的完整樣式參考提供設計指導，例如視覺論點、標記、字體排印、佈局/構圖、區塊節奏、間距、層次、表面、元件、圖像處理、實作說明以及該做/不該做的規則。

當前限制：Refero 樣式目前涵蓋網頁行銷/產品頁面，例如登陸頁面、定價頁面、產品行銷網站、編輯品牌網站和 SaaS 網站。它們目前不涵蓋應用程式內的儀表板、驗證畫面、設定畫面或 iOS 應用程式畫面作為樣式系統。但仍可將樣式用於產品 UI 任務以建立視覺語言，然後使用畫面/流程處理產品邏輯。

使用樣式於：

• 外觀與感覺
• 品牌方向
• 登陸頁面與行銷頁面
• 字體排印、調色盤、佈局、區塊結構、間距、圓角、層次、表面
• 元件處理，有時包含元件/程式碼範例
• 圖像與產品截圖處理
• 設計系統靈感
• 讓通用介面感覺更有品味

使用畫面取得具體 UI 模式

當你需要以下內容時，使用 refero_search_screens：

• 特定畫面類型
• 特定元件或 UI 模式
• 頁面佈局與內容層級
• 文案與 CTA 模式
• 表單/狀態範例
• 儀表板、設定、模態框、表格、定價、空狀態、驗證或產品畫面細節

找到強畫面後：

• 使用 refero_get_screen 取得完整詳細資訊
• 使用 refero_get_similar_screens 從強範例擴展
• 僅在需要原始螢幕截圖檢查時使用 refero_get_screen_image

使用流程處理旅程

當任務具有前/後順序時，使用 refero_search_flows：

• 入職引導
• 註冊
• 結帳
• 訂閱管理
• 取消
• 帳戶刪除
• 密碼重設
• 個人資料/設定變更
• 任何多步驟流程

找到強流程後，使用 refero_get_flow 取得逐步目標、動作、系統回應和完成狀態。

使用視覺工作流程處理圖像與品質保證

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

研究工作流程

1. 使用樣式研究視覺方向

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

建議的循環：

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

良好的樣式查詢：

• 編輯式單色 SaaS 登陸頁面
• 溫暖可信的醫療保健產品行銷
• 高級金融科技網站，字體排印克制
• 有趣的創作者工具登陸頁面，帶有鮮明點綴
• 開發者工具網站，帶有產品截圖
• 豪華電子商務編輯產品頁面
• 生產力 SaaS，間距寬敞
• 數據基礎設施網站，深色技術風格
• Attio 編輯式 SaaS 字體排印
• Linear 更新日誌，深色開發者工具
• shadcn 單色設計系統

從樣式中提取：

• 北極星 / 視覺論點
• 字體排印個性與字型比例
• 色彩角色與點綴紀律
• 間距密度與節奏
• 佈局系統、區塊節奏與構圖模式
• 卡片/按鈕/表面處理
• 邊框、陰影、圓角
• 層次與深度規則
• 元件範例與實作/程式碼說明（如有）
• 圖像、圖形、插圖或產品截圖處理
• 媒體素材策略：真實素材、生成/圖庫素材、程式碼原生基本元素、產品截圖或佔位符
• 該做/不該做的規則
• 一個值得改編的難忘視覺手法

綜合規則：

• 主要樣式：整體氛圍、密度和結構。
• 次要樣式：特定的借用細節。
• 使用者背景：將所有內容調整為適合產品、受眾和任務。
• 不要使用所有參考的平均值/交集。如果一個參考是深色，一個是酸性，一個是襯線體，答案不是暖奶油色 + 柔和橙色 + 禮貌襯線體。

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

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

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

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

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

如果主要樣式是以圖像為主導，不要用純文字佈局取代它。如果你無法產生所需的圖像或圖形，請保留具有穩定尺寸、長寬比、標題/替代文字和簡短藝術指導說明的插槽。僅在它們符合來源樣式時，建立簡單的圖表、圖示、程式碼視窗或幾何基本元素。

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

2. 使用畫面研究產品細節

當你需要知道介面應包含什麼，或真實產品如何解決特定 UI 問題時，使用畫面。

良好的畫面查詢：

• 定價頁面年度/月度切換
• 功能比較表
• 儀表板空狀態
• 帳單設定取消模態框
• 入職引導進度指示器
• 雙重驗證設定恢復碼
• 資料表格篩選器
• 破壞性動作確認

根據畫面中的事實搜尋：

• 頁面類型
• 元件
• 狀態
• 公司/產品
• 畫面上的文字

當任務是視覺性時，避免將畫面用作主要樣式來源。先使用樣式，然後使用畫面處理結構和具體細節。

從畫面中提取：

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

3. 使用流程研究旅程邏輯

當有多個步驟或使用者隨時間改變狀態時，使用流程。

良好的流程查詢：

• 註冊入職引導
• 使用優惠碼結帳
• 訂閱取消
• 帳戶刪除回饋
• 密碼重設雙重驗證
• 工作空間帳單升級

如果流程搜尋結果稀疏，請擴大查詢。如果仍然稀疏，請使用畫面並重建旅程。

從流程中提取：

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

研究深度

根據任務風險匹配深度。

對於快速視覺改善：

• 2-3 次樣式搜尋
• 2-3 個完整樣式
• 1 個簡短綜合分析

對於新的登陸頁面、品牌方向或重大重新設計：

• 3-5 次樣式搜尋
• 一個批次中 3-4 個完整樣式；僅在需要時使用額外批次
• 針對具體區塊/元件的畫面研究
• 實作前明確的視覺方向

對於產品工作流程：

• 用於視覺語言的樣式
• 用於關鍵狀態/元件的畫面
• 用於順序的流程

對於高風險或模糊的任務：

• 從多個角度搜尋
• 檢查後續頁面
• 比較強烈與不尋常的參考
• 在設計前記錄權衡

綜合分析

將發現分為三個類別。

視覺方向

從樣式中：

• 氛圍
• 字體排印
• 調色盤
• 密度
• 表面
• 圖像
• 獨特細節
• 該做/不該做的規則

輸出範例：

使用精確的分析 SaaS 基礎：白色畫布、緊湊的 UI 文案、克制的黑色主要動作、細邊框，以及框架面板中的產品截圖。從另一個參考借用有紀律的點綴使用，但保持色彩稀有。

產品模式

從畫面中：

• 介面需要包含的內容
• 常見佈局
• 元件模式
• 狀態
• 文案與 CTA
• 具體策略

輸出範例：

定價頁面通常將帳單切換放在方案卡片上方，突出一個方案，並將詳細功能比較移至下方。我們應改編比較結構，但保持英雄區域更安靜，因為這個產品銷售的是信任，而非炒作。

旅程邏輯

從流程中：

• 步驟
• 決策點
• 系統回應
• 使用者信心與摩擦
• 成功/失敗狀態

輸出範例：

取消流程通常會收集原因，提供相關替代方案，確認破壞性動作，然後說明存取何時結束。最好的流程會提供明確的回返路徑。

呈現發現

不要傾倒每個結果。當任務非瑣碎時，在設計前給使用者一個簡短的研究摘要。

建議格式：

研究摘要：
- 審閱的樣式：[數量] 個，涵蓋 [方向]
- 審閱的畫面：[數量] 個（如有使用）
- 審閱的流程：[數量] 個（如有使用）

視覺方向：
- [主要樣式基礎]
- [參考鎖定 / 要保留的標誌性特徵]
- [借用的細節 1]
- [借用的細節 2]

產品模式：
- [來自畫面的具體 UI 決策]

旅程邏輯：
- [流程決策（如適用）]

建議：
- [要設計什麼及其原因]

在實作之前，將研究轉換為簡短的決策記錄：

決策	來源	來源規則 / 角色	原因
[調色盤/字型/佈局/媒體/內容選擇]	[樣式/畫面/流程/使用者限制/工藝規則]	[要保留的標記/元件/媒體角色]	[具體理由]

如果某個主要選擇沒有來源，請不要將其作為設計決策交付。要麼進行更多研究，將其與使用者的限制聯繫起來，或將其移除。

設計工藝

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

• 字體排印：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

核心工藝規則：

• 在實作前定義標記：字型比例、顏色、間距、圓角、陰影。
• 保留主要參考的最強特徵，而不是將其標準化。
• 保留參考中的標記角色。不要將 CTA 點綴變成背景，將僅程式碼的顏色變成 UI 裝飾，或將裝飾性漸層變成介面表面。
• 保留參考中的圖像角色。當可用時使用有能力的素材；否則，相對於糟糕的偽插圖或照片，更傾向於誠實、尺寸適當的佔位符。
• 使用研究中品牌適當的顏色。除非使用者明確要求，否則不要預設使用靛藍/紫色。
• 將「平靜編輯式」視為當前的 AI 生成痕跡風險。除非研究和產品背景證明其合理，否則不要預設使用裝飾性標題文字替換：一個字或短語以不同的顯示/襯線/手寫/斜體樣式或點綴顏色設定，暖象牙/奶油色畫布，或橄欖/黏土/赤陶色調色盤。
• 除非研究支持，否則避免通用的英雄區 -> 功能網格 -> 定價 -> 常見問題 -> CTA。
• 使用真實產品證據來處理文案、信任信號、異議處理和區塊順序。
• 建立至少一個難忘的細節：使用者會記住的視覺手法、互動、佈局選擇或文案細節。
• 使用 text-wrap: balance 平衡標題和短顯示文字；選擇性地對散文使用 text-wrap: pretty。檢查關鍵斷點是否有孤兒詞和尷尬的最後一行。
• 將無障礙設計和響應式行為保留在設計中，而不是作為後期處理。

品質關卡

在最終交付前，確認：

• 我是否使用了樣式來提升視覺品味？
• 我是否避免了直接複製一個樣式？
• 我是否綜合了多個參考，形成獨特的方向？
• 我是否避免了將參考平均化為安全的中間值？
• 我是否保留了主要參考的標誌性特徵？
• 我是否保留了來源標記/元件的角色，而不是重新利用它們？
• 我是否使用真實素材、適當的基本元素或有意義的佔位符保留了所需的圖像/媒體角色？
• 當需要具體 UI 模式時，我是否使用了畫面？
• 當任務有多個步驟時，我是否使用了流程？
• 我能否說出哪些參考影響了設計及其原因？
• 每個主要設計選擇是否能追溯到參考、使用者限制或工藝規則？
• 我是否在實作前產生了概念和決策記錄？
• 實作是否避免了通用的 AI 設計預設值？
• 除非參考和內容角色證明其合理，我是否避免了裝飾性襯線/斜體/顏色文字替換？
• 結果是否適合使用者的產品、受眾和限制？

如果答案是否定的，請在交付前進行更多研究或改進。

對於大量的視覺工作，在交接前執行 references/visual-workflow.md 中的視覺品質保證檢查。

範例

完整的逐步說明，請參閱 references/example-workflow.md。