ChangelogThanks to our recent supportersA few more voluntary tips came in this week - thank you to everyone who chipped in, named or anonymous. Every note gets read, and the acknowledgment list is updated.See the thank-you list
Prompt Library
AI UI Prompt Library
Copy AI UI prompts with explicit layout, color, responsive behavior, and interaction states for websites and dashboards. Start with the complete examples below, then explore prompts by page type or visual style.
12 topicsUI / landing / dashboardChatGPT / Claude / Claude Code / Codex
Copyable Examples
Choose a task and copy the complete prompt
These are prompt examples to adapt to your project. Add your product content and existing code, then review and test the generated result. Each example links to its source collection for further guidance.
Tailwind landing page sections
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.
