Build a $10K Website With Claude Opus 5.5 (No Code, Full Tutorial)

Overview

This video is a full no-code tutorial for building a $10K-style scrolling website using Claude Opus 5.5 plus media-generation tools. The centerpiece is a “drone flight” video experience that plays while the user scrolls, designed to scale smoothly from desktop to mobile.

---

Core product/workflow idea

What Claude Opus generates

Using Claude Opus 5.5, the workflow generates:

• The website layout and design
• A scripted visual story composed of multiple scenes/clips
• Interactive UI effects, such as:
  • Hover effects
  • Stacked cards
  • Pinned visuals
• A booking form aligned to the business theme (brewery tours)

Media generation workflow (Higgs Field connector)

A separate video-generation workflow is connected via Higgs Field (MCP connector) and image/video models:

• Images: GPT Images 2.5
• Videos: C-Dance 2.5

Generated media is stored in Higgs Field’s library, allowing you to revisit:

• Which model was used
• The query/prompt
• Reference materials and settings

---

Website concept and interaction design (what gets built)

Desktop + mobile versions

• Desktop
  • Shows a drone-like walkthrough of a fictional brewery:
    • Bar → copper/steam pipes → barrels → bottling line → final panoramic reveal
• Mobile
  • Uses the same method, but adjusts the drone framing per angle/scene.
  • Scaling is done proportionally so the experience stays consistent.

Hero/scroll experience

• A hero block embeds the drone flight directly in the page.
• As the user scrolls, the video/scene sequence advances.

Interactive enhancements

• Hover effects across multiple elements
• Scroll-triggered pinning behavior for an image
• A section where cards stack as you scroll
• A hover “pop up” effect on cards (noted as something applied later after revisions)

Business content generation

Opus decides the site should include:

• Drinks for sale (bar content)
• Tour booking (booking form)

Later, Opus also generates custom bottle labels consistent with the brand.

---

Tutorial / guide steps highlighted

1) Prepare the Claude project + model settings

• Start in the Claude desktop app (Claude Code; also mentions Claude Co-work for maintenance/hosting/SEO concerns).
• Create a new empty project folder (e.g., “YouTube demo”).
• Use Opus 5.5 with “medium” effort (presented as sufficient; higher settings may also work).
• Ensure Opus can generate the needed images/videos for the experience.

2) Connect media generation via Higgs Field (MCP)

In Claude Code:

• Go to MCP → Cloud → connect Higgs Field
• Provide/confirm the MCP URL, continue prompts, and authenticate

Requirements:

• A Higgs Field account (referral link mentioned)

After connecting, Claude can generate media directly.

3) Use a GitHub repo of prompts

A linked GitHub repo includes a prompts/ folder with:

• Desktop prompt
  • Generates the widescreen desktop site
  • Requests brand assets (logo, images/videos)
• Mobile refinement prompt
  • Adapts the finished desktop site for mobile viewing

Workflow:

1. Run the desktop prompt first
2. Then run mobile refinement once the desktop site looks acceptable

4) Provide scenario content for drone footage

The fictional brewery storyline includes drone scene plans such as:

• Bar entry
• Steaming copper pipes
• Barrel passage
• Bottling line / conveyor belt
• Exit → turn around → reversed/opening-like panorama

Realism guidance:

• Prefer dynamic, swaying flight paths (left/right sway) rather than perfectly straight motion.

5) Generate clips and stitch them into a scroll journey

• Opus generates multiple clips/stages (the notes suggest 3–4 scenes is often better).
• Transition strategy uses smooth stitching:
  • The last frame of clip A becomes the first frame of clip B
  • (instead of zoom-in/zoom-out transitions)

Debugging examples mentioned:

• Some objects disappear during turns (e.g., copper cylinders); the tutorial suggests letting the render finish and reviewing later rather than re-querying immediately.
• A “person appears” glitch occurs; resolved via iteration/regeneration/editing.

6) Review the first site version locally

• Opus outputs a localhost preview link.
• Review:
  • Scene playback while scrolling
  • Hover effects and transitions
  • Stitch quality between scenes

7) Improve design using external inspiration (Pinterest)

• Use Pinterest to find relevant visual patterns, such as:
  • Floating bottle animations
  • Scroll “landing” effects
  • Brewery-tour style layouts
  • Bottle label inspirations
• Feed these inspirations back into Claude/Opus to regenerate sections.

8) Iterative editing: remove/replace sections to match the aesthetic

The tutorial includes multiple refinement cycles, including removals for issues like:

• Looks too “Old English” / overly solid
• Feels like “discount ads”
• Specific transitions/strips removed (e.g., a moving yellow strip that looks cheaper)
• A “Good beer deserves a good bottle” section deemed mismatched and replaced

Final improvement focuses on:

• A card-based scroll section (stacking cards)
• Reduced overly energetic sections
• More coherent brand/theme consistency

9) Generate/validate the mobile version

• Mobile adaptation is attempted without re-editing the video first, causing some elements to go off-screen.
• A second mobile-focused query/refinement is run.
• Mobile review includes:
  • Nav/menu behavior
    • Transparent initially
    • Becomes solid after the opening animation
    • (Specifically to maximize usable window during the drone section)
  • Cards and bottle sections display clearly with appropriately large UI blocks/icons
  • Booking form is adjusted to fit the screen so users don’t need awkward extra scrolling

10) Track Higgs Field cost

Reported cost summary:

• 18 tasks
• 553.5 credits across all builds

---

Key technological/feature takeaways

• Claude Opus 5.5 + Higgs Field (MCP) media generation enables creating a full interactive marketing site, not just static pages.
• The drone-flight scroll effect is implemented as a video-driven hero narrative using scene stitching across multiple clips.
• Desktop-to-mobile scaling is supported through a mobile refinement prompt, including UI timing details (transparent-to-solid nav).
• Interactive UI layers (hover effects, pinned visuals, stacked cards) greatly improve perceived quality.
• Media assets remain reproducible because generated outputs and parameters are saved in Higgs Field.

---

Main speakers / sources

• Main speaker: the video creator/instructor (narrator; name not provided in subtitles)
• Primary tools/sources mentioned:
  • Claude (Claude Opus 5.5 / Claude Code / MCP)
  • Higgs Field MCP
  • GPT Images 2.5
  • C-Dance 2.5
  • Pinterest for visual inspiration