Design
The vibe coder's design playbook. Most beginners know what they want their app to look like but can't translate that into the technical vocabulary AI needs. This skill closes that gap.
When to use this
- The user is picking colors, fonts, or spacing.
- The user says "make it look nicer" or "this looks weird".
- The user is planning a landing page or dashboard layout.
- The user shows you a screenshot and says "like this".
The design fundamentals
Color
Modern web design uses 3-5 colors max. Pick:
- Primary — your brand color (used for CTAs, links, accents)
- Accent — a complementary color (used sparingly for emphasis)
- Neutral — backgrounds and text (white/cream + gray scale)
- Semantic — green for success, red for error, yellow for warning
Always specify colors as hex (#9772F3) or HSL — never names like "purple".
Tailwind shorthand like text-purple-500 is fine when using the default palette.
Modern color recipes:
- Playful SaaS:
#9772F3purple +#FB5C8Dpink +#FCCA36yellow - Minimal corporate:
#0F172Aslate +#0EA5E9sky +#FFFFFFwhite - Dark luxury:
#0A0A0Fnear-black +#16161Dcard +#8B5CF6violet - Warm editorial:
#422006brown +#F97316orange +#FFFBEBcream
Typography
Pick two fonts: one for headings, one for body. Use next/font/google
to load them. Modern pairings:
- Bricolage Grotesque (headings) + Inter (body) — playful, modern
- Instrument Serif (headings) + Inter (body) — editorial, premium
- DM Sans (headings + body) — clean, single-font minimalism
- Geist (headings + body) — Vercel's font, technical and crisp
Sizes that work:
- H1:
text-4xl md:text-6xl(32-60px) extrabold - H2:
text-2xl md:text-4xl(24-36px) bold - H3:
text-xl md:text-2xl(20-24px) bold - Body:
text-base(16px) withleading-relaxed(1.625) - Small:
text-sm(14px) for captions and meta
Never go below 14px on body text. Mobile users will pinch-zoom and that's a UX failure.
Spacing & sizing
Use the 4px grid. Tailwind already enforces this — every p-4, m-6,
gap-8 is a multiple of 4.
Generous spacing recipe (modern SaaS look):
- Section padding:
py-20 md:py-32 - Card padding:
p-8 - Grid gap:
gap-8 - Text leading:
leading-relaxed
Tight spacing recipe (dashboards):
- Section padding:
py-8 - Card padding:
p-4 - Grid gap:
gap-3
Layout patterns
Most pages use one of these:
- Hero + sections — landing pages
- Sidebar + main — dashboards, docs
- Grid of cards — listings, galleries
- Two-column — text + image, content + sidebar
- Centered narrow column — long-form articles
Always max-width the content (max-w-7xl for full-width pages,
max-w-3xl for articles, max-w-md for forms).
The describe-the-vibe formula
When the user shows a reference and says "like this", extract:
- Color scheme — 2-3 hex codes
- Mood — minimal / playful / corporate / dark / soft / bold
- Spacing density — generous / tight / balanced
- Corner style — sharp (rounded-none) / soft (rounded-xl) / pill (rounded-full)
- Shadow style — none / subtle (shadow-sm) / dramatic (shadow-2xl)
- Animation level — static / subtle / lots of motion
Then give the AI a one-paragraph design brief:
Use a minimal, playful style. Generous spacing (py-20 sections, p-8 cards,
gap-6 grids). Rounded-2xl on everything. Soft shadows (shadow-md, never
shadow-2xl). Headlines in font-extrabold. Colors: purple #9772F3, pink
#FB5C8D, soft white #F8F8FB. Subtle hover lift on interactive elements.
The translation cheat sheet
| User says | AI vocabulary |
|---|---|
| "Make it bigger" | text-2xl, text-4xl, p-8, max-w-4xl (specify which) |
| "Add space" | gap-4, space-y-6, mt-12, px-8 |
| "Round the corners" | rounded-xl / rounded-2xl / rounded-full |
| "Make it pop" | shadow-xl, ring-2 ring-purple/40, hover scale |
| "Looks flat" | add gradient, soft shadow, hover state |
| "Too cramped" | increase padding (p-4 → p-8) and gap (gap-2 → gap-6) |
| "Too busy" | reduce to 2-3 colors, more white space |
| "Hide on mobile" | hidden md:block |
| "Stack on mobile" | grid-cols-1 md:grid-cols-3 |
| "Looks dated" | gradient text, glass-morphism, modern shadow recipes |
Landing page anatomy
A great landing page has these sections, in order:
- Navbar — logo + nav + CTA
- Hero — headline, subtitle, CTA, optional visual
- Social proof — logos or testimonials
- Features — 3-6 cards explaining what it does
- Showcase — screenshots or demo
- Pricing — cards or table (if monetized)
- CTA banner — final push
- Footer — columns of links
Build one section at a time, never all in one prompt.
Modern UI patterns (2026)
- Glass-morphism —
bg-white/80 backdrop-blur-xl border border-white/20 - Soft gradients — subtle background gradients with low-opacity colors
- Bento grids — mixed-size cards in a single grid
- Marquee logos — auto-scrolling logo strips
- Animated number counters — for stats sections
- Gradient text —
bg-clip-text text-transparentwith a gradient bg - Hover lifts —
hover:-translate-y-1 hover:shadow-lg transition-all - Skeleton loaders — instead of spinners
Accessibility (don't skip this)
- Color contrast ≥ 4.5:1 for body text (use a contrast checker)
- Minimum tap target 44×44px
- Focus rings on all interactive elements (
focus:ring-2) - Semantic HTML (
<button>not<div onClick>) - Alt text on every image
- Labels on every form input
Common mistakes to avoid
- Too many colors. 2-3 accent colors max.
- Mixing shadow scales. Pick one (md OR lg) and stick with it.
- Centering all the body text. Center the hero. Left-align everything else.
- Hardcoded font sizes everywhere. Use a type scale.
- No hover/focus states. Static interactive elements feel broken.
- Stock-photo people. They look fake. Use abstract illustrations or colored avatars.
- Building the whole landing page in one prompt. One section at a time.
Going deeper
- Colors: https://www.codebooks.ai/colors
- Typography: https://www.codebooks.ai/typography
- Spacing & Sizing: https://www.codebooks.ai/spacing
- Layout Patterns: https://www.codebooks.ai/layouts
- CSS Design Concepts: https://www.codebooks.ai/css-design-concepts
- Sections Gallery: https://www.codebooks.ai/sections-gallery