UI Design Prompts Library

Build three reusable marketing sections in Next.js with Tailwind. Hero: 'py-24 lg:py-32' with headline 'text-5xl lg:text-6xl font-bold tracking-tight text-balance', subtext 'mt-6 text-lg text-zinc-600 max-w-2xl mx-auto', dual CTAs (primary bg-zinc-900 text-white, secondary ring-1 ring-zinc-300). Logo cloud: 'grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-8 items-center' with grayscale logos gaining color on hover. Feature bento: 'grid lg:grid-cols-3 gap-4' where the first card spans lg:col-span-2, each 'rounded-2xl bg-zinc-50 p-8 ring-1 ring-zinc-200'. Dark mode via dark: variants throughout; headings must maintain 4.5:1 contrast in both themes.

Build a responsive subscription analytics dashboard for a growth manager using React, TypeScript, Tailwind CSS, and Recharts. Prioritize MRR, churn, trial conversion, and active accounts. On desktop use a collapsible sidebar and a 12-column content grid; on mobile use a top bar and stack the KPI cards. Add a date-range filter, comparison period, loading skeleton, empty state, API error state, keyboard-visible focus, text labels for every status color, and a data table that exposes the chart values. Return the page component, typed sample data, and a short verification checklist.

Build a responsive dark-mode account settings page for SaaS account administrators with React and Tailwind CSS v4. Use #09090b for the page, #131316 for cards, and #1a1a20 for raised surfaces. Start with #fafafa primary text and #a1a1aa secondary text, then verify contrast against each actual background. Require at least 4.5:1 for normal text and 3:1 for large text. Define hover, focus, disabled, loading, empty, and error states. Support keyboard navigation, reduced motion, and a light/dark/system theme preference. Use CSS design tokens and @custom-variant for manual dark mode. Return the component, theme CSS, and a short verification checklist; do not claim accessibility compliance without testing.