Google Just Fixed AI Design By Releasing This

Summary

The video demonstrates a workflow for using Google Stitch’s new CLI with Claude Code to design and build a polished, animated website. Stitch generates website and mobile-app designs using Gemini models and can also create images. Its CLI lets coding agents use Stitch from the terminal without the more involved Google Cloud setup previously required for MCP. The presenters also say it uses fewer tokens because Claude loads the tool’s instructions only when needed.

Workflow and tutorial

1. Install and configure Stitch

   • Install the Stitch CLI, then log in through a browser with a Google account.
   • Add the Stitch skill to the project’s .claude folder so Claude Code can discover the tool and its instructions.
   • The skill includes design guidance, terminology, and workflows for keeping a design.md file consistent and checking a live site against the design.

2. Add scrollytelling guidance

   • Install a scrollytelling skill in the same .claude folder. It guides Claude in creating scroll-based narratives and animations.
   • The presenters add it before generating designs so it can inform Claude’s requests to Stitch.

3. Write a site brief

   • Ask Claude Code to interview you about the site’s purpose, story, and mood, using follow-up questions and multiple-choice options.
   • Claude records the answers in brief.md. The brief provides a common reference for later design requests and helps keep Stitch’s different design versions consistent.

4. Generate and refine designs in Stitch

   • Ask Claude to use brief.md and create several design versions in Stitch.
   • Claude reviews the results and can send further requests to address problems. The video’s example produced eight versions.
   • Stitch previews designs for desktop and mobile, but the designs are static; scroll animations are added later in code.

5. Build the site

   • Ask Claude Code to bring the chosen Stitch design into the project. The Stitch tool passes the design to Claude as a webpage and image, along with assets such as images and fonts.
   • Claude builds the site, sometimes adding small effects, but the larger narrative animations come in a later step.

6. Review visual fidelity and responsiveness

   • The presenters emphasize that a site may look correct on desktop but break on phones or tablets.
   • Their Stitch review tool compares the built site with the original design and captures screenshots at different screen sizes. It produces a severity-ranked issue report that Claude can then address.
   • This review checks appearance, not site behavior or the quality of animations.

7. Add and review animations

   • Claude uses the scrollytelling skill to animate the site’s narrative—for example, moving stars, a chapter indicator, and a horizontally moving timeline.
   • A separate “story review” then checks whether the narrative flows, the animations support the story, elements appear at an appropriate pace, and text remains readable. It compares the result with the original brief.md.
   • The presenters found that Claude could overdo effects, such as adding too many fast-moving stars. Reviewing and fixing the reported issues made the animations smoother and less visually overwhelming.

Other points

• Stitch can also be used as a standalone design app: users can prompt it, request revisions, and download designs as code.
• A key advantage of using Claude Code to operate Stitch is that Claude can apply project skills and coordinate the full design-and-build workflow.
• The video includes a sponsor segment for WhisperFlow, described as a voice-to-text tool for dictating prompts in apps such as Claude and Cursor. The presenters say it handles corrections and technical names, and promote a month of Pro access through their link.

Main speakers and sources

• AI Labs narrator/presenters: Explain the Stitch CLI and demonstrate the Claude Code website workflow.
• WhisperFlow: Sponsor featured in the video.