A free library of structured AI prompts for Claude, Lovable, Gemini and Google Stitch, plus hand-checked Claude skills. The design prompts spell out the design system, the sections and the constraints. Copy one into your tool and edit the brand details.
Most design prompts follow the same structure: what to build, the design system, the sections and the constraints. Pick a library, or start with the samples below.
Create a SaaS analytics dashboard that looks like it belongs on Awwwards.
Structure:
- Glass sidebar with backdrop-blur effects and icon-only navigation
- Card-based main content with subtle shadows (0 2px 8px rgba(0,0,0,0.08))
- Interactive charts with gradient fills (area charts, not line)
- Floating action buttons with smooth spring animations
- Dark mode optimized with perfect contrast ratios
Palette: Background #0F172A, card surface #1E293B, accent emerald #10B981, secondary blue #3B82F6, text primary #F1F5F9, text muted #94A3B8.
Font: Inter for everything, weight 400 body / 600 headings.
Top bar: User avatar, notification bell with red dot badge, search input with ⌘K shortcut hint. Main grid: 4 metric cards (revenue, users, conversion, MRR) with sparkline mini-charts. Below: large area chart (weekly trend) and activity feed sidebar.
Make it feel like a premium product, not an internal tool.
Reference: Linear, Stripe Dashboard, Vercel Analytics.
Google Stitch/ Design
> App Redesign
Redesign this screen to feel like a top-tier fintech app.
Keep the existing layout structure but elevate every detail:
- Replace flat cards with layered depth: subtle shadows, 1px borders at 5% opacity, soft inner glow on hover
- Add breathing whitespace — increase padding by 40% everywhere
- Swap generic icons for Phosphor icons (thin weight)
- Typography: SF Pro Display for headings (20px/600), Inter for body (14px/400), monospace for numbers and amounts
- Color: keep the current primary but desaturate by 15%, add a warm neutral gray (#F8F7F4) as the page background
- Micro-interactions: cards scale 1.01 on hover with 200ms ease-out, buttons have a subtle press state (scale 0.98)
- Round all corners to 16px for cards, 12px for buttons, 8px for inputs
The goal is premium polish, not a redesign. Same structure, 10x better feel.
Reference: Mercury, Ramp, Arc browser.
Claude 4.5 Sonnet/ Coding
> Full-Stack API Builder
You are a senior backend architect who writes production-grade code.
Tech: Next.js 15 App Router, TypeScript strict mode, Supabase (Postgres).
Build a complete REST API for a bookmark manager app:
1. POST /api/bookmarks — create bookmark (validate URL, auto-fetch page title via og:title, store with user's ip_hash)
2. GET /api/bookmarks — list all, support ?tag= filter and ?sort=newest|popular
3. DELETE /api/bookmarks/[id] — soft delete (set deleted_at timestamp)
Rules:
- Zod validation on all inputs, return 400 with field-level errors
- Rate limit: 20 requests per minute per IP (use in-memory Map with TTL)
- Never expose raw IPs — SHA-256 hash before storing
- Return proper HTTP status codes, not 200 for everything
- Type every function, every param, every return. Zero use of any.
Output complete route.ts files ready to drop into app/api/. No stubs.
Gemini 3.5 Pro/ Coding
> Code Review & Refactor
You are a principal engineer doing a production code review.
I will paste a React component below. Analyze it and return exactly 3 things:
1. BUGS — any logic errors, race conditions, memory leaks, or missing edge cases. For each bug: quote the line, explain what breaks, and show the fix.
2. PERFORMANCE — identify unnecessary re-renders, missing memoization, expensive computations in render path, or bundle size concerns. Only flag issues that would matter at 10K+ users, not micro-optimizations.
3. REFACTORED CODE — rewrite the component applying your fixes. Keep the same API (props, exports). Add zero new dependencies. Do not change what works. Do not add comments explaining obvious code.
Rules:
- If there are no real bugs, say "No bugs found" — do not invent issues.
- Rank each finding as P0 (breaks functionality), P1 (degrades UX), or P2 (code quality).
- Be direct. No compliments, no filler. Just the analysis.
Component to review:
Claude 4.5 Opus/ Portfolio
> Portfolio Landing Page
You are a senior frontend engineer and UI designer.
Tech: Next.js 15, Tailwind CSS v4, Framer Motion, shadcn/ui.
Build a personal portfolio landing page. Single page, 4 sections:
1. Hero — full viewport, large display type name, one-line role tagline, subtle grain texture background, staggered fade-in animation on load
2. Projects — 3-column bento grid, each card has screenshot, title, tech tags, hover lifts with spring ease
3. About — split layout: left is a short bio paragraph, right is a vertical skill bar chart (animated on scroll into view)
4. Contact — minimal: email link, GitHub, LinkedIn icons, no form
Design rules:
- Monochrome palette: zinc-950 background, zinc-100 text, single accent color #6366f1 for interactive elements only
- Font: Inter 400/600 weights, 16px base, 1.6 line height
- Spacing: 8px grid system, generous whitespace
- Mobile-first: stacks to single column below 768px
- No decorative images. Typography and spacing do the work.
Output the complete page component. No placeholders, no TODO comments.
Google Antigravity/ Design
> Front-end Designer & Developer
You are the top 0.1% designer and developer for the world's cutting-edge innovation on front-end design and development. You are tasked to create a full landing page with {Dither + Shaders} using {WebGL + ThreeJs} in the styling for the AI company.
- Focus mainly on the design part, not the development.
- Import all necessary files and libraries:
- Three.js
- WebGL
- GSAP
- Any other animation libraries related to 3D development.
Lovable/ Portfolio
> Developer Portfolio
Build a single-page developer portfolio using React + Vite + Tailwind CSS + TypeScript + Framer Motion (motion/react) + lucide-react. The aesthetic is luxury terminal — black backgrounds, monospace accents, serif editorial headings, liquid glass cards, and cinematic video hero.
ANTI-PATTERNS (do NOT add)
* No colorful gradients — dark only
* No hamburger menu — hide nav links on mobile, show only logo + Let's Talk CTA
* No parallax or scroll-hijacking
* No particle effects or ambient canvas
* No React Router — single page smooth scroll
* No component libraries beyond lucide-react
FONTS: Instrument Serif (font-display, italic hero), IBM Plex Mono (font-mono accents), Inter (font-body)
COLOR: --background: 0 0% 4%, --foreground: 0 0% 95%, --accent: 145 80% 56% (terminal green — ONLY on blinking cursor, availability dot, project link hover underlines)
SECTIONS
1. NAVBAR — fixed z-50, logo alex.dev with green pulse dot, center pill nav (hidden mobile), Let's Talk CTA with liquid-glass-strong
2. HERO — min-h-screen video background (autoPlay muted loop). Animated title ticker cycling the web / startups / humans / the future with blur enter/exit. Blinking green cursor.
3. SELECTED WORK — 3 project cards alternating left/right 60/40. Each: video (IntersectionObserver play/pause), liquid-glass, number, title, description, tech tags, accent underline link.
4. ABOUT — 40/60 split. Left: portrait video aspect-[3/4]. Right: bio + stats (8+ years, 50+ projects, 3 startups, 100K+ users).
5. TECH STACK — 3-column grid, 6 liquid-glass cards, category label + tech list with proficiency dots.
6. EXPERIENCE — 4-entry vertical timeline, company+duration (30%) | role+description (70%).
7. CONTACT — Let's build something. Email mailto CTA, GitHub/Twitter/LinkedIn icons.
8. FOOTER — copyright left, links right.
PERFORMANCE: Hero video preload=auto. All others preload=none, IntersectionObserver (play 50%, pause 10%). Framer Motion ease [0.16,1,0.3,1]. useReducedMotion() on all animated elements.
DEPS: motion ^12.35.0, lucide-react ^0.462.0
Lovable/ Landing Page
> Product Launch Page
Build a single-page product launch landing page using React + Vite + Tailwind CSS + TypeScript + Framer Motion (motion/react) + lucide-react. Product: Aura Pro premium wireless headphones. Aesthetic: Apple meets Dieter Rams — white/light backgrounds, bold editorial typography, massive product video, generous whitespace, liquid glass accents. LIGHT theme only.
ANTI-PATTERNS (do NOT add)
* No dark mode toggle — light only
* No decorative gradient blobs or aurora effects
* No hamburger menu — hide nav links on mobile, show only logo + Buy Now CTA
* No parallax or scroll-hijacking
* No component libraries beyond lucide-react
* No gradients on text
* No border-radius larger than 1.5rem
FONTS: Instrument Serif (font-display), Inter (font-body)
COLOR: --background: 0 0% 100%, --foreground: 0 0% 8%, --accent: 225 80% 56% (blue — ONLY on Add to Bag CTA, price text, selected color swatch ring)
LIQUID GLASS (light): .liquid-glass { background: rgba(255,255,255,0.5); backdrop-filter: blur(20px); border: 1px solid rgba(0,0,0,0.06); }
SECTIONS
1. NAVBAR — sticky z-50 liquid-glass, logo aura PRO, center links (hidden mobile), dark Buy pill with ShoppingBag icon.
2. HERO — Aura Pro at text-9xl Instrument Serif, product video (aspect-[16/10] max-w-4xl rounded-3xl), price $549 in accent blue, Add to Bag (accent) + Learn more CTAs.
3. FEATURES — bg-card section, video banner (aspect-[21/9]), 4-card grid: Spatial Audio (Volume2), 40-Hour Battery (Battery), Crystal Voice (Mic), Seamless Switch (Bluetooth).
4. PRODUCT DEEP DIVE — 55/45 split. Lifestyle video left. Right: Designed to be forgotten + 3 blocks (Materials, Adaptive Fit, Sustainability).
5. SPECS — bg-card, 8-cell gap-px grid: 40mm, 20Hz-40kHz, 40hrs, 254g, Bluetooth 5.3, 30dB ANC, USB-C, 3 devices.
6. REVIEWS — 3 cards, 5 filled Star icons each, blockquote, reviewer name + role.
7. BUY CTA — DARK inverted section (bg-foreground). Color picker (Midnight/Silver/Ivory, useState). $549. White Add to Bag button.
8. FOOTER — copyright, Privacy/Terms/Support links, Twitter/Instagram/Youtube icons.
PERFORMANCE: Hero video preload=auto. Others preload=none, IntersectionObserver. Mobile: Framer Motion disabled below 768px.
DEPS: motion ^12.35.0, lucide-react ^0.462.0
Stop writing prompts from scratch. Every prompt here is built for one specific job. Pick your tool (Claude, Lovable, Gemini or Google Stitch), copy the prompt and paste it. The design prompts spell out the design system, the sections and the constraints, and the coding prompts spell out the output format, so the model has far less to guess.
Which AI is best for complex coding?
For deep architectural work and hard debugging, we reach for Claude Opus. For rapid UI scaffolding, tools like Lovable paired with our React and Tailwind prompts are a good fit. Use both: hard problems in Claude, fast iteration in Lovable.
How do I get Claude to follow a design system?
Wrap visual rules in <design_spec> tags and functional rules in <logic_spec> tags. Structured XML keeps Claude from drifting. It reads exact hex values, font names and spacing units literally, not as suggestions.
What makes a good Lovable or Replit prompt?
Describe the vibe first, then the components. Skip vague phrases like 'modern SaaS look'. State the tech stack, the color tokens, the section order, and what NOT to generate.
How does voting on prompts work?
Every prompt card has a thumbs up and a thumbs down. Votes are anonymous. Once a prompt has votes, its card shows the share of positive votes and the total count, so you can see how it has worked for other people. A prompt with no votes yet shows no score.
Can I use these prompts for free?
Yes. It is an open-access library with no account and no paywall.
