| name | ui-craft |
| description | UIコンポーネントやページを実装する際に、AI特有の「ジェネリック感」を排除し、プロのUIデザイナーが設計したような品質を実現するスキル。
UIの実装、コンポーネント作成、画面構築、フロントエンド開発、ページデザインを依頼されたとき、
または「UIを作って」「画面を実装して」「コンポーネントを作って」「フォームを作って」「ダッシュボードを作って」
といったリクエストで必ず使うこと。既存の frontend-design スキルと併用可能だが、
こちらは「参照ベースの実装」と「AI感の排除」に特化している。
ボタン1つでも画面全体でも、UI実装が絡むなら使うべき。
|
UI Craft — 参照ベースの高品質UI実装
AIがゼロからUIを生成すると、訓練データの最頻パターンに収束して「AI感」が出る。
このスキルは 既存の高品質コンポーネントライブラリを参照 → 選択 → カスタマイズ するアプローチで、
人間のプロUIデザイナーが作ったような仕上がりを実現する。
フェーズ 1: 要件の理解
実装に入る前に、以下を明確にする：
- 何を作るか: コンポーネント / セクション / ページ / 画面全体
- 誰が使うか: ターゲットユーザーの属性
- トーン: ビジネス / カジュアル / クリエイティブ / テクニカル
- 技術スタック: プロジェクトで使っているフレームワーク・CSS手法を確認する
- 既存デザインシステム: あるなら最優先で従う
フェーズ 2: 参照コンポーネントの探索
ゼロから作らない。まず参照ライブラリからベースを探す。
参照ライブラリの選び方
references/component-libraries.md に詳細カタログがある。用途別の選択ガイド：
| 用途 | 第一候補 | 第二候補 |
|---|
| フォーム・データ入力 | shadcn/ui | Radix UI |
| ダッシュボード・管理画面 | shadcn/ui + Tremor | Mantine |
| ランディングページ・マーケティング | Aceternity UI | Magic UI |
| アニメーション・演出 | Magic UI | Aceternity UI |
| ボタン・トグル等の小パーツ | UIverse | shadcn/ui |
| 複雑なレイアウト | Untitled UI | shadcn/ui |
探索の手順
- Context7 MCP (
resolve-library-id → query-docs) で対象ライブラリのドキュメントを取得
- 類似コンポーネントのコード例を確認
- そのまま使えるものがあれば採用、なければ最も近いものをベースにカスタマイズ
重要: ライブラリのコンポーネントをそのままコピペするのではなく、
プロジェクトの文脈に合わせてカスタマイズする。ただしゼロから書くよりは遥かに良い出発点になる。
フェーズ 3: AI感を排除する
AIが生成するUIには共通のアンチパターンがある。これらを意識的に避ける。
タイポグラフィのアンチパターン
やりがち（AI感が出る）:
- フォントが Inter / Roboto / Arial だけ
- 見出しと本文のサイズ差が小さすぎる（h1: 24px, body: 16px）
- font-weight が 400 と 700 の2種類だけ
- letter-spacing を一切調整しない
プロはこうする:
- プロジェクトに合ったフォントを選ぶ（日本語なら Noto Sans JP, LINE Seed JP, BIZ UDPGothic 等）
- 見出しと本文のサイズ比を明確にする（h1: 36-48px, body: 14-16px — 比率 2.5:1 以上）
- font-weight を 300/400/500/600/700 の中から3段階以上使い分ける
- 大きい文字ほど letter-spacing を狭く（-0.02em〜-0.04em）、小さい文字は標準〜やや広め
- line-height: 見出しは 1.2〜1.3、本文は 1.5〜1.7
カラーのアンチパターン
やりがち（AI感が出る）:
- 紫グラデーション + 白背景（v0の典型）
- 原色そのまま（#FF0000, #0000FF）
- プライマリカラー1色 + グレー
- 背景が pure white (#FFFFFF) か pure black (#000000)
プロはこうする:
- 背景は微妙にオフホワイト（#FAFAFA, #F8F9FA）かオフブラック（#0A0A0A, #111111）
- プライマリカラーの彩度を少し落とす（鮮やかすぎない）
- テキストカラーは pure black を避ける（#1A1A1A, #333333 等）
- アクセントカラーは控えめに、本当に注目させたい箇所だけに使う
- グレーに色味を混ぜる（blue-gray, warm-gray 等。無彩色のグレーはのっぺりして見える）
レイアウト・スペーシングのアンチパターン
やりがち（AI感が出る）:
- 全要素が中央揃え（center-center-center）
- padding/margin がバラバラ、または全部同じ
- カードが全て同じサイズで等間隔グリッド
- セクション間の余白が一律
プロはこうする:
- 8px グリッドシステム（4/8/12/16/24/32/48/64/96px）を守る
- コンテンツのグルーピングで余白を変える（関連要素は近く、セクション間は広く — ゲシュタルトの近接の法則）
- 左揃えをデフォルトにする（中央揃えは hero セクションや CTA のみ）
- max-width を設定する（prose: 65ch, コンテナ: 1200-1440px）
- 要素間の余白に rhythmを持たせる（セクション間 > グループ間 > 要素間）
インタラクション・モーションのアンチパターン
やりがち（AI感が出る）:
- hover で色が変わるだけ
- transition が全部 0.3s ease
- アニメーションなし、または逆に全部アニメーション
プロはこうする:
- hover で transform: translateY(-1px〜-2px) + subtle shadow
- transition の duration を要素サイズに合わせる（小さい要素: 150ms, 中: 200ms, 大: 300ms）
- easing: ease-out を基本に、入場は ease-out、退場は ease-in
- アニメーションは「ユーザーの注意を導く」目的でのみ使う
- focus-visible のスタイルを忘れない（アクセシビリティ）
コンポーネント構造のアンチパターン
やりがち（AI感が出る）:
- border-radius が全部 rounded-lg
- shadow が全部 shadow-md
- アイコンが Heroicons か Lucide のデフォルトサイズ
- empty state が「データがありません」テキストだけ
プロはこうする:
- border-radius に階層をつける（カード: 12-16px, ボタン: 8px, 入力: 6px, バッジ: 4px or full）
- shadow は用途で使い分ける（浮遊感: shadow-lg, カード: shadow-sm, 入力フォーカス: ring）
- アイコンサイズをテキストに合わせる（14-16px body には 16-18px アイコン）
- empty state にイラストやアクション提案を入れる
- ボーダーは 1px のみ、色は背景に近い薄い色（border-gray-200 / border-gray-800）
フェーズ 4: ディテールの仕上げ
プロのデザインを「プロっぽく」しているのは、大きなレイアウトではなく細部の積み重ね。
最終チェックリスト
personality を入れるポイント
AIっぽさを消す最大のコツは「個性のある判断」を入れること：
- Empty state: 汎用的な「データがありません」ではなく、文脈に合ったメッセージとイラスト
- Loading: スケルトンローダーにアニメーションの工夫（pulse ではなく shimmer 等）
- エラー: 技術用語ではなく、ユーザーが次に何をすればいいか分かるメッセージ
- マイクロコピー: ボタンのラベルを「送信」ではなく文脈に合った動詞（「予約する」「保存して続ける」等）
技術スタック別の注意
このスキルの原則はフレームワーク非依存。
ただし実装時はプロジェクトの技術スタックに合わせて、以下のような点を意識する：
- design token: マジックナンバーを避け、プロジェクトの変数体系（CSS custom properties, Tailwind config, theme object 等）に値を定義する
- コンポーネントAPI: variant / size 等の props で見た目を切り替えられるように設計する
- アクセシビリティ: aria 属性、キーボード操作、フォーカス管理を忘れない
- 既存の規約に従う: プロジェクトに既にあるコンポーネントの書き方・命名・ファイル構成を踏襲する
