AI Agent在視覺工作上缺乏品味，工程師透過「技能檔案」傳遞專業規則，大幅提升輸出品質

AI Agent在視覺工作上缺乏品味，工程師透過「技能檔案」傳遞專業規則，大幅提升輸出品質。

工程師如今透過Agent艦隊獲得前所未有的槓桿，但面對動畫等視覺工作，程式撰寫Agent仍不知「優秀」該是何種感覺。作者Emil Kowalski提出解決方案：為介面各面向建立技能檔案，將個人品味與邏輯規則明確描述，讓Agent遵循，產生如互動式「Linear logo」（使用Claude Code製作）的優異成果。

傳遞品味的核心邏輯

經驗豐富的設計者不僅能辨識優劣，更能闡述原因，將品味轉化為可傳授的規則。作者強調，幾乎所有「品味」決策皆有邏輯依據，並非魔法，例如正確動畫從較高初始scale值（如scale(0.95)）啟動，看似氣球洩氣仍保有形狀，更溫和、自然、優雅；反之scale(0)讓元素像憑空出現，感覺突兀不自然。此邏輯適用於任何領域，創意部分仍由人主導，但規則越多，Agent槓桿越強。

動畫實用技巧表

作者將此類訣竅封裝於「Practical Tips」技能中，Agent如指導菜鳥設計師般嚴格遵循：

Easing決策流程圖

Easing是動畫最關鍵元素，作者提供嚴格流程圖，避免Agent自行臆測，按哲學選擇：

• 元素進入/離開視窗？→ ease-out
• 否
  • 螢幕內移動/變形？→ ease-in-out
  • 否
    • Hover變化？→ ease
    • 否
      • 持續運動？→ linear
      • 預設→ ease-out

動畫持續時間指南

涵蓋所有動畫要素，Duration依元素類型嚴格規範：

規則：

• UI動畫上限300ms
• 大元素比小元素慢
• 離場動畫比入場快約20%
• 持續時間匹配移動距離——路程越長，時間越長

排版規則範例

技能檔案可擴及布局、圖示、色彩理論等，作者分享Typography規則：

1. 本文上限約65ch，避免全寬拉伸，保持行長舒適。
2. 價格欄位套用tabular-nums，數字對齊，欄位乾淨易讀。
3. 使用…而非...，截斷跟隨容器而非固定字元。
4. 大寫標籤鬆開letter-spacing，避免擁擠。
5. 宣告x-height與權重匹配的備用字體堆疊，避免載入造成布局偏移。
6. 底線專屬連結；非連結強調用粗體或顏色，保留底線作為可靠提示，避免誤點無效文字。
7. 介面強調偏好粗體，斜體限於引文或文學強調——斜體層級像印刷編輯，而非UI層級。

建立與應用技能檔案

退一步檢視決策原因，清楚闡述「必須如此」的理由，設定嚴格規則。作者使用Anthropic的「skill-creator skill」簡化流程。完成後餵給程式撰寫Agent，例如要求Claude Code依動畫技能改善對話方塊動畫，它會列出違規清單及前後變更對照表。作者更將部落格文章轉化為綜合「設計工程技能」，涵蓋動畫、元件設計、開源專案如「Sonner」的原則，使用者可直接試用。此法讓Agent具備作者品味，視覺輸出顯著優化，工程師槓桿最大化。