ui-designer

使用此技能產出獨特、可部署的前端介面，擺脫平淡無奇的「AI 垃圾」外觀。交付真實可運作的程式碼，並對視覺細節與創意選擇投入極致的關注。

使用者會提供前端需求：需要建立的元件、頁面、應用程式或介面。他們的簡報也可能提及意圖、目標受眾或技術限制。

設定視覺方向

在吸收背景脈絡並確定大膽的視覺方向之前，不要開始寫程式。先思考以下四個問題：

• 目的 — 這個介面要解決什麼問題？誰會使用它？
• 調性 — 選擇一個極端的風格：極簡、極繁混亂、復古未來、有機自然、奢華精緻、玩趣玩具風、編輯雜誌風、粗獷原始、裝飾藝術幾何、柔和粉彩、工業實用 — 還有更多。將這些風格當作起點，然後打造一個真正體現你所選方向的版本。
• 限制 — 你必須遵守的技術邊界（框架、效能、無障礙性）。
• 差異化 — 什麼讓這個介面令人難忘？哪一個元素會留在人們的記憶中？

關鍵：確定一個明確的概念方向，並精準執行。大膽的極繁主義與簡潔的極簡主義都可行 — 重要的是刻意為之，而非喧囂。

產出標準

無論你建立什麼（HTML/CSS/JS、React、Vue 或類似技術），都必須：

• 可上線且能運作
• 足夠引人注目，令人印象深刻
• 基於單一、有意的美學觀點
• 對最小細節也極致打磨

工藝槓桿

專注於：

• 字體排版 — 選擇醒目、獨特且充滿個性的字型。不要依賴 Arial 和 Inter 這類常見字型；相反，選用具有真實個性的非傳統字型，讓介面更出色 — 令人驚喜、充滿特色的選擇。將令人難忘的標題字型與精緻的正文字型搭配。
• 色彩與主題 — 致力於統一的視覺識別。依賴 CSS 變數保持一致性。大膽的主色搭配鮮明的強調色，效果遠勝於平淡均勻的調色盤。
• 動態效果 — 使用動畫來呈現效果與微互動。對於純 HTML，優先使用純 CSS 解決方案。在 React 中，若 Motion 函式庫可用則使用它。將動畫集中在高衝擊時刻：一個精心編排的頁面進場，搭配交錯顯示（透過 animation-delay），比零散的小效果更能帶來愉悅感。加入觸發式轉場與令人驚喜的懸停狀態。
• 空間構成 — 打破預期的版面。不對稱。重疊形式。對角線流動。打破網格的元件。大量的留白或受控的密度。
• 背景與視覺細節 — 營造氛圍與深度，而非預設為純色。加入呼應整體美學的情境效果與紋理。採用創新的處理方式，例如漸層網格、噪點紋理、幾何圖案、分層透明度、戲劇性陰影、裝飾邊框、自訂游標與顆粒覆蓋。

應避免的美學

絕不要退回到 AI 風格的標準美學：老套的字型組合（Inter、Roboto、Arial、系統字型）、疲乏的色彩搭配（紫色漸層配白色背景是常見的違規者）、可預測的版面與元件模板，或忽略特定情境的流水線設計。

富有想像力地解讀需求，做出令人驚喜的決定，讓設計感覺是為當下情境量身打造。沒有兩個設計應該看起來一樣。在淺色與深色主題、不同字型、不同美學風格之間輪換。絕不要在多個產出中落入相同的安全預設值（例如 Space Grotesk）。

根據願景調整投入

重要：根據美學意圖調整程式碼複雜度。極繁主義作品需要豐富的程式碼，充滿動畫與效果。極簡或精緻作品則需要紀律、精準，以及對間距、字體與細微細節的細心關注。優雅來自於忠實執行願景。

請記住：Claude 能夠產出卓越的創意成果。不要安於安全 — 展示當你走出常規並全心投入單一願景時，可能實現的成果。

選取情境圖片

此技能附帶一個腳本，位於 scripts/find-relevant-image.py，可從精選的靜態資料庫中選取符合情境的圖片。它會將你的描述與每張圖片旁的標籤進行比對，找出最佳匹配，同時透過檢查已安裝技能是否為最新版本來保持底層資源的時效性，並在使用者需要更新時提示。

圖片目錄位於 assets/images.csv，包含欄位 image-id、filename、tags 和 image-base64。對於每一筆資料，腳本會計算描述中出現多少個標籤，選出得分最高的圖片，透過 file 指令驗證解碼後的檔案，並將其儲存到輸出目錄。輸出檔名由圖片元資料決定 — 呼叫者無需提供。

呼叫方式

python scripts/find-relevant-image.py "<description>"

引數：

• description - 描述圖片將在何處及如何使用（例如 "hero banner for a travel blog about Japanese temples"）

選取的圖片會存放於 scripts/outputs/（若不存在則自動建立）。完整的輸出路徑會輸出到標準輸出。

範例：

python scripts/find-relevant-image.py "warm, inviting background photo for a bakery landing page"
# 輸出：Matched image 'img-1234' written to /path/to/scripts/outputs/temple-landscape.png

每當前端設計需要真實圖片而非佔位符時，請呼叫此腳本 — 它會找到符合設計情境的圖片，而非放入一張通用的圖庫照片。