How To Build A Cinematic $10K Agency Site With Claude Code + Seedance 2.0

Nate Herk just published the cleanest end-to-end recipe yet for the new solo-founder web-build stack — and the output looks like the kind of premium agency website that, eighteen months ago, cost ten thousand dollars and three weeks of agency turnaround. The total credit cost in his demo: about five bucks. The wall time: about ten minutes.

The stack:

1. Nano Banana 2 (image generation via Kie.ai)
2. Seedance 2.0 (image-to-video, Kie.ai)
3. Claude Code + the frontend-design skill (site build)
4. GitHub + Vercel (deploy)

The line that used to cost an agency engagement is now four API calls and a coffee.

Here's the whole flow, what each tool does, and where the gaps still are.

Step 1 — Generate the hero image (Nano Banana 2)

Open kie.ai, hit Nano Banana 2 in the API market, and prompt for the first frame of your hero video. Critical: match the aspect ratio of your eventual video. 16:9 in, 16:9 out — anything else creates seams when you loop.

Nate's example prompt for an architecture firm: "An image of a blueprint, sketched on paper, of a skyscraper that is about 75% of the way sketched out." Five seconds of generation, one image.

The key visual decision happens here, not in the video step. The image is the anchor; the video is the motion you add to it.

Step 2 — Animate it into a seamless loop (Seedance 2.0)

Seedance 2.0 is the model people quietly noticed beating Veo and Sora on coherent motion at a fraction of the price. Pricing on Kie.ai: about 25 credits per second at 720p.

The loop trick: put the same image in both the first-frame AND last-frame slots. The video opens with the sketch, animates through your prompted middle (sketch fills in → zooms into a real city → building gets built → text appears → zooms back out), and resolves back to the same sketch. Loop becomes invisible.

Nate's full prompt is ~1,000 characters and was generated by a seedance-loop-prompt skill he installed in Claude Code. The skill knows the platform's character limits, motion vocabulary, and timing conventions — drag in the image, describe what you want, get a prompt-engineered output.

Cost: ~410 credits for a 10-second 720p video. Roughly $4-5 of Kie.ai credits per hero video.

The one mistake Nate flagged: forgetting to match the timing setting in Seedance to the prompt. The skill optimizes for 10-second videos but the Seedance default is 15. Match them or accept a slower-paced result that doesn't read as premium.

Step 3 — Build the site (Claude Code + frontend-design skill)

Open Claude Code in a fresh project folder. The skill that does the heavy lifting is frontend-design — install via /plugin from the Anthropic marketplace. This is the official skill Anthropic released that gives Claude Code aesthetic taste for web layouts.

Drag the video into the project. Then in plan mode:

"I just gave you a reference video which is the video I want on my website. I want the whole hero section to just be this video. No hero text or subtext. This is for my [INDUSTRY] firm. Should feel trusted, professional, modern. After the video, fill in the copy and design. The video should play on an endless loop. Ask any questions you have, don't move on until 95% confident."

Claude Code asks 4-6 clarifying questions: firm name, brand colors, sections you want, palette feel. Answer them, approve the plan, let it build.

The output Nate gets in his demo: a multi-section site with the hero video looping in full-bleed, a navbar with the auto-generated firm name ("Aldworth and Partners"), copy that fits the architecture vertical ("Shaping the built environment," "58 years of excellence," "340+ projects delivered"), and stat cards that match the visual language.

The rate-limiter on this step is taste, not technical capability. Nate's pro move: after the first pass, go to Awwwards or Dribbble, find a site you like, screenshot it, drag it into Claude Code, and say "make everything under the video feel more like this style." The model takes the visual reference and re-skins the build. Iteration is now visual prompting.

Step 4 — Ship it (GitHub + Vercel, ~60 seconds)

Ask Claude Code to push the project to a new private GitHub repo. It handles auth, creates the repo, pushes the code. Then in Vercel, "Add new → Import Git Repository → Deploy" — that's it. Vercel detects Next.js (or static HTML), builds, and serves.

After the initial sync, every push to GitHub auto-deploys. Edit copy locally → push → Vercel updates the live site in 30-60 seconds.

What this actually replaces

The agency tier this competes with: $5,000 - $15,000 for a custom marketing site with a cinematic hero video, light animations, copy, and a CMS-less static build. 3-4 weeks of agency time.

Nate's recipe: ~10 minutes of Claude Code time, ~$5 of Kie.ai credits, $0 of Claude Code if you're on Max 20× already, $0 of Vercel for hobby tier. A 99% cost reduction and a 100× speed-up.

The agency tier of this work doesn't go to zero — the very-top end with custom illustration, motion design, copy strategy, and conversion engineering still wants humans. But the middle tier — "professional but generic premium site for a service business" — is being eaten. Fast.

Three gotchas Nate hits during the build

1. Aspect ratio mismatch. Image and video must both be 16:9 (or both vertical). One off-ratio asset and the video composition breaks.
2. Seedance default is 15 seconds, your prompt is for 10. Match them or you'll burn extra credits on a slower-paced output that doesn't loop cleanly.
3. Blueprint-style images can confuse Claude Code's interpretation. Nate had to explicitly tell Claude not to put the blueprint image in the actual website — just to use it as context for the video prompt. State your intentions explicitly when an asset has dual roles.

The bigger pattern

Claude Code + a specialized creative model + Vercel is the new "image → video → site" stack. The same pattern applies to:

• Product launch pages (hero product spin, animated specs, call-to-action)
• Real estate listings (drone-fly-through replaced by AI-generated camera moves)
• E-commerce hero sections (animated product reveals, scroll-triggered video)
• Marketing campaign microsites (cinematic landing pages for a specific offer)

For a solo founder or a 2-person agency, this stack means shipping a premium-feel site every Monday is now plausible. The new bottleneck is what you point this stack at, not whether you can produce the output.

What to actually do this week

1. Install the frontend-design skill globally via /plugin in Claude Code — this is the official Anthropic plugin that gives Claude design taste.
2. Get a kie.ai API key and load it into your .env.local for any Claude Code project that needs image/video gen. The Nano Banana 2 + Seedance 2.0 combo is the highest-ROI pair on the platform right now.
3. Pick one site you'd want to re-build — your portfolio, your agency homepage, a client's tired site — and run the 4-step recipe end-to-end. Most of the learning is in step 3, the Claude Code iteration loop.
4. Start a references/ folder in your project of screenshots you like from Awwwards / Dribbble. Drag-and-drop them into Claude Code when iterating on visual style — it's the fastest way to teach the model your taste.

The Bottom Line

The stack Nate just demonstrated is the cleanest example of the AI-eats-the-agency pattern that's playing out across creative services right now. Nano Banana 2 generates the frame, Seedance 2.0 animates it, Claude Code wraps it in a site, Vercel ships it. Total cost: $5 and ten minutes. Total quality: indistinguishable from a $10K agency build to a non-designer's eye. The window where this is a competitive advantage is short — by Q3 every agency will run this same stack, and the differentiator moves up the value chain to strategy and offer design. Get the muscle memory on this stack now, while it's still rare.