An Expensive-Looking Site. Someone Else's Design. Zero Dollars.
Grab a ready-made design from 21st.dev (the Copy prompt button) or a 3D scene from Spline, hand Claude a single prompt, and it adapts everything to your business. No designer, no budget.
A website without a designer · Claude
Designers charge for their trained eye: they know what an expensive website is supposed to look like. But there are thousands of polished, expensive-looking designs sitting out in the open, and they're free. This guide shows you the simple route: find a design you like on 21st.dev or a 3D scene on Spline, hand Claude a single prompt, and it adapts everything to your business.
The Numbers
| Metric | Value |
|---|---|
| $0 | for the design |
| 20 min | to your first screen |
| 2 | design sources |
| 1 | Claude prompt |
The Whole Idea
What you're actually paying a designer for.
Not for their ability to push rectangles around. For taste and a trained eye: they've seen hundreds of good websites and know what an expensive one looks like. That trained eye has already been digitized and lives in public galleries.
Your job is simpler than it sounds: pick a design you like and tell Claude what business to rework it for. Claude acts as the translator between a beautiful template and your product.
① Two Design Sources
Different tools for different jobs.
| Tool | Role | Description | Price |
|---|---|---|---|
| 21st.dev: ready-made sections and blocks | A library of UI components: heroes, pricing, testimonials, features, forms, footers. Every block has a "Copy prompt" button that hands you a ready-made prompt Claude understands. Browsing is free. This is where your page's skeleton and style come from. | free to browse | |
| Spline.design: 3D elements and the wow factor | Not a gallery of landing pages but a 3D editor with a large Community of ready-made scenes and objects. This is where you get the thing that makes a site feel "expensive": a 3D object in the hero, an animated abstraction, an interactive scene. A scene can be embedded in your site via a link or exported as code. | free to start |
21st.dev ↗ Your page skeleton: sections, blocks, forms. A "Copy prompt" button under each one.
spline.design ↗ 3D scenes and objects for your hero. Take 1 effect, don't overload the page.
Don't mix these up
21st.dev gives you flat UI sections for any business: a store, a landing page, services. Spline gives you a 3D wow element that sits on top. You won't find a complete e-commerce site on Spline: it's a 3D editor, not a gallery of finished pages. The combo is simple: a skeleton from 21st.dev plus one 3D accent from Spline.
② How to Pick a Design
Three minutes to your prompt.
1. Go to 21st.dev and find your block type Open 21st.dev and use search or the categories to find the block you need: hero, pricing, features, testimonials, footer, contact form. Trust your eyes and keep scrolling until something grabs you.
2. Hit "Copy prompt"
The component you like has a Copy prompt button. It copies a ready-made description of that design in a format Claude understands. That's the "someone else's design" part, packed into text. Save it, you'll paste it into your prompt in a minute.
3. (Optional) pick a 3D scene from Spline If you want an expensive-looking hero: head to the Community section on spline.design, find a scene, hit Export, and grab either the public link to the scene or the embed code. You'll give that link to Claude too. One 3D object is plenty.
A tip on choosing Don't assemble your site from 10 different designs: you'll end up with a mess. Pick the one block whose style you like most and ask Claude to keep every other section in that same style. A consistent style reads as "expensive"; a patchwork reads as "made it myself".
③ The Claude Prompt
The main step. Questions first, code second.
Open Claude (in the chat, or Claude Code in your project folder) and paste the prompt below. The key idea: Claude doesn't rush straight into writing code. First it asks questions about your business, then it shows you the architecture, and only then does it build. That's how the design gets adapted to you instead of staying a demo template with someone else's copy.
the prompt: copy and paste it into Claude · [copy]
``` I'm building a website for my business and found a ready-made design I like. Here it is:
[PASTE HERE what you copied with the "Copy prompt" button on 21st.dev. If you have a 3D scene from Spline, add the link to it.]
Before writing any code, complete 3 steps strictly in order.
STEP 1. ASK ME QUESTIONS. Don't start until you understand my business. Ask one block of questions at a time and wait for my answers: - my niche and what I sell (product or service); - who my customer is and what problem of theirs I solve; - my main offer and price; - the ONE action a visitor should take (call, submit a request, buy, book); - what content I already have: copy, photos, logo, brand colors; - brand tone (premium, friendly, formal, edgy).
STEP 2. SHOW ME THE ARCHITECTURE. Based on my answers, propose a plan: - which pages and sections are needed and in what order; - where the chosen design fits well and what needs reworking for my case; - default stack: Next.js + Tailwind, a static page with no backend (if a backend genuinely isn't needed). Show the plan as a list and ask if it's OK before writing any code.
STEP 3. ADAPT, DON'T COPY. Once we approve the plan, build the site: - use the chosen design as the style foundation, but replace all demo copy with real copy for my business; - remove unnecessary sections, add the missing ones (request form, contacts, offer); - adjust colors and fonts to match my brand; - make it responsive for mobile; - for photos, use clear placeholders and label what should be uploaded there.
At the end, run the site locally and give me the link. From there we'll refine it section by section. ```
Why "questions first" matters so much If you just say "build me a site from this design," Claude will leave demo copy like "Your Company" and "Lorem ipsum" and a structure built for someone else's problem. It'll look pretty, but it won't be about you. The questions up front turn the template into your site: with your offer, your price, and one clear action for your customer.
What Claude will ask and do
1. Ask a block of questions about your niche, customer, offer, and the site's goal 2. Propose a section structure and ask for your sign-off 3. Build the page on the chosen design with your copy 4. Embed the Spline 3D scene in the hero, if you provided one 5. Make it responsive, run it locally, and show you the link
Anti-Patterns
Where results fall apart.
- ✕ Asking for a site without answering the questions Skip the questions step and Claude will build a pretty but hollow template full of demo copy. Answer its questions about your business; it's 5 minutes that change everything. - ✕ Mixing 10 different designs A hero in one style, pricing in another, testimonials in a third: you get visual chaos. Pick one style and keep the whole page in it. - ✕ Expecting a full landing page from Spline Spline is 3D objects and scenes, not finished store pages. Take one accent for your hero from it, and build the site's skeleton from 21st.dev sections. - ✕ Overloading the page with 3D Three heavy 3D scenes = a site that takes 10 seconds to load and stutters on a phone. One tasteful 3D element looks expensive. Ten look broken. - ✕ Not setting one target action If the site has no clear goal (a request, a call, a purchase), it's pretty but useless. Tell Claude what a visitor should do, and it will build the page around that.