Ask Claude for a website and it writes one. The problem is not that it can't. The problem is that a bare model has no design taste and no real materials to work with, so it hands you a page that works and looks like everyone else's. Three additions fix that. Add them once and Claude starts shipping sites with real layout and real animation, all from a plain-English brief.
Ask for a landing page today and you get something functional. A centered hero. Safe spacing. The same template look you have seen a hundred times. That is not the model reaching its limit. That is the model running with nothing to reach for.
Give it design judgment and give it real tools, and the output changes completely. Not a little. Completely.
Here is the whole method before I explain any of it. One skill for taste. One connection for real building blocks. One library for motion. Set the three up in that order, then talk to Claude in plain words. That is the entire thing.
What Changes When You Add These Three?
A UI skill upgrades the taste. Real tools upgrade the materials. A motion library upgrades the movement. On their own each one helps a bit. Together they turn Claude from a code generator into something that ships pages that look designed. The rest of this is just detail on each piece.
None of this is Claude-only, either. The same three additions work whether you drive Claude or Codex from the command line. The tools are the tools.
The Three Additions at a Glance
Three things. Each one fixes a different weakness in the default output.
| Add this | What it fixes |
|---|---|
| A UI / design skill | Gives Claude senior-level taste: spacing, hierarchy, type, color, and a working definition of what "production-ready" means. |
| A component library connection (21st.dev) | Gives Claude real, polished building blocks instead of inventing every element from a blank file. |
| Framer Motion | Gives Claude a proper animation system, so movement is smooth and intentional instead of janky guessed CSS. |
The rest of this guide is one section per item. What it is, why it matters, and how to put it to work. Then how to run all three in a single pass.
Skill One: The UI Design Skill
This is the biggest single jump in quality. It is the line between "an AI made this" and "a designer made this." Install it first.
What It Does
A UI skill is a set of instructions that teaches Claude how good design decisions actually get made. Spacing rhythm, visual hierarchy, type scale, restrained color, and knowing when to leave whitespace alone. Without it, Claude defaults to safe and generic, because safe and generic is what a blank file rewards. With it, Claude makes the choices a senior designer would make, before you have to ask.
How to Set It Up
Install the skill so Claude loads it whenever you do web work. Then brief your site in plain words. Describe the feel, not the CSS. Say clean, bold, premium, or playful, and let the skill turn that into real design decisions. Point it at a reference site you admire and ask it to reason about why that site works before it builds yours.
Copy The Brief Prompt
Copy this.
Build me a [ONE-PAGE MARKETING SITE] for [WHAT MY BUSINESS DOES]. The feel I want is [CLEAN, BOLD, PREMIUM]. Here is a reference I like: [URL OF A SITE YOU ADMIRE]. Read that reference and tell me why it works before you build anything. Then apply the same design principles to mine. Sections: [HERO, THREE FEATURES, PRICING, FOOTER]. Copy direction: [SHORT, PLAIN, NO JARGON].
Your First Real Run
Pick a page you already need. Your services page, a landing page for one offer, a simple booking page. Paste the brief prompt with a reference site you genuinely like, and let Claude explain the reference back to you before it writes a line. Read that explanation. If it understood why the reference works, the build will be good. If it did not, you caught it early. Done. You now have a first draft that already carries taste.
The Mistake That Makes It Fail
People install the animation library first and wonder why the site still looks flat. Motion on top of a generic layout is a generic layout that moves. Taste comes first. The skill is what everything else gets judged against, so if you only add one of the three, add this one.
Skill Two: Connect a Real Component Library
Stop making Claude reinvent the navbar. Hand it polished blocks and let it assemble.
What It Does
21st.dev is a library of production-grade UI components. Connect it and Claude stops building every button, card, and section from an empty file. It pulls real, already-good building blocks and arranges them with intent. This is the "connect it to real tools so it is not building in isolation" half of the whole idea. The output stops looking like a first draft because the raw materials were never first-draft quality to begin with.
How to Set It Up
Browse the library and grab a component that matches what you need. Drop that component into Claude as the starting point for the section. Then describe how you want it adapted. Your copy, your colors, your spacing. Claude reshapes a real block instead of guessing one from nothing.
Copy The Component Prompt
Copy this.
Here is a component from 21st.dev: [PASTE THE COMPONENT]. Use it as the starting point for my [PRICING SECTION]. Adapt it to my copy, my colors [HEX VALUES], and my spacing. Do not rebuild it from scratch. Reshape this one.
Your First Real Run
Take the weakest section on your current site. For most people that is pricing or the hero. Find one strong component for it, paste it in with the component prompt, and watch Claude adapt it instead of inventing. Compare the result against what the bare model gave you an hour ago. The gap is the point. Done. That section now starts from professional-grade material.
The Mistake That Makes It Fail
Grabbing a component and then telling Claude to "make it your own from scratch." That throws away the reason you connected the library. The instruction that matters is reshape this one, not build a new one. Keep the real block as the spine and adapt around it.
Skill Three: Framer Motion for Real Animation
Animation is what separates a flat page from a page that feels alive. This gives Claude a proper system for it instead of hand-rolled guesswork.
What It Does
Framer Motion is an animation library built for the kind of front-end Claude generates. With it connected, Claude can add entrance animations, scroll reveals, and smooth transitions that read as designed. Without it, you get stiff or janky CSS that a visitor notices for the wrong reasons.
How to Set It Up
Install Framer Motion in the project so the animation primitives are available. Then ask for motion in plain language. "Fade the hero in." "Reveal the cards as they scroll into view." "Smooth the page transitions." Keep it restrained, and say so out loud, because motion is easy to overdo.
Copy The Animation Prompt
Copy this.
Add motion with Framer Motion, restrained.
Fade the hero in on load.
Reveal the feature cards as they scroll into view.
Smooth the transition between sections.
Use motion to guide attention, not to decorate.
Keep every animation under [HALF A SECOND].
Your First Real Run
Take the site you built in the first two sections and add one entrance animation and one scroll reveal. Nothing else. Load the page and watch it once. If a single animation calls attention to itself instead of the content, that is the one to cut. Done. The page now moves with intent.
The Mistake That Makes It Fail
Decorating instead of directing. Motion is there to move the eye toward what matters, not to prove you added motion. The UI skill from section one helps Claude hold that line, which is another reason it goes in first. If the page feels busy, say: too much movement, cut everything except the hero fade and the card reveal.
Putting All Three to Work in One Pass
The order matters. Set them up once, then drive the whole build from plain English.
- Install the UI / design skill first. It sets the taste everything else is judged against.
- Connect 21st.dev. Now Claude has real components to assemble instead of inventing them.
- Add Framer Motion. Now movement is part of the toolkit, not an afterthought.
- Describe the site you want. Reference, feel, sections, copy direction. Let the stack do the building.
- Iterate in plain words. "Tighten the spacing." "Make the hero bolder." "Slow that animation down." No clicking through layers.
The last step is where the time actually goes back to you. You are editing in sentences, not dragging boxes across a canvas. That is the difference between a three-week build and an afternoon.
If you want the packaged version of exactly this, we bundled the four moving parts into one installable skill. The four-part Claude web-design stack is what to install. This guide is why each piece is in it.
The Business Read
Here is the part that matters if you sell websites or pay someone who does.
The builder side of web design is being commoditized fast. The strategy side, the taste, the positioning, the "what should this site even say," is not. Those two used to be bundled into one invoice. They are separating now.
If you are quoting clients five figures for sites you still build by hand, this stack is the gap to close before someone else closes it on you. The freelancer pitching your client next week is showing up with this exact setup. Your edge stops being the hours of building. It starts being the judgment about what to build. That is a better business to be in anyway. It just does not feel that way on the week the pricing model breaks.
Honest: What This Does Not Do
This does not make design judgment optional. It gives Claude taste, but you still have to know a good result from a bad one, because it will hand you both and sound equally confident about each. If you cannot tell, you will ship the bad one.
It does not replace strategy. A beautiful site pointed at the wrong offer sells nothing. The stack builds the page. It does not decide what the page should promise.
It is not one click. You are installing a skill, connecting a tool, adding a library, and then reviewing output like a person who is responsible for it. The setup runs once. The reviewing runs every time.
And it will over-animate if you let it. Restraint is your job, stated in the prompt and enforced on review. When in doubt, cut movement.
None of that cancels the point. It just means the leverage lands with the person who has taste, not the person who has the tools. Have both.
If You Only Do One Thing This Week
Install the UI skill and rebuild one page you already have. Not a new project. One existing page, run through the brief prompt with a reference site you like. Give it thirty minutes. If the result is worse than what you have, you spent half an hour and you keep your old page. If it is better, you just found out your whole build process is about to get shorter. Start there. Add the other two once the first one has earned it.