Agents with Taste (賦予 AI 品味：將設計直覺編譯為 Agent Skill 的實踐指南)

原始來源與檔名：賦予AI品味-將設計直覺編譯為AgentSkill.md

來源：Emil Kowalski — 2026-04-23 原始檔名：2026-04-23T111559+0800-Agents with Taste.md

NAPKIN | 餐巾纸

餐巾紙公式

AI with Taste = Agent Capability + Explicit Human Rules (Skill Files)

不要抱怨 AI 缺乏設計品味，品味背後都有邏輯與參數；將你的設計決策與微交互細節寫成極度明確的 Skill 規則檔，就能把個人品味轉移給 Agent。

一句话

AI 沒有自己的審美，它只有統計機率。當你抱怨 AI 產出的 UI 很醜時，其實是你沒有把你的審美標準「編譯」成它能讀懂的 Markdown 規則。

餐巾纸草图

[Human Intuition ("Taste" / "Feel")]
      ↓ (Articulate the "Why" - e.g., real-world physics)
[Markdown Skill File (Rules, Flowcharts, Hard Limits)]
      ↓ (Inject to Claude Code / IDE Agents)
[AI Agent generating Frontend code with YOUR Taste]

ROUND 1: SKELETON | 骨架扫描

“这篇文章在说什么”

• 核心问题: 在視覺設計與前端微交互 (Animations) 領域，工程師普遍認為編碼 Agent (如 Claude Code) 雖然會寫扣，但「不懂得什麼是好的品味 (Taste)」，做出來的 UI 常常缺乏靈魂或細節粗糙。
• 核心答案: 品味是可以被拆解、結構化與參數化的。透過將設計決策背後的「Why」轉化為具體的 Markdown 規則 (Skill File)，開發者可以將人類獨有的美學品味賦予 AI。
• 论证结构: 觀點分享 / 實戰教學

章节骨架

1. 破題: AI 缺乏品味，但這可以透過 Skill File 完美解決。
2. 轉移品味 (Transferring Taste): 解釋品味背後的物理邏輯（例如縮放動畫為何要從 scale(0.95) 開始而不是憑空從 scale(0) 彈出）。
3. 實例展示 1：實用防呆技巧 (Practical Tips): 表格化定義按鈕點擊回饋、避免 hover 閃爍的解法。
4. 實例展示 2：緩動函數 (Easing) 決策樹: 用純文字樹狀圖教 AI 在何種情境選用何種貝茲曲線。
5. 實例展示 3：動畫時長 (Duration) 規則: 明確界定 UI 動畫的豪秒數上下限。
6. 實例展示 4：排版 (Typography) 金律: 定義行寬、數字對齊等排版常識。
7. 總結: 後退一步思考「為何這麼做」，將隱性知識顯性化，交給 AI 執行。

ROUND 2: DISSECTION | 血肉解剖

“凭什么这么说”

• 核心论证链: 所謂的「品味」並非魔法，而是經驗累積後能精確說出「為什麼這樣更好」的能力 -> 如果你能說出原因，就能寫出不可違背的規則（如：進入動畫一律用 ease-out，整體 UI 動畫必須小於 300ms） -> 將這些規則封裝成 Claude 可讀的 Skill 文件 -> AI 在撰寫 CSS/React 時就能主動套用這些審美標準，輸出具備你個人專屬品味的結果。
• 关键证据:
  • 氣球隱喻 (The Balloon Metaphor)：為什麼 scale(0) 感覺不自然？因為在現實物理世界中，即使是洩氣的氣球也依然有形狀，並非完全虛無，所以 UI 元素出現應該從 scale(0.95) 開始。這是對「品味」的最佳拆解。
  • Easing 決策樹：以 Markdown 樹狀圖明確定義：Entering = ease-out, Hover = ease，消除了 Agent 瞎猜的空間。
  • 排版 (Typography) 7 大金律：將行寬限制 (65ch)、表格數字對齊 (tabular-nums) 等高級排版常識直接寫死成檢查清單。
• 隐形假设: 開發者必須具備足夠的設計工程素養 (Design Engineering)，能夠反思並精確描述微交互背後的 CSS 參數邏輯。
• 边界条件: 這種方法完美適用於可量化、可被代碼描述的 UI/UX 設計與前端微交互；但對於純粹的藝術插畫創作或無法參數化的抽象美學，AI 的「品味轉移」難度依然極高。

ROUND 3: SOUL | 灵魂提取

“还能怎么用”

• 知识链接: 這與早期計算機科學中的「專家系統 (Expert Systems)」或現代的「Design Token 系統」概念如出一轍。將隱性知識 (Tacit Knowledge) 強制顯性化 (Explicit Knowledge)，是 AI 時代最稀缺也最具槓桿效應的能力。
• 深层洞见: 你不能期待一個讀遍全網劣質程式碼的通用大模型自動擁有「好品味」。品味是主觀的，而系統需要客觀邊界。唯有透過極度嚴苛的邊界條件 (Hard Constraints) 來約束 AI，它才能在邊界內發揮驚人的執行力。
• 行动呼吁: 停下來問自己「為什麼我做這個設計決策」，把腦袋裡的直覺寫成白紙黑字，整理成一份嚴格的 Markdown Skill 檔案，然後將其注入到你的 IDE Agent 中。

Agents with Taste (Architectural Deep Dive)

前言/背景

前端設計工程師 (Design Engineer) Emil Kowalski 探討了一個在 AI 輔助開發中常見的核心痛點：當前的編程 Agent（如 Claude Code、Cursor）雖然能快速產出功能性代碼，但往往缺乏對 UI/UX 微交互的「品味 (Taste)」。本文提出了一種實用方法論：透過剖析設計決策背後的物理與心理邏輯，將人類的審美標準封裝成機器可讀的 Skill 文件，成功將個人專屬品味「轉移」給 AI。

章节详细总结

品味解码：品味背后没有魔法 (Transferring Taste)

Why: 當我們身為人類覺得一個動畫「感覺對了」或「感覺很怪」時，這背後其實都藏有物理世界的客觀邏輯。 作者舉例：讓一個元素從 scale(0) 憑空放大出現，在視覺上會顯得突兀與廉價；而從 scale(0.95) 開始放大，感覺會自然、優雅許多。為什麼？因為現實世界中的物體不會從「無」憑空產生（就像氣球洩氣依然有實體）。 能夠清楚說出這個「為什麼」，就是轉移品味的第一步。品味不是玄學，而是可被結構化的參數與規則。

构建审美规则库 (Building the Skill File)

作者展示了如何用純 Markdown 語法，建立涵蓋各個設計維度的精確規則庫：

1. 實用防呆技巧 (Practical Tips):
   • 解決按鈕點擊無感：強制添加 transform: scale(0.97)。
   • 解決動畫抖動：強制添加 will-change: transform。
   • 解決 Hover 閃爍：只允許對 Child Element 進行動畫綁定。
2. 緩動函數決策樹 (Easing Flowchart):
   • 用文字邏輯樹明確定義：進場元素必用 ease-out，螢幕內變形必用 ease-in-out。徹底消除 Agent 自行發揮或亂用 linear 的猜測空間。
3. 時間參數約束 (Duration Guidelines):
   • 規定微交互 (Micro-interactions) 必須在 100-150ms 之間。
   • 鐵律：任何 UI 動畫絕不可超過 300ms；退場動畫必須比進場快 20%。
4. 字體排版 (Typography):
   • 明確定義：主體文本行寬不得超過 65ch (字元數) 以利閱讀；價格欄位必須強制開啟 tabular-nums 以確保數字對齊。

系统级整合与应用

將上述嚴格的規則編寫成一個 .md 檔案後，將其作為一個「工具 (Skill)」掛載給 Claude Code 等 Agent 系統。 當開發者要求 AI 「改善這個對話框的動畫」時，AI 不再是漫無目的地瞎改，而是會嚴格比對 Skill 文件中的標準，列出當前代碼違反了哪些品味規則，並精準重構代碼。

总结与结论

• 在 AI 時代，設計師與工程師能獲得的最大槓桿，是把自己的「隱性知識」（直覺、品味）翻譯成 AI 能嚴格遵守的「顯性知識」（規則約束）。
• 對 AI 的約束越嚴格、決策樹越清晰，AI 輸出的代碼品質就越高。
• 「品味」已不再是無法傳授的藝術，它已經成為一種可以透過 YAML/Markdown 分發與共享的程式碼依賴包 (Dependency)。