ui-layout-analyzer

UI レイアウトアナライザー

概要

提供された UI のスクリーンショットを分析し、構造化されたレイアウトの説明と機能分析を出力します。このスキルはインターフェースのスクリーンショットに焦点を当て、ページ構造、視覚的なセクション、階層、コントロール、想定されるユーザーワークフローを説明します。新しい UI のデザインや、実装コードのレビューは行いません。

使用する場面

ユーザーが UI 画像を提示して分析を求めた場合に、このスキルを使用してください。

使用しない場面

次の場合は、このスキルを使用しないでください。

• UI 以外の画像（写真、図、インターフェースのスクリーンショットではないグラフ）
• UI のデザインや作成の依頼（代わりに ui-ux-pro-max を使用してください）
• UI の実装に関するコードレビュー（代わりに code-reviewer を使用してください）

手順

次の形式に厳密に従ってください。

## UI Layout Description

### Overall Structure
Describe the overall structure type (modal dialog/full page/sidebar/drawer), background color, rounded corners, shadows, etc. End with "---".

---

### Section N: Section Name
- Specific description items
- Use bullet points for key elements

[Continue describing each section...]

---

## Function Description

| Function Module | Description |
|---|---|
| **Module Name** | Function description |

分析手順

1. 全体構造を特定する

• ページの種類：モーダルダイアログ／フルページ／サイドバー／ボトムドロワー
• 背景：白／グレー／グラデーション／画像の背景
• 特殊な要素：角丸、シャドウ、枠線、区切り線

2. セクションに分ける

上から順にセクションを特定し、それぞれ次の内容を含めます。

• セクションの種類：ヘッダー／タブバー／コンテンツ領域／リスト／テーブル／入力領域／アクションバー
• 主な要素：アイコン、テキスト、ボタン、入力フィールド
• レイアウト：左揃え／中央揃え／右揃え、水平／垂直

3. インタラクティブ要素を特定する

• ボタン：プライマリー（塗りつぶし）／セカンダリー（テキスト）／アイコンボタン
• 入力：1 行／複数行のテキスト／ドロップダウン／日付ピッカー
• セレクター：ラジオボタン／チェックボックス／スイッチ／タブ切り替え
• リスト：リスト項目、グリッドレイアウト、カードレイアウト

4. 機能を説明する

視覚的な要素から機能を推測します。

• フォーム：入力、検証、送信
• ナビゲーション：画面遷移、タブ切り替え、戻る
• 表示：リスト、詳細、カルーセル
• フィードバック：トースト、モーダル、読み込み状態

注意事項

• 画像内で視認できるテキストをすべて認識して含めます。
• 表示されている状態（無効／選択済み／展開済み）を記載します。
• セクション番号には算用数字（1、2、3...）を使用します。
• 簡潔でありながら、内容を漏らさず説明します。