Home
The Vibe Coder's Reference 112 entries · live demos · copy-paste prompts

A field guide
to web design,
made for prompting.

Every aesthetic, layout, scroll trick, navigation pattern, and component you'd want to describe to an AI — defined, demoed, and ready to copy. Bring vocabulary to your prompts.

Start with Aesthetics → Quick reference vocabulary
112
Techniques
6
Chapters
112
Live demos
112
Prompts to copy

The catalog.

6 chapters · 112 entries
Chapter 01

Design Aesthetics

16 entriesView →
Chapter 02

Scroll & Animation

38 entriesView →
Chapter 03

Layouts

14 entriesView →
Chapter 04

Navigation

14 entriesView →
Chapter 05

Type & Color

13 entriesView →
Chapter 06

UI Patterns

17 entriesView →

Quick reference vocabulary.

The words to use when you prompt. Combine one from each row.

For aestheticsglassmorphism · neumorphism · brutalism · minimalism · dark luxury · bento grid · claymorphism · Y2K
For feelpremium · editorial · playful · corporate · warm · clean · bold · refined · futuristic
For layouthero + feature grid · bento · masonry · fullpage scroll · sidebar+content · split asymmetric
For animationscroll-triggered fade-up · parallax · sticky scroll · text reveal · horizontal scroll · smooth lenis
For navigationsticky frosted navbar · hamburger fullscreen · mega menu · dot navigation · tab navigation
For componentspricing table with toggle · testimonial marquee · FAQ accordion · sticky scroll feature · hero · card grid
For typographydisplay headline · type scale · gradient text · font pairing · tight letter-spacing
For color60-30-10 rule · near-black dark mode · single accent color · gradient background · monochromatic
The perfect prompt combines: 1 aesthetic + 1 layout + 1 animation + specific colors and fonts.
Example: "Build a glassmorphism hero section with a centered layout where feature cards fade up on scroll, using a purple-to-blue gradient background, white frosted glass cards, and Clash Display font for the headline."