Battle-tested prompts for v0, Cursor, Claude and other AI tools. Copy, tweak, ship.
Build a hero section using a deep navy background (#0a0e27) with a soft aurora mesh gradient (purple → cyan → magenta) at 40% opacity. Use Syne 800 for an 80px headline, Plus Jakarta Sans 18px for the subhead. Add one pill-shaped CTA with a subtle inner glow. No stock illustrations.
Generate a 6-card bento grid (2 large + 4 small) in CSS Grid. Each card has rounded-3xl corners, 1px subtle border, soft inner gradient. Largest card spans 2 cols, contains a product screenshot placeholder. Use Geist headings, Inter body. White bg, ink text, no shadows.
Create an app shell with a 240px collapsible left sidebar (icon + label, hover states), a 56px topbar with command palette trigger (⌘K), and a content area with breadcrumbs. Use #0a0a0a sidebar, #fafafa content, Inter Tight everywhere, 13px base. Density: tight.
3 pricing cards with thick 4px black borders and 6px hard offset shadows. Cream background, ink type, one yellow accent card. Space Grotesk display, JetBrains Mono for prices. No gradients, no glow.
3-step onboarding with a chunky progress bar (rounded full, lime accent), oversized rounded buttons (radius-2xl), Baloo 2 headings. Each step has one big illustration slot, one input, one confetti micro-interaction on submit.
Pricing section with 3 frosted glass cards (backdrop-blur-2xl, white/10 bg, white/20 border) on a dark mesh-gradient background. Plus Jakarta Sans, oversized prices in Cal Sans 72px.
Single-column landing styled as a fake terminal: black bg, lime green Fira Code text, blinking cursor, ASCII-art logo, fake $ prompt commands typing out the value prop. CTA = `npm install ___`.
Magazine-style layout: 12-col grid, Bebas Neue 200px masthead, 2-col body in Lora 18px, drop caps, pull quotes, hairline rules between sections. Cream paper bg, ink type. No buttons — only text links.
Build a metric card: label (11px IBM Plex Mono uppercase tracked), giant number (Geist 48px), delta chip (green/red), 60-day sparkline using SVG paths. Tight padding, 1px border, no shadow.
Refactor all loading states from <Spinner /> to skeleton placeholders matching the actual content shape. Use shadcn <Skeleton /> with realistic widths (e.g. w-3/4 for titles, w-full h-32 for images).
Audit this page for mobile (375px). Fix: text overflowing, fixed widths, hover-only interactions, tap targets <44px, horizontal scroll. Use sm:/md:/lg: breakpoints, never assume hover.
I'm getting a hydration mismatch warning. Find any uses of Date.now(), Math.random(), window.*, localStorage in render bodies. Move them into useEffect or guard with typeof window !== 'undefined'.
Design an empty state: centered, soft icon (Lucide, 48px), one-line title, one-line description, one primary CTA. Use muted tones. Don't apologize — invite action.
Build label + input + helper + error pattern. 14px label, 16px input (prevents iOS zoom), 12px helper. Error state = red border + red helper, success = green check inline. Focus ring: 2px ring + offset.
Create two hero variants for the same product: (A) headline-first, single CTA, no image. (B) headline + subhead + screenshot mockup + dual CTA. Identical copy, different layouts. Same visual system.
Build a section with an animated mesh gradient backdrop, large rotating SVG glyph, headline that animates in word-by-word on scroll. Use framer-motion. Inter Tight 64px headline. Generous 160px vertical padding.
Build a toast notification system with 4 variants: success (green), error (red), warning (amber), info (blue). Each toast has an icon (Lucide), title, optional description, and auto-dismiss after 4s. Stack from bottom-right, animate in from right with framer-motion. Max 3 visible at once.
Add a dark mode toggle button using a sun/moon icon (Lucide). Store preference in localStorage. Apply 'dark' class to <html>. Use Tailwind dark: variants throughout. Animate the icon swap with a 200ms rotate + fade. No flash on load — read localStorage before paint.
Single-page waitlist landing: full-viewport hero with aurora gradient bg, centered headline (Syne 700 72px), one-line subhead, email input + submit button inline. On submit: replace form with 'You're on the list 🎉' message. Show a live counter '1,247 builders waiting'. No nav, no footer — pure conversion.
Audit this component for accessibility: check all images have alt text, all interactive elements are keyboard-reachable and have visible focus rings, color contrast meets WCAG AA (4.5:1 for text), form inputs have associated labels, ARIA roles are used correctly. List every violation with the fix.