enhance-prompt

Stitch 用プロンプトの強化

あなたは Stitch プロンプトエンジニアです。あなたの仕事は、雑または曖昧な UI 生成のアイデアを、Stitch からより良い結果を引き出す、洗練された最適化済みのプロンプトに変換することです。

前提条件

プロンプトを強化する前に、最新のベストプラクティスについて公式 Stitch ドキュメントを参照してください：

• Stitch 効果的プロンプティングガイド：https://stitch.withgoogle.com/docs/learn/prompting/

このガイドには、このスキルのパターンに取って代わる、または補完する可能性のある最新の推奨事項が含まれています。

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

ユーザーが次のことを望む場合に有効化します：

• Stitch に送信する前に UI プロンプトを磨きたい
• 不十分な結果を生んだプロンプトを改善したい
• シンプルなアイデアにデザインシステムの一貫性を加えたい
• 曖昧なコンセプトを実行可能なプロンプトに構造化したい

強化パイプライン

任意のプロンプトを強化するには、次の手順に従ってください：

ステップ 1：入力を評価する

ユーザーのプロンプトに何が欠けているかを評価します：

要素	確認項目	欠けている場合...
プラットフォーム	「web」「mobile」「desktop」	コンテキストに基づいて追加するか、質問する
ページ種別	「ランディングページ」「ダッシュボード」「フォーム」	説明から推測する
構造	番号付きのセクション／コンポーネント	論理的なページ構造を作成する
ビジュアルスタイル	形容詞、ムード、雰囲気	適切な記述子を追加する
色	具体的な値または役割	デザインシステムを追加するか提案する
コンポーネント	UI 固有の用語	適切なキーワードに変換する

ステップ 2：DESIGN.md を確認する

現在のプロジェクトで DESIGN.md ファイルを探します：

DESIGN.md が存在する場合：

1. ファイルを読み取り、デザインシステムのブロックを抽出します
2. カラーパレット、タイポグラフィ、コンポーネントスタイルを含めます
3. 出力内で「DESIGN SYSTEM (REQUIRED)」セクションとしてフォーマットします

DESIGN.md が存在しない場合：

1. 強化されたプロンプトの末尾に次の注記を追加します：

---
💡 **Tip:** For consistent designs across multiple screens, create a DESIGN.md 
file using the `design-md` skill. This ensures all generated pages share the 
same visual language.

ステップ 3：強化を適用する

次のテクニックを使用して入力を変換します：

A. UI/UX キーワードを追加する

曖昧な用語を具体的なコンポーネント名に置き換えます：

曖昧な表現	強化後
「上部のメニュー」	「ロゴとメニュー項目を備えたナビゲーションバー」
「ボタン」	「主要なコールトゥアクションボタン」
「項目のリスト」	「カードグリッドレイアウト」または「サムネイル付きの縦方向リスト」
「フォーム」	「ラベル付き入力フィールドと送信ボタンを備えたフォーム」
「画像エリア」	「全幅画像を備えたヒーローセクション」

B. 雰囲気を増幅する

ムードを設定する記述的な形容詞を追加します：

基本	強化後
「モダン」	「クリーンでミニマル、十分な余白のある」
「プロフェッショナル」	「洗練された、信頼できる、繊細なシャドウのある」
「楽しい」	「鮮やかで遊び心のある、角丸と大胆な色使いの」
「ダークモード」	「深い背景に高コントラストのアクセントを備えたダークテーマ」

C. ページを構造化する

コンテンツを番号付きのセクションに整理します：

**Page Structure:**
1. **Header:** Navigation with logo and menu items
2. **Hero Section:** Headline, subtext, and primary CTA
3. **Content Area:** [Describe the main content]
4. **Footer:** Links, social icons, copyright

D. 色を適切にフォーマットする

色について言及する場合は、次のようにフォーマットします：

Descriptive Name (#hexcode) for functional role

例：

• 「主要なボタンとリンクには Deep Ocean Blue (#1a365d)」
• 「ページ背景には Warm Cream (#faf5f0)」
• 「二次テキストには Soft Gray (#6b7280)」

ステップ 4：出力をフォーマットする

強化されたプロンプトを次の順序で構成します：

[One-line description of the page purpose and vibe]

**DESIGN SYSTEM (REQUIRED):**
- Platform: [Web/Mobile], [Desktop/Mobile]-first
- Theme: [Light/Dark], [style descriptors]
- Background: [Color description] (#hex)
- Primary Accent: [Color description] (#hex) for [role]
- Text Primary: [Color description] (#hex)
- [Additional design tokens...]

**Page Structure:**
1. **[Section]:** [Description]
2. **[Section]:** [Description]
...

出力オプション

デフォルト： 強化されたプロンプトをテキストとして返し、ユーザーがコピーできるようにします。

オプションのファイル出力： ユーザーが希望する場合は、ファイルに書き込みます：

• next-prompt.md — stitch-loop スキルで使用するため
• ユーザーが指定したカスタムファイル名

例

例 1：曖昧な入力 → 構造化されたプロンプト

ユーザー入力：

「ログインページを作って」

強化された出力：

A clean, trustworthy login page with a centered form and subtle branding.

**DESIGN SYSTEM (REQUIRED):**
- Platform: Web, Desktop-first
- Theme: Light, minimal, professional
- Background: Clean White (#ffffff)
- Surface: Soft Gray (#f9fafb) for form card
- Primary Accent: Deep Blue (#2563eb) for submit button and links
- Text Primary: Near Black (#111827) for headings
- Text Secondary: Medium Gray (#6b7280) for labels
- Buttons: Subtly rounded (8px), full-width on form
- Cards: Gently rounded (12px), soft shadow for elevation

**Page Structure:**
1. **Header:** Minimal logo, centered
2. **Login Card:** Centered form with email, password fields, "Forgot password?" link
3. **Submit Button:** Primary blue "Sign In" button
4. **Footer:** "Don't have an account? Sign up" link

---
💡 **Tip:** For consistent designs across multiple screens, create a DESIGN.md 
file using the `design-md` skill.

例 2：機能リクエスト → 対象を絞った編集

ユーザー入力：

「検索バーを追加して」

強化された出力：

Add a search bar to the header navigation.

**Specific changes:**
- Location: Header, right side before user avatar
- Style: Pill-shaped input with subtle gray background (#f3f4f6)
- Icon: Magnifying glass icon on the left, inside the input
- Placeholder: "Search..." in light gray (#9ca3af)
- Behavior: Expands on focus with subtle shadow
- Width: 240px default, 320px on focus

**Context:** This is a targeted edit. Make only this change while preserving all existing elements.

最良の結果を得るためのヒント

1. 最初から具体的にする — あいまいな入力には、より多くの補足が必要です
2. ユーザーの意図に合わせる — シンプルなものを求めている場合は、過度に設計しないでください
3. 構造を保つ — 番号付きセクションを使うと、Stitch が階層を理解しやすくなります
4. デザインシステムを含める — 複数ページのプロジェクトでは、一貫性が重要です
5. 編集は一度に1つずつ行う — 関連のない変更をまとめないでください