Stitch Prompt Guide

Wouldn’t a json prompt work better in this case ?

I feel like with more and more features coming out, going back to fundamentals is key. Spent 10 minutes reading this entire thread just to realize theres a pattern here.

Hi everyone! I just tried Stitch AI for generating designs and I was honestly impressed. In just 5 minutes, I got a really clean result.

here’s the exact prompt I used (with Claude help): **Context:
Design a mobile app screen for an employee leave and remote work management app (HR / internal tool).

User:
Employees in companies (office workers, remote or hybrid) who need to quickly request time off or remote days from their phone.

Goal of the screen:
Help users instantly:

* See remaining leave balance (paid leave, RTT, remote days)
* Submit a new leave or remote work request in seconds
* View upcoming approved or pending requests

Screen type:
Home / Dashboard (iOS-style mobile UI)

Layout & hierarchy:

* Sticky header with user name and current month
* Primary focus: large summary cards showing remaining balances (Paid Leave, RTT, Remote Days)
* Secondary section: quick action buttons (Request Leave, Request Remote Work)
* Tertiary section: timeline or list of upcoming requests (approved, pending, rejected)

Components:

* Header with subtle divider
* Balance cards with icons and remaining days
* Primary CTA buttons (clear and thumb-friendly)
* Status badges (approved / pending / rejected)
* Simple list items with date range and request type

Visual direction:

* Clean, minimal, professional
* Soft neutral background with subtle HR-friendly accent colors (blue / green)
* High readability and clear hierarchy
* No heavy gradients or flashy UI

Constraints:

* One-hand usage (important for mobile employees)
* Fast interaction (request in <10 seconds)
* Accessible typography and spacing

Output expectation:
Generate a structured mobile UI layout that clearly communicates hierarchy and component placement, suitable for handoff to Figma or direct no-code implementation.**

If you’re interested in learning more, I wrote an article that explains in detail here: nocodelowcode

Anyone kind enough to share base prompts that work flawlessly every single time?

Thank you!

The main issue with Stitch is the usual issue with G products (AI and regular) which is of a lack of object persistence; the lack of a consistent UI spot (single point of truth) which the user can rely upon to perform the navigational functions. I again would humbly suggest this s.p.o.t. should remain the hamburger menu. Thank you.

Hey @Manzela! Feel free to start with whatever idea you have in mind. If you give it some specific style details, Stitch will take it from there. I’m here if you face any trouble, and I’d love to see the final results of your work!

Hey @Alex_Frigino, thanks for the feedback! We’ve noted your input for the team. Just to clarify, the hamburger menu hasn’t changed yet, but as we roll out new features, you can expect to see shortcuts added there. We appreciate you helping us make Stitch better!

I am traying to make an application where I can invite my friends as our personal space and basic chats features. However, its not allowing me to invite them. I have added features to manually add them through link however, its still not working.

Suggest me hints.

It seems like this tool hasn’t really been tested. On every screen it creates, it modifies the bottom menu bar, the header, the sidebar navigation, the logo—it doesn’t maintain a structure. It’s like this AI is stupid or doesn’t know how to keep important UI elements… the spacing is different on every screen, it changes the typography too.. It changes everything!!

Thanks for sharing this prompt guide! It’s a useful resource for anyone looking to write clearer, more effective prompts and get better results. Looking forward to trying these tips.

THANKS FOR THIS!! Excellent post. Not even Gemini would write so well hahahah. :1st_place_medal:

Hey @Daniel_Jimenez, you can use a DESIGN.md file to ensure proper consistency. Here are a few ways to keep your designs aligned:

  1. Lock in your theme: Before generating more screens, click the Edit Theme option in the canvas toolbar. Lock in your primary colors, fonts, and border radius rules. This generates a DESIGN.md rulebook that tells the AI: “Use these exact values, no guessing.”

  2. Utilize multi-select for global changes: If a group of screens already has mismatched navigation bars, hold Shift and click each of those screens to select them all together. With everything selected, type a correction prompt like: “Make the top header, sidebar navigation, and padding identical across all selected screens.”

  3. Reference your reference screen: If you have one “perfect” screen that has the exact spacing and navigation you want, explicitly mention it in your prompt when making a new page (e.g., “Create a settings screen, but copy the exact header, logo position, and sidebar from the Dashboard screen”).

Thanks for the new Gemini

Gemini 3.6 Flash

Will incorporating The “Natural Language over Code” Lesson into Vincent_Nallatamby’s Stitch Prompt Guide improve it?

I had Gemini Notebook try to update the Stitch guide.

The Master Guide to Stitch Prompts: Deterministic UI/UX Design via Advanced Prompt Engineering