Build a stunning animated website with Claude Code + Google Stitch

What you're building

A multi-section animated website with a matching design system: an animated hero, scroll reveals, counters, and entrance animations, all wired together by Claude Code from designs it can actually see.

What you need

Step 1: design the site in Stitch

Go to stitch.withgoogle.com, pick Web, and paste this (swap the brand and vibe for yours):

Design a cinematic landing page for a boutique travel journal called WANDER,
with an animated hero section, fully scrollable with 8 distinct sections,
micro animations, a shared glassmorphism design system, and Framer Motion
style entrance animations. Warm, editorial, premium feel.

• 🖼️ Drop in 1-2 reference screenshots (Pinterest or Dribbble finds work great). Stitch takes image input as well as text (official launch post: Google Developers blog)
• 🔁 Iterate by telling it what to change ("make the hero darker", "rounder corners") until you'd actually ship it
• 🎛️ Open the theme panel and check the design system: colours, fonts and spacing should all read consistently. That consistency is what makes the final site feel professional

Step 2: create your Stitch API key

👤 Click your profile picture in the top right, choose Stitch settings, find the API key section, and hit Create key (these are the steps from Google's own codelab: Google codelab)

Step 3: connect Stitch to Claude Code over MCP

• 🔌 On your design, hit Export, select MCP, then Setup MCP, and choose Claude Code as your client. Stitch generates the exact command for you, so copy it (official MCP docs: stitch.withgoogle.com/docs/mcp)
• 💻 Paste it into your terminal. It follows Claude Code's standard remote-server format (reference: code.claude.com/docs/en/mcp):

claude mcp add --transport http stitch https://stitch.googleapis.com/mcp \
  --header "X-Goog-Api-Key: YOUR_STITCH_API_KEY"

Step 4: the build prompt

Paste this into Claude Code once stitch is connected:

Using the Stitch MCP, pull every screen and the full design system from my
Stitch project.

Then build the site in React with Tailwind CSS and Motion:
1. Recreate each screen as a responsive page, matching the design tokens
   exactly (colours, type scale, spacing, corner radii).
2. Extract the design system into Tailwind theme config and CSS variables
   so every future page inherits it automatically.
3. Build reusable animation components: a scroll reveal, a word-by-word
   heading reveal, a number counter, and a fade-in media block.
4. Add staggered entrance animations to every section and scroll-linked
   animation on the hero.
5. Keep it smooth: animate transform and opacity only, and respect
   prefers-reduced-motion for accessibility.
6. Wire up navigation between all pages, then run a production build and
   fix anything until it passes with zero console errors.

Motion is the animation library formerly known as Framer Motion, and it handles the scroll-linked and entrance animations here: motion.dev

Step 5: the polish pass

Once it runs, do one more round:

• 📱 "Walk through the site at mobile width and fix any layout or animation that breaks"
• 🐢 "Slow the hero animation by 20 percent and increase the stagger between cards"
• 🔍 "Check every heading and body style against the Stitch design system and correct any drift"

Why the two-tool split works

• 🧠 Code models are strongest at logic, structure and wiring, so let Claude Code own the engineering
• ✨ Stitch was built for visual taste. It outputs consistent screens plus the design system behind them, so the style decisions are already made before any code exists
• 🤝 MCP means Claude Code reads the real design tokens instead of guessing from a screenshot, which is why the final site actually matches the design