UI Designer

概要

このスキルは、多段階ワークフローを通じてリファレンスUI画像から体系的にデザインシステムを抽出します：ビジュアルパターンを分析 → デザインシステムドキュメント生成 → PRD作成 → 実装可能なUIプロンプト生成。

使用場面

• ユーザーがUIスクリーンショット、モックアップ、またはデザインリファレンスを提供する
• 既存デザインからカラーパレット、タイポグラフィ、スペーシングを抽出する必要がある
• ビジュアル例からデザインシステムドキュメントを生成したい
• リファレンス美学に合致するMVP UIを構築する
• 一貫したデザイン原則に従う複数のUI変動を作成する

ワークフロー

ステップ1：入力情報を収集

ユーザーに以下をリクエスト：

• リファレンス画像ディレクトリ：UIスクリーンショット/モックアップを含むフォルダのパス
• プロジェクト概要ファイル：製品コンセプトと目標を説明するドキュメント
• 既存PRD（オプション）：PRDが既に存在する場合はステップ3をスキップ

ステップ2：画像からデザインシステムを抽出

汎用サブエージェントでTaskツールを使用し、以下を提供：

assets/design-system.mdからのプロンプトテンプレート：

• カラーパレットを分析（プライマリ、セカンダリ、アクセント、機能色）
• タイポグラフィを抽出（フォントファミリー、サイズ、ウェイト、行の高さ）
• コンポーネントスタイルを特定（ボタン、カード、入力、アイコン）
• スペーシングシステムを文書化
• アニメーション/トランジションパターンをメモ
• ダークモード変動が存在する場合は含める

リファレンス画像をアタッチしてサブエージェントのコンテキストに追加。

出力：テンプレート形式に従った完全なデザインシステムマークダウン

保存先：documents/designs/{image_dir_name}_design_system.md

ステップ3：MVP PRDを生成（提供されていない場合）

汎用サブエージェントでTaskツールを使用し、以下を提供：

assets/app-overview-generator.mdからのプロンプトテンプレート：

• {项目背景}をプロジェクト概要ファイルの内容に置き換え
• テンプレートは以下をガイド：エレベーターピッチ、問題ステートメント、ターゲットオーディエンス、USP、機能リスト、UX/UI考慮事項

ユーザーと対話して製品要件を洗練・明確化

出力：構造化されたPRDマークダウン

変数として保存してステップ4で使用（オプションでdocuments/prd/に保存）

ステップ4：最終UI実装プロンプトを作成

assets/vibe-design-template.mdを使用してデザインシステムとPRDを統合：

置き換え：

• {项目设计指南} → ステップ2からのデザインシステム
• {项目MVP PRD} → ステップ3のPRD、または提供されたPRDファイル

結果：以下を含む完全な実装可能なプロンプト：

• デザイン美学の原則
• プロジェクト固有のカラー/タイポグラフィガイドライン
• アプリ概要と機能要件
• 実装タスク（複数のUI変動、コンポーネント構造）

保存先：documents/ux-design/{idea_file_name}_design_prompt_{timestamp}.md

ステップ5：React環境を確認

既存のReactプロジェクトを確認：

find . -name "package.json" -exec grep -l "react" {} \;

見つからない場合、ユーザーに通知：

npx create-react-app my-app
cd my-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npm install lucide-react

ステップ6：UIを実装

ステップ4の最終作成プロンプトを使用してReactプロジェクトでUIを実装。

プロンプトは以下を指示：

• 複数のデザイン変動を作成（モバイル用3つ、ウェブ用2つ）
• 別個のコンポーネントとして整理：[solution-name]/pages/[page-name].jsx
• すべての変動をショーケースページに集約

テンプレートアセット

assets/design-system.md

ビジュアルデザインパターン抽出用テンプレート。以下のセクションを含む：

• カラーパレット（プライマリ、セカンダリ、アクセント、機能色、背景）
• タイポグラフィ（フォントファミリー、ウェイト、テキストスタイル）
• コンポーネントスタイル（ボタン、カード、入力、アイコン）
• スペーシングシステム（4dp-48dpスケール）
• アニメーション（期間、イージング曲線）
• ダークモード変動

リファレンス画像を分析する際にこのテンプレートを使用し、包括的なデザインシステムカバレッジを確保します。

assets/app-overview-generator.md

協調的なPRD生成用テンプレート。以下をガイド：

• エレベーターピッチ
• 問題ステートメントとターゲットオーディエンス
• ユニークセリングプロポジション
• プラットフォームターゲット
• ユーザーストーリー付き機能リスト
• スクリーン別UX/UI考慮事項

ユーザーとの対話的洗練を通じて要件を明確化するよう設計。

assets/vibe-design-template.md

デザインシステムとPRDを統合する最終実装プロンプトテンプレート。以下を含む：

• 美学的原則（ミニマリズム、ホワイトスペース、カラー理論、タイポグラフィ階層）
• 実践的要件（Tailwind CSS、Lucideアイコン、レスポンシブデザイン）
• タスク仕様（複数の変動、コンポーネント整理）

このテンプレートはさらなる修正なしでUI実装に対応したプロンプトを生成します。

ベストプラクティス

画像分析

• 分析を開始する前にすべての画像を読む
• 複数のスクリーン全体でパターンを探す
• 明示的スタイル（色、フォント）と暗黙的原則（スペーシング、階層）の両方をメモ
• リファレンスに存在する場合はダークモードをキャプチャ

デザインシステム抽出

• 体系的に：テンプレートのすべてのセクションをカバー
• 汎用的な説明ではなく具体的な値（16進コード、pxサイズ）を使用
• 推測可能な場合はデザイン選択の「理由」を文書化
• バリアント（ホバー状態、無効状態）を含める

PRD生成

• あいまいさを明確化するためユーザーと対話的に関わる
• 問題理解に基づいて機能を提案
• MVP スコープが現実的であることを確認
• スクリーン/インタラクション別にUX考慮事項を文書化

出力整理

• デザインシステムをわかりやすいファイル名で保存（画像ディレクトリ名に基づく）
• 最終プロンプトをバージョン追跡のためタイムスタンプ付きで保存
• すべての出力をdocuments/ディレクトリに保存して簡単に参照可能に
• 繰り返しのため中間出力を保持

使用例

ユーザーが提供：

• reference-images/saas-dashboard/（5つのスクリーンショット）
• ideas/project-management-app.md（プロジェクトコンセプト）

ワークフロー実行：

1. reference-images/saas-dashboard/から5つの画像を読む
2. Taskツール使用 → design-system.md テンプレート → 画像を分析
3. documents/designs/saas-dashboard_design_system.mdに保存
4. Taskツール使用 → プロジェクトコンセプト付きapp-overview-generator.md
5. ユーザーインタラクションを通じてPRDを洗練
6. vibe-design-template.mdを使用してデザインシステム + PRDを統合
7. documents/ux-design/project-management-app_design_prompt_20251025_153000.mdに保存
8. React環境を確認、セットアップ必要な場合はユーザーに通知
9. 最終プロンプトを使用してUIを実装

注記

• これは高い自由度のワークフロー—コンテキストに基づいてステップを適応
• テンプレートは構造を提供しますが、機械的記入よりも思慮深い分析を奨励
• PRD生成中のユーザーインタラクションは品質にとって重要
• 最終プロンプト品質はUI実装成功に直接影響
• 繰り返しと洗練のためすべての中間出力を保持