Section Library

Read this once, use it ten times

How to use any prompt in this library

Every section in the library works the same way: three steps, in order, every time. Master this flow once and the whole library is yours.

  1. 01

    Prepare your content first

    Before pasting anything, have your real content ready: the images you'll use, your actual text, your real numbers. Each section tells you exactly what to prepare. The #1 mistake is integrating a section with placeholder content and never replacing it — your site ends up showing stock photos of someone else's buildings.

  2. 02

    Write your customization message

    Don't paste the prompt alone. First write 2–4 sentences telling Claude Code about your project, then paste the prompt below it. That top part is what turns a generic section into your section. The more specific you are, the less cleanup afterward.

  3. 03

    Review and refine

    Open localhost:3000, scroll to the new section, and check it on desktop and mobile (shrink your browser window). Anything off? Describe it to Claude Code in plain English, same as always.

Your customization message — the template
Integrate the following section into my site, placing it [where on the page].
Replace ALL placeholder text and images with content for my project:
[1-2 sentences about your business/site].
My images are in [folder/paths]. Match the section's colors and fonts
to my site's existing design.

[PASTE THE FULL SECTION PROMPT HERE]

Putting a page together

Two proven recipes

A full page is just a sequence of these sections, in an order that lets the page breathe.

Real estate / construction site

  1. 01
    Hero (scroll animation)
  2. 02
    Aperture Reveal
  3. 03
    Services Accordion
  4. 04
    Stacking Cards or Horizontal Showcase
  5. 05
    Process Steps
  6. 06
    Testimonials
  7. 07
    FAQ
  8. 08
    Contact + Footer

Service business with transformations

cleaning, renovation, design

  1. 01
    Hero (scroll animation)
  2. 02
    Before/After Slider
  3. 03
    Services Accordion
  4. 04
    Process Steps
  5. 05
    Testimonials
  6. 06
    FAQ
  7. 07
    Contact + Footer

Rule one

One scroll-pinned spectacle between every two calm sections. Hero, Aperture Reveal, Stacking Cards, and Horizontal Showcase are all “spectacle” sections — never place two back-to-back. Let the page breathe.

Rule two

Consistency beats variety. Before integrating anything, tell Claude Code your site's colors and fonts in every customization message. Ten beautiful sections in ten different styles looks worse than five sections in one style.

Before you move on

Checkpoint

Tick these off — your progress is saved in this browser.

0 / 5 complete

Your site is no longer a hero with nothing under it. It's a full, scrolling, animated experience. Next up: getting it off your computer and onto the real internet.

Ready? Start browsing

Open the library