Seedance 2.0 + Claude Code: $10k Sites in Minutes

Setup Claude Code in VS Code for AI-Driven Web Development

Start by downloading Visual Studio Code (VS Code) from Google search results for your OS. Open VS Code, go to the Extensions panel (left sidebar icon), search "Claude Code," and install it. Click the Claude Code button to log in with your Claude subscription ($20/month recommended over API keys for cost savings) or API key.

Create a new empty folder via Explorer > Open Folder (e.g., "Seedance-demo"). Close any side chats, click the Claude Code icon. This sets up a workspace with files on the left and Claude chat in the center.

Create a ".claude" folder (New Folder button). Download the free "seedance-loop-prompt" skill from the author's Skool community (link in video description), drag it into ".claude." This skill.md file instructs Claude on generating prompts for seamless 10-second Seedance loops: "Use this when generating a Seedance 2 video prompt for a seamless loop background video." Invoke it explicitly: "Use the seedance loop prompt skill."

In terminal (Ctrl+ or Cmd+), run /plugins to install the "frontend-design" skill globally for better UI taste. Run /reload plugins to confirm /frontend-design availability. Create a .claude/settings.local.json (from Skool) to auto-approve actions: permissions for installs, edits without prompts.

Common mistake: Skipping skills—Claude builds generic sites without them. Quality criteria: Plan mode ensures 95% understanding before building; review full plan.

"If you've never used Claude Code before, it's very, very similar to using Claude... just the way that I prefer to use Claude Code."

Generate Reference Images and Seamless Looping Videos

Use Kie.ai (open router for AI models) for images/videos. Go to API Market > Text-to-Image > NanoBanana 2 model. Prompt for 16:9 aspect ratio matching video output (e.g., "image of a blueprint on sketch paper, skyscraper 75% sketched out"). Generate and save (e.g., blueprint.jpg).

In Kie.ai > Seedance 2.0 (featured model): Drag image to First Frame and Last Frame for loop seamlessness. Disable audio. Set 10-second duration (25 credits/sec at 720p = 410 credits total). Paste Claude-generated prompt (below).

Key principle: Match image/video specs; first/last frames identical ensures endless loop without jumps. Test 10s vs. 15s—shorter is faster-paced, better for sites.

Before/after: Raw blueprint image → animated sketch-to-city build with text overlay → looping video.

"I didn't have to spend all this money to go get a shot... now something like this can be done in minutes by just uploading an input photo and a prompt."

Craft Video Prompts with Claude Skills for Precise Outputs

Drag image/video into VS Code sidebar (Claude analyzes via @filename). In Claude Code: "Use the seedance loop prompt skill. Look at blueprint.jpg. Create a 10s loop: sketch fills in, lines drawn, zoom to city under construction, building completes, text 'Turn your ideas into reality' (large, bold, white, 3s dwell), fade back to blueprint."

Claude outputs ~981-char prompt optimized for Seedance: timestamps motions/text (e.g., "At 3 seconds: large bold white text 'Turn your ideas into reality' slides from left"). Copy-paste into Kie.ai. Iterate manually for edge cases (e.g., character limits, weird artifacts).

Pro tip: Add Kie.ai API key to .env for full automation, but stay hands-on for creatives initially.

Common mistake: Mismatched duration (15s vs. skill's 10s)—wastes credits, poor pacing. Quality criteria: Text readable (long dwell), seamless loop, matches site theme (professional, engaging).

"Use this when generating a Seedance 2 video prompt for a seamless loop background video."

Plan, Build, and Iterate Professional Websites Automatically

Switch to terminal Claude (type "claude"). Enter plan mode. Install /frontend-design. Drag video: "Reference video building.mp4 for hero section—full-screen endless loop, no overlay text. Architecture firm: trusted, professional, modern. Fill sections below. Ask questions."

Claude plans: extracts business details (name, colors, sections). Answer iteratively:

Firm: Commercial high-rise.
Sections: Full site (hero, about, projects, services, contact).
Palette: Light/minimal.
Feeling: Prestigious/established. Ignore non-site assets (e.g., blueprint.jpg).

Approve plan (review for accuracy). Say "Yes" to permissions or use settings.local.json. Claude builds: HTML/CSS/JS with navbar, stats, images (placeholders), quotes. View via localhost or open index.html.

Iteration: Chat refinements (e.g., "Make navbar sticky," "Add scroll-triggered animations"). Regenerate sections.

Before/after: Static text site → luxury video hero + scrolling sections (e.g., "58 years excellence, 340+ projects").

Quality criteria: Engaging journey (video captures attention, boosts conversions); mobile-responsive; no hype—practical luxury feel.

"Sites like this are a lot more engaging... capturing their attention actually makes them convert better."

Deploy Live Sites with GitHub and Vercel

Init Git repo (terminal: git init, add remote). Claude: "Deploy to GitHub/Vercel." It creates repo, pushes code. Link Vercel account, import repo—auto-deploys.

Trade-offs: Free tier limits; custom domains extra. Scales to production.

"From never having touched an AI video generator... all the way to having a site up on the web."

Key Takeaways

Download VS Code + Claude Code extension; use $20/mo sub for efficiency.
Generate 16:9 images in Kie.ai NanoBanana; loop videos in Seedance with identical first/last frames.
Leverage ".claude" skills (seedance-loop-prompt, frontend-design) for precise outputs.
Always plan in Claude Code: answer questions for 95% confidence before building.
Iterate via chat; deploy GitHub/Vercel for live sites in minutes.
Stay hands-on for creatives initially; automate APIs later.
Match video duration to skill (10s) to save credits and improve pacing.
Use settings.local.json to bypass permissions for speed.

Notable Quotes:

"No design experience or production budget needed." (Intro: Democratizes luxury sites.)
"It's super super easy... from image generation to video prompting to deploying a live site." (Wrap-up: End-to-end workflow.)
"Don't move on from planning until you're 95% confident." (Planning phase: Ensures quality.)
"All of that was prompted with AI... used to take hundreds of thousands of dollars and months." (Video example: Cost/time savings.)
"Hey Claude Code, build me a website for this." (Core prompt: Simplicity of video-to-site.)