How To Use Claude Code 2.0 To Make Websites 10X Better
Give Claude Code a clear story, section-by-section copy, visual specs, and animation instructions, then refine with screenshots and targeted prompts.
- Use a one-shot prompt with the brand story, tool roles, colors, fonts, ordered sections, exact copy, and animations.
- Refine weak sections by sharing a screenshot and describing the specific change; use checkpoints to rewind if needed.
- Ask Claude to optimize media loading, then use a side chat for an independent animation review without interrupting the main task.
The walkthrough is useful, but the core prompt and refinement method are covered in the notes. · Best for: Designers and developers using Claude Code to build animated, media-rich websites.
The creator demonstrates two interactive promotional sites, then explains how to prompt, refine, optimize, and deploy this kind of site with Claude Code. Higgsfield is connected as a media-generation service; the video also describes Claude Code features such as nested sessions, side chats, and checkpoints.
Connect Higgsfield and start the first site1:03
- Claude Code handles site code and animation, while the creator uses Higgsfield for generated images, video, and voice.
- Connect Higgsfield through Customize → Connectors → Add a custom connector; paste the MCP link, sign in, and set it to always allow.
- The first prompt specifies a fictional F1 site with a cursor-reveal helmet, scroll-driven circuit, and interactive trophy finale.
Build and refine the F1 site2:10
- Nested sessions split visual generation and site building into focused tasks; sessions can communicate, and the creator watches them in split view.
- The result includes a cursor-reveal helmet, scroll animations, a 3D helmet, and an interactive trophy sequence.
- For revisions, share a screenshot and describe the change. Checkpoints let you rewind code, conversation, or both by pressing Escape twice.
Build the football launch site6:52
- The second site features a 3D ball that changes type, a scroll-driven shot, and a playable penalty section.
- The creator asks Claude to compress images and videos and load below-the-fold media only when needed.
- A side chat reviews the animations while the main chat continues; the creator applies its suggestions without interrupting the main task.
Prompting for distinctive websites9:49
- Start with the brand story and the journey the page should take visitors through.
- Specify which tool handles each task, then provide colors, two fonts, ordered sections, exact copy, and the animation effect and placement for each section.
- Use one-shot prompts when the concept is clear; build section by section when you want more control.
- Explicitly exclude unwanted patterns: gradient text, generic copy, and long or hard-to-read text.
Deploy the site12:15
- The creator prompts Claude to deploy the football site to Vercel and uses an already logged-in account.
- The video mentions a free school community as the location of the exact prompts, but does not provide a URL in the transcript.
Step by step
- Connect Higgsfield in Claude Code through Customize → Connectors → Add a custom connector; paste the MCP link, sign in, and choose always allow.
- Write a prompt with the brand story, tool roles, colors, two fonts, ordered sections, exact copy, and specific animation instructions for each section.
- If the concept is uncertain, build one section at a time and review each before continuing.
- Preview the result; share screenshots with precise revision requests, and use checkpoints to undo changes if needed.
- Request media compression and below-the-fold loading for a media-heavy site; use a side chat to review animations in parallel.
- Tell Claude to deploy the finished site to Vercel.
Tools & resources mentioned
- Higgsfield — used for generating images, videos, and voice; connected to Claude Code with an MCP connector.
- Claude Code 2 — used to generate site code, coordinate nested sessions, refine designs, and deploy.
- Vercel — used to deploy the football site.
- Free school community — mentioned as a source for the creator's prompts; no link is included in the transcript.
Notes are AI-generated from the video's transcript and may miss nuance.