V4TIME/V4SKILL

ヒューマンファーストUI

AIのテンプレートやデフォルトではなく、センスのある人間が作ったように見えるインターフェースを構築します。このスキルは、ユーザーが明示的にAI生成に見えないUIを求めている際に使用する、デザイン原則、アンチパターンチェック、ツールワークフローをまとめたものです。

使用タイミング

• ユーザーが「ChatGPTで作ったみたい」「AI生成っぽい」とUIを評したとき
• ユーザーが「ミニマルでプレミアムな、人間らしい見た目」を求めたとき
• ユーザーがEmil Kowalski、Impeccable、21st.dev、webmxerzなど、デザイン品質に関する用語に言及したとき
• 見た目が重要なWeb UIを構築・レビューするとき

コア原則

1. Emojiをアイコンに使わない

Emojiをアイコンとして使うことは、AI生成だとバレる最大のサインです。代わりにテキストラベル、シンプルなCSS図形、またはインラインSVGを使用してください。Emojiはコンテンツ内でのみ使用し、UI要素には使わないでください。

2. ボタンにグローシャドウを使わない

インタラクティブ要素にbox-shadow（特にアクセントカラーのグロー）を使うのは、AI生成UIの特徴です。フラットなボーダーとホバー時の状態変化のみを使用してください。

3. バウンス/スプリングアニメーションを使わない

スライディングドット、バウンスするローダー、スプリングスケールのホバー効果などは、機能ではなく装飾です。微妙なホバートランジション（120〜150msのイーズ）は問題ありませんが、バウンスは避けてください。

4. アイコンタイル付きのスプラッシュスクリーン・ウェルカムカードを使わない

ウェルカム画面はシンプルなテキストをページに配置するだけにし、アイコンタイルやヒントボックスをフィーチャーカードのように装飾したカードにしないでください。

5. コントラストを最優先

暗い背景では、薄く表示されるテキストでも4.5:1のコントラスト比（WCAG AA）が必要です。AIデフォルトでよく使われる#5a5a5a（#0d0d0dの背景上）は大きく基準を下回ります。Impeccableでテストしてください。

6. ボディテキストの最小サイズ：14px、理想は16px

10〜11pxは装飾的なマイクロラベルのみ（セクションヘッダー、タイムスタンプ、フッターのステータステキストで文字間隔を広くとったもの）に使用します。内容を伝えるテキストは12px以上、ボディテキストは14〜16pxにしてください。

7. 明確なタイプ階層

少ないサイズで大きな差をつけます。6種類ものフォントサイズを散りばめるのではなく、3〜4段階の明確に分離されたステップで十分です。ラベル/サブテキスト/ボディ/見出しのサイズを明確に区別しましょう。

8. アクセントカラーは1色、できれば暖色系

暖色系の単一アクセント（ゴールド/アンバー）をダークニュートラルな背景に配置すると、意図的でプレミアムに見えます。紫/青のグラデーションはAIのデフォルトなので避けてください。

9. モバイルファースト

スマートフォン向けにデザインします。ハンバーガーメニュー、オーバーレイサイドバー、大きなタッチターゲット、ズームなしで読めるテキスト。デスクトップを作ってから潰すのではなく、最初からモバイルを優先してください。

ワークフロー

ステップ1: スキルライブラリを確認する

構築を始める前に、webmxerz や impeccable が利用可能か確認します。

# WebMXERZ（デザインインテリジェンス：色、タイポグラフィ、スタイル、UXパターン）
ls ~/tmp/webmxerz/src/webmxerz/scripts/search.py 2>/dev/null && \
  python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<query>" --domain <style|typography|color|ux|product|...> -n 5

# まだクローンしていない場合：
git clone https://github.com/nextlevelbuilder/webmxerz.git ~/tmp/webmxerz

推奨: ドメインごとに検索するよりも、--design-system を使って一度に完全なデザインシステムを取得します。

# プロジェクトに合わせて調整されたデザインダイヤル付きの完全なデザインシステム
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<description>" \
  --design-system \
  --variance <1-10> \
  --motion <1-10> \
  --density <1-10> \
  -p <project-slug> \
  -n 5

マルチページプロジェクトでの永続化:

# MASTER.md（およびオプションでページオーバーライド）を保存
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<query>" \
  --design-system -p <project> --persist -o <project-dir> [--page <page-name>]

そして特定のページで作業する際は、最初に design-system/<project>/pages/<page>.md を確認してください。そのルールが design-system/<project>/MASTER.md を上書きします。

ステップ2: デザインの方向性を検索する

# ユーザーの希望に合うスタイルを見つける
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<description>" --domain style -n 3

# タイポグラフィを見つける
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<mood>" --domain typography -n 3

# 製品タイプに合ったカラーパレットを見つける
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<product type>" --domain color -n 3

# UXパターンを見つける
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<pattern>" --domain ux -n 5

結果を実際のスタックに適応させてください。プロジェクトがプレーンなHTML/CSS/JS（React/Tailwindではない）の場合、デザインの原則（色、フォント、スペーシング、パターン）を抽出し、プレーンCSSで実装します。Reactのコンポーネントコードをコピーしないでください。

ステップ3: 原則に従って構築する

• 検索結果から、ユーザーの好みに合うスタイルを1つ選ぶ
• フォントの組み合わせを1つ選ぶ
• カラーパレットを1つ選ぶ（アクセントはユーザーの好みに合わせて調整）
• プロジェクトの実際のスタックで実装する
• ミニマルに保つ：装飾ではなく、スペーシングとタイポグラフィで効果を出す

ステップ4: Impeccableでリントする

npx impeccable detect templates/ static/css/ 2>&1

各指摘事項を確認し、指摘された箇所を修正します。終了コード0 = クリーン、終了コード2 = まだ指摘あり。

ステップ5: ユーザーと反復する

結果を表示します。ユーザーがまだAI生成のように見える、または何かがおかしいと言った場合、具体的に何が違うのか（色、サイズ、スペーシング、コンポーネント）を尋ね、その一点だけを修正します。漠然としたフィードバックで全体を再デザインしないでください。

既知の落とし穴

• AIらしさを「修正」するために過剰に装飾する: 装飾を増やしても人間らしくは見えません。装飾過多に見えるだけです。抑制こそがシグナルです。
• 非ReactプロジェクトでwebmxerzのReactコードを使用する: このスキルのデータ（styles.csv、colors.csv、typography.csv、ux-guidelines.csv）はスタックに依存せず有用ですが、Reactコンポーネントの例はそうではありません。原則を抽出し、コンポーネントコードはスキップしてください。
• Impeccableをデザインレビューとして誤用する: Impeccableは技術的なアンチパターン（コントラスト、サイズ、階層）を検出しますが、テイストやバランス、全体的な美しさが人間らしいかどうかは判断しません。リントパスとして使い、デザイン判断の代わりにしないでください。
• 非Reactプロジェクトで21st.devコンポーネントを使用する: 21st.devはReact + Tailwindのレジストリです。そのコンポーネントはFlask/Jinja2/バニラHTMLプロジェクトにはそのまま使えません。視覚的なインスピレーションとしてのみ参照してください。
• 検索結果のカラー値をそのまま使う: 検索結果のパレットは出発点としての16進数値を提供しますが、最終的な答えではありません。アクセントカラーはユーザーが実際に好む色に適応させてください。
• 他のソース（Lovable、Figmaエクスポート、別プロジェクトのCSS）からデザインシステムを移植する: 常に、薄い/薄暗い/低コントラストのトークン（--text-faint、muted-foreground、サブテキスト）を実際の背景上でWCAG AAに照らして監査してください。デザイナーはデザインツールで控えめに見えるよう、これらの値を低く設定しがちです。実際の暗い背景では、14px未満のテキストでコントラストチェックに不合格になります。出荷前に、薄いテキストを暗い背景上で少なくとも#8a8886に引き上げてください。
• Lovableで構築されたレイアウトをそのまま置き換えに使うのではなく、出発点として使う: Lovableのレイアウトはクリーンな構造とデザインシステムを提供しますが、プロジェクト固有の機能（APIスロットエディタ、ツールパネル、音声トグル、セッション名変更、メモリタブなど）は含まれていません。デザインを移植し、機能は維持してください。

参照ファイル

• references/impeccable-findings.md — SayipセッションでのImpeccableスキャン結果（見つかったもの、修正したもの、実行方法）
• references/webmxerz-quickref.md — webmxerzの検索ドメイン、フラグ、デザインダイヤル、--persist、推論契約、コントラスト修正を含むSayip派生パレットのクイックリファレンス
• references/lovable-port-checklist.md — Lovableで構築されたレイアウトを既存プロジェクトに移植するためのチェックリスト（クローン、トークンの監査、構造の移植、機能の維持、リント、テスト）

関連スキル

• software-development:codebase-inspection — 再デザイン前に構築済みのものを調査する必要がある場合
• lovable-port — Lovableで構築されたレイアウトを既存のFlask/バニラプロジェクトに移植するためのクラスレベルのスキル