Text to UI
Describe your interface in plain English and Stitch generates a complete layout with screens, branding, and components.
What is Text to UI?
Text to UI is the core feature of Google Stitch. You type a natural language description of the interface you want, and Stitch generates a complete, high-fidelity UI design. The AI understands layout concepts, component hierarchies, color schemes, and responsive design patterns. It produces not just a visual mockup but also clean HTML and CSS code that you can export immediately.
How to Use It
Start by clicking the prompt bar at the center of the Stitch canvas. Type your description — be as specific as possible. Include the type of screen (landing page, dashboard, settings panel), the platform (web or mobile), key components (navigation bar, hero section, card grid), and any style preferences (minimal, colorful, dark mode). Press Enter and Stitch will generate your design in seconds.
Writing Effective Prompts
The quality of your output depends heavily on your prompt. A vague prompt like "make a website" will give generic results. A specific prompt like "Design a mobile fitness tracking app dashboard with a weekly activity chart, daily step counter card, calorie tracker, and bottom navigation bar using a dark theme with green accents" will produce something much closer to your vision. Think of it like giving instructions to a designer — the more context, the better.
Tips & Best Practices
- 1Start with the overall layout structure before adding detailed components.
- 2Mention specific colors using names or hex codes for precise branding.
- 3Specify the platform (web/mobile/tablet) — mobile designs differ significantly from desktop.
- 4Use follow-up prompts to iterate: "Make the header larger" or "Add a search bar."
- 5Generate the basic framework first, then refine individual sections.