Claude Code + Seedance 2.0 Website Tutorial

Overview

https://www.youtube.com/watch?v=F2OpUJsf68g

This tutorial shows a workflow for turning a static design into an animated, responsive website using:

• Figma or a design screenshot
• Claude desktop or Claude web
• Claude Code in terminal
• Higgsfield for AI image and video generation
• Seedance 2.0 for controlled character animation
• Optional DaVinci Resolve cleanup
• Optional GitHub and Cloudflare deployment

The core idea is simple: start with a design, ask Claude to recreate it as a full-screen hero website, refine it in Claude Code, generate custom characters, animate them using Seedance 2.0, optimize the videos, then make the final website responsive and deployable.

1. Start With a Design

You can follow this workflow using either:

• Your own Figma design
• A design file shared by the video creator
• A screenshot of any design you want to recreate

Option A: Use Figma Dev Mode

If you have a paid Figma subscription:

1. Open the design in Figma.
2. Click Dev Mode.
3. Find the MCP option.
4. Copy the example prompt from Figma.
5. Use that prompt inside Claude.

This gives Claude more structured design context.

Option B: Use a Screenshot

If you do not have Figma Dev Mode:

1. Take a screenshot of the design.
2. Open Claude.
3. Drag the screenshot into Claude.
4. Prompt Claude to recreate it.

This is the more accessible method and works well for quick prototyping.

2. Generate the Initial Website in Claude

After uploading the screenshot, use this prompt.

Claude Prompt

Make this into a full-screen hero section of website.

The font is Manrope.
The H1 is 80 pixel size.

Recommended Model

Use:

Claude Opus 4.6

Claude should generate a working first version of the hero section. It may also approximate missing assets, such as icons or buttons, if the original files are not available.

3. Move From Claude Desktop to Claude Code

Once the basic website exists, continue the implementation in Claude Code inside the terminal.

Prompt Claude for Handoff Instructions

I want to continue this with Claude in the terminal. How do I do that?

The goal is to work with:

• The website preview on one side
• Claude Code in terminal on the other side

This makes it easier to apply micro-adjustments and refresh the browser after each change.

4. Make Initial Design Corrections

Use Claude Code to fix small visual differences between the generated site and the original design.

Example Claude Code Prompt

The H1 should use regular and semi-bold font weights.
The star icon at the end of "3D magic" is not shown correctly.

Refresh the page and check the result.

At this stage, Claude may use a placeholder emoji for the star if the actual SVG is not available. That is acceptable temporarily, but you should replace it with the real asset later.

5. Export Design Assets From Figma

Export the key design assets from Figma and place them into your project.

Suggested Folder Structure

project-root/
  images/
    grid.svg
    logo.svg
    button-icon.svg
    star.svg

Assets to Export

Export these files from Figma:

• Background grid SVG
• Logo SVG
• Button icon SVG
• Star icon SVG

Use clear file names. Claude Code performs better when asset names are obvious.

6. Add the Background Grid

Save the grid asset as:

grid.svg

Place it inside:

images/grid.svg

Claude Code Prompt

Add the grid.svg that's in the images folder to the full-screen background.
It should sit behind everything, filling the entire page.

Claude should add the SVG as a scalable full-screen background layer.

7. Add a Vignette / Radial Mask

The grid may look too intense, especially around the page edges or navigation area. Add a radial mask to soften it.

Claude Code Prompt

Add a radial mask to the grid to create a vignette mask.

If the lines are still too visible around the navigation, tighten the mask.

Follow-Up Prompt

Tighten it up a bit so the grid fades away more before reaching the navigation links.

This makes the hero feel more polished and less visually noisy.

8. Replace Placeholder Assets With Real SVGs

Once the real assets are exported into the images folder, ask Claude Code to replace the placeholders.

Claude Code Prompt

Replace the logo with logo.svg in the images folder.
Replace the button icon with button-icon.svg.
Replace the star icon with star.svg.

Refresh the browser and verify:

• Logo is correct
• Button icon is correct
• Star icon is correct
• Spacing still matches the original design

9. Generate AI Characters in Higgsfield

To make the website more unique, generate character assets using Higgsfield.

In the video, Kelly uses Higgsfield because it provides access to multiple AI models in one interface.

Model Used for Image Generation

Nano Banana 2

He also tests:

Nano Banana Pro

This gives more visual variation.

10. Character Image Prompt

Use this prompt to generate a stylized character.

Higgsfield / Nano Banana Prompt

Create a Pixar style character on a white background.
He should be similar style to a character from Up.
He has a miner's helmet on and a knitted jumper.

Important Note

The first generations may look too close to the reference style. Iterate until the characters feel inspired by the style but not overly derivative.

You want characters that are:

• Cleanly isolated
• Front-facing or slightly angled
• On a plain white background
• Consistent with the website’s visual direction
• Easy to animate later

11. Bring the Characters Into Figma

After generating suitable characters:

1. Download the character images.
2. Drag them into Figma.
3. Check how they fit into the composition.
4. Adjust placement visually.
5. Export each character as a PNG.

Suggested File Names

character-1.png
character-2.png

Place them in:

images/

12. Add Character Images to the Website

Use a screenshot from Figma to show Claude Code where the characters should go.

Claude Code Prompt

I want to add the two character PNG images into the design.
They're in the images folder.
Position them like this.

Then attach or reference the screenshot showing the placement.

Refresh the website and confirm:

• Both characters appear
• They are positioned correctly
• They scale well on desktop
• They do not cover important text or buttons

13. Animate the Characters With Seedance 2.0

Go back to Higgsfield and switch from image generation to video generation.

Video Model

Seedance 2.0

Upload each character PNG and animate it with a controlled prompt.

Seedance 2.0 Prompt

This character is on a solid white background.
He's looking around.
Static camera positioning.
No panning.

Why This Prompt Works

The prompt keeps the animation controlled. That matters because these videos are being used inside a website hero section.

Avoid prompts that create:

• Camera movement
• Cropping
• Character walking
• Background changes
• Large pose changes
• Wild motion

For UI animation, subtle movement is usually better.

14. Download the Character Videos

Generate videos for both characters, then download them.

Suggested File Names

character-1.mp4
character-2.mp4

Place them in:

images/

15. Replace Static Images With Videos

Once both MP4 files are in the project, ask Claude Code to replace the PNGs.

Claude Code Prompt

Replace the character images with their appropriate video files in the images folder.

After refreshing, the characters should animate inside the hero section.

16. Fix the Character Background Problem

The generated videos may look like they are on a white background, but the background is often slightly grey or uneven.

This can be a problem if the website background is not pure white.

There are two ways to deal with it.

17. Option A: Use DaVinci Resolve Magic Mask

Use this when you want a cleaner cutout.

Process

1. Open DaVinci Resolve.
2. Import the character video.
3. Open the Magic Mask tool.
4. Draw around the character.
5. Run the mask tracking.
6. Add a solid white background behind the character.
7. Export the cleaned video.

The mask does not need to be perfect if the original background is already close to white.

18. Option B: Use Blend Mode in CSS

If the white background is close enough, you can use blend mode to visually remove it.

Claude Code Prompt

Make the blend mode darken on the character videos.

This can make the white background disappear visually by blending it into the page.

Caveat

This is a clever shortcut, not a universal fix. It works best when:

• The page background is light
• The video background is mostly white
• The character has enough contrast
• There are no important white details inside the character

If the character contains important white areas, blend mode may damage the appearance.

19. Compress the Videos for Web

Two animated videos in a hero section can be heavy. Compress them before shipping.

Claude Code Prompt

Can we compress the videos?

Claude Code can run terminal compression commands, usually using tools such as FFmpeg if available.

In the video, one character video was reduced from around 6 MB to around 650 KB.

What to Watch For

Compression should reduce file size without destroying visual quality.

Check:

• File size
• Visual quality
• Motion smoothness
• Browser playback
• Mobile loading performance

20. Add Page Entrance Animations

Once the layout and assets are in place, add subtle animation to the page elements.

Claude Code Prompt

Let's have the grid come on the screen first and grow in.
Then have the H1 appear one word at a time.

This creates a more premium hero section without needing heavy effects.

Good Animation Rules

Use animation to create hierarchy, not noise.

Keep it:

• Fast
• Smooth
• Subtle
• Purposeful
• Consistent with the design

Avoid over-animating every element.

21. Make the Website Responsive

Check the website at smaller widths. The navigation may break on mobile.

Claude Code Prompt

Let's make it responsive.

Nav links should turn into a burger icon.
Show a full-screen nav pop-up with a cross at the top.
Hide the characters on mobile.
Have the login button full width.

Expected Mobile Behavior

On mobile:

• Desktop nav links disappear
• Burger menu appears
• Burger opens a full-screen navigation overlay
• Close icon appears at the top
• Characters are hidden
• Login button becomes full width
• Hero content remains readable

22. Final Website Checklist

Before deploying, check the site carefully.

Desktop Checklist

• Hero matches the original design
• Font is Manrope
• H1 size and weight are correct
• Grid background is visible but not overpowering
• Logo and SVG icons are correct
• Character videos play smoothly
• Animations feel intentional
• Buttons are aligned and clickable

Mobile Checklist

• Navigation turns into burger menu
• Full-screen menu works
• Close button works
• Characters are hidden or repositioned properly
• Login button is full width
• No horizontal scrolling
• Text remains readable
• CTA remains visible

Performance Checklist

• Videos are compressed
• Images are optimized
• SVGs are used where possible
• No oversized assets
• Page loads quickly on mobile
• Animations do not block interaction

23. Deploy the Website

Once the site is ready, you can ask Claude Code to help push it live.

Claude Code Prompt

Let's push this to a GitHub repo, then show me the steps of publishing this live on Cloudflare.

Deployment Flow

1. Initialize a Git repository.
2. Commit the website files.
3. Push the project to GitHub.
4. Connect the GitHub repo to Cloudflare Pages.
5. Deploy the site.
6. Optionally connect a custom domain.

Cloudflare Pages is suitable for static websites and can often host this type of project for free.

24. Complete Prompt List

Create Hero From Screenshot

Make this into a full-screen hero section of website.

The font is Manrope.
The H1 is 80 pixel size.

Continue in Claude Code

I want to continue this with Claude in the terminal. How do I do that?

Fix Typography and Star Icon

The H1 should use regular and semi-bold font weights.
The star icon at the end of "3D magic" is not shown correctly.

Add Background Grid

Add the grid.svg that's in the images folder to the full-screen background.
It should sit behind everything, filling the entire page.

Add Vignette Mask

Add a radial mask to the grid to create a vignette mask.

Tighten Vignette

Tighten it up a bit so the grid fades away more before reaching the navigation links.

Replace SVG Assets

Replace the logo with logo.svg in the images folder.
Replace the button icon with button-icon.svg.
Replace the star icon with star.svg.

Generate Character Image

Create a Pixar style character on a white background.
He should be similar style to a character from Up.
He has a miner's helmet on and a knitted jumper.

Add Character Images

I want to add the two character PNG images into the design.
They're in the images folder.
Position them like this.

Animate Character With Seedance 2.0

This character is on a solid white background.
He's looking around.
Static camera positioning.
No panning.

Replace Images With Videos

Replace the character images with their appropriate video files in the images folder.

Use Blend Mode

Make the blend mode darken on the character videos.

Compress Videos

Can we compress the videos?

Add Entrance Animations

Let's have the grid come on the screen first and grow in.
Then have the H1 appear one word at a time.

Make Responsive

Let's make it responsive.

Nav links should turn into a burger icon.
Show a full-screen nav pop-up with a cross at the top.
Hide the characters on mobile.
Have the login button full width.

Deploy

Let's push this to a GitHub repo, then show me the steps of publishing this live on Cloudflare.

25. Key Lessons

This workflow works because each tool is used for the thing it is best at.

• Figma provides the visual direction.
• Claude creates the first implementation.
• Claude Code handles iterative coding and refinement.
• Higgsfield generates custom visuals.
• Seedance 2.0 creates controlled character animation.
• DaVinci Resolve can clean up imperfect video backgrounds.
• Cloudflare can publish the finished static site.

The biggest mistake would be trying to get a perfect result in one prompt. The actual workflow is iterative: generate, inspect, correct, replace assets, animate, optimize, make responsive, then deploy.

26. Practical Advice

Do not skip asset organization. A messy asset folder will slow down Claude Code and make your prompts less reliable.

Use clear names like:

logo.svg
star.svg
grid.svg
button-icon.svg
character-1.png
character-2.png
character-1.mp4
character-2.mp4

Also, do not ship raw AI video files. Compress them. Hero videos are expensive from a performance perspective, especially on mobile.

Finally, hide heavy decorative video assets on mobile unless they are essential. Mobile users care more about speed, readability, and interaction than decorative motion.