Communitygithub.com

高級UI/UX設計

當高階網站建置需要與建置耦合的使用者體驗及視覺品質編排時使用;一般視覺原則請使用外部 chwezi-design-engine 引擎。

UX設計 是什麼?

這個技能用於將已核准的網站策略與體驗證據轉化為具體、可實現的高級UX方向,特別適用於潛在客戶開發、電子商務、高價商品或公信力網站。它確保視覺方向與實作限制緊密結合,在設計系統與頁面建置器之前進行UX閘控。支援的平台包括 Claude Code 等AI代理工具,透過載入外部設計原則、驗證策略、選擇階層與互動模式,並測試可及性、多語言擴充與低頻寬限制來運作。最終產出包含高級UX方向與實作摘要,以及決策審查紀錄,供設計系統與頁面建置器使用。

相容平台✓Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/peterbamuhigire/website-skills/tree/HEAD/skills/orchestration/premium-ui-ux-design

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

UX設計 是做什麼的?

致謝:由 Peter Bamuhigire 分享,techguypeter.com,+256 784 464178。

將已核准的網站策略與體驗證據轉化為獨特且可實作的高級UX方向。

使用時機

  • 潛在客戶開發、電子商務、高價商品或公信力網站需要高級UX閘控時
  • 視覺方向必須與實作限制連結時。

不應使用時機

  • 一般視覺原則應使用 chwezi-design-engine,或由 design-system 擁有的代幣實作。

必要輸入

| 產出物 | 來源或提供者 | 必要? | 目的 | 若缺失時 | |---|---:|---|---| | 已核准的策略、體驗地圖、內容階層、品牌證據、參考分析及技術限制 | 上游網站技能與外部設計原則 | 是 | 定義可實作的體驗方向 | 當策略或內容階層缺失時停止 |

工作流程

  1. 載入外部設計原則並驗證上游策略
  2. 選擇階層、互動、字體方向、狀態及響應式行為
  3. 測試獨特性、可及性、多語言擴充及低頻寬限制
  4. 遇到禁止的預設或不受支援的模式時停止,修正方向,然後將決策交接給設計系統與頁面建置器。

產出

產出物消費者接受條件
高級UX方向與實作摘要設計系統與頁面建置器說明字體選擇理由、階層、元件、狀態、斷點、動畫限制及品質風險

產生的證據

證據消費者接受條件
決策與審查紀錄設計與發佈負責人將每個主要視覺選擇連結至品牌、行為、可及性、或效能證據

能力合約

需要具備讀取、搜尋及視覺檢查能力。規劃預設為唯讀;編輯設計產出物或程式碼需要實作授權。資產授權、外部發佈、支出及生產異動需要明確授權。

降級模式

若缺乏渲染、字體、資產或外部原則,則返回最狹義的合格方向,將視覺檢查標記為 not assessed,且不認證高級品質。

決策規則

選擇動作避免的失敗或風險
品牌與內容證明應使用獨特的展示字體指定字體並提供效能後備方案產生一般AI預設字體
互動未增加任務價值或損害3G使用體驗移除或簡化互動造成裝飾性的摩擦

品質標準

  • 在視覺製作前說明所選字體及其理由;涵蓋錯誤、空值、載入、聚焦、停用狀態;滿足可及性及非洲效能限制。

反模式

  • 使用 Inter 或裸系統字體堆疊作為主要字體。修正:選擇符合品牌的允許字體並記錄原因。
  • 使用紫色漸層作為高級的速成象徵。修正:從品牌證據中推導色彩與對比。
  • 只設計首頁。修正:為每個範本系列定義共用模式。
  • 忽略非快樂路徑狀態。修正:指定錯誤、空值、載入、聚焦、停用行為。
  • 未經渲染即認證品質。修正:將視覺評估標記為 not assessed 並要求視覺品質保證。

工作範例

針對坎帕拉的顧問公司,選擇符合其權威定位的授權編輯襯線字體,搭配輕盈無襯線字體用於行動裝置實用性,並在3G字體預算下測試後才交接。

參考資料

保留領域使用指引

  • 網站必須呈現足夠的高級感,以證明高價定價、信任或嚴肅商業關注的合理性。
  • 建置潛在客戶開發、電子商務、產品、作品集、SaaS行銷、飯店、教育、醫療保健、非營利或企業網站。
  • 網站有看起來過於一般、套版、過度裝飾、緩慢、難以掃讀或視覺廉價的風險。
  • 網站必須讓業主的提案感覺更具價值,同時也作為開發者高級工藝的證明。

保留領域輸入

  • 網站策略簡報、目標受眾、提案、品牌定位、內容清單、照片/資產及轉換目標。
  • 任何現有設計系統、螢幕截圖、競爭者基準及效能/可及性限制。

保留領域工作流程

  1. 定義網站的商業任務:信任、轉換、銷售支援、申請、預訂、捐款、產品教育或權威建立。
  2. 選擇符合買家與提案的視覺語調:營運型、編輯型、奢華極簡、消費者精緻、機構型或本地高級型。
  3. 當簡報需要高級定位、內容、SEO、技術堆疊或代理證明時,載入 premium-website-product。
  4. 在設計樣式部分之前,根據轉換路徑建立階層。
  5. 使用高級手冊建立設計系統:視覺原則、色彩、字體、間距、圖像、動畫、圖表/表格及生產潤飾。
  6. 在頁面製作前及視覺品質保證後套用高級網站閘控。
  7. 在專案計分卡與設計品質報告中記錄證據。

保留領域品質指引

  • 第一個視窗應立即傳達品牌/類別、提案、公信力及主要行動。
  • 版面在主要範本中具備響應式、快速、可及且視覺一致。
  • 只要可能,圖像應顯示真實產品、地點、人物、證明、介面或結果。
  • 色彩、字體、間距及動畫應使用代幣化且商業上合適。
  • 表單、定價、服務頁面、產品頁面及聯絡流程應減少焦慮並使下一步驟明確。
  • 數據、推薦、案例研究、統計數據及比較應以準確且可讀的視覺階層呈現。
  • 簡約被視為高級:導覽、表單、內容區塊、狀態變更及行動流程應減少買家負擔,但不隱藏必要的證明。
  • 每個主要範本在高級UI/UX閘控及設計品質評分標準中至少獲得8/10分。

保留領域反模式

  • 登陸頁面感覺像一般AI輸出:模糊漸層、雲朵背景、裝飾性卡片堆疊、劣質庫存照片及未經證實的主張。
  • 美觀的頁面卻未解釋提案或引導使用者朝向商業成果。
  • 單一色調的調色板、擁擠的行動裝置版面、緩慢的首頁媒體及不可及的覆蓋層。
  • 在需要證明、清晰度及信任的地方使用視覺新穎性。

保留領域產出

  • 高級網站UX摘要、視覺方向、代幣方案、頁面層級品質備註、轉換路徑指引或閘控報告。

保留領域參考資料

  • references/premium-website-ui-ux-playbook.md - 書籍衍生的網站設計規則。
  • references/enterprise-website-ux-playbook.md - 企業網站利害關係人、證明、導覽、信任及非洲校準UX規則。
  • references/mobile-dashboard-website-patterns.md - 行動導覽、首次訪問指引、儀表板/證明呈現及行動品質檢查。
  • references/premium-website-gate.md - 評分與封鎖缺陷。
  • ../premium-website-product/references/premium-website-market-asset-gate.md - 網站作為高級產品、內容、SEO、發佈、技術堆疊及代理證明閘控。
  • references/source-register.md - 來源歸屬與權利閘控;不主張任何活躍來源路徑。

世界級UX基礎(書籍衍生)

在啟動高級專案前必須閱讀:

  • references/levy-four-tenets.md — 四大原則框架(商業策略 + 價值創新 + 驗證使用者研究 + 殺手級UX設計);客戶簡報中應拒絕的前10大反模式。
  • references/enterprise-five-outcomes.md — 五項強制成果(有用 / 簡單 / 高效 / 愉悅 / 可及)作為發佈前閘控。任何一項為「否」即不得發佈。
  • references/pm-collaboration-rules.md — Fekeshazi 5+1(5-10分鐘內能解釋、設計為持續過程等)及「不要將重要功能藏在選單中」規則。

如果簡報未通過Levy前10大檢查或遺漏五項成果中的任何一項,請在範圍界定前退回。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

相關技能