beavon2010/claude-skills

Stitch用プロンプト強化ガイド

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

前提条件

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

• Stッチ効果的なプロンプティングガイド: https://stitch.withgoogle.com/docs/learn/prompting/

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

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

ユーザーが次のことを希望する場合にアクティブ化します。

• Stitchに送信する前にUIプロンプトを磨き上げる
• 悪い結果を生んだプロンプトを改善する
• シンプルなアイデアにデザインシステムの一貫性を追加する
• 漠然としたコンセプトを実行可能なプロンプトに構造化する

強化パイプライン

以下の手順に従って、任意のプロンプトを強化します。

ステップ1: 入力の評価

ユーザーのプロンプトに何が不足しているかを評価します。

要素	確認事項	不足している場合...
プラットフォーム	"web", "mobile", "desktop"	コンテキストに基づいて追加するか、質問する
ページタイプ	"landing page", "dashboard", "form"	説明から推測する
構造	番号付きセクション/コンポーネント	論理的なページ構造を作成する
ビジュアルスタイル	形容詞、ムード、雰囲気	適切な記述子を追加する
色	特定の値または役割	デザインシステムを追加するか、提案する
コンポーネント	UI固有の用語	適切なキーワードに変換する

ステップ2: DESIGN.mdの確認

現在のプロジェクトに DESIGN.md ファイルがあるかどうかを確認します。

DESIGN.md が存在する場合:

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

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

1. 強化されたプロンプトの末尾に以下の注意書きを追加します。

---
💡 **ヒント:** 複数画面で一貫したデザインを実現するには、`design-md` スキルを使用して `DESIGN.md` 
ファイルを作成してください。これにより、生成されるすべてのページが同じビジュアル言語を共有します。

ステップ3: 強化の適用

以下のテクニックを使用して入力を変換します。

A. UI/UXキーワードの追加

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

曖昧	強化後
"上部のメニュー"	"ロゴとメニュー項目があるナビゲーションバー"
"ボタン"	"プライマリコールトゥアクションボタン"
"アイテムのリスト"	"カードグリッドレイアウト" または "サムネイル付き縦型リスト"
"フォーム"	"ラベル付き入力フィールドと送信ボタンがあるフォーム"
"画像エリア"	"全幅画像のあるヒーローセクション"

B. 雰囲気の増幅

ムードを設定するために説明的な形容詞を追加します。

基本	強化後
"モダン"	"クリーンでミニマル、十分なホワイトスペース"
"プロフェッショナル"	"洗練されていて信頼感があり、微妙なシャドウ"
"楽しい"	"鮮やかで遊び心があり、角丸と大胆な色"
"ダークモード"	"深い背景にハイコントラストのアクセントを備えたダークテーマ"

C. ページの構造化

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

**ページ構造:**
1. **ヘッダー:** ロゴとメニュー項目があるナビゲーション
2. **ヒーローセクション:** 見出し、サブテキスト、プライマリCTA
3. **コンテンツエリア:** [メインコンテンツの説明]
4. **フッター:** リンク、ソーシャルアイコン、著作権

D. 色の適切なフォーマット

色が言及されている場合、以下のようにフォーマットします。

[説明的な名前] (#hexコード) [機能的な役割]

例:

• "Deep Ocean Blue (#1a365d): プライマリボタンとリンク用"
• "Warm Cream (#faf5f0): ページ背景用"
• "Soft Gray (#6b7280): セカンダリテキスト用"

ステップ4: 出力のフォーマット

強化されたプロンプトを以下の順序で構造化します。

[ページの目的と雰囲気の1行説明]

**DESIGN SYSTEM (必須):**
- プラットフォーム: [Web/モバイル]、[デスクトップ/モバイル]ファースト
- テーマ: [ライト/ダーク]、[スタイル記述子]
- 背景: [色の説明] (#hex)
- プライマリアクセント: [色の説明] (#hex)、[役割]
- テキストプライマリ: [色の説明] (#hex)
- [追加のデザイントークン...]

**ページ構造:**
1. **[セクション]:** [説明]
2. **[セクション]:** [説明]
...

出力オプション

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

オプションのファイル出力: ユーザーが要求した場合、ファイルに書き込みます。

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

例

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

ユーザー入力:

"ログインページを作って"

強化された出力:

中央にフォームがあり、さりげないブランディングがある、クリーンで信頼感のあるログインページ。

**DESIGN SYSTEM (必須):**
- プラットフォーム: Web、デスクトップファースト
- テーマ: ライト、ミニマル、プロフェッショナル
- 背景: Clean White (#ffffff)
- サーフェス: Soft Gray (#f9fafb) フォームカード用
- プライマリアクセント: Deep Blue (#2563eb) 送信ボタンとリンク用
- テキストプライマリ: Near Black (#111827) 見出し用
- テキストセカンダリ: Medium Gray (#6b7280) ラベル用
- ボタン: 控えめな角丸 (8px)、フォーム内で全幅
- カード: 緩やかな角丸 (12px)、浮き上がり効果のためのソフトシャドウ

**ページ構造:**
1. **ヘッダー:** ミニマルロゴ、中央揃え
2. **ログインカード:** メール、パスワードフィールド、「パスワードをお忘れですか？」リンクがある中央のフォーム
3. **送信ボタン:** プライマリブルー「サインイン」ボタン
4. **フッター:** 「アカウントをお持ちでない方は、サインアップ」リンク

---
💡 **ヒント:** 複数画面で一貫したデザインを実現するには、`design-md` スキルを使用して `DESIGN.md` 
ファイルを作成してください。これにより、生成されるすべてのページが同じビジュアル言語を共有します。

例2: 機能リクエスト → ターゲット編集

ユーザー入力:

"検索バーを追加して"

強化された出力:

ヘッダーナビゲーションに検索バーを追加します。

**具体的な変更点:**
- 場所: ヘッダー、右側（ユーザーアバターの前）
- スタイル: 控えめな灰色の背景 (#f3f4f6) のピル型入力
- アイコン: 虫眼鏡アイコン、入力内の左側
- プレースホルダー: 明るい灰色 (#9ca3af) で「検索...」
- 動作: フォーカス時に拡大し、控えめなシャドウ
- 幅: デフォルト240px、フォーカス時320px

**コンテキスト:** これはターゲット編集です。既存の要素をすべて維持しながら、この変更のみを行います。

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

1. 早い段階で具体的に — 曖昧な入力はより多くの強化が必要です
2. ユーザーの意図に合わせる — ユーザーがシンプルさを望んでいる場合、過剰にデザインしすぎない
3. 構造化を保つ — 番号付きセクションはStitchが階層を理解するのに役立ちます
4. デザインシステムを含める — 一貫性は複数ページのプロジェクトにとって重要です
5. 編集は一度に一つの変更を — 無関係な変更をまとめない