Voice-Driven Design
This tutorial explores Stitch's Voice Canvas feature, also known as Vibe Design. You will create and refine a mobile app interface entirely through voice commands, experiencing the conversational design workflow.
Step 1: Activate Voice Canvas
Open Stitch and click the microphone icon to activate Voice Canvas mode. Make sure your browser has microphone permissions enabled. You will see a visual indicator showing that the AI is listening.
Step 2: Describe Your Initial Design
Speak clearly: "Create a mobile fitness tracking app with a dashboard showing today's steps, calories burned, and active minutes as circular progress rings. Use a dark background with green and blue accent colors." Wait for Stitch to generate the initial screen.
Step 3: Engage in Design Dialogue
The AI may ask clarifying questions like "Should I include a bottom navigation bar?" or "Do you prefer the stats in a horizontal or vertical layout?" Answer naturally. This back-and-forth produces designs that match your intent more precisely than a single prompt.
Step 4: Refine Through Voice
Continue the conversation: "Make the progress rings larger and add labels below each one." Then: "Add a weekly activity chart below the rings." And: "Include a motivational message at the top saying 'Keep going!'." Each instruction updates the design live.
Step 5: Explore Multiple Directions
Say: "Show me three different styles for this screen — one minimal, one with more data, and one with a gradient background." The Agent Manager will track these parallel explorations. Review each option and tell the AI which direction you prefer.
Step 6: Finalize and Export
Once satisfied, say "I like this version. Export the code." Or switch to text mode to export via the standard UI. Your voice-designed fitness app is ready for development.
What You Built
You have designed a complete fitness app dashboard using only voice commands, experiencing the power of conversational AI design with real-time iteration and multi-direction exploration.