Video summary

The 7 Levels of Building ELITE Websites with Claude Code

Main summary

Key takeaways

Technology

Summary: The 7 Levels of Building ELITE Websites with Claude Code (via Argus case study)

The video argues that Claude Code often produces “generic / AI slop” front-ends unless you guide it with the right progression of skills. A “fake SaaS” called Argus (a social media intelligence app for finding trending topics) is used to demonstrate each level.

The core theme is that website design is visual—so you must gradually reduce the “translation loss” between taste/vision and what text-only prompting can specify.

Level 1 — “Just you and a prompt” (stuck in generic templates)

What happens

  • Claude Code is given a simple instruction to generate an Argus landing page (using plan mode).
  • Output is very generic, such as common techy aesthetics, purple gradients, and standard hero/features/CTA layout.

Why it fails

  • Claude Code lacks “taste,” and the user can’t articulate what “good design” looks like.
  • The output becomes generic because prompts provide no design direction, no vocabulary, and unclear goals.

What you learn / need

Build basic ability in:

  1. Descriptive prompts
  2. Understanding frameworks (e.g., Next.js vs HTML/Astro)
  3. Basic design vocabulary

Plan mode forces you to answer questions about stack, style, and goals (e.g., waitlist signup + product showcase).

Trap

  • Staying at “prompt only” leads to repetitive template-like results.

Level 2 — Add “design education” via skills (checklists + UI/UX prompts)

What you do

  • Install specialized “skills” into Claude Code, starting with UI/UX Pro Max (an open-source GitHub repo).
  • Recreate the landing page with improved style decisions like typography, spacing, and CTA color.

What improves

  • Better UI details: backgrounds, subtle glows, hover color changes, section-wise color variation, and graphics.

Limit

  • It still feels like an AI-designed template, not truly distinctive.

Key concept

  • Skills act like prompt superchargers: they inject structured guidance to “avoid slop.”

Trap / ceiling

  • You still need evaluation with a designer’s eye.
  • Text-to-visual prompting limitations remain: you’re still describing visuals via text.

Level 3 — Visual director (screenshots + references)

What you do

  • Instead of text-only direction, you provide visual examples (screenshots) from sites you like.

Sources for inspiration

  • Awwwards (design submissions graded/curated)
  • godly.website (infinite scroll inspiration)
  • Pinterest (SaaS landing page boards)
  • Dribbble (SaaS landing design inspiration)

What changes

  • Claude Code can better mimic a visual style when you show real UI.
  • You “curate” references and combine elements from multiple sites.

Limit / trap

  • Screenshot → code is still a lossy translation, leaving a “vibe gap.”
  • People get stuck iterating one section repeatedly (often the hero) via screenshot/prompt cycles.

Level 4 — “The cloner” (learn by deconstructing real code)

What you do

  • Go beyond surface screenshots: deconstruct a real site (e.g., “Open Hands” style).
  • Learn by copying to extract patterns, not to plagiarize.

Technical framing

Front-end design decomposes into:

  • HTML = structure (“bones”)
  • CSS = styling (“clothes”)
  • JavaScript = behavior/animations (“muscles”)

How to pull underlying code

  • Use View Source / Control-U to copy HTML.
  • Capture linked CSS and JS.

Problem with summarization

  • Claude Code’s “Web Fetch” may use a smaller model and summarize CSS/JS—often too incomplete because those files are large and specific.

Solution

  • Use a “site teardown” skill that retrieves enough CSS/JS detail for faithful cloning.

Why this level matters

  • It teaches you how effects work at a coding level.
  • You can ask implementation questions (e.g., how backgrounds/scroll animations are done).
  • Iteration becomes easier because Claude is working from an actual “cookbook” of implementation details.

Trap / ceiling

  • If you only clone, you hit a clone ceiling: you copy patterns without understanding the “why,” and it’s harder to differentiate.

Level 5 — Custom components + custom assets (make it yours)

What you do

Introduce originality using:

  • Components from design repositories
  • Custom artwork for the hero/background
  • Optional animation/video integration

Component sources

  • 21st.dev (buttons, carousels, scroll areas, nav menus, etc.)
  • CodePen
  • Monet (component inspiration)

How to make it original

  • Either:
    1. Copy component code, then prompt/tweak it
    2. Generate custom visual assets (often via an image model)

Example (hero art)

  • Background hero image created using Midjourney (v7 mentioned).
  • The image is downloaded and fed to Claude Code to reimagine the hero layout:
    • Argus info on the left
    • Negative space on the right for the image
    • Tagline like “see what’s next”

Adding motion

  • Convert the still into subtle background video using Kling 3.0 or VEO 3.1.
  • Performance guidance:
    • Load video on desktop
    • Load still image on mobile (explicitly instructed to Claude Code)

Trap

  • Too much motion is distracting—keep it subtle so it feels premium, not chaotic.

Level 6 — Outside visual tools (iterative design tinkering)

What you do

Use external UI/visual editor tools for faster iteration, then bring outputs back into Claude Code.

Tools mentioned

  • Stitch (Google’s tool; free; screenshot-driven redesign + variants)
  • Figma
  • paper.design
  • pencil.dev (canvas-like editing in code editors)

Example workflow

  • Feed Stitch screenshots + intent (e.g., keep hero style, redesign bottom half).
  • Use Stitch variants, then return the chosen direction to Claude Code.
  • Claude Code refines implementation (e.g., glassmorphism and background effects).

Argus outcome after ~20 minutes

More premium feel via:

  • Loading/hesitation effect (perceived weight)
  • Updated fonts (example resource: Google Fonts)
  • Ticker section + improved transitions (less jarring hero-to-background)
  • Glassmorphism cards with better cohesion
  • Micro-interactions (animated counters, scroll progress bar, subtle lighting/hover effects)

Key concept

  • Level 6 is “no shortcut” iteration: tinker across multiple tools while staying in control.

Level 7 — Frontier 3D / WebGL / shaders (future “big leagues”)

What it covers

  • Ultra-advanced interactive experiences—sites that look like video games.
  • Examples include WebGL, shaders, and 3D.

Practical expectation

  • The speaker suggests most people can’t realistically do this yet (timed to late March 2026).

Purpose of the level

  • Show “what’s possible” and inspire future capability, referencing Awwwards for custom 3D design examples.

Overall roadmap (the “progression” message)

  1. Start with prompts + design vocabulary (Level 1).
  2. Use UI/UX skills/checklists (Level 2).
  3. Provide screenshot references for visual direction (Level 3).
  4. Deconstruct and clone underlying HTML/CSS/JS (Level 4).
  5. Replace template patterns with your own components/assets (Level 5).
  6. Iterate with visual design tools and bring designs back into Claude Code (Level 6).
  7. Eventually attempt 3D/shader-level experiences (Level 7).

Final takeaway: elite results come from repeatedly learning from “what right looks like” and understanding/implementing the techniques, not just using a “special magic prompt.”

Main speaker / sources

  • Main speaker: The YouTube presenter (speaking throughout; not named in subtitles).
  • Case study app: Argus (fake SaaS described in the video).
  • Referenced tools/skills & sites: Claude Code (with skills like UI/UX Pro Max and site teardown), GitHub, Midjourney, Kling 3.0 / VEO 3.1, Stitch, Figma, paper.design, pencil.dev, 21st.dev, CodePen, Monet, Awwwards, godly.website, Pinterest, Dribbble, Google Fonts.
  • Example site used for cloning inspiration: Open Hands (mentioned).

Original video