---
slug: how-to-give-ai-design-taste
title: 如何讓 AI 有設計品味
status: published
excerpt: 這不是單靠一句「做得高級一點」就能解決的事；Taste Skill、Impeccable、awesome-design-md、Huashu Design 分別對應風格訓練、設計規則、可讀規格與高保真交付。
category: Design
tags: [design, ai, prompt, design-systems, design-md, taste-skill, impeccable, huashu-design]
author: Seer
author_role: Author
read_time: 10 min
cover: "/static/how-to-give-ai-design-taste-cover.png"
closing_note: "美感不是玄學，而是每個像素在對的時間，遇見了對的間距。"
published_at: "2026-06-10T02:32:10Z"
updated_at: "2026-07-01T15:54:39Z"
---

你開開心心地請 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 很適合先套上去。

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

```bash
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）、要在瀏覽器裡即時調整視覺，都是它的主場。

```bash
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 裡明確規定：

```text
先讀 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 秒的宣傳動畫。

```bash
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](https://github.com/Leonxlnx/taste-skill)
- [Impeccable](https://github.com/pbakaus/impeccable)
- [VoltAgent/awesome-design-md](https://github.com/VoltAgent/awesome-design-md)
- [Huashu Design](https://github.com/alchaincyf/huashu-design)