Make Vibe-Coded Websites Look Premium
Improve generic AI-generated websites using better landing-page references, reusable UI components, design prompts and Claude Code workflows.
In this guide
Vibe Coding · Website Design
Vibe-coded websites made with Claude often look generic because the prompt gives Claude no visual direction, so it falls back on the most average website it knows: a purple gradient, a centred headline and three emoji cards. The fix is to give Claude real design references. Copy section prompts from SceneAI, animation code from Transitions.dev and component prompts from 21st.dev, paste them into Claude Code, and check the site against a launch checklist before you publish.
What is vibe coding?
Vibe coding is building software by describing what you want in plain language and letting an AI write the code. You judge the result by how it looks and works in the browser, not by reading every line.
Instead of writing HTML, CSS and JavaScript, you tell Claude something like "Make a landing page for my pottery studio with a booking form." Then you keep giving feedback, such as "tighter spacing", "move the button up" or "add a dark mode", until it looks right.
Vibe coding works well for landing pages, portfolios, internal tools, prototypes and MVPs. It has one big weakness, and that's what this guide fixes: Claude has no taste you didn't give it.
How to build a website with Claude
You can build a website with Claude in three ways. Pick one based on how much control you want.
| Tool | Best for | What you get |
|---|---|---|
| Claude chat | A quick one-page site | A live preview you can iterate on and share |
| Claude Design | Planning screens visually | Screen designs on a canvas you can edit by hand, then hand to code |
| Claude Code | A real, multi-page site | A project folder on your computer, a local preview and a deploy to Netlify or Vercel |
The basic flow in Claude Code
- Make a folderCreate a folder such as
my-websiteon your Desktop and open it in the Code tab of the Claude desktop app, or runclaudeinside it in your terminal. - Describe the siteSay who it's for, what a visitor should do, which pages you need, and your brand colours and fonts if you have them.
- Preview and give feedbackAsk Claude to start a local preview, open the
localhostlink, and give feedback one section at a time. - PublishAsk Claude Code to deploy to Netlify or Vercel once the site is ready.
Follow the full walkthrough first: Build a Complete Website With Claude in Under an Hour. Then come back here to make it look good.
Why vibe-coded websites all look the same
When your prompt has no visual direction, Claude builds the most average version of a website it has seen. Nothing is broken, but nothing is memorable either. Visitors recognise the "AI template" look in about a second, and it makes your product feel less trustworthy.
| What you see | Why it happens | What fixes it |
|---|---|---|
| Purple gradients, emoji icons, everything centred | There's no visual reference, so Claude picks the most common default | Paste a reference section prompt from SceneAI |
| Every section looks like a different website | Colours, fonts and spacing are invented separately for each section | Set a small design system before building any section |
| A static, lifeless page | Nobody asked for animations or hover effects | Paste proven transition code from Transitions.dev |
| Vague copy like "Supercharge your workflow" | The prompt doesn't say who the audience is or what they should do | Name the audience, the offer and the one action you want |
| Looks fine in a screenshot, breaks on launch | No 404 page, meta tags, form errors or mobile CTA | Run the 20-point launch checklist |
Claude is an excellent builder and an average art director. You do the art direction by picking references, and Claude does the building.
The fix: a 5-step reference workflow
Follow these steps in order. Each one gives Claude less room to fall back on the generic defaults.
- Set the foundationBefore building any section, ask Claude for a small design system: 5 or 6 colours, a heading font, a body font and a spacing scale. Every section after that uses them. Prompt 1 below does this.
- Build sections from SceneAIGo to sceneai.art, copy the prompt for any section you like and paste it into Claude Code. Claude generates a matching section for your website. Build one section at a time.
- Add animations from Transitions.devGo to transitions.dev, choose a component, copy its code and give it to Claude Code.
- Fill in the smaller parts from 21st.devGet ready-to-use prompts for headers, search bars, pricing tables and footers from 21st.dev instead of describing them from scratch.
- Design the 404 page, then check everythingFind 404 page inspiration on 404s.design, then go through the launch checklist before you publish.
SceneAI: prompts for beautiful sections
sceneai.art Visit ↗
A prompt library with 150+ website sections and landing pages (heroes, footers and app screens), 80+ animated backgrounds, and gradients. Each design comes with a prompt that recreates it, and new designs are added every week. Some designs are free; full access is paid.
- Pick a section that matches your brand's mood.
- Copy its prompt.
- Paste it into Claude Code or Claude Design and add: "Use my design system and my copy."
Don't paste five section prompts at once. Build the hero, check it on your phone, then move to the next section. Claude keeps the style consistent when each new section can copy the ones already built.
Transitions.dev: animations and components
transitions.dev Visit ↗
Ready-to-copy UI transitions: menu dropdowns, modals, panel reveals, toasts, tooltips, skeleton loaders, tabs, toggles, like buttons, shimmer, confetti, 3D tilt and streaming text. It also offers a skill you can install for coding agents. Free tier plus Pro.
- Choose a component, such as the modal transition.
- Copy its code.
- Tell Claude Code: "Apply this transition to my signup modal and keep my colours."
21st.dev: headers, search bars and more
21st.dev Visit ↗
A community library of 12,000+ React and Tailwind CSS components: headers, search bars, pricing tables, dialogs, heroes and full templates. Every component has a Copy prompt button made for AI coding tools. Free accounts get a few copies a day.
- Search for what you need, such as "navbar" or "search bar".
- Click Copy prompt.
- Paste it into Claude Code, which rebuilds the component inside your project.
404s.design: creative 404 pages
404s.design Visit ↗
A curated gallery of real 404 pages. You can filter by style (minimal, playful, retro, glitchy), by interaction (animated, interactive, game-based) and by industry, or click Surprise me.
- Screenshot a 404 page you like.
- Drag the screenshot into Claude Code or Claude Design.
- Say: "Build a 404 page in this spirit, on-brand, with a link home and a search box."
10 more useful websites
| Website | Use it for |
|---|---|
| Mobbin | Screenshots of real app screens and flows to use as references |
| Godly | Web design inspiration, including animated sites |
| Land-book | A gallery of landing pages sorted by type |
| Uiverse | Free buttons, loaders, inputs and toggles |
| React Bits | Animated text, backgrounds and components |
| Coolors | Colour palettes for your design system |
| Google Fonts | Free fonts for headings and body text |
| RealFaviconGenerator | A full favicon set from one image |
| Squoosh | Compressing images to WebP or AVIF |
| OpenGraph.xyz | Previewing how your link looks when shared |
Copy-paste prompts for Claude Code
Use these prompts along with whatever you copy from the websites above. They keep Claude on-brand so it doesn't drift back to the generic defaults.
Before building any pages, create a design system for [brand name], a [what it is] for [who it's for]. Define: - 5 to 6 named colours with hex codes - A heading font and a body font from Google Fonts - A type scale, a spacing scale and a border radius Avoid purple gradients, emoji icons and centring everything. Save these as CSS variables and use them in every section you build.
Here is a reference prompt for a [hero / pricing / testimonial] section: [paste the prompt from SceneAI or 21st.dev] Rebuild it for my website using my existing design system and this copy: [your headline, text and button label] Make it work on screens down to 375px wide and match the spacing of the sections already built.
Add this transition from Transitions.dev to my [component name]: [paste the code] Adapt the colours and timing to my design system. Turn the animation off for visitors who have reduced motion enabled.
Audit this website for launch and fix anything missing: 1. Custom 404 page 2. A unique meta title and meta description on every page 3. A CTA above the fold 4. Favicon set 5. robots.txt and sitemap.xml 6. Open Graph image (1200x630) 7. Alt text on every image 8. Mobile breakpoints and a sticky mobile CTA 9. Loading states and form error states 10. Thank-you page 11. Privacy policy, terms and conditions, and a cookie banner 12. Analytics installed 13. A real contact address 14. Compressed images Give me a checklist of what you changed and anything I need to provide.
The 20-point launch checklist
A good-looking website still isn't ready to launch. Check every item below before you share the link.
Search and sharing 6
- Meta title on every pageUnique for each page, under 60 characters
- Meta description on every pageAbout 150 characters
- robots.txt file
- sitemap.xmlSubmit it in Google Search Console
- Open Graph image1200 × 630, so links look good on WhatsApp and LinkedIn
- Favicon setBrowser tab, iPhone and Android icons
Conversions 4
- CTA above the fold
- Sticky mobile CTA
- Thank-you pageConfirms the action and says what happens next
- Analytics installed
Real-world use 6
- Custom 404 page
- Mobile breakpointsTest at 375px, 768px and 1280px
- Loading states
- Form error statesSay what went wrong and how to fix it
- Alt text on every image
- Compressed imagesWebP or AVIF, ideally under 200 KB each
Trust and legal 4
- Privacy policy page
- Terms and conditions
- Cookie bannerNeeded if you use tracking cookies
- Real contact address
Frequently asked questions
Why does my Claude-generated website look generic?
If your prompt has no visual reference, Claude falls back on the most common website patterns: gradients, centred layouts and emoji icons. Giving it a reference section prompt and a small design system produces a website that looks designed.
Do I need to know coding to use SceneAI or Transitions.dev?
No. You copy a prompt or a code snippet and paste it into Claude Code. Claude adapts it to your project and writes the code.
Can I use these resources with Claude Design instead of Claude Code?
Yes. Paste a SceneAI prompt or drop a screenshot into Claude Design to create the screen visually. Then hand the design to Claude Code to turn it into a working website.
Are these websites free?
404s.design is free to browse. SceneAI, Transitions.dev and 21st.dev all have free options, with paid plans for the full library or unlimited copies.
What should I check before launching a vibe-coded website?
Check SEO basics (meta titles, descriptions, sitemap, Open Graph image), conversion basics (a CTA above the fold, a thank-you page), real-world states (404, loading and form errors) and legal pages. Prompt 4 above asks Claude Code to audit all 20 items for you.
Want all 10+ websites in one document?
I've put every website, prompt and checklist item into one document. Comment "BEAUTIFUL" on the reel and I'll send it to you.
Follow on Instagram →