Google Just Fixed AI Design By Releasing This

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