人類優先 UI（Human-First UI）
打造出看起來像是有品味的人類所製作的介面——而不是模板傾倒或 AI 預設。此技能編碼了當使用者明確要求 UI 不要看起來像 AI 生成時，所使用的設計原則、反模式檢查以及工具工作流程。
使用時機
- 使用者說 UI「看起來像是由 ChatGPT 做的」或「看起來是 AI 生成的」
- 使用者想要一個「極簡、高級、人性化」的外觀
- 使用者提及 Emil Kowalski、Impeccable、21st.dev、webmxerz 或類似的設計品質訊號
- 在建立或審查任何對外觀有要求的網頁 UI 時
核心原則
1. 不使用 emoji 圖示
使用 emoji 作為圖示是 AI 生成介面的頭號特徵。請使用文字標籤、簡單的 CSS 形狀或行內 SVG。Emoji 屬於內容，不應用於 chrome（介面裝飾）。
2. 按鈕不使用發光陰影
在互動元素上使用帶有色彩輝光（特別是強調色）的 box-shadow 是 AI 生成 UI 的典型標誌。僅使用平面邊框和懸停狀態變化。
3. 不使用彈跳/彈簧動畫
滑動點、彈跳載入器、彈簧縮放懸停效果——這些都是裝飾，而非功能。微妙的懸停過渡（120-150ms ease）是好的。彈跳則不行。
4. 不使用帶有圖示方格的歡迎卡片
歡迎畫面應該是頁面上的簡單文字，而不是一個裝飾過的、帶有圖示方格和提示框（包裝成功能卡片）的卡片。
5. 對比度優先
在深色背景上，即使是被淡化（muted）的文字，仍需要 4.5:1 的對比度（WCAG AA）。常見的 AI 預設值如 #5a5a5a 搭配 #0d0d0d 會嚴重失敗。請使用 Impeccable 測試。
6. 正文最低 14px，理想 16px
10-11px 僅適用於裝飾性的微型標籤（章節標題、時間戳、帶有字母間距的頁尾狀態文字）。承載內容的文字必須在 12px 以上，正文則應維持在 14-16px。
7. 清晰的字體層級
使用更少的尺寸，並增大尺寸間的差距。不要在一套設計中使用 6 種不同的 font-size 值，3-4 個間隔良好的階層就已足夠。目標是在標籤/次要/正文/標題尺寸之間有清晰的區隔。
8. 單一強調色，偏好暖色調
在深色中性背景上使用單一暖色調（金色/琥珀色）做為強調色，會看起來有設計感和高級感。紫/藍色漸層是 AI 的預設值，應避免使用。
9. 行動優先
為手機設計。使用漢堡選單、疊加側邊欄、大型觸控目標，以及不需縮放即可閱讀的文字。不要先做桌面版再把它擠壓變小。
工作流程
步驟 1：檢查技能庫
在開始建置前，先檢查 webmxerz 或 impeccable 是否可用：
# WebMXERZ（設計智慧：顏色、字體排印、樣式、UX 模式）
ls ~/tmp/webmxerz/src/webmxerz/scripts/search.py 2>/dev/null && \
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<查詢>" --domain <style|typography|color|ux|product|...> -n 5
# 如尚未複製：
git clone https://github.com/nextlevelbuilder/webmxerz.git ~/tmp/webmxerz
首選：使用 --design-system 一次取得完整系統，而非逐個領域搜尋：
# 完整設計系統，並根據專案調整設計旋鈕
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<描述>" \
--design-system \
--variance <1-10> \
--motion <1-10> \
--density <1-10> \
-p <專案代號> \
-n 5
對多頁面專案進行持久化：
# 儲存 MASTER.md（以及可選的頁面覆蓋）
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<查詢>" \
--design-system -p <專案> --persist -o <專案目錄> [--page <頁面名稱>]
接著在處理特定頁面時，優先檢查 design-system/<專案>/pages/<頁面>.md——其規則會覆蓋 design-system/<專案>/MASTER.md。
步驟 2：搜尋設計方向
# 尋找符合使用者想要的風格
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<描述>" --domain style -n 3
# 尋找字體排印
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<氛圍>" --domain typography -n 3
# 為產品類型尋找色彩盤
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<產品類型>" --domain color -n 3
# 尋找 UX 模式
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<模式>" --domain ux -n 5
根據實際的技術棧調整結果。如果專案是純 HTML/CSS/JS（而非 React/Tailwind），則提取設計原則（顏色、字體、間距、模式）並以純 CSS 實作。不要複製 React 元件程式碼。
步驟 3：依循原則建置
- 從搜尋結果中選擇一個符合使用者品味的風格
- 選擇一組字體配對
- 選擇一個色彩盤（根據使用者偏好調整強調色）
- 在專案的實際技術棧中實作
- 保持極簡：間距和字體排印負責營造效果，而非裝飾
步驟 4：使用 Impeccable 進行程式碼檢查
npx impeccable detect templates/ static/css/ 2>&1
檢視每個發現的項目。修正被標記的問題。結束碼 0 = 無問題。結束碼 2 = 仍有發現。
步驟 5：與使用者反覆迭代
展示結果。如果使用者說它看起來還是 AI 生成或是不對勁，明確詢問哪裡有問題（顏色、尺寸、間距、某個元件），然後只修正那一點。不要因為模糊的回饋就整個重新設計。
已知陷阱
- 過度裝飾來「修正」AI 外觀： 加入更多裝飾並不會讓它看起來像人類——只會讓它看起來過度裝飾。節制才是訊號。
- 在非 React 專案中使用 webmxerz 的 React 程式碼： 該技能的資料（styles.csv、colors.csv、typography.csv、ux-guidelines.csv）與技術棧無關且實用。其 React 元件範例則不然。提取原則，跳過元件程式碼。
- 將 Impeccable 視為設計審查： 它能捕捉技術反模式（對比度、尺寸、層級）。它無法評判品味、平衡感，或整體美學是否感覺像人類。把它當作一次 lint 檢查，而非設計判斷的替代品。
- 在非 React 專案中使用 21st.dev 元件： 21st.dev 是一個 React + Tailwind 的註冊表。它的元件無法直接用在 Flask/Jinja2/純 HTML 專案中。僅將其作為視覺靈感來源瀏覽。
- 搜尋結果中的固定色值： 搜尋結果中的調色盤提供的十六進位值只是起點，而非最終答案。根據使用者實際喜歡的顏色調整強調色。
- 從其他來源移植設計系統（Lovable、Figma 匯出、其他專案的 CSS）： 務必針對實際背景，對所有淡化/低對比度的 token（
--text-faint、muted-foreground、次要文字）進行 WCAG AA 審核。設計師在設計工具中為了看起來更細膩而將這些值設得太低——在真實的深色背景上，這些顏色對於低於 14px 的文字會無法通過對比度檢查。在發佈前，將深色背景上的淡化文字至少提升至#8a8886。 - 將 Lovable 建立的版面視為起點，而非替代品： Lovable 的版面提供了乾淨的結構和設計系統，但它不會包含你專案的功能擴展（API 插槽編輯器、工具面板、語音開關、階段重新命名、記憶體分頁）。移植設計，保留功能。
參考檔案
references/impeccable-findings.md—— 來自 Sayip 會話的 Impeccable 掃描結果（發現了什麼、修正了什麼、如何執行）references/webmxerz-quickref.md—— webmxerz 搜尋領域、標誌、設計旋鈕、--persist、推理合約，以及從 Sayip 衍生並修復對比度的調色盤的快速參考references/lovable-port-checklist.md—— 將 Lovable 建立的版面移植到現有專案的檢查清單（複製、審核 token、移植結構、保留功能、lint、測試）
相關技能
software-development:codebase-inspection—— 當你需要在重新設計前先檢查已建置的內容時lovable-port—— 將 Lovable 建立的版面移植到現有 Flask/純專案的類別級技能