Stitch Turns Natural Language into Production-Ready UIs

David East, DevRel at Google Labs and host of the 'Bad at CSS' podcast, demos Stitch as an AI design agent that acts like a "personal creative director." It builds full websites or app screens from prompts, handling layout, colors, typography, and images without initial CSS. Nohe, the host, admits his past UIs "looked like they were built in 2003," highlighting Stitch's value for non-designers.

Stitch excels at "vibe design," where you describe emotions or themes (e.g., "authentic Maryland crabbing experience on the water"). It generates AI images, responsive layouts, and enforces constraints via a Design.md file. David stresses treating AI as a creative partner: "You still need a sense of style to have a great looking app."

Trade-offs: Outputs are strong for prototyping but require iteration for perfection. Free via Google Labs, it's experimental—expect refinements as Google iterates.

"If you've ever shipped something that works perfectly but looks like it was built in 2003, this one's for you." — Nohe

Design.md: Tokenizing Constraints for Consistent Designs

The "secret sauce" is Design.md, a markdown file that captures your design system as tokenized values: colors (e.g., primary: #FF0000), fonts (serif for authenticity), spacing scales, and themes. Paste it into Stitch to lock in non-negotiables.

David shows how it prevents drift: Prompt for a crabbing tour homepage, then reference Design.md for secondary pages like recipes (e.g., Chicken Chesapeake). Without it, regenerations ignore prior choices. He advises starting with content layout first (brutalist wireframe), then layering style via Stitch.

For specificity, use emotional prompts: Nohe learns to evoke "unique experience on the water, side of Maryland nobody's seen." David recommends meta-prompting: Ask Gemini to refine your prompt for details like "crabs swarming cages after hours."

"Design.md is the secret sauce of AI design." — David East, referencing the chapter timestamp.

Live Demo: Maryland Crabbing Tour from Scratch

David and Nohe build a full site iteratively:

  1. Homepage: Prompt "Maryland crabbing tour company, red/white colors, authentic experience." Stitch outputs full-bleed hero with AI-generated crab boat images, grid layouts, and booking CTAs. Nohe iterates: "More red," "unique on-water vibe."
  2. Variations: Shift+P previews palettes (e.g., newspaper checkers, candy). Select and refine: Add punny copy like "Pun intended" for crab traps.
  3. Secondary Pages: Target edits like "Chicken Chesapeake recipe page," reusing Design.md for consistency. Stitch pulls context from prior screens.

Key lesson: Have content ready first. Nohe struggled initially without specifics (e.g., lower Eastern Shore details), but context from Stitch's project accelerated it. In 30 minutes, they built more than hours of manual design chats.

David notes images are AI-generated but indistinguishable: "I couldn't even tell."

"I've learned more about building a website in the last 30 minutes than the four plus hours of conversations we used to have." — Nohe

Exporting HTML, Tailwind CSS, and Complex Grids

Click extract for production-ready code: Clean HTML with Tailwind classes, no bloat. Handles CSS Grid for complex layouts (e.g., asymmetric hero grids) that stump Flexbox novices.

David: "Let AI write the complex CSS grid instructions." Outputs are componentized, responsive out-of-the-box. Copy-paste into your stack (React, Flutter, etc.). Nohe verifies: Previews match exports perfectly.

Agent Integration: Gemini CLI + MCP Server

For programmatic use, run Stitch's MCP (Model Context Protocol) server locally. Connect via Gemini CLI: Prompt Gemini to generate new screens using existing Stitch project context.

Example: gemini fetches Design.md, current pages, then creates "recipes" screen matching the vibe. Ideal for agents: Backend devs build functional prototypes, pipe to Stitch for polish.

David's workflow: Source broad strokes in Stitch UI, iterate via CLI. Best for apps: Brutalist MVP first, then "reimagine" with Stitch.

"The best way to interact with Stitch is through another agent." — David East (agrees in hot takes).

Hot Takes: Frontend Engineering's AI Shift

Rapid-fire with David:

  • App dev is all agents now? "It's complicated... but yeah."
  • CSS Grid > Flexbox? "Yes."
  • Knowing CSS no longer important? "Yes."
  • Stitch replaces frontend engineers? "No."

David's daily tool: Custom agent workflows (details off-podcast). He sees AI handling rote design/CSS, freeing engineers for architecture. But style sense remains key.

"You still need a sense of style." — David East

Key Takeaways

  • Start with specific content and emotional vibe (e.g., "authentic crabbing adventure") before prompting—avoids generic outputs.
  • Use Design.md to tokenize colors, fonts, spacing for consistent multi-page designs.
  • Iterate: Reimagine for variations, target edits for pages; preview with Shift+P.
  • Export Tailwind/HTML directly—handles grids/flexbox you hate.
  • Integrate via Gemini CLI + MCP: Agents pull context for new screens programmatically.
  • Prototype brutally first (layout only), then style with Stitch for speed.
  • Meta-prompt: Have Gemini refine your Stitch prompt for ultra-specificity.
  • Free at labs.google—join community for updates.
  • AI augments, doesn't replace: Provide style direction for best results.