動態 UI 拋光
問題：由模型編寫的畫面框架會帶有顯而易見的機器製造痕跡：靛藍漸層、四個等寬卡片、統一的圓角和陰影、微小的灰色文字、用表情符號代替圖示、卡片一側的彩色條紋。此技能在渲染前移除這些問題，並測量所有可測量的項目。
專案根目錄在此資料夾上三層。源文件位置：tools/repos/ux-ui-agent-skills (MIT 授權，快照於 sources.lock.json)。僅讀取場景所需的部份。
步驟
- 將
templates/frame-tokens.css和templates/frame-starter.html複製到工作的source/目錄中。只修改 tokens 最頂部的品牌區塊（強調色、表面色；從製作品牌摘要中取得顏色）。切勿在場景中硬編碼顏色、尺寸或陰影：請使用變數。 - 從 tokens 建構場景。運動是時間的純函數 (
window.seek(t)，無計時器，無Math.random)，這是vstudio合約和 HTML 渲染器所期望的。使用motion-effect-picker技能選擇效果，不要靠猜測。 - 針對每種輸出格式，在展示成品佈局的時間點，對每個不同的場景進行閘門檢查：
python -S studio.py polish output/jobs/ID/source/scene.html --format 9:16 --seek 4.2 --shot output/jobs/ID/previews/scene-916.png
檢查失敗情況：文字超出畫面、文字重疊、文字低於可讀最小尺寸、表情符號，以及來自 slop_tells 和 taste_audit 的 HIGH 嚴重性發現。警告（超出安全區域、層級結構薄弱、文字被裁切）需要做出決定，不能忽略。
4. 開啟截圖並檢視。閘門證明的是可量化的正確性，而非品味。然後執行下方的對抗性檢查清單，修復任何嚴厲設計師會拒絕的問題。
5. 只有這樣之後才能渲染。在工作的 HANDOFF.md 中記錄哪些場景通過了 polish 檢查及其 seek 時間。
影片畫面基本規則
- 一個主導元素。 顯示字級至少要是內文字級的 2.5 倍。四個等寬卡片看起來像產生的；請給予一個項目更大的尺寸或專屬的一行。
- 真實字級比例 (tokens)：標籤 2.1、內文 2.8、引導 3.6、標題 6.4、顯示 9、英雄 17 (cqmin, 1 cqmin = 短邊的 1%)。沒有小於短邊 2% 的字級。數字使用
.num(等寬數字)。 - 4 像素節奏 (
--sp-*)。相關項目比不相關項目更緊密。 - 多種圓角和陰影，各有用途 (晶片、面板、卡片、藥丸；
--sh-1..3，每層兩個層次)。切勿使用統一的圓角和陰影。 - 完整的細邊框或表面對比。 卡片、警報或呼籲按鈕上絕對不能使用單邊彩色條紋。狀態 = 圖示加文字。
- 顏色有意義。 一個強調色。危險色僅用於破壞性或負面情況。沒有硬編碼的靛藍到紫色漸層，沒有純
#000的文字或背景（tokens 使用帶色調的近黑色）。 - 沒有表情符號和裝飾性圖案。 使用內聯 SVG 圖示 (
currentColor) 或文字。螢幕文字中不使用破折號字元（工作區規則）。 - 對比度： 內文 4.5:1，大字型 3:1。位於影片素材上的字幕需要遮罩或藥丸樣式背景 (
.pill-caption)，絕不能使用裸文字。 - 安全區域。 9:16 格式保持頂部 17% 和底部 30% 的寬度無文字（平台 UI），側邊 5.6%。16:9 格式四周 5.6%。Tokens 設定
--safe-*；閘門會檢查。 - 停留時間。 文字區塊在離開前至少停留 0.5 秒加上每個詞 0.3 秒。入場動畫持續 0.4 到 0.7 秒，快速進入並軟著陸 (ease-out)。僅移動
transform和opacity。 - 極端資料： 長名稱、0、100%、大量項目。場景不能因此中斷；測試一個極端案例。
對抗性檢查清單（批准前）
- 遮住標題：視覺焦點是否仍然落在某處，還是什麼都沒有？
- 是否有任何純裝飾性元素？移除它。
- 瞇眼看：是否有兩個競爭的視覺焦點？
- 任何數字是否缺少其單位、來源或比較？
- 換上其他品牌的名稱，場景看起來是否一樣？如果是，代表它沒有方向：從
tools/repos/ux-ui-agent-skills/taste/aesthetic-systems.md中選擇一種美學，或從design-systems/library/<name>/DESIGN.md（共 138 個）中選擇一份規格，並將其解析到 token 區塊中。
更深層參考（按需載入）
| 需求 | 檔案位置：tools/repos/ux-ui-agent-skills/ |
|---|---|
| 反粗糙原則，禁止的預設值 | taste/design-taste.md |
| 運動語法（入場、錯開、懸浮） | taste/motion-choreography.md |
| 圖表與密集資料畫面 | components/data-viz.md, tokens/data-viz.json, examples/terminal/ |
| 調色板、OKLCH 色域、深色模式 | .claude/rules/tokens-and-color.md |
| UI 文案、標籤、空狀態 | content/voice-tone.md |
| 含評分的審查標準 | workflows/design-review.md, .claude/agents/design-critic.md |
| 指定風格（Stripe、Linear、Apple...） | design-systems/library/ + taste/aesthetic-systems.md |
僅在需要時直接執行上游閘門（從該資料夾，設定 DS_REQUIRE_BROWSER=1，使用系統 Chrome）：node scripts/slop_tells.mjs <file>，node scripts/taste_audit.mjs <file>，node scripts/measure_render.mjs <file>（在實際渲染上進行 WCAG 對比度檢查）。它們的結果是啟發式的：一個強訊號，而非最終裁決。請勿編輯上游檢出內容。