一篇笔记，记于学习 YouTube 视频 The 7 Levels of Building ELITE Websites with Claude Code

作者太强了，正好我一直在补齐前端这方面的短板，现在有了 AI，如鱼得水

Level 1: The Raw Prompter

“Just me and a prompt”

You’re here when

  • You open Claude Code and type “build me a landing page”
  • No frameworks, no design direction
  • You hope Claude just … knows what looks good

Skills to master

  • Writing descriptive prompts
  • Specifying frameworks (Tailwind, React)
  • Basic design vocabulary

Trap: The Template Trap

  • No direction = average of training data.
  • Every site looks the same.
  • Generic Tailwind + shadcn = “I obviously used AI”

Unlock Level 2

You realize Claude needs design intelligence, not just instructions.

Level 2: The Skill Stacker

“Give Claude a design education”

You’re here when

  • You install frontend-design skill, UI/UX Pro Max
  • Claude starts understanding color theory, typography, spacing, layout
  • Output jumps from “template” to “designed”

Skills to master

  • Choosing the right skill for the job
  • Understanding what design skills change
  • Evaluating output with a designer’s eye

Trap: The Description Ceiling

  • Skills improve output but you still can’t SHOW Claude what you mean
  • Text descriptions hit a wall fast

Unlock Level 3

What if Claude could SEE what you want?

Level 3: The Visual Director

“Show, don’t tell”

  1. https://www.awwwards.com/
  2. https://godly.website/
  3. https://www.pinterest.com/
  4. https://dribbble.com/

You’re here when

  • You screenshot sites you like and paste them into the conversation
  • “Make it look like this” is your go-to prompt
  • Claude reverse-engineers the vibe

Skills to master

  • Curating good visual references
  • Communicating what specifically you like
  • Combining references from multiple sites

Trap: The vibe gap

  • Screenshots capture the look, not the code
  • Claude interprets, doesn’t replicate
  • Close - but never exact

Unlock Level 4

What if you could grab the actual components, not just screenshots?

Level 4: The Cloner

“Learn by stealing from the pros”

You’re here when

  • You use site-teardown to break down entire websites - HTML, CSS, JS
  • Through cloning you discover GSAP, parallax, scroll animations
  • You bring pro techniques into your builds

Skills to master

  • Reading and understanding source code
  • Identifying which techniques = effects
  • Adapting cloned patterns to your designs

Trap: The clone ceiling

You can copy but can’t create. Without understanding WHY designs work, you’re limited to what already exists.

Unlock Level 5

What if you could curate specific pro components to put your own spin on it?

Level 5: The Component Sniper

“You don’t design - you curate”

  1. https://21st.dev/home
  2. https://codepen.io/
  3. https://www.monet.design/

Create background image / video

  1. https://www.midjourney.com
  2. https://higgsfield.ai/

You’re here when

  • You browse 21st.dev and CodePen
  • You grab specific navbars, heroes, cards, forms - real code
  • “Integrate this” - hand Claude production components

Skills to master

  • Finding quality components (21st.dev)
  • Evaluating code before integrating
  • Knowing what to swap vs. build

Trap: Frankenstein Sites

  • Mixing components from different design systems.
  • Beautiful parts, ugly whole.
  • Nothing feels cohesive

Unlock Level 6

You’ve curated the best - now it’s time to design your own from scratch

Level 6: The Designer

“Stop coding blind”

You’re here when

  • You connect Paper.design, Stitch, or Figma to Claude Code via MCP
  • Claude designs on a live canvas you can see and manipulate
  • Pixel-level refinement with real tools

Skills to master

  • Paper.design MCP setup & workflow
  • Bidirectional design (visual + code)
  • Asset creation and management

Trap: Tool paralysis

  • Paper, Stitch, Figma, Pencil - too many options. Pick ONE and master it
  • The tool isn’t the point

Unlock Level 7

You’ve mastered 2D. What about the third dimension?

Level 7: The Architect

“The frontier”

You’re here when

  • Three.js, custom WebGL, shaders
  • Mouse-reactive, scroll-driven, immersive 3D experiences
  • You’re building $15-50k agency-level sites (Igloo, Awwwards winners)

Skills to master

  • Three.js fundamentals
  • Shader programming (GLSL)
  • Performance optimization (GPU, FPS)

Trap: The performance trap

  • Beautiful 3D at 12fps = worse than no 3D. AI struggles here
  • This is where the human still matters most

This is the ceiling

But it keeps rising. The best builders are always pushing it higher.