Build Websites and Apps by Talking to AI

How to Build Websites and Apps by Talking to AI

Learn how to create website and app designs just by speaking to an AI. This guide will show you how to use Google Stitch, a powerful AI design tool, to turn your ideas into working prototypes quickly and easily. You don’t need any coding or design experience to get started.

What You’ll Learn

• How to start using Google Stitch.
• The basic features and how to navigate the interface.
• How to generate app flows and website designs using simple text or voice commands.
• Ways to refine and export your creations.

Prerequisites

• A personal Google account or a Google Workspace account. (If using Workspace, your admin must enable Google Workspace Experiments.)
• A desktop computer with the Google Chrome browser is recommended for the best experience.
• An internet connection.

Getting Started with Google Stitch

Google Stitch is an AI-powered design canvas. Think of it like a design tool such as Figma, but built from the ground up with AI at its heart. It allows you to create app interfaces and websites simply by talking to your computer.

The application is available in many countries, but its core features currently work best in English. While free to use, it operates on a monthly credit system, offering a set number of standard and high-complexity generations.

Step 1: Access Google Stitch

1. Go to the Google Stitch website. The link is usually found in the description of the video tutorial or by searching online.
2. Sign in using your Google account.

Step 2: Understand the Interface

Once you sign in, you’ll see a clean interface. On the left, there’s a navigation bar. In the center, you’ll find a chat interface where you interact with the AI. At the bottom, there’s a crucial button called the ‘model switcher’.

Expert Tip: For the best results and full feature access, use Google Chrome on a desktop computer. Mobile support is limited, and some features may not work correctly in other browsers.

Using the AI to Design

The core of Google Stitch’s power lies in its AI capabilities, particularly the ‘ID8’ feature. This helps you solve design problems or start from scratch by understanding your needs.

Step 3: Create Your First Design Prompt

1. Identify a problem or need you want an app or website to solve. For example, you might want a recipe app that lets you save favorites and has a special ‘cook it’ mode.
2. Type your request into the chat interface. Be clear and specific about what you want. For instance: “I’m usually overwhelmed when I want to find new recipes online. I’d like to be able to save favorites, have those favorites categorized. I’d also like to have some kind of let’s cook it mode where I can see the ingredients and directions and nothing else on the screen.”
3. Below the chat, choose whether you want to create a mobile application or a website. Select ‘website’ if you are viewing this on a laptop.
4. Press Enter or the send button.

Step 4: Refine Design Ideas with AI Chat

After you submit your initial prompt, Stitch will present you with options or begin generating the design on an infinite canvas. You’ll see the AI working on the left side of the screen.

1. The AI will likely ask for clarification or design direction. For example, it might offer style choices like ‘editorial zen’.
2. Respond to the AI’s questions by typing your preference. For instance, type ‘one’ and hit enter if ‘editorial zen’ sounds good.

Expert Note: Stitch creates a PRD (Product Requirements Document) behind the scenes, outlining all the details. You don’t need to understand this; just focus on communicating with the AI.

Step 5: Use Voice Commands (Optional)

Stitch includes a ‘live mode,’ similar to voice features in other AI tools. This lets you talk to the AI, and it talks back.

1. Locate and click the ‘live mode’ button (often looks like a microphone or is integrated into the chat).
2. Speak your requests or questions clearly. For example, you could ask, “Hey, what are we designing on editorial zen today?” or “I wonder what the next step here is.”
3. The AI will respond verbally and may also suggest improvements, like adding search and filtering for better discovery.
4. To continue building, you can say things like, “Sure, go ahead. Build the whole thing.”

Step 6: Explore the Generated Design

Once the AI has built the app flow or website, you can view it. You’ll notice a clean, minimalist aesthetic, as requested.

1. The ‘Let’s Cook It’ mode, if requested, should be incredibly distraction-free, showing only necessary information.
2. Look for placeholder images that the AI has generated to fill the design.
3. You can interact with the design by pressing a ‘play’ button to turn it into an interactive prototype. This allows you to click through pages and test its functionality.

Pro Tip: On a Mac, pressing Shift + 1 can zoom out to show the entire design canvas dramatically. Mouse scrolling also works for zooming.

Exporting and Sharing Your Work

Once you are happy with your prototype, you can export it in various formats or share it.

Step 7: Export Your Design

1. Navigate back to the prototype mode (usually in the top left corner).
2. Click the ‘export’ button.
3. Choose your desired export option:
   • Figma: Export in a native format if you work with Figma.
   • AI Studio: The easiest way to get a website live on the internet. This option imports the code and look into Google’s AI Studio, where you can then make it live with another click.
   • Zip file: Get all the project files, including visuals, to use elsewhere.
   • Copy code: Copy the code directly to your clipboard.
   • Instant Prototype: Create a shareable link to your interactive prototype. Toggle sharing on, copy the link, and send it to anyone to view your application.

Step 8: Use Additional Features for Refinement

Stitch offers more tools to fine-tune your design.

1. Add Inspiration: Use the plus button to upload screenshots or hand-drawn sketches. The AI can use these as inspiration to rebuild or style elements.
2. Color Palette and Fonts: Use the color palette button to adjust colors, fonts, and corner rounding for the entire site. You can also prompt the AI for specific design styles.
3. Element Selection: The right-hand bar allows you to select specific elements on the canvas. When you chat with the AI, it will know you’re referring to the selected element, like pointing to something on a physical screen.
4. Direct Edit: Use this feature to make small text changes directly. For example, change “avocado toast” to “avocado crunchy chili toast.”
5. Upload Images: Upload additional images to use as inspiration or assets within the app.

Conclusion

Google Stitch removes the technical barriers to creating functional prototypes. By simply describing your vision, you can go from an idea to an interactive website or app in minutes. Whether you’re a seasoned designer or have never designed before, this tool makes creation accessible. You can export your work to other tools like Figma or get it live on the internet, using Stitch as a powerful starting point.

Source: An Entirely New Way to Work With AI (YouTube)