design

設計 skill 概覽

design skill 能把模糊的 UI 需求轉成接近正式上線水準的視覺成果，而且會帶著明確的設計觀點，特別適合處理「把這個頁面／元件做得更好看」這類問題，而不是「新增一段邏輯」。它很適合用在 UI Design、以截圖為主的精修、字體整理，以及修正那些看起來醜、零散、不清楚或版面彆扭的視覺問題。

什麼情況最適合使用 design skill

當任務重點是前端呈現，而不是後端行為時，就該用 design：像是頁面、元件、儀表板、行銷區塊、空狀態與視覺翻新。當使用者提供截圖、粗略的畫面描述，或直接抱怨介面「怪怪的」時，這個 skill 特別合適。

design skill 的差異在哪裡

這個 design skill 不是一般的風格提示詞。它會推動你做更強烈的美感判斷，要求版面與 token 保持一致，並避免做出那種一看就很「預設模板感」的 UI。repo 裡也包含一些實用防線，像是避免混用 CSS 系統、避免表層層級不清、以及避免過度濫用常見視覺套路。

什麼情況不該使用它

如果主要問題是資料流 bug、state 管理、API 問題，或只牽涉後端工作，就不要把 design 當成主要解法。若核心問題在邏輯、路由或 schema，這個 skill 也許能改善呈現，但無法解決根因。

如何使用 design skill

安裝與閱讀順序

使用 npx skills add tw93/Waza --skill design 安裝。先讀 SKILL.md，再依序閱讀參考檔案：references/design-traps.md、references/design-reference.md、references/design-aesthetic-quality.md、references/design-tokens.md，如果畫面是儀表板風格，再看 references/design-data-viz.md。這個順序能幫你在產生視覺之前先抓住限制條件。

design skill 需要哪些輸入

最好的 design 使用方式，是先給具體輸入：畫面類型、受眾、目前痛點、品牌方向，以及任何硬性限制。好的輸入會像這樣：「把這個定價頁重新設計給企業買家，保留現有文案，走沉穩高級的調性，避免深色主題」，而不是「把它弄得漂亮一點」。

如何下提示詞，讓輸出更好

在 UI Design 的情境下，要明確告訴 skill 哪些必須保留、哪些可以改。把內容、目標裝置、現有設計系統，以及最精確的抱怨點都寫清楚。如果你有截圖，也要說明問題是層級、間距、密度、色彩、字體，還是元件一致性。

實務工作流程

先把方向鎖定：先決定結果要偏保守、符合品牌，還是帶點探索性。接著只要求一個清楚的 UI 方向，對照你的限制條件檢查第一版，再只針對最弱的一個環節迭代。如果結果還是很普通，不要再加更多視覺噪音，而是要求更強的設計立場。

design skill 常見問答

design 跟一般提示詞是一樣的嗎？

不一樣。一般提示詞可以描述風格，但 design skill 會加入可重複使用的指引、反模式檢查，以及針對 UI 工作的輸出紀律。這通常能減少那種「預設提示詞」產出的味道，也能幫模型做出更難、更關鍵的美感選擇。

design skill 適合初學者嗎？

適合，只要你能描述畫面和問題。你不需要很深的設計術語，但你要把情境說清楚。初學者如果提供截圖、產品目標，以及哪些地方「看起來不對」，通常會得到更好的結果。

它適合儀表板和圖表嗎？

適合，但只有在介面以數字或圖表為主時，才使用偏儀表板的參考內容。若是像 App shell 或卡片這類 UI Design 工作，儀表板規則可能太嚴，反而會把版面綁死。

什麼時候我應該跳過 design？

當任務主要是後端邏輯、資料轉換或基礎架構時，就跳過它。若你只是想快速做一點外觀修飾，且不需要更有意識的設計決策，也可以跳過。

如何提升 design skill

提供更好的設計限制條件

品質提升最大的關鍵，不是多加形容詞，而是把限制條件講清楚。說明這個介面是做什麼的、誰在用、哪些部分不能動、哪些部分要改。比起「做得高級」，「讓金融使用者感到沉穩、可信、有效率」更有幫助。

給更明確的視覺回饋

如果第一版不對，就直接點出是哪裡失敗：層級太平、間距太鬆、字體太活潑，或表層太雜亂。design skill 在你一次只修正一個維度時進步最快，而不是一口氣要求整頁重畫。

留意常見失敗模式

最常見的問題包括模板化版面、裝飾過頭的區塊、圓角不一致，以及千篇一律的強調色處理。repo 裡的參考文件有價值，就是因為它們會先提醒你避開這些模式，再讓它們出現在輸出裡。

搭配截圖與範例反覆調整

在使用 design 時，拿輸出和截圖或你認可的參考設計做比較，再要求針對性修改。如果頁面需要更高的 UI Design 品質，就一次只要求一個改動，例如更緊湊的層級、更不同的字級比例，或更有辨識度的表層系統。