如何讓 AI 有設計品味

你開開心心地請 AI 幫你寫一個 Landing Page，本來期待能拿到像 Vercel 或 Stripe 那樣充滿質感的設計，結果畫面一渲染出來，卻是滿滿的 AI slop 味：慘白的背景、毫無對齊的 padding、粗暴刺眼的按鈕，還有俗氣的漸層色。這種令人崩潰的瞬間，相信每個前端開發者都經歷過。

AI 會不會有設計品味，通常不取決於模型夠不夠大，而是你有沒有把「品味」拆成可執行的規格與層次。

我目前把這件事拆成四個維度，分別對應四個開源工具：taste-skill 負責把 UI 從「能看」推到「驚艷」；Impeccable 把設計流程、審查、檢測串成一套自動化機制；awesome-design-md 把真實品牌風格整理成 Agent 能直接讀懂的 DESIGN.md；Huashu Design 則是把需求直接換成可交付的高保真原型或簡報。

Taste Skill：讓 UI 不要長成 AI slop

taste-skill 的核心不是幫你畫插圖，而是調整 AI 生成前端代碼時的底層美感：包括排版（layout）、字體（typography）、間距（spacing）與動畫微調（motion），大幅減少公版範本的味道。

它最適合的情境是 landing page、marketing site、product homepage 這類視覺要求高的頁面。如果你的痛點是「AI 做出來的版面沒壞，但就是看起來很陽春、沒質感」，這個 skill 很適合先套上去。

安裝很簡單，在專案根目錄執行：

npx skills add https://github.com/Leonxlnx/taste-skill

這行指令會把 taste-skill 複製並新增到你專案的 .agents/skills 目錄下。如此一來，專案裡的 Agent 就能自動讀到這份品味指南，寫出比較精緻的前端代碼。

這會把整組技能裝進專案。如果只想裝其中一個，可以加 --skill "design-taste-frontend" 指定；要保留舊版行為就指定 design-taste-frontend-v1。

Impeccable：把設計變成可以檢查、可以修的流程

Impeccable 比較像一套 AI 設計工作流，不只是單純的風格 prompt。它提供 1 個 skill、23 個 command、live browser 迭代，還有 41 條確定性的檢測規則（detector rules），把「品味」變成可以用工具檢驗、優化的指標。

如果說 taste-skill 偏向把輸出變好看，Impeccable 就是把整個設計流程變可控。要 audit 一個頁面哪裡像 AI 寫的、要修字體層級和無障礙設計（a11y）、要在瀏覽器裡即時調整視覺，都是它的主場。

npx impeccable skills install

這會在你的專案裡下載並安裝 Impeccable 的所有審查指令。之後你就能在對話裡叫 Agent 跑 audit 來自動揪出不合理的 UI 設計。

裝完後在你的 AI 工具裡跑 /impeccable init，它會建立初始的設計上下文。之後就用 audit、critique、polish、distill、animate 這些命令繼續修。

awesome-design-md：讓 Agent 讀規格，不是讀靈感

如果你的專案不是要泛用的「高級感」，而是需要嚴格遵守 Apple、Stripe、Vercel、Linear 這種特定品牌的設計語彙，awesome-design-md 就非常關鍵。它不是丟一堆截圖給 AI，而是把品牌風格整理成 DESIGN.md：把色彩定義、字體層級、元件樣式、排版原則、Do/Don't 寫得清清楚楚，讓 Agent 有據可依。

它不是需要安裝的軟體，而是文件規範。做法是從 repo 或網站取得品牌對應的 DESIGN.md 放到專案根目錄，並在 prompt 裡明確規定：

先讀 DESIGN.md。
不要自行發明品牌色、字體或元件風格。
如果不確定，優先遵守：
1. DESIGN.md
2. 官方 design system / brand guideline
3. 類似產品的實作樣本

這是我們在與 Agent 對話時可以直接塞在 System Prompt 的指令約束。這能強迫 Agent 乖乖聽話，遇到不確定的設計決策時優先去讀 DESIGN.md，而不是自己瞎猜亂寫。

Huashu Design：一句話換一份能交付的設計稿

Huashu Design（華術設計）是一個對話式設計交付工具。它不只寫網頁，還能直接幫你生出高保真原型、可互動 prototype、簡報、動畫，支援輸出 MP4、GIF、PPTX、PDF 等多種格式。

它的使用場景非常明確：「我現在就要拿出一份能給客戶看的東西」。例如先出三個方向讓人選、做一份能直接報的提案簡報、或是把概念做成 60 秒的宣傳動畫。

npx skills add alchaincyf/huashu-design

這會將華術設計（Huashu Design）的技能庫拉進專案中。裝好後，Agent 就具備直接產出簡報、宣傳影片或可互動原型（prototype）的能力。

裝完後直接對 Agent 下需求就行，例如「做一份 AI 心理學的演講 PPT，先給我 3 個風格方向」或「做一個可點擊的 iOS 原型，4 個核心畫面要能串起來」。重點是不用先進 GUI、不用先開 Figma，就能先拿到成品方向。

整合工作流

在實際開發中，這四個工具可以串成一套完整的開發鍊：

1. Brand Rule：先用 awesome-design-md 在根目錄建立品牌設計規範文件，用來約束風格。
2. Frontend Taste：使用 taste-skill 優化 Agent 的程式碼生成習慣，確保排版與動畫在水準之上。
3. Design Audit：開發完後，用 Impeccable 進行自動化設計審核與微調（polish），修補 AI 寫法的毛邊。
4. Design Delivery：若需要快速做提案簡報或示範動畫，直接呼叫 Huashu Design 產出對應檔案。

來源

• Taste Skill
• Impeccable
• VoltAgent/awesome-design-md
• Huashu Design