AIPrompts
That Actually
Work

A few demos while we expand the library. Pre-engineered templates for Lovable, Claude, ChatGPT, and Gemini — each follows a proven structure: Role, Design System, Sections, Constraints. No vague instructions. No broken outputs. Copy, paste, ship.

• 

  Claude 4.5 Sonnet/ Coding

  97% · 33

  > 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.

  Copy
• 

  Claude 4.5 Opus/ Portfolio

  100% · 5

  > 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.

  Copy
• 

  Google Stitch/ Design

  100% · 39

  > 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.

  Copy
• 

  Gemini 3.5 Pro/ Coding

  98% · 41

  > 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:

  Copy
• 

  Replit AI/ Dashboard

  100% · 39

  > Analytics Dashboard

  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.

  Copy
• 

  Google Antigravity/ Design

  100% · 39

  > 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.

  Copy
• 

  Lovable/ Portfolio

  100% · 21

  > 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

  Copy
• 

  Lovable/ Landing Page

  100% · 11

  > 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

  Copy