Build Perfect Websites

One repo. One paste. A website that looks like it cost $10,000.

Most people spend weeks — and thousands of dollars — getting a professional site built. This workflow does it in two minutes. Here's exactly how to run it.

What You're Getting

Four tools, pre-wired into a single repo:

• Claude Code — AI that writes and builds directly in your terminal
• UI UX Pro Max skill — forces Claude to output clean, modern layouts automatically
• 21st.dev hero section — production-ready components you pull and drop straight in
• Framer Motion — every section animates itself on scroll, no configuration needed

One paste triggers all four. Here's the setup.

Step 1 — Install Claude Code in Your Terminal

Open your terminal and run the install command for Claude Code.

npm install -g @anthropic-ai/claude-code

Check before moving on — Type claude in your terminal and hit enter. If you see the Claude Code prompt, you're good. If you get a "command not found" error, the install didn't complete — re-run the command with sudo prefixed.

Step 2 — Add the UI UX Pro Max Skill

This is the step most people skip, and it's the one that makes everything look expensive. Without it, Claude builds functional but generic. With it, Claude defaults to clean hierarchy, proper spacing, and modern layout patterns automatically.

Inside your Claude Code session, load the skill:

/skill load ui-ux-pro-max

Step 3 — Pull the Hero Section from 21st.dev

Go to 21st.dev, grab a hero component that fits your project, and paste the code directly into Claude Code with this instruction:

Integrate this hero section component into the project.
Match the existing color tokens and spacing system.
Do not modify the animation layer.

What you're looking at — 21st.dev components are already production-grade. You're not asking Claude to redesign them — you're asking it to wire them in cleanly.

Step 4 — Drop In Framer Motion

With your hero wired in, add Framer Motion to the project:

Install Framer Motion and wrap every page section
in a scroll-triggered fade-in animation.
Use a staggered delay so sections reveal sequentially,
not all at once.

Validation checkpoint — Run your dev server and scroll slowly through the page. If sections are snapping into view rather than fading in with a stagger, the Motion wrapper didn't apply to all sections. Ask Claude: "Which sections are missing the Framer Motion scroll trigger?" and it will audit and fix.

Step 5 — Clone the Full Repo and Run It

Everything above is already wired together in the repo. You don't have to rebuild the stack — you just run it.

Grab the repo link from this page, then paste this single line into your terminal:

gh repo clone [repo-link] my-website && cd my-website && npm install && npm run dev

Your browser opens. Your site is running.

What Claude Actually Builds

When you run the repo, Claude Code isn't just scaffolding boilerplate. Here's what comes out of the box:

• Hero section — pulled from 21st.dev with your headline and CTA pre-slotted
• Features block — clean card grid with proper visual hierarchy
• Social proof section — testimonial layout with spacing that doesn't look like a template
• CTA section — above-the-fold conversion placement, not buried at the bottom
• Scroll animations — Framer Motion stagger on every section, tuned to feel native not flashy
• Mobile layout — responsive breakpoints baked in, no manual media query work

The whole thing runs on a stack that agencies quote at $5,000–$15,000 for custom builds. The repo collapses that into a two-minute terminal session.

Prompts to Customize After Setup

Once the base site is running, these are the follow-up prompts that make it yours:

To change the color system:

Update the global color tokens to use this palette:
Primary — #[your hex]
Background — #[your hex]
Text — #[your hex]
Apply consistently across all components.

To swap the hero copy:

Rewrite the hero headline and subheadline for a [type of business].
Keep the headline under 8 words.
Make the subheadline one sentence that names the specific outcome.

To add a new section:

Add a [section type] section after the features block.
Use the same spacing tokens and animation pattern
as the existing sections.
Do not introduce new component styles.

How to think about customization — The repo gives you the structure. These prompts let Claude do the reskin without breaking the layout system. Always tell Claude to stay inside the existing tokens — otherwise it will start improvising styles and the visual consistency breaks.

🤖 Built for Builders Who Move Fast

You're the type who sees a two-minute workflow and immediately thinks about the ten projects it unlocks — not whether it's "legitimate."

Join 47,000+ builders who are already running AI-native stacks like this one.

Get access to the full resource library →

Your Next Move

The repo is on this page. Clone it, run it, and have a production-ready site live before you finish your next coffee.

If you want to go deeper — adding a blog, a booking flow, or a product page — the same Claude Code + Framer Motion stack handles all of it. The prompts above are your starting point. The repo is your foundation.

One line. Two minutes. Ship it.