UI Visual Design

UI 視覺設計法則

任務定義

定義可落地的視覺語言,包含風格方向、色彩、字體、間距與核心元件外觀,讓團隊能一致延伸到畫面、原型與系統規範。

何時使用

• 根據產品類型與目標使用者選擇適合的視覺風格
• 提供色彩、字體、間距、元件的具體設計規範
• 內建 20 個精選 UI 風格
• 確保視覺設計符合品牌調性與使用情境
• 提供可執行的視覺設計指引

必要輸入

• 產品類型、商業目標與主要使用者輪廓
• 品牌調性、既有識別資產或競品參考
• 使用平台、內容型態與主要操作情境
• 目前畫面問題或需要統一的視覺範圍
• 這次視覺設計要支援的交付目標,如原型、正式設計或 design system

預期輸出

• 推薦的視覺風格與選擇理由
• 色彩配置方案(主色、輔助色、中性色)
• 字體與排版規範
• 間距與佈局系統
• 元件視覺風格指引
• 設計風格參考連結

完成條件

• 已明確選定風格方向,並說明其適配的品牌與產品情境
• 已產出可落地的色彩、字體、間距與元件規範
• 已定義視覺層級與關鍵元件的使用方式
• 已考慮一致性、可維護性與基本無障礙要求
• 已讓團隊可據此延伸到原型、畫面設計或 design tokens

不適用情境

• 只需要頁面骨架與內容排序,更適合 wireframing
• 主要問題是流程交互驗證,更適合 prototyping
• 缺少品牌方向與設計目標,不應直接定義風格細節

常見誤用

• 只描述風格感受,沒有給出可執行的規範
• 直接模仿參考站點,卻沒有對應品牌目標與使用情境
• 色彩與字體很多,但沒有建立層級與使用原則
• 元件樣式各自好看,整體卻缺乏一致性
• 只追求視覺衝擊,忽略資訊可讀性與操作清晰度

觸發條件

• 使用者提到「視覺風格」、「UI 風格」、「設計風格」、「色彩配置」、「視覺規範」
• 任務需要選擇或定義介面的視覺呈現方式
• 任務需要提升介面設計的專業度與美感
• 任務需要參考專業設計風格庫

高複雜度觸發

• 任務涉及 B2B 平台、企業後台、SaaS 產品或多產品線的視覺統一
• 使用者提到品牌延伸、視覺差異化、專業可信度或跨平台一致性
• 問題包含視覺風格不明確、缺乏設計規範、元件風格不一致或需要快速建立視覺基準
• 團隊需要在短時間內建立專業且一致的視覺系統

必要澄清

• 這個產品的類型是什麼?目標使用者是誰?
• 品牌調性是什麼?例如專業、親和、科技、溫暖、極簡等
• 主要使用情境是什麼?桌面、行動、後台管理還是公開網站?
• 是否已有品牌色彩或視覺識別系統?
• 希望傳達什麼樣的第一印象?可信、創新、效率、溫暖還是其他?
• 這次設計的優先目標是什麼?美感、可用性、品牌識別還是快速執行?

可搭配技能

• wireframing: 在線框圖階段就定義視覺風格方向
• prototyping: 將視覺風格應用到高保真原型中
• design-system: 將視覺規範系統化為可重複使用的元件
• accessibility-design: 確保視覺設計符合無障礙標準

資料來源

• styleprompts.yaml 是此 skill 的風格資料來源,用途是根據使用者輸入快速匹配適合的風格候選
• YAML 應保持精簡,重點放在 category、tags、use_case、industry、visual_hints、prompt.short、ai_match
• 風格資料負責提供「檢索線索」與「視覺提示」,不是完整 design system 規格書
• 此 skill 的職責是把 YAML 中的精簡資訊展開成可執行的視覺建議

輸出原則

• 輸出應先回答「推薦哪個風格,為什麼是它」,不要先丟一大段抽象形容詞
• 視覺建議必須明確連回使用者輸入的產業、頁面目標、品牌調性與限制條件
• 內容應可直接被設計師、Cursor 或其他 AI 設計工具接續使用
• 若資訊不足,先提出 1-3 個必要澄清,不要假設不存在的品牌規範
• 不要一次展開過多候選風格;預設以 1 個主風格 + 0-2 個次候選為上限

固定輸出格式

每次輸出都應盡量遵守以下結構:

1. 推薦風格

   • 主推薦風格名稱與代碼
   • 1-2 句推薦理由

2. 風格關鍵字

   • 3-5 個描述此風格的核心詞

3. 視覺建議

   • 配色方向: 根據 visual_hints.palette
   • 字體方向: 根據 visual_hints.typography
   • 版面節奏: 根據 visual_hints.composition
   • 元件氣質: 根據 visual_hints.components
   • 整體氛圍: 根據 visual_hints.mood

4. 適用原因

   • 明確說明此風格為何適合目前任務
   • 若有不適合之處也要點出

5. 建議 prompt

   • 以 prompt.short 為基底
   • 補上使用者任務情境,形成可直接使用的 prompt

6. 可選替代

   • 若真的有合理替代,最多列 2 個
   • 每個替代僅用 1 句說明差異

禁止事項

• 不要直接把 styleprompts.yaml 原文逐條貼給使用者
• 不要一次推薦過多風格,造成決策負擔
• 不要只給風格名稱而沒有理由
• 不要只給抽象美感詞,卻沒有配色、字體、版面與元件方向
• 不要在缺乏資訊時虛構品牌規範、既有設計系統或色票

執行步驟

1. 解析使用者輸入

   • 先抓出產品類型、產業、頁面目標與風格詞
   • 抓出使用者直接提到的風格詞,例如科技、極簡、奢華、日式、復古、霓虹
   • 抓出限制詞,例如不要太花、不要太冷、要專業可信、要高轉換

2. 從 styleprompts.yaml 匹配候選風格

   • 優先比對 ai_match.triggers 與 ai_match.keywords
   • 再交叉比對 category、tags、use_case、industry
   • 用 visual_hints 快速理解每個候選風格的配色、字體與氣質
   • 最多提供 1-3 個候選風格,不要把整份風格庫原封不動列出

風格匹配規則

• 若使用者明確提到風格名稱或常見別名,優先比對 ai_match.triggers
• 若使用者先提到產品型態或頁面類型,優先比對 use_case
• 若使用者先提到產業或商業情境,優先比對 industry
• 若使用者主要描述氣質與視覺感受,優先比對 tags 與 ai_match.keywords
• 若同時命中多個風格,以「頁面目標」與「產業情境」優先,其次才是純美感描述
• 若使用者有明確限制條件,例如不要太花、不要太冷、要高轉換,應排除衝突風格
• 若沒有單一明確答案,仍需選出 1 個主推薦,其餘僅作為替代參考

3. 選出最適合的主風格

   • 根據使用者目標判斷哪個風格最符合情境
   • 說明推薦理由,明確連回使用者輸入
   • 如果需求混合,可以提供主風格 + 次風格參考,但仍要有一個主推薦

4. 把風格展開成視覺建議

   • 根據 visual_hints.palette 整理主色、輔助色與中性色方向
   • 根據 visual_hints.typography 建議字體氣質與排版層級
   • 根據 visual_hints.composition 補上版面節奏與資訊層級
   • 根據 visual_hints.components 補上元件氣質與 CTA 呈現方式
   • 根據 visual_hints.mood 整理整體氛圍與視覺語言

5. 輸出可直接使用的 prompt

   • 優先使用該風格的 prompt.short
   • 再依使用者場景補上產品類型、頁面目標與限制條件
   • 讓輸出的 prompt 可以直接給 AI 設計工具、Cursor 或設計師繼續使用

6. 確認一致性與可用性

   • 檢查建議是否符合品牌調性與頁面目標
   • 檢查視覺方向是否足夠一致,不互相衝突
   • 確保文字可讀性、層級清楚與基本無障礙要求

執行檢查

• 已從使用者輸入抓出產品類型、產業、頁面目標與風格詞
• 已從 styleprompts.yaml 篩出 1-3 個候選風格
• 已選出主風格並說明推薦理由
• 已整理色彩、字體、版面與元件氣質建議
• 已輸出可直接使用的視覺 prompt
• 已確認一致性、可讀性與基本無障礙要求

精簡範例輸出

視覺方向建議

使用者需求

• 幫我做一個 SaaS 首頁
• 要專業可信、乾淨清楚
• 目標是提升註冊轉換

推薦風格

• 主推薦: S01 科技極簡
• 推薦理由: 這個需求同時包含 SaaS、專業可信、乾淨清楚與高轉換目標,最適合用科技極簡作為主風格。它能兼顧理性層級、品牌信任感與 CTA 清晰度。

風格關鍵字

• 科技
• 極簡
• 專業
• 可信任
• 高轉換

視覺建議

• 配色方向: 以白色與淺灰作為背景,搭配單一品牌藍作為主 CTA 與重點色
• 字體方向: 使用幾何無襯線字體,標題清楚、正文易讀
• 版面節奏: Hero 區保持大留白與單一主訊息,中段用卡片式區塊整理功能與社會證明
• 元件氣質: 細邊框、輕陰影、小圓角,避免過度裝飾與厚重擬真
• 整體氛圍: 理性、專業、穩定、可信任

適用原因

• 這個風格非常適合 B2B SaaS 與產品首頁,能讓價值主張、功能亮點與 CTA 更容易被快速理解。
• 如果品牌想要更強烈的情緒張力或娛樂感,這個方向就會偏保守。

建議 prompt

• 設計一個科技極簡風格的 SaaS 首頁,目標是提升註冊轉換。使用中性色與單一品牌主色,強調留白、清楚層級、可信任感與高轉換 CTA,並用卡片區塊整理功能亮點、客戶證明與價格方案。

可選替代

• S04 瑞士通訊: 如果你要更強的資訊設計感與編輯式理性結構,可改選這個方向。
• S19 美學平衡: 如果你想保留專業感,但希望畫面更柔和、更有現代產品感,可以考慮這個方向。

資料使用規則

• 產出內容前，先閱讀 TEMPLATE.md，確認欄位結構、最小必要欄位、品質標準與轉換規則。
• 接著再閱讀 styleprompts.yaml，從既有風格分類、標籤、適用情境與 ai_match 規則中選取最適合的候選。
• 若要新增或整理風格資料，優先沿用 TEMPLATE.md 的格式與命名規則，避免建立重複或邊界不清的風格項目。
• 最終輸出必須優先對齊 TEMPLATE.md 的格式要求，其次再引用 styleprompts.yaml 的內容細節。