Claude Design's New Workflow Lets Anyone Build Animated Sites
A new AI-powered workflow combines Claude Design and Seedance 2.0 to create animated landing pages. Here's what the process actually looks like.
Written by AI. Rachel "Rach" Kovacs

Photo: Chase AI / YouTube
There's a new workflow making rounds in AI development circles that promises to turn static images into fully animated landing pages with minimal coding knowledge. The process chains together three AI tools—Nano Banana Pro for image generation, Claude Design for web layout, and Seedance 2.0 for animation—in a sequence that content creator Chase demonstrates in an 18-minute walkthrough.
The interesting part isn't that AI can build websites. That's old news. What's worth examining is how the workflow handles the actual constraints of web design, and where the human decisions still matter more than the AI assistance.
The Composition Problem
The workflow starts with a counterintuitive requirement: you need to know what your website will look like before you generate the background image. This inverts the typical design process, where you might start with inspiration and iterate toward a layout.
"When we are creating our image, the number one thing we need to figure out is the composition," Chase explains. "And by composition, where is the dead space going to be? Where is that text going to be? It's going to be on the left, center, right, top, doesn't matter. You just need to choose and have your prompt reflect that."
For people without design experience, this presents an immediate hurdle. The suggested solution is browsing sites like Dribbble to find layouts you like, then reverse-engineering their hero section composition. It's functional advice, but it highlights how much design knowledge you still need to bring to these AI tools. The AI isn't solving the hard problem of spatial layout—you are.
The workflow explicitly recommends using Claude to write your image generation prompts, which creates a recursive dependency on AI tools that feels both pragmatic and slightly absurd. You're using one AI to write instructions for another AI to create an asset for a third AI to incorporate into a website.
Claude Design's Actual Differentiator
Claude Design, Anthropic's newly released web design tool, sits at the center of this workflow. Chase identifies what he sees as its core value proposition: rapid visual iteration rather than raw design capability.
"This idea of creating macro variants and then once we decide on a variant creating a ton of tweaks, this is what really separates cloud design from cloud code," he notes. The tool can generate multiple complete layout variations, then surface 15+ adjustable parameters ("tweaks") to refine the chosen direction.
The economics here matter. Claude Design operates on separate usage limits from standard Claude subscriptions and "can be kind of a resource hog." Chase reports spending about $5 in overage charges to create his demo landing page—a cost he notes could have been lower with more efficient prompting. The tool's business model appears to be: burn through your free tier quickly, then charge for additional usage on what amounts to design iteration cycles.
There's a practical ceiling to this approach. The workflow emphasizes getting to a "90% solution" in Claude Design before exporting to Claude Code for final refinements, specifically because Claude Design is expensive to use. This creates an odd optimization problem where you're racing against your own usage limits to make design decisions.
The Animation Trade-off
The final step uses Seedance 2.0 (alternatives include Kling 3.0 or Veo 3.1) to animate the background image. The guidance here is refreshingly honest about technical constraints: keep it subtle, aim for 15 seconds maximum, expect to generate 4-5 variations before getting usable output.
"We want subtle. We don't want crazy," Chase emphasizes. "We want it to almost just seem like an animated like low-key GIF."
The reasoning is partly aesthetic (don't let the background overwhelm the content) and partly technical (mobile users get the static image to avoid performance hits). This is the kind of real-world design thinking that AI tools don't yet encode automatically. You need to understand that a 15-second loop is probably fine because users will scroll past the hero section in under 10 seconds anyway.
The workflow also recommends against using the AI's "enhance the prompt" feature for animation: "Don't do that. You always want full control of your prompt." It's a small moment of acknowledging that these tools work better when you constrain them rather than letting them elaborate on your behalf.
What This Actually Automates
The workflow automates execution, not decision-making. You still need to:
- Understand web layout composition well enough to prompt for appropriate dead space
- Evaluate which of multiple AI-generated design variants serves your actual goals
- Know that mobile performance matters and adjust your approach accordingly
- Recognize when an animation is too aggressive for a background element
- Understand trade-offs between visual appeal and page weight
What you get in return is the ability to rapidly test design directions without touching CSS, and to generate professional-looking animations without learning After Effects. For people who already understand web design principles, that's valuable. For people hoping the AI will make those decisions for them, the workflow still requires more expertise than the "even if you've never done anything like this before" framing suggests.
The handoff to Claude Code at the end is particularly telling. After spending $5 and burning through usage limits to get that 90% solution, you're still extracting a zip file, uploading it to a different AI tool, and prompting it to spin up a dev server. The workflow hasn't eliminated technical complexity—it's redistributed it across multiple AI services, each with its own interface, pricing model, and limitations.
For AI-assisted web development, this workflow represents something more honest than most: it shows you exactly where the human expertise still matters, and exactly what you're paying (in both money and iteration cycles) to offload the parts that don't.
Rachel "Rach" Kovacs covers cybersecurity, privacy, and digital safety for Buzzrag.
AI Moves Fast. We Keep You Current.
Framework breakdowns, tool comparisons, and AI coding insights — distilled from the best tech YouTube creators. Free, weekly.
More Like This
Ten Tools to Fix Claude Code's Terrible Design Aesthetic
Claude Code generates the same purple gradients and Inter font on every site. Here are ten plugins and skills that might actually fix its design problem.
34 Self-Hosted Projects That Could Replace Your Cloud Stack
From AI email agents to thermal printer dashboards, these trending GitHub projects show what happens when developers get tired of subscription fees.
AI Can Build Luxury Websites Now. Should We Care?
AI tools like Claude Code and Seedance 2.0 can generate professional websites in minutes. What does this mean for web design and the people who do it?
Claude Design's Hidden Cost: Why Your Usage Quota Vanishes
Claude Design makes iterating on UI blazingly fast—but you'll burn through 25% of your weekly quota before you finish a landing page. Here's what actually matters.
Pencil.dev Promised Design-to-Code Magic. Here's Reality
AI LABS tested pencil.dev's design-to-code workflow and found it wasn't automatic. Here's what they built to fix it and what it means for AI design tools.
AI Website Builder Claims $15K Results for $3 in Tokens
Nick Saraev demonstrates building high-end animated websites in 10 minutes using Claude Code and AI tools. But does the math actually work?
Why Machine Learning Teams Need MLflow (And What It Actually Does)
MLflow solves the reproducibility crisis in ML development. Here's what happens when your team scales beyond Jupyter notebooks and memory-based decisions.
Quinn 3.5 Runs AI Models On Your Phone Without Internet
The Qwen 3.5 AI model runs entirely on your iPhone with zero internet connection. We tested how well local AI works when privacy actually matters.
RAG·vector embedding
2026-04-21This article is indexed as a 1536-dimensional vector for semantic retrieval. Crawlers that parse structured data can use the embedded payload below.