# 策展 · X (Twitter) 🔥

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

> 作者：Emil Kowalski (@emilkowalski) · 平台：X (Twitter) · 日期：2026-04-23

> 原始來源：https://x.com/emilkowalski/status/2046556609585795084

## 中文摘要

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

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

**傳遞品味的核心邏輯**

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

**動畫實用技巧表**

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

| 情境 | 解決方案 |
| ------------------------------- | ----------------------------------------------- |
| 按鈕感覺不夠回應 | 在`:active`新增`transform: scale(0.97)` |
| 元素憑空出現 | 從`scale(0.95)`開始，而非`scale(0)` |
| 動畫抖動/不穩 | 新增`will-change: transform` |
| Hover造成閃爍 | 動畫子元素，而非父元素 |
| Popover從錯誤點縮放 | 設定`transform-origin`至觸發位置 |
| 連續tooltip感覺緩慢 | 第一個後略過延遲/動畫 |
| 小按鈕難點擊 | 使用44px最小觸發區域（偽元素） |
| 仍有不協調感 | 新增細微模糊（低於20px）遮罩 |

**Easing決策流程圖**

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

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

**動畫持續時間指南**

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

| 元素類型 | 持續時間 |
| --------------------------------- | --------- |
| 微互動 | 100-150ms |
| 標準UI（tooltip、下拉選單） | 150-250ms |
| 模態視窗、抽屜 | 200-300ms |

規則：
- 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具備作者品味，視覺輸出顯著優化，工程師槓桿最大化。

## 標籤

Skills, Claude Code, Agent, Anthropic, Claude