E-commerce App Homepage
In this tutorial, you will design a mobile e-commerce app homepage using Google Stitch. By the end, you will have a polished product listing screen with navigation, product cards, filters, and a shopping cart icon — all generated from text prompts.
Step 1: Set Up Your Canvas
Open stitch.withgoogle.com and sign in. You will land on the infinite canvas with a prompt bar at the center. Make sure you are in Standard Mode for fast iteration — you can check this in the top toolbar.
Step 2: Write the Initial Prompt
Type: "A mobile e-commerce app homepage with a top navigation bar showing a logo and cart icon, a search bar, category filters as horizontal chips, and a product grid with image, name, price, and rating for each item. Clean white background with orange accents." Press Enter and wait for Stitch to generate.
Step 3: Evaluate and Create Variants
Review the generated screen. If the layout is close but not quite right, select the screen and click "Generate Variant." Try prompts like "same layout but with a bottom navigation bar" or "make the product cards larger with rounded corners." Generate 2-3 variants to explore different directions.
Step 4: Refine with Direct Edits
Pick your favorite variant. Use Direct Edits to update the placeholder product names and prices with realistic data. Swap the placeholder images if desired. Adjust the accent color to match your brand by editing the color values directly.
Step 5: Build the Product Detail Screen
Use the Prototyping feature: click Play, then tap on a product card. Stitch will auto-generate a product detail screen with a large image, description, size selector, and add-to-cart button. This maintains the visual language from your homepage.
Step 6: Export Your Design
Select each screen and export the HTML/CSS. You can also export to Figma for further refinement, or export DESIGN.md to capture the color palette and typography for development. Your e-commerce app design is complete.
What You Built
You now have a two-screen mobile e-commerce app design with a product listing page and a product detail page, complete with exportable HTML/CSS code and a consistent design language.