WFU Study Guide

Claude Design + Seedance 2.0 = INSANE Animated Websites

Creator: Chase AI · Published April 20, 2026

TL;DR / Key Takeaways

Core Concepts

1. The Three-Tool Stack

The workflow chains three AI products. Nano Banana Pro (accessed via Higgs Field) generates the still hero image. Claude Design takes that image and builds the landing page around it. Seedance 2.0 then animates the same still image into a 15-second background video, which gets dropped back into Claude Design to replace the static hero. Finally, Claude Code takes over for polish and deployment.

2. Composition First, Prompt Second

Chase insists the specific image prompt matters less than the compositional intent. You need to know before you prompt where the hero text will sit, where the nav bar goes, where buttons and tickers live. He recommends browsing Dribbble landing-page examples to build a mental library of two or three composition options, then letting Claude help write the Nano Banana prompt that reflects that layout.

3. Claude Design's Plan Mode

Like Claude Code, Claude Design enters a plan mode where it interrogates your prompt before building. It asks about typography, color palette, copy voice, section order, social proof, and how many tweaks to expose. A weak prompt plus plan mode still produces a solid first pass because the Q and A fills in the gaps. The magic line at the end of Chase's prompt: "ask me any questions before you begin."

4. Variants Before Tweaks

The two-step discipline inside Claude Design. First, ask for two or three additional macro layout variants (Chase's demo generates cinematic, archive, and terminal versions). Pick one. Then ask Claude Design to aggressively increase the number of tweaks from the default five to around fifteen, covering accents, theme, fonts, type scale, CTA style, overlay darkness, and more. Variation at the macro level, then rapid iteration at the micro level, is what Chase argues separates Claude Design from Claude Code.

5. Usage Economics

Claude Design runs on its own usage meter, independent of Pro, Max 5x, or Max 20x allocations. Chase had already burned through his plan and ran the demo on extra usage. The total cost for the landing page in this video was roughly $5 in overage, and he says that could have gone lower with tighter prompting.

6. Seedance 2.0 Video Generation

Drag and drop the Nano Banana still into Seedance as the starting frame, write a short subtle prompt (Chase's example: "keep the motion extremely slow, clouds barely moving, embers from the fire in his hands slowly drifting"), and render at 15 seconds, 1080p, 16 by 9. Do not use prompt enhancement, because you want full control. Expect to regenerate four or five times before the output works. Perfect loops are hard, so Chase just lets the video flip at the 15-second mark and relies on the fact that most users will have scrolled past the hero before they notice.

7. The Handoff to Claude Code

Once the video is swapped into the Claude Design hero, go to Share in the top right. Because the page contains an MP4, skip the copy command and download the ZIP instead. Extract it, drop the folder into Claude Code, and prompt Claude Code to spin up a dev server. From there you handle minor changes, push to GitHub, and deploy (Chase mentions Vercel). Claude Design is a resource hog, so doing final tweaks in Claude Code preserves your design usage for future projects.

8. Mobile Considerations

A deliberate architectural choice: on mobile, serve the still image, not the video. A full-resolution hero video would slow mobile load. This is why the workflow builds and locks the still layout first, before the video ever gets introduced.

Quotes and Evidence

"Today, you're going to learn how to combine the powers of the brand new Claude Design and Seedance 2.0 to create animated websites just like this one."
"When we are creating our image, the number one thing we need to figure out is the composition. And by composition, where is the dead space going to be? Where is that text going to be?"
"Claude Design operates on its own usage limits. It's separate from your Pro limits or your Max 5 or your Max 20 limits with Claude. It's its own thing. And it can be kind of a resource hog."
"The goal is to get to a 90 percent solution before we bring the video in, and then before we bring it into Claude Code to make it our own."
"Keep the motion extremely slow. Clouds barely moving. Embers from the fire in his hands slowly drifting. You want subtle. You don't want crazy. You don't want it to look like a wild video game."

Discussion Questions

  1. Chase says composition should be decided before prompting. How does this change the way you think about AI image generation in general, not just landing pages?
  2. Claude Design's "variants first, tweaks second" pattern is a specific creative workflow. Where else in your work could the same two-step macro-then-micro discipline apply?
  3. Claude Design bills on its own meter, separate from Max subscriptions. How does usage-metered creative tooling change the way teams should budget for AI-assisted design work?
  4. The mobile experience is intentionally different (still image, not video). When you are building with AI, how do you decide which experiences to deliberately simplify rather than scale up?
  5. The workflow hands off between three tools plus Claude Code. Is tool-chaining like this sustainable, or does it imply the eventual convergence of design and code tools into a single product?

Glossary

Claude Design
Anthropic's visual design tool that builds landing pages and prototypes through prompting, with a plan mode and a tweaks panel for iteration. Uses its own usage meter.
Seedance 2.0
A current-generation image-to-video model, accessed here through Higgs Field. Takes a starting frame plus a motion prompt and produces up to 15 seconds of video.
Nano Banana Pro
The image generation model Chase uses to create the still hero image. Accessed via Higgs Field.
Higgs Field
Aggregator platform that exposes multiple AI content creation tools (Nano Banana Pro, Seedance 2.0, Kling 3.0, Veo 3.1) under one interface.
Plan mode
A conversational phase in Claude Design (and Claude Code) where the model asks clarifying questions about your prompt before starting work.
Tweaks
Claude Design's micro-adjustment panel, exposing controls for accents, theme, fonts, type scale, CTA style, overlay darkness, and other granular design parameters.
Variant
A macro-level alternative layout Claude Design can generate on request. Chase's demo surfaces cinematic, archive, and terminal variants.
Hero section
The top section of a landing page, typically containing the primary image or video, headline text, and main call-to-action buttons.
Prompt enhancement
An optional video-model feature that rewrites your prompt before generation. Chase recommends against it because you lose control over the final prompt.