AI Tools Resource

Video-background website with Seedance and Claude Code — a checklist

Steps for putting together a website with a looping background video using Seedance and Claude Code — from setting up your environment to publishing. Open it when you sit down to work, and check off each stage as you go.

This is the version to keep open while you work. The whole process has three stages — a starting image, a video from Seedance, a site built in Claude Code — plus publishing it live. Work through the sections in order; each item opens with the action to take.

0. Before you start — set up the environment

Set this up once; you'll reuse it for every site after this.

  • Install Visual Studio Code — a free editor that shows your project files on the left and lets you talk to Claude in the middle.
  • Add the Claude Code extension and sign in.
  • Pick a billing plan. Start with the $20-a-month subscription instead of paying per request — for this kind of work it comes out cheaper.
  • Create a .claude folder in your project — that's where Claude Code looks for its settings and skills.
  • Add a skill for writing Seedance video prompts. A skill is an instruction written in plain language that tells the tool how to do one specific job.

1. The starting image

A single piece of artwork the animation will grow from.

  • Generate the image in a separate image generator from a short descriptive prompt (for example: "technical drawing of a skyscraper on sketch paper, roughed out at about three-quarters view").
  • Set the aspect ratio to 16:9 (landscape) — the video will come out in the same ratio, so the two line up.

2. From image to video (Seedance)

Seedance is a video generator: it turns a photo and a written description into a short moving clip.

  • Load that same image into Seedance as both the first and last frame of the clip — the video starts and ends on the same shot, so it can loop without a visible "jump".
  • Show Claude Code the image and describe the scene in plain language; Claude turns the description into a ready-made prompt for the generator.
  • Check that the scene lands back on the original frame at the end — that's what makes the loop smooth, with no visible jump.
  • Generate two versions — a shorter one and a longer one — and compare them. The shorter one is often livelier.

3. Building the site in Claude Code

The finished video goes back into Claude Code. Claude reads the files on your machine and writes the site's code itself.

  • Turn on plan mode — Claude talks through the plan with you first and only writes code once you approve it, so it isn't building blind.
  • Turn on the extra skill for front-end design — it gives the tool a better sense of visual taste.
  • Describe what you want in plain language: the whole top section of the page — the hero, the first thing visible on arrival — should be filled by the video with no headline text over it, the video should loop endlessly, and below it Claude should fill in the content and layout. Add what character you want the site to have.
  • Answer the questions Claude asks in plan mode (company name, brand colors, mood) — or ask it to invent a name and brand from scratch.
  • Approve the plan and check the result. What comes out runs locally for now, meaning only on your machine — look it over and make corrections.
  • Feed in corrections in plain language (for example, add a smaller video above a section, or change a number in the copy).

A styling trick

  • Find a site whose look you like, save a screenshot of it, and ask Claude to match that style — the tool rebuilds the layout while keeping your video and content.

4. Publishing it live

The finished site still only lives on your machine. For anyone else to see it, it has to be published at a live address.

  • Push the project to GitHub — it works like shared storage for code, which makes the project reachable from outside your machine. Claude Code can set up the repository and push the files itself.
  • Connect GitHub to Vercel — Vercel takes the project from GitHub and serves it at a real address.
  • Once connected, every future change just needs to land on GitHub — Vercel picks it up on its own and updates the live site within half a minute.

What to watch for

  • Don't upload secrets. When you push the project online, keep track of what's going in — passwords and access keys for other services above all. A site this simple usually has none, but it's a habit worth keeping from the start.
  • Video generation costs money. It's billed in credits, and the count rises with the clip's length and quality — a ten-second video is often noticeably cheaper than a fifteen-second one.
  • Check both versions. Before you pick a clip, compare the shorter one against the longer one — the shorter one often looks better.

What stays with you at the end: a repeatable flow — image, video from Seedance, site from Claude Code, publishing through GitHub and Vercel — assembled from descriptions typed in plain language.