Stitch Prompt Guide: Effective Prompting
This guide provides instructions for crafting effective prompts to design and refine your app with Stitch.
1. Starting Your Project
Choose to start with a broad concept or specific details. For complex apps, start high-level and then drill down on details screen by screen.
High-Level vs. Detailed Prompts
-
High-Level (for brainstorming/complex apps): Start with a general idea.
- Prompt Example:
"An app for marathon runners."
- Prompt Example:
-
Detailed (for specific results): Describe core functionalities for a better starting point.
- Prompt Example:
"An app for marathon runners to engage with a community, find partners, get training advice, and find races near them."
- Prompt Example:
Set the Vibe with Adjectives
Use adjectives to define the app’s feel (influences colors, fonts, imagery).
-
Vibe Prompt Example 1:
"A vibrant and encouraging fitness tracking app."
-
Vibe Prompt Example 2:
"A minimalist and focused app for meditation."
.
2. Refining Your App by iterating screen by screen
Refine with Specific, Incremental Changes
Stitch performs best with clear, specific instructions. Focus on one screen/component and make one or two adjustments per prompt.
-
Be Specific: Tell Stitch what to change and how.
-
Prompt Example 1:
"On the homepage, add a search bar to the header."
-
Prompt Example 2:
"Change the primary call-to-action button on the login screen to be larger and use the brand's primary blue color."
-
-
Focus on Specific Screens/Features:
-
Example 1 (E-commerce Detail Page):
"Product detail page for a Japandi-styled tea store. Sells herbal teas, ceramics. Neutral, minimal colors, black buttons. Soft, elegant font."
-
Example 2 (E-commerce Detail Page):
"Product detail page for Japanese workwear-inspired men's athletic apparel. Dark, minimal design, dark blue primary color. Minimal clothing pictures, natural fabrics, not gaudy."
-
Describe Desired Imagery
Guide the style or content of images.
- Example (Specific Image Style):
"Music player page for 'Suburban Legends.' Album art is a macro, zoomed-in photo of ocean water. Page background/imagery should reflect this."
3. Controlling App Theme
Colors
Request specific colors or describe a mood for the color palette.
-
Specific Color Prompt:
"Change primary color to forest green."
-
Mood-Based Color Prompt:
"Update theme to a warm, inviting color palette."
Fonts & Borders
Modify typography and element styling (buttons, containers).
-
Font Style Prompt:
"Use a playful sans-serif font."
OR"Change headings to a serif font."
-
Border/Button Style Prompt:
"Make all buttons have fully rounded corners."
OR"Give input fields a 2px solid black border."
-
Combined Theme Example :
"Book discovery app: serif font for text, light green brand color for accents."
4. How to modify images in your design
Be Specific When Changing Images
Clearly identify the image to modify. Use descriptive terms from the app’s content.
-
Targeting General Images:
"Change background of [all] [product] images on [landing page] to light taupe."
-
Targeting a Specific Image:
"On 'Team' page, image of 'Dr. Carter (Lead Dentist)': update her lab coat to black."
Coordinate Images with Theme Changes
If updating theme colors, specify if images should also reflect these changes.
- Prompt:
"Update theme to light orange. Ensure all images and illustrative icons match this new color scheme."
5. Changing the language of your app’s text.
Use the following prompt:
- Prompt:
"Switch all product copy and button text to Spanish."
5. Pro Tips for Stitch
- Be Clear & Concise: Avoid ambiguity.
- Iterate & Experiment: Refine designs with further prompts.
- One Major Change at a Time: Easier to see impact and adjust.
- Use UI/UX Keywords: (e.g., “navigation bar,” “call-to-action button,” “card layout”).
- Reference Elements Specifically: (e.g., “primary button on sign-up form,” “image in hero section”).
- Review & Refine: If a change isn’t right, rephrase or be more targeted.