How to Use Claude Code to Build a $10,000-Level Website and Animation Effects

From installing design skills, collecting reference materials, writing build prompts, to implementing a spotlight cursor animation, round-by-round review and fixes, and finally polishing—this complete guide lets you get started with zero coding experience. This article is compiled and translated from a monokern X post.

(Background: Claude Code launches /goals command: separate execution from evaluation to prevent AI agents from slacking off and lying) (Context: Hands-on: A step-by-step guide to upgrading Vibe Coding to an expert-level development workflow with 7 Agents)

Table of Contents

Toggle

• Step 1: Install Design Skills
• Step 2: Find Reference Materials
• Step 3: Write Build Prompts
• Step 4: Hero Section Animation
• Step 5: Review and Fix
• Step 6: Polish
• Result

An agency would charge $5,000 to build a portfolio site that looks this polished.

I built mine in 2 hours. Here's the complete process.

This is a real hands-on record, not a generic template guide.

I use my own portfolio as an example: the reference materials I actually used, the prompts I actually sent, and the bugs I actually encountered and fixed.

No programming experience required.

Step 1: Install Design Skills

By default, Claude's design output is mediocre. Same fonts, same layout, same flat look. Two skills can fix this.

• Frontend Design — Developed by Anthropic, runs in the background, blocks overused fonts like Inter, pushes bolder typography, and improves copy quality.

Paste this into Claude Code:

Install this skill: github.com/anthropics/skills/tree/main/frontend-design

When prompted, allow changes and install globally.

• UI/UX Pro Max — 57 interface styles, 95 color schemes, 56 font pairings. You call it directly when building.

Paste this into Claude Code:

Install this plugin using NPM: github.com/nextlevelbuilder/ui-ux-pro-max

Switch the mode selector to Auto mode so Claude won't ask for permission at every step.

Step 2: Find Reference Materials

Don't describe your ideal website from scratch. Let Claude see what you want it to look like.

My portfolio used "Il Capo Production" on Awwwards as the primary reference.

awwwards.com/sites/il-capo-production

That dark, cinematic style was exactly what I wanted.

Here's how I actually used it:

Instead of screenshotting the whole page and saying "make this for me," I captured the sections I liked individually:

• 1.png — Hero section
• 2.png — Section below hero (projects displayed as video + title/description)
• 6.png — Footer and bottom of the site
• 11.png — Single project page
• 12.png — Loading screen

For the portfolio page (listing all projects), the reference site didn't have a matching layout. I found a different layout with a similar style on Pinterest, took a separate screenshot, and named it 11.png.

Don't try to copy a site entirely—borrow good parts from each.

Place all materials in the /reference folder inside the project.

Step 3: Write Build Prompts

Use /ui-ux-pro-max at the beginning of the prompt to enable the design skill.

Here's the exact prompt I used for my portfolio:

Copy-paste prompt:

/ui-ux-pro-max
Build an upscale personal portfolio website for a frontend developer. It should look expensive, modern, and technically impressive,
with elegant animations that load smoothly on any device.
Use the design references in the reference folder: 1.png is the hero section, 2.png is the section below the hero
(displaying projects in a video + title/description format), 6.png is the footer/bottom of the site, 7.png is the portfolio page
listing all projects, 11.png is an example single project page when clicking any project from the portfolio, 12.png is the loading screen.
In the center of the hero section, use me.png for my photo.
Use example.png as a placeholder for all project/project images.

Before starting to build, ask me any clarifying questions.

The last line is key
Claude will pause and ask 4-6 questions about style, fonts, layout, animation complexity, content tone, etc. Your answers will become the foundation of the entire site.

Be specific when answering—the more precise you are here, the fewer back-and-forths later.

After you answer, Claude takes about 5 minutes to plan, then about 10 minutes to build. The first output is already quite solid.

Step 4: Hero Section Animation

Having an ordinary photo in the center of a dark hero section is boring
Something must happen when the user moves their mouse.

I came up with the spotlight idea for my portfolio:

• The entire section is dark
• My photo is almost invisible by default
• The cursor acts like a flashlight—"illuminating" me
• The second layer is just a bright, warm version of the same photo

I described this concept to Claude and asked it to implement:

"In the hero section, I want a flashlight/spotlight cursor effect. Dark background. My photo is almost invisible by default. When the cursor moves over the section, it acts as a spotlight—revealing a brighter, warmer version of the photo underneath through a soft-edged circular mask that follows the cursor. Radius 100-150px, with soft feathered edges. Please implement this effect."

Claude got it right in one go. The effect worked exactly as described—when users move the cursor, the photo lights up where they point.

Step 5: Review and Fix

Before doing a formal quality check, scroll through the site yourself and note anything that feels off.

My list after the first build:

• Transitions between page routes felt abrupt—needed smooth fades
• The spotlight effect had noticeable lag, couldn't keep up with the cursor
• Some elements overflowed the screen, couldn't adapt to display size
• Fonts didn't match the reference site—looked more generic than the Il Capo aesthetic

Write down all the issues, then send them all at once:

"Here are a few issues to fix, please handle all of them:\

2. [Describe issue 1]\
3. [Describe issue 2]\
4. [Describe issue 3]"

It's very important to send all issues at once.

Step 6: Polish

After obvious bugs are fixed, do a structured quality check. Paste this into Claude:

"Please review this website against the following criteria and honestly point out what needs improvement:
— Typography (Are we using overused AI fonts like Inter?)
— Color (Is the color scheme restrained or messy?)
— Hierarchy (Do text sizes guide the eye correctly?)
— Animation (Smooth and purposeful, or janky and random?)
— Mobile (Truly designed for phones, or just a shrunken desktop version?)
— Copywriting (Restrained and specific, or generic AI filler?)"

Claude will score each point. Go through it, agree or disagree on each point, then compile the issues you want to fix into a single prompt and send them all at once.

Don't ask it to fix points you disagree with. You know your site better than it does.

Result

You'll end up with a solid site. Not perfect—but good enough.

Some things won't be exactly right on the first build. Maybe the mobile version needs another pass, or an animation feels slightly off. That's normal.

Iterate from here. Find one thing to improve every day and fix it.