# When to use these instructions Use this skill whenever the user is making visual decisions about their app: picking colors, choosing fonts, adjusting spacing, planning a layout, designing a landing page, or making something 'look more professional'. Apply the design vocabulary so the AI gets it right the first time. --- # 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: `#9772F3` purple + `#FB5C8D` pink + `#FCCA36` yellow - Minimal corporate: `#0F172A` slate + `#0EA5E9` sky + `#FFFFFF` white - Dark luxury: `#0A0A0F` near-black + `#16161D` card + `#8B5CF6` violet - Warm editorial: `#422006` brown + `#F97316` orange + `#FFFBEB` cream ### 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) with `leading-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: 1. **Color scheme** — 2-3 hex codes 2. **Mood** — minimal / playful / corporate / dark / soft / bold 3. **Spacing density** — generous / tight / balanced 4. **Corner style** — sharp (rounded-none) / soft (rounded-xl) / pill (rounded-full) 5. **Shadow style** — none / subtle (shadow-sm) / dramatic (shadow-2xl) 6. **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: 1. **Navbar** — logo + nav + CTA 2. **Hero** — headline, subtitle, CTA, optional visual 3. **Social proof** — logos or testimonials 4. **Features** — 3-6 cards explaining what it does 5. **Showcase** — screenshots or demo 6. **Pricing** — cards or table (if monetized) 7. **CTA banner** — final push 8. **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-transparent` with 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 (`