Stitch Prompt Guide

Stitch
,
1

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."

  • 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."

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.
40 Likes
5

From tomorrow, I will start testing and searching for bugs. :smiley: Soon, I’ll try work on creating something universal and/or enhanced - prompts ofc.
anyway - good job <3

2 Likes
6

Thank you Jakub. If you have any prompt tip to share back with the community, we would love it!

4 Likes
7

I’ll be doing experiments tonight (EU time). When I find some consistent results, I’ll give you a shout! :smiley:

1 Like
8

This has given me some new ideas about my vibe coding workflow. THANK YOU!

1 Like
9

Thank you for the guide, will go through an experiment try all of these new stuff. :smiley:

1 Like
10

Are you guys going to be adding some kind of canvas workflow, so that all the screens can be combined into one design flow?

4 Likes
11

I spent a lot of time trying to build a task dashboard for factory operators where each task has two rows:

  1. The first row shows task title, operator name, sector, machine, deadline, and status.
  2. The second row right below spans the full width of the table and shows the long task description.

Sounds simple? Stitch broke the layout every time I added something after it was working.

:cross_mark: What went wrong:

  • My first prompt worked perfectly — Stitch created the structure with two rows per task.
  • On the second prompt, I asked to add filter dropdowns and it recreated the entire layout, breaking everything.
  • Anytime I included multiple changes in one prompt (like filters + title + icon), Stitch forgot everything and started over.

:white_check_mark: What finally worked:

After a lot of trial and error, I asked ChatGPT (GPT-4) for help — and with its guidance based on this guide, I broke it down step-by-step. So thanks @Vincent_Nallatamby

If you’re using Stitch with complex screens, I strongly recommend you:

:backhand_index_pointing_right: Read the Stitch Prompt Guide

:backhand_index_pointing_right: Use GPT or any smart assistant to break your ideas into clean, targeted prompts

That’s what finally made it all work smoothly.

Use short, focused prompts — one change at a time. Do not combine features.

:small_blue_diamond: Prompt 1 – Create the table structure:
Create a web dashboard to display a task list for factory operators.

Each task should appear as two rows:

  • First row: Task title, Operator name, Sector, Machine, Deadline, and Status — each in its own column.
  • Second row: Task description that spans the full width, clearly separated below the first.

Use a clean, modern style suitable for fullscreen display in an industrial setting.

:small_blue_diamond: Prompt 2 – Add filters at the top:
Above the task table, add a horizontal row of filter dropdowns for the following fields:

  • Task title
  • Operator name
  • Sector
  • Machine
  • Deadline
  • Status

The filters should be evenly spaced and styled minimally.

:small_blue_diamond: Prompt 3 – Align the title and add a gear icon:
Move the page title to the left side of the screen, aligned with the task table.

Also, add a small gear icon to the top-right corner of the screen for admin settings access.

:brain: Pro Tips:

  • Do not mix layout changes and UI components in the same prompt.
  • Stitch does not remember your previous design unless you’re extremely precise and incremental.
  • Save a screenshot after every step that works — it will save your life if it resets unexpectedly.

Now the dashboard works 100% and is fully ready to be displayed on a TV for real-time task monitoring. Hope this helps others trying to build industrial or structured apps using Stitch!

10 Likes
12

Hi @tempo - thank you so much for this incredible feedback. Not only it helps the community, but it also helps us -the product team- to prioritize improvements in the product.

I’m glad you eventually managed to get something done (and would actually be curious to see it!), but we will make sure to make the experience more seamless, especially the editing flow.

3 Likes
13

Yes, I think we do need something like that :slight_smile: Thanks for the feedback.

2 Likes
14

I am the one who is grateful for your help!!! this is already helping me save a lot of time by not using Figma to do everything from scratch.

I just made an GPT assistant, tested the idea, generated the prompt and it worked perfectly in Stitch.

Would you allow me to share the GPT? I can post the instructions I put in it here too.

Thank you very much.

7 Likes
15

I’m looking for the best prompt structure to use with Stitch and other UI/UX AI generation applications. Could you tell me what the most suitable prompt structure is? Should I use plain language, or include XML tags, or a JSON structure?

When I use long prompts (over 5,000 characters) to generate detailed UIs, Stitch consistently omits some components.

16

My recommendation would be to use plain language with a simple prompt to start, then complexify it when you edit, screen by screen!

1 Like
17

Hi! Give us more than 50 experimental prompts in order to do trial and error and report what is working and what is not :folded_hands:

1 Like
18

Hi @tempo, thanks for sharing your experience with Stitch – it’s really helpful to hear how others are navigating it!

I can relate to the challenges, especially when working on mobile app UI. There are just so many screens, and each one has tons of details to get right – colors, fonts, spacing, padding, and everything else.

My current approach with Stitch is a bit different:

  • I try to create one super-detailed prompt (5000-7000 chars) for an entire screen, hoping it gets as close as possible.
  • Usually, it gets about 60% of the way there, which is a decent start.
  • Then, I attempt to refine one or two specific things.

The tough part is that even small edits/updates (not simple as just remove or align), many times not as i expected, leading to re-dos. It often feels like there’s an endless list of tiny adjustments needed to truly call a screen “complete,” and it’s hard to get it all perfect.