Think of Stitch as your AI-powered design partner, helping you test edge cases, ideate quickly, and handle the heavy lifting while you act as the creative director. It becomes your best friend when you need to move from an idea to an interactive mockup.
The Core Concept: You Direct, Stitch Builds
Stitch is an AI-Native Canvas. Unlike traditional tools where you draw every box, here you talk to the canvas. It understands images, code, and text at the same time. For a PM, this means you can describe a "Battle Pass screen" or a "Level Up popup," and it will generate the UI for you.
Getting Started: The "Import" Shortcut
If you already have a website or a web-based mini-game you like, don't start from scratch.
- Where to find it: Look for the Design System tab on your sidebar.
- The Button: Click the "+" (Plus) icon while in Edit Mode.
- The Action: You can import designs directly from a URL.
- Pro Tip: If you want to replicate a specific mechanic, use the prompt: "Copy 1:1 this mini-game I’m adding."
How to Talk to the Design Agent
To get the best results without frustration, follow this specific order when describing your vision:
- High Level: What is the screen? (e.g., "A character selection screen for an RPG.")
- Detail: What’s on it? (e.g., "Three hero cards and a 'Start Quest' button.")
- Vibe: What's the mood? (e.g., "Dark fantasy, gritty, glowing runes.")
- Image: Describe the visuals. (e.g., "High-quality character portraits.")
- Colors: Define the palette. (e.g., "Deep purples and gold accents.")
- Design: Layout specifics. (e.g., "Horizontal scroll for heroes.")
- Coordinate: Ensure everything matches. (e.g., "Make sure the button matches the gold accent color.")
For a real quick start, use the Hopper gem for Stitch prompts
Navigating the Interface
The interface is minimalist so you don't get overwhelmed:
- The Context Menu: This is the most important part. Every time you click a specific part of your design (like a button or a text box), the Top Menu will automatically change to show options relevant to only that item.
- The Canvas: This is your infinite workspace. You can have multiple screens side-by-side to see the whole player journey at once.
- Voice (Preview): If you're tired of typing, look for the Microphone icon. You can use your voice to iterate on designs in real-time while your hands are busy.
The "Stitch" & Play: Making it Interactive
Once you have your screens (e.g., Home Screen -> Store -> Purchase Confirmation), you need to link them.
- How to do it:
- Tell the agent to "Stitch these screens together based on the 'Buy' button."
- The "Play" Button: Look for the Play icon (usually in the top right). Hit this to instantly turn your static designs into a clickable, interactive prototype you can show your stakeholders or dev team.
"Imagine Next Screen" Option
- Select Your Current Screen: Click on the screen you just finished (e.g., your "Level Up" summary).
- Find the Magic Button: Look for the "Imagine Next" icon that appears floating right next to your selected screen, or in the AI Prompt Bar.
- Tip: Don't just let the AI guess blindly. Use the Vibe & Detail method to steer it.
- The Prompt: "Imagine the next screen, but make it a high-energy 'Epic Reward' animation with glowing VFX."
- The Result: Stitch analyzes the context of your current screen and automatically generates the most logical next step in the UX flow.
- Example: if you’re on a "Battle Pass" screen, it might "Imagine" the "Tier Rewards" detail view.
PM Success Rules
To keep your momentum high and frustration low, follow these habits:
- One Change at a Time: Don’t ask for 10 changes in one prompt. Change the background first, then change the button. It’s easier to see what worked.
- Use "Pro" Keywords: Use terms like “navigation bar,” “call-to-action button,” or “card layout.” This helps the AI understand exactly which UI element you are targeting.
- Reference Specifically: Instead of saying "Change the button," say "Change the primary button on the sign-up form."
- Iterate, Don't Start Over: If the design isn't quite right, don't delete it. Simply give a follow-up prompt like, "Make the font bolder" or "Move the image to the hero section."