Build $10K Luxury Websites: Seedance 2.0 + Claude Code Video Workflow

Key Takeaways

• The workflow: Claude Code generates a cinematic video prompt → Seedance 2.0 renders a 10-second looping ambient video → Claude Code builds the full HTML/CSS/JS site with the video as the hero element.
• Use matching first-frame and last-frame constraints in Seedance to create seamless video loops — essential for website backgrounds that play indefinitely without a visible cut.
• NanoBanana 2 (via key.ai API marketplace) is the recommended model for generating the initial cinematic image reference — it has better spatial understanding than GPT for this use case.
• Claude Code handles the full responsive build: it takes the video file as a reference input and translates your aesthetic goals (luxury, minimal, cinematic) directly into HTML/CSS code.
• Iteration budget principle: spend 80% of your refinement effort on the video prompt, not the code. The video defines the entire brand feel; the code is just a wrapper around it.

The Three-Step Build in Detail

Step 1 — Generate the reference image. Use NanoBanana 2 via key.ai to create a cinematic still that captures the aesthetic you want. This becomes both the first-frame and last-frame input for Seedance.

Step 2 — Render the ambient video. In Seedance, set the same image as first and last frame. Use a 10-second render. The video will loop seamlessly. Download the output.

Step 3 — Build the site. Drag the video file into Claude Code. Describe the site purpose and desired feel. Claude Code builds a fully responsive site with the video as the full-viewport hero, complete with text overlay, navigation, and any additional sections you specify.

Related on OpenClawDatabase

• Claude Cowork Setup — getting started with the Claude Code environment
• Claude Code Desktop App Tutorial — the new desktop interface for building