Chapter 1 of the UI series: Landing pages

Build an insane landing page without being a designer.

The method in 5 steps

Follow them in order. Each one takes a few minutes.

1

Pick your theme

Theme is the feeling of the page. Write it in 2 or 3 words: dark futuristic, soft pastel, playful neo-brutalist, clean minimal, luxury black and gold, glassmorphism.

Stuck? Open Land-book or Godly (see Inspiration) and screenshot 3 pages you like. Your theme is whatever they have in common.
2

Pick one main color

One main color, one background, one text color. That is all. Write them as hex codes like #3B3BFF.

Don't know colors? Try coolors.co (press space to generate palettes) or realtimecolors.com (see your colors on a live landing page).

3

Choose your sections

Decide how many sections and which ones. A strong default is 8: Navbar, Hero, Logos, Features, Showcase, Testimonials, Pricing, CTA plus Footer.

4

Shop for one component per section

Open the libraries below. For each section, find one component you love and save its link (or its code or prompt). Keep a notes file like this:

Navbar   -> https://magicui.design/docs/components/dock
Hero     -> https://ui.aceternity.com/components/...
Features -> (21st.dev prompt pasted here)
5

Fill the prompt maker, paste into your AI

Use the prompt maker further down. Type name, color, theme, sections, add your links, press copy. Paste into Claude, Cursor, v0, Lovable, Bolt, or Claude Code. Done.

The component libraries (and how to use each)

Starred ones are the best for wow effects.

Favorite

Magic UI

Animated components: dock, marquee, bento grids, shimmering buttons, number tickers.

  1. Open the Dock page.
  2. Browse the sidebar for more.
  3. Copy the page link, or the install command and code if your AI builder needs it.
Favorite

Aceternity UI

Heavy 3D and motion: spotlight effects, glowing cards, parallax, hero backgrounds.

  1. Open the components list.
  2. Watch the live previews.
  3. Save the link. Some are free, some are Pro.
Favorite

21st.dev

A huge community collection, like an app store for components.

  1. Open 21st.dev and pick a component.
  2. It gives you a prompt, not a link. Copy that whole prompt.
  3. Paste it in the prompt maker.
21st.dev gives 2 free prompts per account per day. Plan your picks so you don't run out. Save your prompts in a notes file as you go.
Favorite

Spline

Make or reuse real 3D scenes (floating objects, interactive robots) and drop them in your hero.

  1. Open spline.design and browse community files.
  2. Click Export, then Code or Viewer link.
  3. Paste the link in the prompt maker and say "use this Spline scene in the hero".
Spline needs an account (free). Sign up before you start so you can open and export scenes.
Favorite

React Bits

Text animations, backgrounds, cursors, and tiny details that make a page feel alive.

  1. Open reactbits.dev.
  2. Pick from Text Animations or Backgrounds.
  3. Copy the link, or the code tab.

SmoothUI

Smooth, polished animated components. Browse.

Untitled UI (React)

Very clean, professional, "real product" look. Browse. Great for pricing, FAQ, footers.

Lightswind

Extra animated components and effects. Browse.

Spectrum UI

Modern component docs with live demos. Browse.

AMicro

Another gallery for ideas and snippets. Browse.

Magic UI (all)

The full list, not just the dock. Browse.

Easy rule: one wow component per section is enough. Using five flashy effects in the same section looks messy. Pick the star, keep the rest simple.

Route B: steal the vibe from inspiration sites

No component library has what you want? Find a design you love, then have Claude rebuild it as code. Then give that code to your AI builder as the reference.

Find design→Screenshot it→Ask Claude for HTML→Copy the HTML→Give to your AI builder

Designeer

designeer.xyz. Curated section designs. Great for browsing hero and feature looks.

Navbar Gallery

navbar.gallery. Only navbars. Perfect for step one of the page.

CTA Gallery

cta.gallery. Only call-to-action sections.

Land-book

land-book.com. Thousands of full landing pages, filter by style.

Godly

godly.website. Bold, trendy, award-style sites.

Awwwards

awwwards.com. The most creative sites in the world. Look, get inspired, don't copy everything.

SaaS Landing Page

saaslandingpage.com. Software and startup pages, sorted by section type.

Lapa Ninja

lapa.ninja. Big library, includes mobile app landing pages.

Bencho

bencho.dev. A live site to study for layout, spacing and style.

Velora (Colorlib)

velora.colorlib.com. A ready-made template. Screenshot sections you like and send them to Claude.

Dribbble

dribbble.com. Concept designs. Search "landing page dark" etc.

Do it like this

1

Find a section you love. Take a screenshot.

2

Upload the screenshot to Claude and write:

Recreate this section as a single HTML file with CSS and a little JS. Match the layout, spacing, fonts feel, and animations as closely as you can. Use placeholder text.
3

Check the result. Ask for tweaks like "make the button rounder" or "add a hover glow".

4

Copy the HTML Claude made. Paste it into the prompt maker's components box with a label, like Navbar: use this HTML as the reference. Your AI builder will convert it to your stack.

Use inspiration for layout and feeling. Don't copy someone's text, logo, or images. Swap in your own.

The prompt maker

Three parts: the basics, your sections, then a box for every component. Add as many components per section as you want and explain each one in your own words.

Part 1: The basics

Part 2: Your sections

One section per line, in the order they appear on the page. Boxes appear below as you type.

Part 3: Anything else?

Your prompt

Updates live. Copy it and paste into Claude, Cursor, v0, Lovable, Bolt or Claude Code.


  

  

    What goes in each component box? A link (Magic UI, Aceternity, React Bits...), a pasted 21st.dev prompt, a Spline link, or HTML Claude made from a screenshot. If your AI can't open links, paste the component's code instead.
  






  
After it builds: polish like a pro

  

    
If you see...Say this

    
Page feels boring"Add one subtle animation to the hero and make the headline bigger."

    
Too messy"Remove effects from the features section, keep only the hero animated."

    
Bad on phone"Make the whole page responsive for 390px wide screens."

    
Colors clash"Only use my main color, white and dark gray. Remove all other accents."

    
Component not working"Install the dependency it needs and show me the error fix."

    
Looks generic"Use a bolder font and larger spacing between sections."