デザインの生成
テキスト説明、画像、モックアップから新しいデザインスクリーンを作成し、プロンプトやデザインシステムトークンで既存のスクリーンを編集し、Stitch MCPを使用してデザインバリアントを生成します。
[!NOTE] システムプロンプトを参照して、このスキルで言及されているすべてのツール（例：
list_projects、generate_screen_from_text、edit_screens）のMCPツールプレフィックスの処理方法を確認してください。
🎨 プロンプト拡張パイプライン
Stitchの生成ツールまたは編集ツールを呼び出す前に、ユーザーのプロンプトを拡張する必要があります。
1. コンテキストの分析
- プロジェクト:
list_projectsを使用して正しいprojectIdを見つけます。適切なプロジェクトが存在しない場合は、create_projectを使用して新しく作成します。 - デザインシステム:
list_design_systemsを使用して、プロジェクトにデザインシステムが存在するか確認します。存在する場合、デザイントークン（色、フォント、角丸）はプロジェクトレベルですでに適用されているため、生成プロンプトに色、フォント、テーマに関する指示を含めないでください。存在しない場合は、最初にmanage-design-systemスキルに処理を委任してからスクリーンを生成します。
2. UI/UX用語の洗練
Design Mappingsを参照して、あいまいな用語を置き換えます。
- あいまい: 「素敵なヘッダーを作って」
- 専門的: 「グラスモーフィズム効果と中央揃えのロゴを備えた固定ナビゲーションバー」
Prompting Keywordsを使用して、コンポーネント名、形容詞パレット、カラーロール、形状の説明を行います。
3. 最終プロンプトの構造化
Stitch用に拡張されたプロンプトをフォーマットします。レイアウト、コンテンツ、構造のみに焦点を当て、色、フォント、テーマの指示は絶対に含めないでください（これらはプロジェクトレベルでmanage-design-systemスキルによって処理されます）。
新しいスクリーンの場合は、次のテンプレートを使用します：
[ページの全体的な目的とユーザーの意図]
**PLATFORM:** [Web/Mobile]、[Desktop/Mobile]-first
**PAGE STRUCTURE:**
1. **Header:** [ナビゲーションとブランディングの説明]
2. **Hero Section:** [見出し、サブテキスト、プライマリCTA]
3. **Primary Content Area:** [詳細なコンポーネントの内訳]
4. **Footer:** [リンクと著作権情報]
編集の場合は、何を変更するかを具体的に指定します：
- 場所: 「[ヒーローセクション]の[プライマリボタン]を変更...」
- ビジュアル: 「...より暗い青（#004080）にし、微妙な影を追加。」
- 構造: 「プライマリボタンの横に、テキストが'Learn More'のセカンダリボタンを追加。」
[!CAUTION] 生成プロンプトには、16進数カラーコード、フォント名、カラーパレット、角丸の値、またはデザインシステムトークンを含めないでください。これらはmanage-design-systemスキルによってプロジェクトレベルで適用され、重複すると競合が発生します。（編集プロンプトでは、正確な色調整のために16進数カラーコードを使用しても問題ありません。）
4. AIインサイトの提示
ツール呼び出し後は、常にoutputComponents（テキスト説明と提案）をユーザーに表示します。
完全なプロンプト拡張の前後例については、examples/enhanced-prompt.mdを参照してください。
手順
モードの決定
ユーザーのリクエストに基づいて使用するフローを決定します：
- ユーザーがテキスト説明から作成したい場合 → テキストからの生成フロー
- ユーザーが画像、スクリーンショット、モックアップを提供する場合 → 画像からの生成フロー
- ユーザーが既存のスクリーンを変更したい場合 → 編集フロー
- ユーザーがレイアウト/色/コンテンツのバリエーションを希望する場合 → バリアント生成フロー
テキストからの生成フロー（新しいスクリーン）
1. ユーザープロンプトの拡張
上記のプロンプト拡張パイプラインを適用します。
2. プロジェクトの特定
list_projectsを使用して、まだ不明な場合は正しいprojectIdを見つけます。
3. スクリーンの生成
拡張されたプロンプトとdesignSystem ID（ステップ1で見つかった場合）を指定して、generate_screen_from_textツールを呼び出します。
{
"projectId": "...",
"prompt": "[拡張されたプロンプト]",
"designSystem": "assets/...", // オプション：ステップ1で見つかった場合に渡す
"deviceType": "DESKTOP" // オプション：MOBILE、DESKTOP、TABLET
}
4. AIフィードバックの提示
常にoutputComponentsからのテキスト説明と提案をユーザーに表示します。
5. デザインアセットのダウンロード
生成後、outputComponentsからHTMLとスクリーンショットのURLを.stitch/designsディレクトリにダウンロードします。
- 命名: ファイル名にはスクリーンIDまたは説明的なスラッグを使用します。
- ツール:
run_command経由でcurl -oまたは類似のものを使用します。 - ディレクトリ:
.stitch/designsが存在することを確認します。
6. 確認と調整
- 結果が期待どおりでない場合は、編集フローを続行して対象を絞った調整を行います。
- 基本的なレイアウトが間違っている場合を除き、最初から再生成しないでください。
画像からの生成フロー（画像/モックアップ → デザイン）
ユーザーがStitchで再現する画像、スクリーンショット、またはデザインモックアップを提供する場合にこのフローを使用します。
1. プロジェクトの特定
list_projectsを使用して正しいprojectIdを見つけます。適切なプロジェクトが存在しない場合は、create_projectを使用して新しく作成します。
2. 画像のアップロード
upload-to-stitchスキルに委任して、画像をプロジェクトにアップロードします。これにより、画像をコンテンツとして持つ新しいスクリーンが作成されます。
3. 編集による調整
アップロード後、list_screensを使用して新しく作成されたscreenIdを見つけ、説明的なプロンプトを指定してedit_screensを呼び出し、デザインを調整します：
{
"projectId": "...",
"selectedScreenIds": ["<アップロードされたスクリーンID>"],
"prompt": "[このモックアップから調整、拡張、または再作成する内容を説明]"
}
[!TIP] 最良の結果を得るには、「これのように見せる」と言うだけでなく、画像の背後にある意図を説明します。例：「これはダッシュボードのモックアップです—適切なデータテーブル、サイドバーナビゲーション、チャートウィジェットを使って再作成してください。」
4. AIフィードバックの提示
常にoutputComponentsからのテキスト説明と提案をユーザーに表示します。
5. デザインアセットのダウンロード
outputComponentsからHTMLとスクリーンショットのURLを.stitch/designsディレクトリにダウンロードします。
- 命名: ファイル名にはスクリーンIDまたは説明的なスラッグを使用します。
- ツール:
run_command経由でcurl -oまたは類似のものを使用します。 - ディレクトリ:
.stitch/designsが存在することを確認します。
編集フロー（既存のスクリーンを変更）
1. スクリーンの特定
list_screensまたはget_screenを使用して、正しいprojectIdとscreenIdを見つけます。
2. 編集プロンプトの作成
プロンプト拡張パイプラインを適用し、具体性に焦点を当てます：
- 場所: 「[ヒーローセクション]の[プライマリボタン]の色を変更...」
- ビジュアル: 「...より暗い青（#004080）にし、微妙な影を追加。」
- 構造: 「プライマリボタンの横に、テキストが'Learn More'のセカンダリボタンを追加。」
3. 編集の適用
edit_screensツールを呼び出します。
{
"projectId": "...",
"selectedScreenIds": ["..."],
"prompt": "[対象を絞った編集プロンプト]"
}
4. AIフィードバックの提示
常にoutputComponentsからのテキスト説明と提案をユーザーに表示します。
5. デザインアセットのダウンロード
編集後、outputComponentsから更新されたHTMLとスクリーンショットのURLを.stitch/designsディレクトリにダウンロードし、以前のバージョンを上書きしてローカルファイルが最新の編集を反映するようにします。
- 命名: ファイル名にはスクリーンIDまたは説明的なスラッグを使用します。
- ツール:
run_command経由でcurl -oまたは類似のものを使用します。 - ディレクトリ:
.stitch/designsが存在することを確認します。
6. プロジェクトメタデータの更新
アセットをダウンロードした後、.stitch/metadata.jsonを更新して変更を反映します（例：編集によるスクリーンタイトルの更新や新しいスクリーンID）。メタデータファイルは、すべてのスクリーン、そのデバイスタイプ、デザインシステム情報を追跡します。フォーマットについては、manage-design-systemスキルのexamples/metadata.jsonを参照してください。
7. 確認と繰り返し
- 出力スクリーンを確認して、変更が正しく適用されたかをチェックします。
- さらに調整が必要な場合は、新しい具体的なプロンプトで編集フローを繰り返します。
バリアント生成フロー（バリエーションの探索）
ユーザーが既存のスクリーンの代替レイアウト、配色、またはコンテンツバリエーションを探索したい場合にこのフローを使用します。
1. スクリーンの特定
list_screensまたはget_screenを使用して、正しいprojectIdとscreenIdを見つけます。
2. バリアントオプションの設定
適切なオプションを指定してgenerate_variantsツールを呼び出します：
{
"projectId": "...",
"selectedScreenIds": ["..."],
"prompt": "[バリアントの方向性を説明]",
"variantOptions": {
"variantCount": 3,
"creativeRange": "EXPLORE",
"aspects": ["LAYOUT", "COLOR_SCHEME"]
}
}
バリアントオプション：
variantCount: 1～5のバリアント数（デフォルト：3）creativeRange:REFINE（微調整）、EXPLORE（バランス型）、REIMAGINE（大胆な変更）aspects: 特定の側面に焦点を当てる —LAYOUT、COLOR_SCHEME、IMAGES、TEXT_FONT、TEXT_CONTENT、または空のままですべて対象
3. AIフィードバックの提示
常にoutputComponentsからのテキスト説明と提案をユーザーに表示します。
4. デザインアセットのダウンロード
バリアントのHTMLとスクリーンショットのURLをoutputComponentsから.stitch/designsディレクトリにダウンロードします。
- 命名: ファイル名にはスクリーンIDまたは説明的なスラッグを使用します。
- ツール:
run_command経由でcurl -oまたは類似のものを使用します。 - ディレクトリ:
.stitch/designsが存在することを確認します。
💡 ヒント
- 構造的に考える: プロンプトでページをヘッダー、ヒーロー、機能、フッターに分割します。
- コンテンツファースト: 各セクションの見た目ではなく、含まれる内容（テキスト、画像、CTA）を説明します。
- 反復的な調整: 完全な再生成よりも、対象を絞った編集を優先します。
- テーマの漏洩を防ぐ: 生成プロンプトに16進数カラーコード、フォント名、カラーロールを絶対に入れないでください。デザインシステムがすべての視覚スタイルを処理します。
- インタラクションを指定: 視覚スタイルではなく、ホバー状態、アニメーション、クリック動作に言及します。
- 編集を集中させる: 長い変更リストよりも、一度に1つの編集の方が効果的です。
- コンポーネントを参照: 「ナビゲーションバー」、「ヒーローセクション」、「フッター」、「カードグリッド」などの専門用語を使用します。
- 編集での正確な色: 既存のスクリーンを編集する場合は、正確な色合わせに16進数カラーコードを使用します。
📚 参考資料
- Design Mappings — UI/UXキーワードと雰囲気記述子。
- Prompting Keywords — Stitchが最もよく理解する技術用語。
- Enhanced Prompt Example — プロンプト拡張の前後例。