ui-analyzer

UI Analyzer

このスキルでは、UI デザインのスクリーンショットを分析し、TypeScript と Tailwind CSS を使用して本番環境に対応できる React コンポーネントへ変換するための体系的な方法を提供します。

目的

UI デザインのスクリーンショットを、構造が整い、アクセシブルで保守しやすい React コンポーネントに変換します。このスキルでは、レイアウトの分析、デザイントークンの抽出、コンポーネントの特定を行い、ベストプラクティスに従いながらデザインに一致するクリーンなコードを生成する手順を説明します。

このスキルを使用するタイミング

次のような場合に、このスキルを使用します。

• ユーザーから UI デザインのスクリーンショット、モックアップ、または Figma のエクスポートが提供された場合
• ユーザーが「このデザインを実装して」または「この UI を作って」と依頼した場合
• ユーザーが「このスクリーンショットを分析して」と依頼した場合
• ユーザーがデザインをコードに変換したい場合
• ユーザーが UI の構造を理解するためのサポートを必要としている場合
• ユーザーが既存のデザインに合わせるよう依頼した場合

分析ワークフロー

UI のスクリーンショットを分析する際は、次の手順に沿って体系的に進めます。

ステップ 1：最初の観察とスクリーンショットの確認

ファイルパスが指定されている場合、または会話内でユーザーが画像を共有している場合は、まず Read ツールを使って提供されたスクリーンショットを確認します。

スクリーンショットを見た後：

1. UI に何が表示されているかを説明します
2. 画面やページの種類（ログイン、ダッシュボード、フォームなど）を特定します
3. 対象デバイス（デスクトップ、モバイル、レスポンシブ）を判断します
4. 全体的なスタイル（モダン、ミニマル、カラフルなど）を確認します
5. 次に進む前に、理解した内容をユーザーに確認します

ステップ 2：レイアウトの分析

大まかなレイアウト構造を特定します。

1. 主なレイアウトの種類 - references/layout-patterns.md を参照し、次の中から特定します。

   • 単一カラム
   • サイドバーレイアウト
   • ヘッダー＋コンテンツ
   • グリッドレイアウト
   • 分割画面
   • ダッシュボード
   • マスター／詳細
   • その他のパターン

2. レイアウトの階層 - 以下のセクションに分けて整理します。

   • ヘッダー／ナビゲーション
   • メインコンテンツ領域
   • サイドバー（ある場合）
   • フッター（ある場合）
   • 入れ子構造

3. レスポンシブ対応の考慮事項：

   • モバイルではレイアウトをどのように調整するか
   • どの要素を縦に並べるか、または非表示にするか
   • ブレークポイントの方針

Tailwind の実装パターンについては、references/layout-patterns.md を参照します。

ステップ 3：コンポーネントの特定

references/ui-analysis-checklist.md を使用して、すべての UI コンポーネントを体系的に特定します。

ナビゲーションコンポーネント：

• 上部ナビゲーション、サイドバーナビゲーション、パンくずリスト、タブなど

データ表示コンポーネント：

• カード、テーブル、リスト、統計、バッジ、アバター、アイコンなど

入力コンポーネント：

• テキスト入力、セレクト、チェックボックス、ラジオボタン、スイッチ、日付ピッカーなど

アクションコンポーネント：

• ボタン（プライマリ、セカンダリなど）、アイコンボタン、リンクなど

フィードバックコンポーネント：

• アラート、トースト、プログレスバー、読み込み状態など

オーバーレイコンポーネント：

• モーダル、ドロワー、ツールチップ、ポップオーバー、ドロップダウンなど

特定したすべてのコンポーネントについて、以下を列挙します。

• コンポーネントの種類と目的
• レイアウト内の位置
• おおよそのサイズとスタイル
• インタラクション状態（表示されている場合）

ステップ 4：デザイントークンの抽出

references/design-tokens.md を使用して、デザインシステムの値を抽出します。

カラーパレット：

1. デザインに使用されているすべての色を特定します
2. 用途別に分類します：
   • ブランドのプライマリカラー
   • セカンダリカラー／アクセントカラー
   • 背景色（メイン、セカンダリ）
   • テキストカラー（プライマリ、セカンダリ、控えめ）
   • ボーダーカラー
   • 状態を示す色（成功、警告、エラー、情報）
3. 各色を最も近い Tailwind カラーに対応付けるか、カスタムカラーが必要であることを記録します
4. カラーの参照表を作成します

タイポグラフィ：

1. フォントファミリー（セリフ、サンセリフ、等幅）を特定します
2. 観察されたすべてのテキストサイズを列挙します
3. Tailwind のタイポグラフィスケール（text-xs から text-6xl）に対応付けます
4. 使用されているフォントの太さ（標準、ミディアム、セミボールド、ボールド）を記録します
5. 見出しの階層（H1〜H6）を特定します

スペーシング：

1. パディングのパターン（カードのパディング、ボタンのパディングなど）を確認します
2. マージン／ギャップのパターン（セクション間、項目間など）を確認します
3. Tailwind のスペーシングスケール（p-4、m-6、gap-8 など）に対応付けます
4. スペーシングの単位（通常は 4px または 8px を基準）を記録します

その他のトークン：

• 角丸（rounded-none から rounded-full）
• シャドウ（shadow-sm から shadow-2xl）
• ボーダーの幅
• アイコンのサイズ

完全な対応表については、references/design-tokens.md を参照してください。

ステップ 5：コンポーネントの詳細分析

特定した主要コンポーネントごとに、次の項目を分析します。

1. コンポーネントの境界 - どこから始まり、どこで終わりますか？
2. Props／データ - どのようなデータを受け取りますか？
3. 内部構造 - サブコンポーネントと要素
4. スタイルの詳細：
   • 背景色
   • テキストの色とサイズ
   • パディングとマージン
   • ボーダーと角丸
   • シャドウ
5. インタラクティブな状態（表示されている場合、または推測できる場合）：
   • ホバー
   • アクティブ／押下
   • フォーカス
   • 無効
   • 読み込み中
   • エラー
6. アクセシビリティの要件：
   • ARIA ラベル
   • セマンティック HTML
   • キーボードナビゲーション

ステップ 6：実装戦略

実装方針を計画します。

1. コンポーネント階層 - どのコンポーネントから作成しますか？
2. 再利用性 - 繰り返されるパターンはありますか？再利用可能なコンポーネントとして抽出します
3. 状態管理 - Zustand が必要なコンポーネントはありますか、それともローカル状態だけで十分ですか？
4. react-component-generator との統合 - 既存のテンプレートを使用できますか？
5. ファイル構成 - コンポーネントはどこに配置しますか？

react-component-generator スキルが利用可能な場合：

• 一般的なコンポーネント（フォーム、カード、ボタン、モーダルなど）のテンプレートを参照します
• コンポーネント構造に関するベストプラクティスを使用します
• 命名規則に従います

ステップ 7：コード生成

次の原則に従って、React コンポーネントを生成します。

構造：

1. Props の TypeScript インターフェースから始めます
2. React.FC を使用した関数コンポーネントを使用します
3. JSDoc コメントを含めます
4. 名前付きエクスポートとデフォルトエクスポートの両方を行います

スタイリング：

1. スタイリングには Tailwind CSS のみを使用します
2. 抽出したデザイントークンを適用します
3. クラスを論理的な順序（レイアウト → スペーシング → 色 → エフェクト → 状態）で整理します
4. 必要に応じてレスポンシブクラス（sm:、md:、lg:、xl:）を使用します

ベストプラクティス：

1. セマンティック HTML 要素を使用します
2. アクセシビリティのために ARIA 属性を含めます
3. 読み込み状態とエラー状態を処理します
4. キーボードナビゲーションをサポートします
5. 適切な TypeScript 型を使用します（any は使用しません）
6. コンポーネントの役割を明確にし、組み合わせて使えるようにします

コンポーネントテンプレートの例：

import React from 'react';

interface ComponentNameProps {
  // Props based on analysis
  title: string;
  description?: string;
  onClick?: () => void;
  className?: string;
}

/**
 * ComponentName - Brief description based on UI purpose
 *
 * @param props - Component props
 * @returns JSX.Element
 */
export const ComponentName: React.FC<ComponentNameProps> = ({
  title,
  description,
  onClick,
  className = ''
}) => {
  return (
    <div className={`/* Tailwind classes from design */ ${className}`}>
      {/* Implementation based on screenshot */}
    </div>
  );
};

export default ComponentName;

ステップ 8：検証と改善

コードを生成した後、次の項目を確認します。

1. スクリーンショットとの比較 - デザインと一致していますか？
2. レスポンシブ対応の確認 - さまざまな画面サイズで動作しますか？
3. アクセシビリティの検証 - ARIA ラベルとセマンティック HTML が含まれていますか？
4. デザイントークンの検証 - 色、スペーシング、タイポグラフィは適切ですか？
5. エッジケースの検討 - 長いテキスト、空の状態、読み込み状態
6. 前提の記録 - 推測した内容と確認済みの内容を明確に示します

ステップ 9：成果物

ユーザーに次の内容を提供します。

1. 分析の概要：

   • レイアウトの説明
   • コンポーネントの内訳
   • 抽出したデザイントークン

2. 生成したコード：

   • 完全な React コンポーネント
   • TypeScript インターフェース
   • 適用した Tailwind クラス

3. 実装メモ：

   • インストール要件（パッケージが必要な場合）
   • 使用例
   • カスタマイズの提案
   • レスポンシブ動作に関するメモ

4. 次のステップ：

   • 改善点やバリエーションを提案する
   • さらに調整が必要な箇所を示す
   • 関連する追加コンポーネントの生成を提案する

よくあるシナリオ

シナリオ 1：シンプルなフォームのスクリーンショット

ユーザー：「このログインフォームのデザインを実装してください［スクリーンショット］」

アプローチ：

1. スクリーンショットを確認する
2. 特定する：フォーム入力欄とボタンを備えた、中央配置のカードレイアウト
3. 抽出する：色、入力欄のスタイル、ボタンのスタイル、間隔
4. layout-patterns.md →「Centered Modal/Card」パターンを参照する
5. react-component-generator → FormComponent テンプレートを参照する
6. 生成する：適切なバリデーション構造を備えた LoginForm.tsx
7. デザインに合わせた Tailwind クラスを適用する

シナリオ 2：ダッシュボードのスクリーンショット

ユーザー：「このダッシュボード UI を作成してください［スクリーンショット］」

アプローチ：

1. スクリーンショットを確認する
2. 特定する：統計カードのグリッドを備えた、ヘッダーとサイドバーのレイアウト
3. コンポーネントに分解する：
   • Header コンポーネント
   • サイドバーのナビゲーション
   • StatCard コンポーネント（繰り返し使用）
   • メインのダッシュボードレイアウト
4. 一貫性を保つためにデザイントークンを抽出する
5. layout-patterns.md →「Dashboard Layout」パターンを参照する
6. 再利用可能な StatCard からコンポーネントを生成する
7. メインの Dashboard コンポーネントに組み込む

シナリオ 3：複数のセクションを含む複雑なページ

ユーザー：「このランディングページを実装してください［スクリーンショット］」

アプローチ：

1. スクリーンショットを確認する
2. セクションを特定する：ヒーロー、機能のグリッド、お客様の声、CTA
3. チェックリストを使って各セクションを個別に分析する
4. 共通のデザイントークンを抽出する
5. セクションコンポーネントを一つずつ生成する
6. セクションを組み合わせてページ全体を構成する方法を示す
7. レスポンシブ動作に関するメモを提供する

シナリオ 4：コンポーネントライブラリのスクリーンショット

ユーザー：「このデザインシステムのスクリーンショットからコンポーネントを作成してください［スクリーンショット］」

アプローチ：

1. スクリーンショットを確認する
2. 特定する：複数のバリエーションのボタン、入力欄、カードが表示されている
3. システムのデザイントークンを抽出する
4. 各コンポーネントのバリエーションを生成する
5. プロパティのバリエーションを説明する
6. 使用ガイドを作成する
7. プロジェクト内での整理方法を提案する

参照ファイルの使い方

references/ui-analysis-checklist.md

• 使用するタイミング：ステップ 3（コンポーネントの特定）および包括的な分析ガイドとして
• 目的：コンポーネントや詳細の見落としを防ぐ
• 方法：チェックリストの各セクションを順に確認する

references/layout-patterns.md

• 使用するタイミング：ステップ 2（レイアウト分析）およびステップ 7（コード生成）
• 目的：一般的なパターンをすばやく特定し、実装コードを得る
• 方法：確認したレイアウトをパターンに当てはめ、提供されたコードを調整する

references/design-tokens.md

• 使用するタイミング：ステップ 4（デザイントークンの抽出）およびステップ 7（コード生成）
• 目的：視覚要素を Tailwind クラスに正確に対応付ける
• 方法：カラー表、間隔のスケール、コンポーネントサイズのガイドを使用する

正確に分析するためのヒント

1. 体系的に進める - ワークフローの手順を順番にたどり、先に進みすぎない
2. 寸法を測る - サイズや間隔を慎重に推定する
3. パターンを探す - 繰り返し使われる要素は、デザインシステムに一貫性があることを示す
4. 不確かな点を記録する - 仮定と確認済みの詳細を明確に区別する
5. レスポンシブ対応を考える - モバイルでの動作を必ず検討する
6. アクセシビリティを優先する - 最初から ARIA ラベルとセマンティック HTML を含める
7. DRY を保つ - パターンが繰り返される場合は、再利用可能なコンポーネントを抽出する
8. 参照資料を活用する - 正確さを高めるため、参照ファイルを積極的に使う
9. ユーザーに確認する - 大規模なコード生成に入る前に、理解が合っているか確認する
10. 反復する - ユーザーからのフィードバックに基づく調整を想定する

他のスキルとの連携

react-component-generator スキルとの連携

両方のスキルを利用できる場合：

1. ui-analyzer を使用してデザインを理解し、要件を抽出します
2. 類似コンポーネントについて react-component-generator のテンプレートを参照します
3. ui-analyzer が抽出したデザイントークンをテンプレートに適用します
4. react-component-generator の命名規則と構成規則に従います

これにより、分析 → テンプレートの特定 → カスタマイズ → 実装という強力なワークフローが実現します。

ワークフロー全体の例

ユーザーがログインページのスクリーンショットを提供

1. ✅ スクリーンショットを読み取り、UI を説明します
2. ✅ 特徴を特定します：中央配置のカードレイアウト、画像を含む分割画面
3. ✅ デザイントークンを抽出します：
   • プライマリブルー：#3B82F6 → bg-blue-500
   • テキスト：#1F2937 → text-gray-800
   • 背景：#F9FAFB → bg-gray-50
   • カードのパディング：約32px → p-8
   • 入力欄の高さ：約40px → h-10
   • ボタン：青い背景、白いテキスト、rounded-md
4. ✅ コンポーネントを特定します：
   • ロゴ／ブランド要素
   • 見出しとサブ見出し
   • メールアドレス入力欄（ラベル付き）
   • パスワード入力欄（ラベル、表示／非表示アイコン付き）
   • 「ログイン状態を保持する」チェックボックス
   • 「パスワードをお忘れですか？」リンク
   • 送信ボタン
   • 下部のサインアップリンク
5. ✅ layout-patterns.md を参照します → 分割画面＋中央配置カードのパターン
6. ✅ LoginForm.tsx を生成します：
   • props 用の TypeScript インターフェース
   • フォーム検証の構成
   • デザインに合わせた Tailwind クラス
   • アクセシビリティ属性
   • レスポンシブ対応（モバイルでは縦積み）
7. ✅ 使用例と注意事項を提示します
8. ✅ 画像セクションの生成やスタイルの調整を提案します

注意事項

• 分析を始める前に、必ずスクリーンショットを読み取ります
• 大規模なコード生成に進む前に、理解した内容をユーザーに確認してもらうことを優先します
• 色や余白に迷った場合は、最も近い Tailwind のデフォルト値を選びます
• すべての前提を明確に記載します
• 疑似コードではなく、完全で実行可能なコードを提供します
• デザインに合わせながら、改善案の提案も検討します
• ユーザーからのフィードバックに応じて、繰り返し調整できるようにします