One terminal command turns a plain-English brief into a premium website. The command is the trigger. The real work is wiring four tools together, and you do that setup only once. Here is the whole stack, step by step, plus the exact brief to run first.
You quote a landing page. The client wants premium, so you brief a designer, wait for mockups, hand the files to a developer, then lose a week to revisions. By the time it ships, the margin is mostly gone.
There is a faster path now. You install four tools one time. After that, a single command in your terminal turns a written brief into a finished site with real layout and working animation.
The stack is Claude Code, Framer Motion, a UI/UX skill, and 21st.dev. That is the whole thing. The rest of this guide is how to connect them and the brief to run once they are in place.
What Is Actually Behind the One Command
The hook says one line of code builds a premium website. That is true, but only after the setup is in place. The command is the trigger. The quality comes from four tools, each doing one job.
| Piece | Its job |
|---|---|
| Claude Code | The engine. Reads your brief, writes the site, runs in your terminal. |
| Framer Motion | Smooth, intentional animation instead of stiff hand-rolled CSS. |
| UI/UX skill | Senior-level design judgment: layout, spacing, hierarchy, structure. |
| 21st.dev | Real, polished components Claude assembles instead of inventing them. |
Install this stack a single time. After that, every new site starts from a command and a description. The setup is the work. The output is fast.
What Is a UI/UX Skill?
A UI/UX skill is a set of design instructions Claude loads before it writes any web code, so it makes layout and styling decisions the way a trained designer would instead of guessing. It is the reason two people can run the same command and one gets a page that looks generated while the other gets a page that looks designed. Code gives you a working page. The design skill gives that page spacing, hierarchy, a type scale, and color discipline. Of the four pieces here, it is the one most people leave out and the one that changes the output the most.
Manual or Packaged: Two Ways to Set This Up
You can wire these four tools together by hand, or you can install the whole stack as one prepared skill package. Both end in the same place. The difference is how much of the setup you do yourself.
| Manual setup (this guide) | Packaged skill | |
|---|---|---|
| What you do | Install each tool and connect them yourself | Install one skill package that carries the stack |
| Time to first site | Longer the first time | Shorter, most of the wiring is done |
| What you learn | How every piece fits, so you can fix it | Less of the plumbing, faster to a result |
| Best for | Anyone who wants to understand the stack | Anyone who wants the result today |
The manual path below is worth doing once even if you plan to use the package later, because it shows you what each tool is actually contributing when something looks off.
Step One: Install Claude Code
This is the engine. Everything else plugs into it.
Go to the official Claude Code page, copy the install line, and paste it into your terminal. That one command installs the tool. Once it is in, you run Claude Code from inside any project folder, and it can read, write, and edit files directly.
Your first real run: start Claude Code inside an empty project folder and ask it to create a basic page. If it writes the file, the engine is live and you are ready for the next piece.
The mistake that makes it fail: running it from the wrong place. Claude Code acts on the directory you start it in. Open your project folder first, then start the tool, or it edits files you did not mean to touch.
Step Two: Install Framer Motion
This is what makes the site move well. Skip it and the stiff, hand-rolled animation is the first thing that gives away a rushed build.
Framer Motion is an animation library for the front end Claude Code generates. Install it into the project directory so the animation tools are available. Then Claude can add entrance effects, scroll reveals, and smooth transitions when you ask.
Your first real run: when you brief the site, ask for motion in plain words. Fade the hero in. Reveal sections on scroll. Smooth the transitions.
The mistake that makes it fail: animating everything. Tell Claude to use motion to guide attention, not to decorate every element. Movement with no purpose reads as noise, and it is worse than a still page.
Step Three: Add the UI/UX Skill
This is the piece that separates a $300 page from a $10K one. It gives Claude design judgment, not just code.
Code alone gives you a working page. It rarely gives you a designed one. A UI/UX skill hands Claude the things a senior designer brings: spacing rhythm, real visual hierarchy, a sensible type scale, and restrained color.
Download and install a UI/UX skill so Claude Code loads it on web work. If you would rather skip the manual wiring, we packaged this whole stack as a ready skill you can install in one step, which I walk through in the four-part Claude web design stack. This guide is the manual version, so you understand each piece.
Your first real run: describe the feel you want in words. Clean, premium, bold, minimal. The skill turns that into real design decisions. Then point at a reference site you admire and ask Claude to apply the same principles to yours.
The mistake that makes it fail: skipping this step to save time. The component library and the animation library only shine when the underlying taste is there. Without the design skill, the output looks generated. With it, the output looks designed.
Step Four: Pull a Component From 21st.dev
Stop making Claude build every block from a blank file. Hand it real, polished pieces to assemble.
21st.dev is a library of production-grade UI components. Go to the site, grab the component or starting block you need, and paste it into Claude Code. Now Claude is not inventing a navbar or a hero from nothing. It is adapting a real, already-good block to your content and brand.
Your first real run: browse 21st.dev, pick a component that matches the section you want, copy it, and paste it into Claude Code as the starting point. Then tell Claude how to reshape it. Your copy. Your colors. Your spacing.
The mistake that makes it fail: pasting a component and expecting it to fit as is. Give Claude the adaptation instructions in the same message, or you get a polished block that clashes with the rest of the page.
Step Five: Run It, Then Refine in Plain English
The stack is assembled. Now the one command does its job and you refine with words, not clicks.
With Claude Code installed, Framer Motion in place, the UI/UX skill loaded, and a 21st.dev component pasted in, you describe the site and run it. The system generates a complete site in one pass: real layout, working animation, proper structure, and no manual assembly.
Here is the brief to run first.
Copy the build brief
Copy this.
Build a landing page for [YOUR BUSINESS]. Premium, clean feel.
Hero, three feature cards, social proof, pricing, CTA.
Use the 21st.dev component I pasted. Animate the hero
and the cards in with Framer Motion. Make it responsive.
From there you do not open a design tool. You refine in plain language. Tighten the hero spacing. Make the headline bolder. Slow that animation down. Swap the section order. Each pass takes seconds, and if Claude gets something wrong, you say what is wrong in one sentence and it fixes it.
Done. The site is built, and every change from here is a sentence, not an afternoon in a design tool.
The Business Read: Why This Matters for Your Shop
If you still charge a few hundred dollars for landing pages you build by hand, this is the gap you cannot afford to ignore. The next freelancer pitching your client is showing up with this exact stack.
The build side is being commoditized. Your strategy and your taste are not. The tool does not decide what the site should say or who it is for. It removes the weeks of manual assembly between the brief and the finished page. What used to be a three-week project with margin bleeding out in revisions becomes an afternoon of edits you control.
That is the shift worth acting on. Not that a machine builds websites now, but that the slow, expensive middle of the job just collapsed, and the money moves to whoever owns the judgment on top of it.
Honest: The Limits You Should Know
The one-line-of-code claim is only true after the setup. The command is fast. Wiring the four tools together is the actual work, and you do it once before any of the speed shows up.
This does not replace a designer on a complex product. It shines for landing pages and marketing sites. A large app with custom flows and real state still needs a person owning the architecture.
The 21st.dev components need adapting. Paste one in and it looks generic until you tell Claude your brand, your copy, and your spacing. The library is a starting point, not a finished page.
Taste still comes from you. The UI/UX skill gives Claude judgment, but you steer it. Point it at good references or it settles for safe and plain.
And you are learning a stack, not buying a button. The payoff is real. The first build takes patience while you learn how to brief it well.
If You Only Do One Thing
Install Claude Code and run the build brief on one real page you already need this week. One page. Not five.
Do the setup once. After that, every site you make starts from a command and a description, and the days you used to lose to mockups and revision rounds turn into a short session of plain-English edits.
If it does not work for you, you spent an evening learning a stack the market is already moving toward.