Stitch試す

Trpgアプリには以下の画面があります。

- ログイン
- プロントによるキャラ生成画面
- 生成したキャラ一覧画面
- キャラ詳細
- シナリオ一覧
- セッション画面
- マイページ
- 設定やプライバシーポリシー画面

## 1. ワークフロー Steps

| #     | フェーズ                        | ねらい                           | 例                                                                                                                                                                                      |
| ----- | --------------------------- | ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **1** | **Start Broad or Specific** | 目的や機能をざっくり or 詳細にインプットして土台を作る | *High-Level* → “An app for marathon runners.”<br>*Detailed* → “An app for marathon runners to engage with a community, find partners, get training advice, and discover races nearby.” |
| **2** | **Define the Vibe**         | 色・フォント・レイアウトの方向性を形容詞で示す       | “A calm and minimalist app for meditation.”<br>“A vibrant, friendly fitness tracking app.”                                                                                             |
| **3** | **Refine Screen by Screen** | 画面単位で具体的 UI 変更を指示             | “On the homepage, add a search bar to the header.”                                                                                                                                     |
| **4** | **Adjust Theme & Imagery**  | 配色・書体・画像を一括調整                 | Colors → “Update the color palette to warm earth tones.”                                                                                                                               |
| **5** | **Change App Language**     | UI 文言のローカライズ                  | “Translate all UI text and product copy into Spanish.”                                                                                                                                 |

---

## 2. Constraints （必ず守るルール）

1. **1 回のプロンプトで 1〜2 変更まで**
2. **必ず対象スクリーン / コンポーネントを明示**
3. **視覚・スタイルを具体的に表現**
4. テーマ変更時は **画像 / アイコンとの整合** を忘れずに

---

## 3. Few-Shot Prompt Examples

| カテゴリ             | 例文                                                                                                    |
| ---------------- | ----------------------------------------------------------------------------------------------------- |
| Screen UI Update | “On the login screen, change the background to light gray and round the corners of the input fields.” |
| Vibe / Theme     | “For a book discovery app, use serif fonts and light green as the accent color.”                      |
| Product Imagery  | “On the homepage, change all product images' backgrounds to light beige.”                             |
| Localization     | “Switch all UI labels and button texts to Japanese.”                                                  |

---

## 4. 標準 **Output Format** テンプレート

```yaml
promptInstruction:
  objective: "<何を改善したいか>"
  targetComponent: "<対象スクリーン / コンポーネント>"
  specificChange: "<具体的な変更点>"
  toneOrStyle: "<トーン・スタイル>"
  constraint: "Limit to one or two clear changes"
  promptExample: "<1 行のサンプルプロンプト>"

###############################################################################
# 0. Broad concept - first run this to seed Stitch with all the necessary
#    screens and the overall “adventurous archive” vibe you asked for.
###############################################################################
promptInstruction:
  objective: "Create the initial UI skeleton for a solo-TRPG companion app"
  targetComponent: "Entire application"
  specificChange: |
    "Generate wire-frame layouts for these screens:
      • Login
      • Prompt-based Character Creation
      • Character Library (list)
      • Character Detail
      • Scenario Library (list)
      • Session / Chat play screen
      • My Page
      • Settings & Privacy Policy"
  toneOrStyle: "Whimsical, archival adventure (warm parchment textures, deep-emerald accent)"
  constraint: "Keep layouts minimal and clearly labeled; no visual polish yet"
  promptExample: "Create parchment-themed wire-frames for every screen listed above, using serif headings and a deep-emerald accent for CTAs."

###############################################################################
# 1. Login
###############################################################################
promptInstruction:
  objective: "Strengthen the adventure-hook on first launch"
  targetComponent: "Login screen hero & CTA"
  specificChange: "Add a small parchment map illustration above the form and rename the primary button to “Enter the Realm”"
  toneOrStyle: "Inviting, quest-like"
  constraint: "Modify only illustration and CTA text"
  promptExample: "On the Login screen, insert a parchment map illustration above the email/password fields and rename the primary CTA to “Enter the Realm.”"

###############################################################################
# 2. Character Creation (prompt-based)
###############################################################################
promptInstruction:
  objective: "Clarify the prompt workflow"
  targetComponent: "Prompt input card"
  specificChange: "Enlarge the multi-line prompt box to 6 rows and add a faint ‘Tell me about your hero…’ placeholder"
  toneOrStyle: "Playful, encouraging"
  constraint: "Touch only the input field"
  promptExample: "On the Character Creation screen, make the prompt textarea six rows tall and add a placeholder that says ‘Tell me about your hero…’"

###############################################################################
# 3. Character Library (list)
###############################################################################
promptInstruction:
  objective: "Improve quick scanning of characters"
  targetComponent: "Character card"
  specificChange: "Add a tiny race-class badge to the top-left corner of each card"
  toneOrStyle: "Catalog-like"
  constraint: "Leave card size/layout unchanged"
  promptExample: "On the Character Library screen, insert a small badge showing each character’s race and class at the top-left of every card."

###############################################################################
# 4. Character Detail
###############################################################################
promptInstruction:
  objective: "Highlight core stats at a glance"
  targetComponent: "Stats section"
  specificChange: "Move HP/Sanity into a horizontally scrollable pill-style bar just beneath the portrait"
  toneOrStyle: "Dashboard-like clarity"
  constraint: "Do not reorder other sections"
  promptExample: "On the Character Detail page, place HP and Sanity inside pill buttons directly under the portrait, and make them horizontally scrollable if needed."

###############################################################################
# 5. Scenario Library
###############################################################################
promptInstruction:
  objective: "Differentiate scenario genres visually"
  targetComponent: "Scenario list cards"
  specificChange: "Color-code the left border of each card based on its primary tag (e.g., Horror = crimson)"
  toneOrStyle: "Archival tabs"
  constraint: "Border color only; no other layout changes"
  promptExample: "On the Scenario Library screen, tint each card’s left border using the scenario’s main tag color."

###############################################################################
# 6. Session / Chat Screen
###############################################################################
promptInstruction:
  objective: "Emphasize game narration vs. player speech"
  targetComponent: "Chat bubble styles"
  specificChange: "Render GM messages on parchment-textured bubbles; player messages in plain cream bubbles"
  toneOrStyle: "Storybook"
  constraint: "Bubble style only; keep spacing"
  promptExample: "On the Session screen, style GM messages with a faint parchment texture while leaving player messages plain cream."

###############################################################################
# 7. My Page
###############################################################################
promptInstruction:
  objective: "Make progress immediately visible"
  targetComponent: "Profile header"
  specificChange: "Add a circular progress ring around the avatar indicating total campaign completion percentage"
  toneOrStyle: "Gamified dashboard"
  constraint: "Do not resize avatar"
  promptExample: "On My Page, wrap the user avatar in a circular progress ring that shows their overall campaign completion."

###############################################################################
# 8. Settings & Privacy Policy
###############################################################################
promptInstruction:
  objective: "Improve quick access to critical settings"
  targetComponent: "Settings menu list"
  specificChange: "Pin ‘Delete Account’ and ‘Data Export’ actions in a red-accented “Account & Privacy” section at the bottom"
  toneOrStyle: "Clear, cautious"
  constraint: "List order only"
  promptExample: "In the Settings menu, move ‘Delete Account’ and ‘Data Export’ to a red-accented sub-section called ‘Account & Privacy’ at the bottom of the list."