Google Just Fixed AI Design By Releasing This
Key Takeaway
Integrating Google's Stitch CLI with Claude Code enables automated web design generation, multi-device review, and scrollytelling animations guided by a centralized project brief.
Highlights
Google releases a command-line interface tool for Stitch that lets AI agents like Claude Code use design features directly from the terminal without Google Cloud setup.
The Stitch CLI uses fewer tokens than the model context protocol because Claude loads the tool into context only when needed.
A written project brief stored in a brief.md file keeps multiple Stitch design generations consistent by anchoring all agent prompts to a single core concept.
A custom Stitch review skill takes screenshots across multiple screen sizes to check whether generated code matches the original design and works properly on mobile devices.
A story review skill evaluates the flow, speed, and visual weight of scroll animations against the initial brief to eliminate excessive motion.
Timeline
Stitch CLI Integration and Setup
Stitch generates mobile app and website designs using Gemini models and built-in image generation. Previously, agents required a cumbersome Google Cloud configuration via MCP to interact with it. The new CLI tool simplifies this connection while token efficiency improves because the coding agent only pulls the tool into context during active design tasks.
- Google releases a terminal-based CLI for Stitch to remove the complex Google Cloud setup required by the previous model context protocol.
- The CLI integration reduces token usage because Claude loads the design tool only when active rather than keeping it in context constantly.
- Installing the Stitch CLI requires running an installation command, logging into a Google account via browser, and adding the Stitch skill inside the project's .claud folder.
Project Preparation and Brief Creation
Building an immersive scroll-driven site requires structured planning before generating graphics. Claude code conducts an interview to map out the desired user experience and story progression. This information is compiled into a central brief file, preventing stylistic drift across multiple design iterations generated by Stitch.
- A scrollytelling skill is installed alongside the Stitch skill to handle scroll-based animations and storytelling effects.
- Claude code interviews the user to establish the site concept, target narrative, and visual style.
- The finalized project details are saved in a brief.md file to ensure subsequent design prompts maintain a consistent visual style.
Design Generation and Code Conversion
Claude manages the iterative design cycle by prompting Stitch, reviewing the outputs, and requesting new versions until the visuals meet quality standards. Once selected, the design files, fonts, and images are imported directly into the project workspace where Claude builds the base web structure.
- Claude prompts Stitch using the brief.md file and generates multiple design iterations to fix flaws automatically.
- The Stitch tool hands completed designs to Claude code as both webpage assets and visual image references.
- Claude builds the functional site structure from the selected design assets and adds preliminary basic animations.
Design Review and Animation Implementation
Automated code generation often creates desktop-only layouts or excessive motion that strains the eyes. Dedicated review skills audit the site by capturing multi-device screenshots and evaluating animation pacing. Adjustments based on these rigorous reports result in a polished, responsive, and visually balanced final product.
- A custom Stitch review skill captures screenshots across desktop, tablet, and mobile screen sizes to catch responsive layout bugs.
- The scrollytelling skill transforms static page sections into fluid, movement-driven chapters with synchronized background effects.
- A story review skill evaluates animation speed, visual clutter, and narrative flow against the original brief to refine the user experience.
Description
AI design just got better: Google Stitch now runs in your terminal, so Claude Code can design with AI for you. Here's our full Claude design workflow for Claude AI website design, plus Claude motion design with scroll animations and review skills that make motion design with AI easier on the eyes. Thanks to Wispr Flow for sponsoring. Get a month of Wispr Flow Pro with unlimited words at https://ref.wisprflow.ai/ai-labs-yt and spend less time typing prompts and more time building. Community with All Resources: https://ailabspro.io/?v=au2TI8sdq8E The Roundup, our daily newsletter covering the AI stories that matter. Join now: https://www.theroundup.so/ Got a software idea but don't have the team to build it? Autometa turns your ideas into production-ready software. Check out https://autometa.dev/yt to see what we can build for you. Resources used in this video: Stitch CLI install commands: https://stitchprompt.com/blog/google-stitch-cli-tutorial Scrollytelling skill: https://github.com/doodledood/claude-code-plugins/blob/HEAD/claude-plugins/frontend-design/skills/scrollytelling/SKILL.md In this video, we show you how to use Google Stitch's new CLI with Claude Code to build a complete website that tells its story as you scroll. Then we explain every step so you can build one too. Stitch is Google's AI design app. It uses Gemini models to create designs for mobile apps and websites, and its designs are much more refined than what those models make on their own. It also has Google's image generation model built in, so it can make images for your designs. The problem was that Stitch was only a design app. You had to prompt it yourself and then export the designs to your coding agent. Stitch did release an MCP, but setting it up took a lot of steps on Google Cloud. With the new CLI, Claude Code can prompt Stitch directly, the setup is much easier, and it uses fewer tokens because Claude only reads the Stitch skill when it needs it. Claude can use skills and Stitch can't. So when Claude Code is the one prompting Stitch, you can build a whole AI system design around it. Here's the agentic AI system design we used for AI web design: 1. Prepare the project. Install the Stitch CLI, log in with your Google account, and add the Stitch skill to the .claude folder so Claude can actually load it. Then add the Scrollytelling skill for scroll stories and animation. 2. Write the brief. Claude interviews you about your site and writes everything into brief.md. Every Stitch prompt comes from that same brief, so your designs stay consistent. 3. Design the site in Stitch. Claude prompts Stitch for several versions, checks each one, and asks for a better one whenever it finds a problem. In our case it went through eight designs. 4. Bring the design into your project. Stitch hands each design to Claude as a web page plus a picture of it, and Claude builds the real site from them. 5. Review the site against the design. Our Stitch Review skill compares the site with the original design and takes screenshots at computer, tablet, and phone sizes, so the site doesn't break on smaller screens. 6. Add the scroll animations. The Scrollytelling skill turned the still site into a motion graphic experience: a shake when the rocket launches, stars that streak past as you scroll, a chapter marker, a timeline that moves sideways, and numbers that scramble at each new chapter. 7. Review the story and motion. Our Story Review skill judges the site like the best-designed sites on Awwwards and checks the story, the animations, the pacing, and the writing. After the fixes, the animations were smoother and there were fewer stars, so the site was easier on the eyes. Whether you come from graphic design, web design, or no design background at all, this workflow shows how website design AI tools and Claude design skills work together. Web design AI no longer has to look like everyone else's, and Claude AI website design can go well past a still mockup into real Claude motion design. All the skills we created in this video, along with other resources, are available in AI Labs Pro. 0:00 Intro 1:00 What Is Stitch 2:44 Setup 5:00 Writing the Brief 6:17 Generating Designs 7:43 Sponsor 8:34 Building the Site 9:25 Stitch Review 10:58 Scroll Animations 12:05 Story Review Hashtags: #ClaudeDesign #MotionDesign #GraphicDesign #MotionGraphic #Design #WebDesign #ClaudeMotionDesign #AIDesign