design-system-builder

UI デザイナー

概要

このスキルでは、複数のステップからなるワークフローを通じて、参考用 UI 画像からデザインシステムを体系的に抽出できます。視覚的なパターンを分析し、デザインシステムのドキュメントを生成して、PRD を作成し、実装にすぐ使える UI プロンプトを作成します。

使用する場面

• ユーザーが UI のスクリーンショット、モックアップ、デザインの参考資料を提供したとき
• 既存のデザインからカラーパレット、タイポグラフィ、余白を抽出する必要があるとき
• 視覚的な例からデザインシステムのドキュメントを生成したいとき
• 参考資料の美的スタイルに合わせた MVP の UI を構築するとき
• 一貫したデザイン原則に沿って複数の UI バリエーションを作成するとき

ワークフロー

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

ユーザーに次の情報を依頼します。

• 参考画像のディレクトリ：UI のスクリーンショットやモックアップが含まれるフォルダーのパス
• プロジェクトのアイデアファイル：プロダクトのコンセプトと目標を説明するドキュメント
• 既存の PRD（任意）：すでに PRD がある場合は、ステップ 3 をスキップします

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

汎用サブエージェントと Task ツールを使用し、次の内容を提供します。

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

• カラーパレットを分析する（プライマリ、セカンダリ、アクセント、機能色）
• タイポグラフィを抽出する（フォントファミリー、サイズ、ウェイト、行の高さ）
• コンポーネントのスタイルを特定する（ボタン、カード、入力欄、アイコン）
• 余白の体系を記録する
• アニメーション／トランジションのパターンを記載する
• ダークモードのバリエーションがあれば含める

参考画像をサブエージェントのコンテキストに添付します。

出力：テンプレート形式に沿った完全なデザインシステムの Markdown

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

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

汎用サブエージェントと Task ツールを使用し、次の内容を提供します。

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

• {项目背景} をプロジェクトのアイデアファイルの内容に置き換える
• このテンプレートでは、エレベーターピッチ、問題の説明、対象ユーザー、独自の価値提案、機能一覧、UX/UI に関する考慮事項を順に作成します

ユーザーとやり取りし、プロダクト要件を調整・明確化します。

出力：構成化された PRD の Markdown

ステップ 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 つ、Web 向けに 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 実装の成功に直接影響します
• 改良や調整に備えて、中間出力をすべて保持してください