Skip to main content
Google Stitch is an AI-powered design tool for generating app mockups and design systems from prompts. When your designs are ready, you can bring them into Bolt to build out your app with whatever functionality you need, including hosting, database storage, and user authentication. For a guided walkthrough of building your Stitch designs in Bolt, watch this tutorial.
This example shows you how to build a multi-page meal planning web app with a database. Your own project will look different, but the steps to get started are the same. To learn how to refine and iterate your designs in Stitch, see the Stitch documentation.

​
Create your designs in Google Stitch

The Google Stitch home page showing a sample prompt highlighting prompt options like app type, design system, and model.
  1. In Google Stitch, write a prompt that describes the app you want to build. For exmple: Build a meal planning web app with a vibrant, colorful, and playful theme. Include a meal selection page, a shopping list, and a weekly schedule.
  2. Select the app type (mobile app or website).
  3. Optionally, select a design system. You can also describe the visual style you want in the prompt instead.
  4. Optionally, select a Gemini model. More advanced models may produce more complete designs.
  5. Send your prompt and wait for Stitch to generate your pages and design system.
A design system is a collection of visual rules for your app. This includes fonts, colors, and button styles. Stitch generates one automatically based on your prompt, and you’ll use it later to make sure Bolt builds new pages and components that match your original designs.

​
Refine your designs in Stitch

Before bringing your designs to Bolt, refine them until you’re satisfied with how they look. You can adjust the colors, page text and layout, and design system details like fonts and button styles. For Stitch prompting tips and a full list of available options, see the Stitch documentation.

​
Add your Stitch design system to Bolt

When you build out your designs in Bolt, you want Bolt to follow the same visual rules used in Stitch. To make this possible, you need to export your design system from Stitch as a Markdown file and add it to your Bolt project.
  1. On the Google Stitch canvas, click your design system.
  2. To review its contents, click Modify > Edit, then select the DESIGN.md tab.
    Google Stitch canvas showing a design system and the design system Markdown document.
  3. To download your design system file, click More, then click Download.
  4. On the Bolt homepage, attach the document in the chat and prompt Bolt to save it. For example: I attached a design system to use with this project. Save this document as a Markdown file in the project root.
  5. To see the contents of your design system in Bolt, click the Code icon in the top menu, then find the design system file in your file structure.
    A Bolt project with the file explorer open, showing DESIGN.md saved in the project root and its contents visible in the editor.

​
Import your pages into Bolt

In Stitch, you can export each page as code, then paste it into Bolt and ask Bolt to build. For best results, import one page at a time. For each page in your Stitch project:
  1. In Google Stitch, select the page you want to export.
  2. Click Export, click Code to Clipboard, then click Copy.
    A Google Stitch page showing the Export option and Code to Clipboard option highlighted.
  3. In Bolt, paste the code into the chat and prompt it to build out the page.
    For pages after the first, include instructions to connect the page to the app’s navigation so users can move between pages. For example: Use the attached code to build out the page and connect the page headers to the app navigation.

​
Add a database

At this point, your app’s pages are built out in Bolt, but the data is hard-coded, which means that it’s written directly into the page. Since you’ll want the ability to add to or change your app’s data, you need to add a database.
  1. Prompt Bolt to create a database based on your app’s content. For example: Using your knowledge of how the recipes appear in the UI across all the app's pages, create a database to store the recipe and ingredient information. Include properties like names, tags, images, and any other properties needed.
  2. After Bolt generates the database, check that your tables have the correct information. To learn how to access your database information, see Tables.

​
Add a design system rule to Project Knowledge

Project Knowledge provides context that Bolt uses whenever you work on your project. Add a design system rule here so you don’t have to remind Bolt to follow your visual guidelines in every prompt.
  1. In your Bolt project, click the gear icon at the top of the screen, then click Knowledge.
  2. Add a rule instructing Bolt to reference your design system file when building new parts of the app. For example: Whenever building out new parts of the app, reference the design system Markdown file for design guidelines.
The Project Settings panel open to Knowledge, with a design system rule entered in the Project instructions field.
  1. Click Save Prompt.
  2. To test, prompt Bolt to generate a new component and verify that the output matches your design system.

​
What’s next

Depending on what your app needs, here are a few things you might want to do next: