# 策展 · X (Twitter) 🔥

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

> 作者：Kevin (@kvnkld) · 平台：X (Twitter) · 日期：2026-06-17

> 原始來源：https://x.com/kvnkld/status/2066863634949779464

## 中文摘要

利用 Claude 進行 UI 開發的精緻化指南。

這份指南強調「精緻感」並非單純透過提示詞要求「高級感」就能達成，而是需要開發者具備明確的審美判斷，並將這些決策轉化為系統化的設計變數與物理規則。

**動態曲線（Easing）的精準控制**
避免使用瀏覽器預設的 `ease` 或 `ease-in-out`，因為這些預設值缺乏質感。應建立一套專屬的設計變數，並在提示詞中給予精確的 `cubic-bezier` 數值。
- 建議設定：
  - `cubic-bezier(0.22, 1, 0.36, 1)`：通用平滑過渡。
  - `cubic-bezier(0.17, 1, 0.32, 1)`：裝飾性進場。
  - `cubic-bezier(0.35, 1.55, 0.65, 1)`：具備回彈效果的彈性動畫。

**設計系統變數（Design Tokens）的先行定義**
在建構任何組件前，必須先定義好顏色、圓角、持續時間與陰影等變數。這能防止模型產生隨機的數值（如 13px 圓角），確保 UI 的節奏一致。
- 實作建議：在 Figma 中建立與程式碼 1:1 對應的變數，讓設計轉譯為開發過程時，能精確對齊而非重新發明。

**物理互動與磁吸效果**
拖曳操作應模擬真實物理特性，包含慣性、摩擦力與阻力。
- 磁吸（Snap points）：採用「雙區系統」，即較小的吸附區與較大的脫離區，並在吸附瞬間提供微小的視覺回饋（如標籤閃爍），能顯著提升互動品質。

**進場動畫的細節處理**
單純的淡入（Fade）效果過於廉價。精緻的進場應結合透明度變化、位移（如 `6px` 上移）以及模糊濾鏡（`2px` 模糊至清晰），讓內容呈現「聚焦」而非「閃現」的視覺感受。

**陰影的層次感（Layered Light）**
避免使用單一模糊的陰影。真實的深度感來自多層細微陰影的堆疊，並建議以「細線環（Hairline ring）」取代傳統的 1px 邊框。
- 陰影參數建議：保持透明度在 2% 至 8% 之間，透過堆疊不同大小的模糊層來模擬接觸陰影與環境光。

**觸覺回饋與狀態設計**
每個互動元素都應有明確的「按壓」反應（如縮放至 `0.98`），而非僅是視覺上的變化。此外，組件的完整性取決於狀態（idle、hover、pressed、loading、disabled、success）的定義。
- 實作建議：許多微互動（如數字滾動、文字閃爍）是在開發過程中發現的，而非設計階段就能預見，應在實作時持續補足這些狀態。

**效能與無障礙優化**
精緻的 UI 必須尊重使用者的「減少動態效果（Reduced Motion）」偏好。在長列表或大面積渲染時，應優先使用輕量屬性（如位移與透明度），避免過度使用高負載的陰影堆疊或高度變更。

**展開與收合的現代技術**
避免使用 `max-height: 9999px` 這種容易導致抖動的駭客手法。建議使用 CSS Grid 的 `grid-template-rows` 屬性進行動畫處理，能完美適應內容高度。若涉及跨容器的元素移動，則使用 FLIP（First-Last-Invert-Play）技術。

**提示詞撰寫的核心心法**
- **拒絕形容詞**：不要說「平滑」，要給出具體的 `cubic-bezier` 與毫秒數。
- **隔離迭代**：一次只調整一個變數（如「現在只調整陰影堆疊」），避免模型在多重指令下失控。
- **明確的 Figma 交付**：不要假設工具能自動處理一切。應明確指出要讀取的屬性（padding、gap、tokens、顏色、圓角、字體大小），並要求模型與選取項目精確匹配。

**開發者的角色定位**
AI 模型是強大的執行工具，能快速產出複雜的動畫與轉場，但「品味」無法被自動化。決定按壓比例是 98% 還是 95%、判斷何時需要模糊效果、何時需要增加狀態，這些細微的決策依然屬於開發者。提示詞能幫你完成 90% 的工作，而最後 10% 的精緻度，取決於你對細節的堅持與觀察。

## 標籤

Skills, Claude, 教學資源, Claude, Anthropic