Sampo: UIデザイン、モーション、3D は何をしますか？
画面の見た目や動きに関するあらゆる作業（Webページ、アプリ画面、コンポーネント、アニメーション、3Dシーン、あるいは「見栄えを良くして」といった依頼）のための一貫したパスです。UIプレイブック（以下のパスはこのスキルからの相対パスで、同じファイルは sampo playbooks show ui/NAME で表示されます）と、結果を測定する sampo 動詞群にルーティングします。目的は、決して汎用的なカードキットではなく、独自の視点を持ったUIです。以下の各ステップは、決定を下すか、決定を証明するかのいずれかです。ターミナルUIまたはClaude Code modの場合は、代わりに ../playbooks/references/ui/terminal-ui.md を使用します。
集中したタスク内で作業します（各ステップでファイルを編集します）。各ステップでは、指定されたプレイブックのみを読みます。
1. 方向性：どのようなフィーリングにするかを決める
- リポジトリにすでに方向性がある場合（
## DirectionセクションがあるDESIGN.md、ブランドガイド、出荷済みのデザインシステム）：それが優先されます。それを読み、ステップ2に進みます。ただし、ユーザーが新しいルックスを求めた場合は除きます。 - 方向性がない場合、またはユーザーがルックスやスタイルの選択肢を求めている場合：読み込み：Skill
sampo:directions（1つの文章から生成された6つのワンスクリーンカード。選択されたものはDESIGN.mdにオーディシティレベルとともに保存されます）。 - 説明ではなく実際の標本を表示する場合：
sampo page looksは、各ルックカードごとに1つの実在する標本を含むギャラリーを書き出します。sampo looksは、ユーザーが過去にキープしたものとリバートしたものに基づいて20個をランク付けするので、その上位から提案します。 - スタンス、テイストワード、方向性バンク、「デフォルトで避けるべきもの」：
../playbooks/references/ui/design-direction.md。
2. トークン：タイプ、色、スペース
../playbooks/references/ui/type-and-colour.md：タイプスケールとペアリング、OKLCHパレットの役割、ダークモードは独自のパスとして。- 既存のCSSがある場合：
sampo design extract SRCは、カスタムプロパティからトークンテーブルを抽出してDESIGN.mdの## Tokensセクションに書き込みます（--out -で代わりに標準出力に表示します）。何もない場合：sampo design palette SEED --out tokens.cssは、1つの色からライトパレットとダークパレットを生成します（--format css|dtcg|tailwind）。標準出力に表示されるので、> でリダイレクトします。FigmaやDTCG.jsonからのトークン：sampo design tokens tokens.json --to md --out DESIGN.md。ハードコードされた値：sampo design infer SRCがトークンを提案します。 - ブランドアセット：
sampo design tokens DESIGN.md --to brand --out public/は、favicon.svgとcard.svgを書き出します。 - トークンのドリフト：
sampo design xray PAGE --out xray.pngは、各要素を緑色（トークンの色）または赤色で輪郭表示します。 - 構築する前に証明する：
sampo design contrast TOKENSは、ロールペアをチェックします（ダークモードでの本文テキストのコントラスト比7:1など）。
3. 構築：レイアウトと動作
- 厳格なテンプレートから始める：
sampo new list、次にsampo new web DIR（ページ）またはsampo new scene DIR（3Dシーン）。sampo new check PATHは厳格さを維持します。 ../playbooks/references/ui/composition.md：リズム、グリッド、1つの光源からの奥行き、ヒーロー、ステートアトラス。../playbooks/references/ui/interaction.md：フィードバックの期限、キーボード操作、フォームエラー、360pxのタッチルール。- チャート：
../playbooks/references/ui/data-viz.md。ストーリーページ：../playbooks/references/ui/scrollytelling.md。 - コードサイドのカード：
sampo lib show NAME（プレイブックがどれかを指定します）。
4. モーション：散りばめるのではなく、設計する
../playbooks/references/ui/motion.md：タイミングトークン、ステート間モーションテーブル、ストーリーボード、縮小モーションは独自のパスとして。- モーションスコア（リポジトリルートの
motion.toml）を書き、次にsampo motion check（不足している縮小フォーム、未知のイージング、DESIGN.mdに欠けているトークンなど）とsampo motion compile --to css|waapi|three|lab --out FILEを実行してコードを出力します。 - ゲームと遊び心のあるUI：
../playbooks/references/ui/game-feel.md。サウンド：../playbooks/references/ui/sound-design.md。
5. 3D：ページを壊さないシーン
../playbooks/references/ui/scene-3d.md：構図、ライトとマテリアル、フレームバジェット、サバイバル契約（WebGLなし、縮小モーション、コンテキスト消失）、ブラックスクリーントリアージ。- シーンを一度だけデータとして記述し（カメラ、ライト、マテリアル、メッシュ、アニメーションを
scene.jsonに）、次にsampo scene compile scene.json --to three --out scene.js（three.jsモジュール）または--to component（コンポーネント）を実行します。 - 依存関係なしの場合：単一ファイルのWebGL2テンプレート
../playbooks/references/ui/templates/scene.html（sampo new scene）。 - ライトリグとPBRプリセット：
sampo lib show light-and-material。1つのサーフェス用のシェーダーテクスチャ（方向性全体ではありません）：sampo lib list --area looks、次にsampo lib show shader-NAME。ライブラリ：sampo lib show three-js、sampo lib show react-three-fiber。
6. チェック：見て確認する
sampo design lint SRC：汎用的なデザイン上の欠点や作り込みのミスを検出します。それぞれ修正するか、そのままにする理由を説明します。最後の行は、どのファイルでも使用されていないDESIGN.mdのトークンを指摘します。それらをコードに組み込むか、テーブルから削除します。sampo design check：DESIGN.mdのオプトインゲート（## Gates、- brief: advisory|blocking）：ノブの色、タイプファミリー、持続時間がコード内に見つかること。- a11y: …：トークンのコントラストペア、縮小モーションパス、高速フラッシュなし、imgのalt属性、フォーカススタイルが表示されていること。- debt: advisory 40：ファイルごとのトークン化されていない色、持続時間、半径が予算内であること。- 色を変更した後は再度
sampo design contrast TOKENSを実行。モーションを変更した後は再度sampo motion checkを実行。 sampo critique URL：ページが実際に使用しているスタイルをDESIGN.mdのトークンと比較します（名前なし、ニアデュプリケート、一回限り）。--why SELECTORはどのルールが勝ったかを示します。--bingoはテンプレート化されたルックスの9つの兆候をスコアリングします（完全なラインでexit 1）。--marks shot.pngはスクリーンショットに描かれた鉛筆の赤いストロークを、マークされた要素ごとに1つのキャプチャされたFIXに変換します（--noteはそれぞれが何を求めるかを示します）。--brief [ID]は、ブリーフが引用するフレーズがページ上にあることをチェックします。../playbooks/references/ui/visual-qa.md：sampo smokeはフレームマトリックス（360/768/1440、ライト/ダーク、縮小モーション）を撮影します。PNGを読んで確認します。Before/After：sampo img diff A.png B.png --out diff.png。- コンポーネントの状態（デフォルト、ホバー、エラー、空、ローディング）：
sampo stories CHARTはそれぞれを1つのマトリックスページに撮影します。sampo shotとsampo storiesは、--profile tv|eink|car|wrist（その画面のサイズとスケール）と--reduced-motion（ポスターや静止状態のためのprefers-reduced-motion: reduce）を受け付けます。 - それぞれをタスクのステップの証拠として記録します。UIの変更は、テストが通っただけでは完了しません。
7. テイスト
ユーザーはルックスをキープまたはリバートします：sampo looks keep LOOK または sampo looks revert LOOK。これにより、次のランキングが学習します。