Ship Beautiful UI
AIが構築するUIは全て同じように見えます。なぜなら、エージェントが毎回同じデフォルト（同じフォント、同じグラデーション、同じカードの並び）から始めるからです。このスキルは、デフォルトを以下のプロセスに置き換えます。
- ブリーフィング 題材、オーディエンス、画面の唯一の役割を明確にします。
- 方向性 テンプレートではなく、題材の世界観から見た目を構築します。
- 固定 すべてのビジュアル上の決定を
DESIGN.mdに書き込み、チェックします。 - 構築
DESIGN.mdのトークンのみを使用します。画面ごとに1つの大胆なアイデアを持ちます。 - モーション 変化を説明するモーションのみを使用します。
- レビュー AIの兆候や品質のギャップをスキャンし、スクリーンショットを確認し、
REVIEW.mdを作成します。
常にこの順序で行います。ステップ0またはステップ5をスキップしないでください。
優先順位
2つの指示が矛盾する場合、優先順位の高い方が優先されます。
- ユーザー自身の言葉
DESIGN.md（存在する場合）- このスキルのルール（
references/内） - 他のUIスキルを含む、読み込まれている他のすべて
競合を解決した場合は、1行でそれを伝え、ユーザーが上書きできるようにします。
このスキルに含まれるツール
すべてのスクリプトはPython 3標準ライブラリです。このスキルのフォルダから実行するか、フルパスを指定してください。
| スクリプト | 機能 |
|---|---|
scripts/derive.py | 題材の世界観の単語から、コントラストチェック済みのパレットを、78の素材を使用して生成します |
scripts/direction.py | プロダクトの種類に対して、3つの方向性オプション（パレット + タイプペアリング + レイアウト）を提示し、DESIGN.mdのドラフトを作成します |
scripts/lint_design.py | DESIGN.mdをチェック：構造、セクション順序、トークン参照、WCAGコントラスト |
scripts/detect.py | フロントエンドコードをスキャンし、40のAIの兆候と品質フロアのギャップを検出します |
| ライブラリ | 内容 |
|---|---|
data/materials.json | 題材の世界観からの78の素材（紙、食べ物、自然、工芸、スクリーン、お金、ケア、遊び、旅行） |
data/palettes.json | 60のパレット（明るいものと暗いもの、すべてコントラストチェック済み） |
data/type-pairings.json | 40のタイプペアリング（すべて無料のGoogleフォント、役割とメモ付き） |
data/layouts.json | 20のレイアウトパターン（ワイヤーフレーム付き） |
references/effects.md | プレーンなCSS/JSによる16のエフェクト（動きを減らすフォールバック付き） |
references/04-motion.md | タイミングトークンと12のモーションレシピ |
references/ux-rules.md | 分野別の80のUXルール |
references/anti-patterns.md | 40の検出ルールと12のビジュアルデフォルト |
ステップ0：ブリーフィング
references/00-brief.mdを読んでください。題材、オーディエンス、役割、制約の4行と、題材の世界観からの5つの名詞を書いてください。ブリーフィングが薄い場合は、これらを提案し、1つのメッセージ（最大3つの質問）で確認してください。
ステップ1：方向性
references/01-direction.mdを読んでください。
- デフォルト：題材から導き出す 世界観の名詞から3～5つを選び、
python3 scripts/derive.py --words "<名詞>"を実行します（プロダクトが夜間に使用される場合は--mode darkを追加）。パレットをdata/からのタイプペアリングとレイアウトと組み合わせて、ムードに合うものにします。 - フォールバック：ライブラリから選択 題材に強いビジュアル世界観がない場合や、ユーザーが迅速にオプションを求めている場合：
python3 scripts/direction.py --kind <種類> --brief "<1行>"3つのオプションを表示し、ユーザーに選択させます。 - 既存ブランド： ブランドが方向性です。その色とタイプを抽出します。
- 計画を
references/anti-patterns.mdのビジュアルデフォルトと照らし合わせ、一致するものがあれば修正します（ブリーフィングで求められた場合を除く）。
ステップ2：固定
references/02-lock.mdを読んでください。
- プロジェクトルートに
DESIGN.mdを作成します：先頭にYAMLトークン、その後##セクション（概要、色、タイポグラフィ、レイアウト、高低差と奥行き、シェイプ、コンポーネント、Do's and Don'ts）を順に配置します。direction.py --writeでドラフトが得られます。templates/DESIGN.mdが白紙のフォームです。 - 概要にブリーフィングを、Do's and Don'tsに却下したデフォルトを記載します。
python3 scripts/lint_design.py DESIGN.mdを実行し、構築前にすべてのエラーを修正します。
ステップ3：構築
references/03-build.mdを読み、references/ux-rules.mdを適宜参照しながら進めてください。
- トークンをCSS変数（またはフレームワークテーマ）に一度マッピングし、それらの名前のみを使用します。
- 画面ごとに1つの記憶に残る要素。その他はすべて控えめにします。
references/effects.mdから最大1つのエフェクトを、その要素に、トークンで色を変えて使用します。- 品質フロアまで構築：360px幅、可視フォーカス、AAコントラスト、動きの削減、実際のコピー、ローディング/空/エラー状態。
ステップ4：モーション
references/04-motion.mdを読んでください。ユーザーがトリガーするモーションは、そこにあるタイミングトークンとレシピを使用します。画面ごとに最大1つのアンビエントモーションモーメント。すべてに動きを減らすパスがあります。
ステップ5：レビュー
references/05-review.mdを読んでください。
python3 scripts/detect.py <src または ファイル>すべてのエラーを修正します。警告を修正するか、残す理由を書き留めます。python3 scripts/lint_design.py DESIGN.mdを再度実行します。コードとDESIGN.mdが一致している必要があります。- 環境で可能であれば、デスクトップと390px幅でスクリーンショットを撮り、ブリーフィングに対して画像を批評します。
templates/REVIEW.mdからREVIEW.mdを作成します。
出力
完了すると、プロジェクトにはDESIGN.md（有効）、UI（そのトークンからのみ構築）、REVIEW.mdが含まれます。ユーザーに数行で伝えてください：方向性とそれが題材に適合する理由、1つの記憶に残る要素、そして意図的に省略したもの。