EN

How To Use Claude Code 2.0 To Make Websites 10X Better

#AI Tools
2026-11-03 11:3314 min read

Content Introduction
Ask Questions

The video demonstrates how to use Claude Code 2 with Higgsfield to build visually rich, interactive websites. It shows two example projects—a Formula 1-themed site and a football-themed launch page—created through detailed prompts, image/video generation, and modular side chats. The tutorial emphasizes using screenshots, checkpoints, and iterative edits to refine layout, animations, and performance, while also explaining how to structure effective prompts with clear stories, specific sections, exact styling, and instructions on what to avoid. It concludes by launching the sites on Vercel and encouraging viewers to use the tools and prompts to create their own projects.

Key Information

  • Claude Code 2 has a redesigned interface and is presented as much easier for building websites and interactive projects.
  • Claude can write code and handle animations, but for photorealistic images and cinematic video it is paired with Higgsfield through an MCP connector.
  • The setup process involves adding Higgsfield as a custom connector in Claude Code 2 so the tool can access models like video, image, and voice generators.
  • Claude Code 2 uses nested sessions, allowing one session to generate visual effects while another builds the site, with tasks tracked in a to-do list.
  • Sessions can communicate with each other, and side-by-side split view helps monitor multiple tasks at once without cluttering the main chat.
  • The first demo project is a fictional F1-themed website for Theo Varga, featuring a helmet reveal effect, a race timeline, and a trophy/grab finale.
  • The creator uses screenshots and prompts to refine placement, animations, and visuals, showing that iterative feedback improves the final result.
  • Checkpoints let the user revert to earlier points by pressing escape twice, making experimentation safer and easier.
  • The second demo project is a fictional football launch page called Strike One, featuring a 3D ball that transforms, scroll-triggered shots, and a penalty mini-game.
  • Higgsfield provides the visual assets and effects, while Claude handles the code; the creator emphasizes that combining both produces impressive results.
  • A side chat is used to optimize performance by compressing media and lazy-loading elements, which improves page speed without changing the appearance.
  • The speaker shares a prompt formula: define the brand story, describe the user journey, specify which tool handles each part, list exact colors and fonts, and detail each section's animation.
  • The video advises avoiding generic AI-looking design patterns such as gradient text, overused fonts, walls of small text, and cliché marketing phrases.
  • The main conclusion is that one-off prompts work best when the idea is clear, but section-by-section prompting gives more control when the concept is still evolving.
  • The video ends with a call to action to use Higgsfield, copy the prompts from the free School community, and subscribe for more content.

Timeline Analysis

Content Keywords

Claude Code 2

Claude Code 2 is presented as a completely redesigned tool with a new interface, improved chat workflow, nested sessions, to-do tracking, checkpoints, and side chats. The video shows how it can be used to build and refine interactive websites more efficiently.

Higgsfield

Higgsfield is introduced as the visual media engine connected to Claude Code 2. It provides access to AI models for images, videos, 3D, and voice, and is used to generate effects that Claude alone cannot create.

Interactive Website Creation

The video demonstrates building two interactive websites through prompt-based development: an F1-themed site for Theo Varga and a football launch page called Strike One. The workflow combines design prompts, animations, visual effects, and deployment.

Nested Sessions and Side Chats

A major feature highlight is Claude Code 2's ability to run multiple focused sessions at once. One session handles visual generation while another builds the site, and side chats let the user get feedback or suggestions without interrupting the main task.

Checkpoint Editing

Claude Code 2 supports checkpoints that let users roll back changes with escape commands if something goes wrong. This makes experimentation safer and easier when refining websites and animations.

F1 Animated Experience

The first project is an F1-themed interactive page featuring a helmet, cursor-triggered visual effects, scrolling race animations, a 3D helmet, trophy sequence, and telemetry-style details. The speaker refines placement and timing to improve the final result.

Football Launch Page

The second project is a football website that includes a 3D ball, multiple transformation states, scrolling shot animations, and a penalty shootout mini-game. The speaker also optimizes performance by compressing media and lazy-loading elements.

Prompt Engineering for Web Design

The video emphasizes a formula for effective one-shot prompts: define the brand story, user journey, tool roles, exact colors and fonts, section order, and detailed animations. It also recommends avoiding generic AI-looking patterns like gradient text and overly long copy.

Vercel Deployment

After building the football site, the speaker deploys it on Vercel and makes it publicly accessible. The process is described as simple: expand the project, connect the deployment, and click send.

Related questions&answers

What is Claude Code 2?

Claude Code 2 is presented as a redesigned tool with a new interface in chat, improved workflow features, and support for building websites more easily.

What can Claude Code 2 do well?

It can write code, create animations with code, and help build interactive websites and web experiences.

What are Claude Code 2's limitations?

It cannot generate photorealistic images or cinematic videos on its own.

What is Higgsfield used for in the workflow?

Higgsfield is used to provide Claude access to image, video, 3D, and voice generation tools through a connector.

How do you connect Higgsfield to Claude Code 2?

You grab the MCP link, go to Customize, then Connectors, add a custom connector, paste the link, log in, allow access, and it appears in Claude Code 2.

What new interface features are shown in Claude Code 2?

The interface includes a connector card for Higgsfield and new cards for context, environment, and output.

What was the first example project built in the video?

The first project was a website for Theo Varga, a fictional F1 champion.

What elements were requested for the Theo Varga website?

The request included a helmet that burns under the cursor, a track that builds itself, and a finale where the user can grab a trophy and compete for it.

How were the animations controlled in the first project?

The helmet effect appeared under the cursor, and scrolling made the race video play forward and backward.

What is the benefit of Claude Code 2's nested sessions?

Nested sessions let different parts of the project work separately, such as one session creating visual effects and another building the site.

How do the sessions communicate in Claude Code 2?

When the visual session finishes an image, it sends a message to the site session, which then adds it to its state.

What is a checkpoint in Claude Code 2?

A checkpoint lets you go back to a previous point in your code or conversation if something goes wrong.

What second website was created in the video?

The second project was a fictional football launch page called Strike One.

What features were requested for the Strike One website?

The request included a 3D ball that transforms into four types, a shot that flies into the goal while scrolling, and a penalty shootout mini-game.

How was the football site improved after feedback?

The site was optimized by compressing videos and images and loading elements only when the user scrolls to them.

What is a side chat in Claude Code 2?

A side chat lets you ask for feedback or suggestions without interrupting the main chat or workflow.

What kind of suggestions can a side chat provide?

It can point out unnecessary or slow animations and suggest improvements.

What is the recommended formula for writing a great one-time prompt?

Start with a story, explain the brand and user journey, specify which tool does what, provide exact colors and fonts, list each section in order, and define the animations.

Why should you describe what not to do in a prompt?

Telling Claude what to avoid helps prevent generic or AI-looking design choices such as gradient text, unreadable walls of text, or overused phrases.

When is it better to build a website in sections instead of with one prompt?

It is better to build in sections when the idea is still forming or when you want more control and the ability to review each part before moving on.

More video recommendations

Share to: