Everything you need to know to design with Stitch

A subtly opinionated walkthrough

Welcome to Stitch. Today you’re learning to start with design and lean into ideation. The key is not to overthink it.

The key to better prompts and better designs

Ideate. The hardest part is getting past the blank page. The best way to create better designs is through iteration, not perfect initial prompts. Let’s follow a simple formula.

Starting prompt examples

A good recipe for an initial prompt follows this formula:

• PROMPT
  Idea: What it is.
  Theme: The idea for the core theme.
  Content: The content.
  Image: Optional reference image.

Your first prompt doesn’t need to be perfect. Describe the specific content you want on the page and the general vibe. Don’t worry about specific font selections or hex codes yet. Stitch will help you with this ideation process. We need to get past the blank prompt and into creativity.

Here’s an example.

• PROMPT
  Idea: A landing page for a running podcast named “The Pacing Project”.
  Theme: Modern, edgy, and high contrast. Use black and white with hard angles.
  Content: A hero section with the headline “Stories and lessons about racing and proper pacing” and links to podcast platforms.

Selecting the device type

App or Web? Just pick one. Don’t worry too much about the device type at first. Take a quick gut check on which format you think is most suitable at first. Stitch has plenty of ways to convert one mode to another as you iterate.

Now hit generate.

Navigating and controlling the canvas

Let’s get comfortable with the canvas.

Hotkeys

Think of your two main interactions with the canvas in two modes: Selection and Navigation. The V key toggles the Select tool, while the H key toggles the Pan tool for quick drag-based navigation. Because the canvas is vast, it can be easy to lose track of where you are. If that ever happens, hit ⌘← / Ctrl+← to navigate to the nearest screen. You can cycle through screens using ⌘→ / Ctrl+→ and ⌘← / Ctrl+←.

For a whole list of shortcuts hit ? to see all the hotkeys available.

Starting the ideation process

The real ideation process begins once the design appears. Odds are you’ll find several aspects of the initial generation that you like and others you dislike. Stitch has tools to tweak the dislikes and lean further into what the generation got right.

Make one major change at a time

Pick one thing you want to change, just one. Select the Screen you want to change, click Edit, Add to Chat, and write a prompt. Be specific about what to change and how to change it. For example, if the pricing table needs to emphasize the best value tier:

• Target specific component
• Specific visual instruction
• UI/UX Keyword

Update the pricing table to emphasize the middle card. Increase its container height and add a drop shadow. Reduce the scale of the sibling cards to create a clear visual hierarchy.

You can keep this formula going: find one change, write a clear and targeted prompt using UI/UX keywords, and generate.

Edit Theme

If your change is within the core theme of the design, Stitch has a specific feature to work faster and target those specific changes.

Select the Screen, click Generate and then Edit Theme. Here you can change core aspects of the theme such as the Light or Dark mode appearance, accent color, the corner radius of components, and font.

Design to Prototype

Once you have your design in a more preferred state, let’s take it for a bit of a test drive. Click the screen, click Generate, and then Prototype. This creates a scrollable and interactive prototype that helps you get a feel for what the design is like in action.

Here you can check interactive states that aren’t visible in a static design. Check out the hover styles for components like buttons, links, and cards. Write a message in a textbox and see if it’s too small or big for the typical amount of text expected. Think about how this prototype is going to be used in the wild. From there, continue to ideate based on these new interactive factors.

Download code and images

When you’re ready to take your design and bring it to life, it’s time to download the code and images. Stitch creates designs for both image and HTML code outputs.

Click a screen or drag and select all the screens you want to export. Click download. This will download a zip file to your device and from here you can integrate it into many different tools to make it real.

HTML converts to many formats

It’s important to understand that the HTML code serves as a base for translation. LLMs excel at taking HTML combined with a reference image and converting it to other component formats such as React, Angular, and Vue, or non-web platforms such as Jetpack Compose, Flutter, and SwiftUI.

To learn about generating specific component formats, check out the Build Strategies section.

Keep ideating. Keep creating.

The key to better results is effective prompting and ideation. Keep ideating until you find the design that feels right.