Motion UI Polish (動画UIポリッシュ)
問題点: モデルがコード化したフレームには、一目で機械生成と分かる共通の兆候があります。すなわち、インジゴグラデーション、4つの等サイズカード、統一された角丸とフラットシャドウ、小さなグレーテキスト、絵文字アイコン、カード片側の色付きバーなどです。このスキルは、レンダリング前にこれらの兆候を除去し、測定可能な部分を測定します。
プロジェクトルートはこのフォルダの3階層上にあります。ドクトリンソース: tools/repos/ux-ui-agent-skills (MITライセンス、sources.lock.jsonにスナップショット)。シーンに必要な部分のみを読んでください。
手順
templates/frame-tokens.cssとtemplates/frame-starter.htmlをジョブのsource/にコピーします。トークンファイル先頭のブランドブロック（アクセントカラー、サーフェスカラー; プロダクションブランドブリーフから色を取得）のみを変更します。シーン内で色、サイズ、シャドウをハードコードしないでください。常に変数を使用します。- トークンからシーンを構築します。モーションは時間の純粋関数（
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 を通過したか、およびそのシーク時間を記録します。
動画フレームのハウスルール
- 一つの要素を主役にする。 表示タイプはボディサイズの少なくとも2.5倍にします。4つの等サイズカードは生成AIっぽく見えるため、一つのアイテムに大きなサイズを与えるか、独立した行に配置します。
- 本物のタイプスケール（トークン）: ラベル 2.1、ボディ 2.8、リード 3.6、タイトル 6.4、ディスプレイ 9、ヒーロー 17（cqmin、1 cqmin = 短辺の1%）。短辺の2%未満のサイズは禁止。数値は
.num（テーブルフィギュア）を使用します。 - 4pxリズム（
--sp-*）。 関連するアイテムは関連しないアイテムよりもタイトに配置します。 - それぞれ役割を持つ複数の角丸とシャドウ（チップ、パネル、カード、ピル;
--sh-1..3、各2レイヤー）。 すべてに同一の角丸とシャドウを使用しないでください。 - 完全なヘアラインボーダーまたはサーフェスコントラスト。 カード、アラート、コールアウトの片側に色付きバーを使用しないでください。ステータス = アイコン＋テキスト。
- 意味に基づいた配色。 アクセントカラーは1つ。危険色は破壊的または否定的なものにのみ使用します。ハードコードされたインジゴからパープルへのグラデーションや、純粋な
#000のテキスト/背景は使用しないでください（トークンは着色されたニアブラックを使用）。 - 絵文字や装飾用ピクトグラフは使用禁止。 インラインSVGアイコン（
currentColor）またはテキストを使用します。画面上のテキストにダッシュ文字を使用しないでください（ワークスペースルール）。 - コントラスト: ボディテキスト 4.5:1、大きなテキスト 3:1。フッテージ上のキャプションにはスリムまたはピル（
.pill-caption）が必要で、素のテキストは禁止。 - セーフエリア。 9:16は、幅の上部17%と下部30%をテキストなしに保ちます（プラットフォームUI）、側面は5.6%。16:9は全周5.6%。トークンが
--safe-*を設定し、ゲートがチェックします。 - ホールド。 テキストブロックは、画面上で少なくとも0.5秒＋単語あたり0.3秒間静止してから消えます。出現は0.4〜0.7秒、速いインとソフトランディング（イーズアウト）。
transformとopacityのみをアニメーションに使用します。 - 極端なデータ: 長い名前、0、100%、多数のアイテム。それらでシーンが破綻しないこと。1つの極端なケースをテストします。
敵対的チェックリスト（承認前）
- 見出しを隠したとき、視線はどこかに留まるか、それともどこにも留まらないか？
- 装飾だけの要素はないか？削除する。
- 目を細めたとき、競合する2つの焦点はないか？
- 数字に単位、出典、または比較が欠けているものはないか？
- シーンが別のブランド名でも同じように見えるか？その場合、方向性が不足している。
tools/repos/ux-ui-agent-skills/taste/aesthetic-systems.mdから美学を取るか、design-systems/library/<name>/DESIGN.md（138個）の仕様をトークンブロックに反映させます。
詳細な参考資料（オンデマンドでロード）
| ニーズ | 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コントラストを測定）。これらの結果はヒューリスティックであり、強力なシグナルではありますが、最終的な判定ではありません。上流チェックアウトを編集しないでください。