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

  Copy
• 

  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.

  Copy
• 

  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:

  Copy
• 

  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.

  Copy
• 

  Replit AI/ Dashboard

  > 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

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

  Google Stitch/ Formula

  > Base Spec Template

  [Screen purpose] in a [vibe adjectives] style.
  
  DESIGN SYSTEM (REQUIRED):
  - Platform: [Web/Mobile], [Desktop-first/Mobile-first]
  - Theme: [Light/Dark], [modern/minimal/etc.]
  - Background: [name] (#hex)
  - Surface: [name] (#hex)
  - Primary accent: [name] (#hex) for primary CTAs
  - Text primary: (#hex), text secondary: (#hex)
  - Radius: [8–14px], shadows: subtle, typography: clear hierarchy
  
  PAGE STRUCTURE:
  1) Header: [logo/nav/search/etc.]
  2) Main: [cards/charts/forms/etc.]
  3) Footer / Bottom nav: [links/icons]
  
  COMPONENT SPECS:
  - [Component]: [count], [layout], [key fields], [states], [data stub]
  - Accessibility: ensure strong contrast and clear hierarchy.

  Copy
• 

  Google Stitch/ Formula

  > Scoped Edit Template

  Make ONLY this change while preserving all existing layout and styling:
  - Target: [screen name] → [component + location]
  - Change: [single visual or structural change]
  - Constraints: [specific size / alignment / color token]

  Copy
• 

  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. The portfolio belongs to a senior full-stack developer / creative engineer.
  
  VISUAL HIERARCHY (global eye flow)
  Hero heading → Rotating title ticker → About photo/video → Project cards → Contact CTA
  
  ANTI-PATTERNS (do NOT add)
  * No colorful gradients, mesh backgrounds, or decorative blobs
  * No dark/light mode toggle  dark only
  * No hamburger menu  hide nav links on mobile, show only logo + "Let's Talk" CTA
  * No parallax, scroll-jacking, or scroll-hijacking of any kind
  * No particle effects, cursor trails, or ambient canvas animations
  * No React Router  single page with smooth scroll via anchor links
  * No skeleton screens, loading spinners, or suspense boundaries
  * No emoji in any UI text
  * No stock avatar  use the provided video/image assets
  * No additional box-shadows beyond what liquid-glass and liquid-glass-strong provide
  * No component libraries beyond lucide-react icons  all UI is hand-built with Tailwind
  
  FONTS
  Import: https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=IBM+Plex+Mono:wght@300;400;500&family=Inter:wght@300;400;500;600&display=swap
  - Headings: Instrument Serif (italic for hero) → font-display
  - Body/UI: Inter → font-body
  - Code/accents: IBM Plex Mono → font-mono
  
  COLOR THEME (HSL, dark)
  --background: 0 0% 4%        --foreground: 0 0% 95%
  --accent: 145 80% 56%  ← terminal green, used ONLY on: blinking cursor, availability dot, project link hover underlines
  
  LIQUID GLASS (dark variant)
  .liquid-glass { background: rgba(255,255,255,0.02); backdrop-filter: blur(6px); box-shadow: inset 0 1px 1px rgba(255,255,255,0.06); }
  .liquid-glass::before { gradient border via mask-composite: exclude }
  .liquid-glass-strong { background: rgba(255,255,255,0.03); backdrop-filter: blur(40px) }
  
  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). Availability badge → h1 "I build things for" → 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 layout (60/40). Each: video with IntersectionObserver play/pause, liquid-glass card, project number, title, description, tech tags, "View Project" link with accent underline on hover.
  4. ABOUT  40/60 split. Left: portrait video (aspect-[3/4]). Right: heading, two bio paragraphs, divider, stats row (8+ years, 50+ projects, 3 startups, 100K+ users).
  5. TECH STACK  3-column grid of 6 liquid-glass cards. Each: category label, tech list with proficiency dots (5 circles, filled/empty).
  6. EXPERIENCE  vertical timeline, 4 entries. Each row: company + duration (30%) | role + description (70%). Separated by border-white/[0.06].
  7. CONTACT  centered. "Let's build something." heading. Email mailto CTA (liquid-glass-strong pill). GitHub, Twitter, LinkedIn icon buttons.
  8. FOOTER  copyright left, links right (font-mono, text-foreground/20).
  
  PERFORMANCE
  - Hero video: preload="auto"
  - All other videos: preload="none", IntersectionObserver (play at 50% visible, pause at 10%)
  - Framer Motion entrance: ease: [0.16, 1, 0.3, 1]
  - prefers-reduced-motion: skip all animations, show final state immediately
  - useReducedMotion() from Framer Motion on every animated element
  
  KEY DEPS: motion ^12.35.0, lucide-react ^0.462.0

  Copy
• 

  Lovable/ Landing Page

  > Product Launch Page

  Build a single-page product launch / showcase landing page using React + Vite + Tailwind CSS + TypeScript + Framer Motion (motion/react) + lucide-react. The product is a fictional premium wireless headphone called "Aura Pro." The aesthetic is "Apple meets Dieter Rams"  white/light backgrounds, bold editorial typography, massive product video, generous whitespace, and liquid glass UI accents. LIGHT theme only.
  
  VISUAL HIERARCHY
  Product hero video → Product name → Price → CTA → Features → Specs → Reviews
  
  ANTI-PATTERNS (do NOT add)
  * No dark mode toggle  light only
  * No decorative gradient blobs, mesh gradients, 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  all UI hand-built
  * No gradients on text
  * No border-radius larger than 1.5rem on any element
  * No colored section backgrounds  only white or very light gray
  
  FONTS
  Import: https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600;700&display=swap
  - Headings: Instrument Serif → font-display
  - Body/UI: Inter → font-body
  
  COLOR THEME (HSL, light)
  --background: 0 0% 100%     --foreground: 0 0% 8%
  --accent: 225 80% 56%  ← blue #2563EB, used ONLY on: "Add to Bag" CTA, price text, selected color swatch ring
  
  LIQUID GLASS (light variant)
  .liquid-glass { background: rgba(255,255,255,0.5); backdrop-filter: blur(20px); border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 1px 3px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.8); }
  .liquid-glass-strong { background: rgba(255,255,255,0.7); backdrop-filter: blur(40px); border: 1px solid rgba(0,0,0,0.08); }
  Note: NO ::before gradient border trick  subtle border + box-shadow is sufficient for light theme.
  
  SECTIONS
  1. NAVBAR  sticky, z-50, liquid-glass backdrop when scrolled. Logo "aura PRO" (Instrument Serif + tiny superscript). Center links (hidden mobile). "Buy" button with ShoppingBag icon, dark pill style.
  2. HERO  centered. Tagline above h1. "Aura Pro" at text-6xl→text-9xl (Instrument Serif). Product video below heading (aspect-[16/10], max-w-4xl, rounded-3xl). Price in accent blue "$549" + "or $45.75/mo". "Add to Bag" (accent blue) + "Learn more" (underline) CTA pair.
  3. FEATURES  bg-card section. Video banner (aspect-[21/9]). 4-card grid: Spatial Audio (Volume2 icon), 40-Hour Battery (Battery icon), Crystal Voice (Mic icon), Seamless Switch (Bluetooth icon). Each card: white bg, rounded-2xl, border.
  4. PRODUCT DEEP DIVE  55/45 split. Left: lifestyle video (aspect-[4/5]). Right: editorial heading "Designed to be forgotten." + 3 detail blocks (Materials, Adaptive Fit, Sustainability).
  5. SPECS  bg-card, 8-cell grid using gap-px trick (1px borders via bg color). Cells: 40mm driver, 20Hz–40kHz, 40hrs battery, 254g weight, Bluetooth 5.3, 30dB ANC, USB-C, 3-device multipoint.
  6. REVIEWS  3 cards, white bg, border. Each: 5 filled Star icons, blockquote, reviewer name + role.
  7. BUY CTA  DARK inverted section (bg-foreground). "Make it yours." heading in white. Color picker (3 swatches: Midnight/Silver/Ivory, useState for selection). "$549" price. "Add to Bag" button (white bg, dark text).
  8. FOOTER  copyright left, Privacy/Terms/Support center, Twitter/Instagram/Youtube icons right.
  
  PERFORMANCE
  - Hero video: preload="auto"
  - All other videos: preload="none", IntersectionObserver (play at 50%, pause at 10%)
  - Framer Motion: ease: [0.16, 1, 0.3, 1], useReducedMotion() on all animated elements
  - Mobile: Framer Motion scroll animations disabled below 768px (render at final state)
  - Glass effects: only navbar uses persistent backdrop-filter; others are below-fold
  
  KEY DEPS: motion ^12.35.0, lucide-react ^0.462.0
  Icons: ShoppingBag, ArrowUpRight, ArrowDown, Volume2, Battery, Mic, Bluetooth, Star, Twitter, Instagram, Youtube

  Copy
• 

  Claude Fable 5/ Refactoring

  > Legacy Codebase Refactor

  You are a staff software engineer who specializes in large-scale refactors.
  
  I'll give you a legacy module. Migrate it to a modern architecture without changing observable behavior.
  
  Task:
  1. Read the code and restate what it does in 3 bullets, so I can confirm you understood it correctly
  2. Propose the target structure — new files, their responsibilities, and boundaries — before writing any code
  3. Migrate incrementally: output each new file in full, with an old→new mapping noted at the top
  4. Preserve every public interface and side effect; explicitly call out anything that cannot be preserved
  
  Rules:
  - No behavior changes unless I approve them — if you spot a bug, flag it, do not silently fix it
  - Type every function; keep every edge case the original handled
  - Add a short migration note per file: what moved, what stayed, what to test
  - If the module is too large for one pass, work in ordered chunks and tell me exactly where you stopped
  
  Paste your legacy code below. Start with the 3-bullet summary and the target structure — do not write code until those two are done.

  Copy
• 

  Claude Fable 5/ Data Analysis

  > Data Analysis & Executive Report

  You are a senior data analyst who writes decision-ready executive reports.
  
  I'll give you a dataset (a CSV, a table, or a description of one). Produce an analysis a busy executive can act on.
  
  Deliver in this exact order:
  1. TL;DR — 3 bullets: the headline number, the biggest change, and the single recommendation
  2. Key insights — 5 bullets, each a claim paired with the figure that backs it (no claim without a number)
  3. Chart — hand-code ONE clean SVG/HTML chart that best shows the main story (bar for comparison, line for trend); label the axes; no chart library
  4. Recommendation — one paragraph on what to do next, with the trade-off stated plainly
  
  Rules:
  - Use only numbers present in the data — never invent figures or round away real precision
  - If the data can't support a claim, write "not supported by this data" instead of guessing
  - Call out one caveat or data-quality risk you noticed
  - No filler — every sentence earns its place
  
  Paste or describe your dataset below.

  Copy
• 

  Claude Fable 5/ Vision

  > Screenshot to Production Code

  You are a frontend engineer with a precise eye for turning designs into code.
  
  I'll attach a screenshot of a UI. Reconstruct it as clean, production HTML + CSS that visually matches.
  
  Task:
  1. Describe what you see first — layout regions, type scale, colors (as hex), spacing rhythm — so I can confirm your read before you build
  2. Rebuild it as a single standalone HTML file, all CSS inline, no framework
  3. Match the real values you can infer: font family, weights, exact colors, radius, gaps — don't settle for "close enough"
  4. Use semantic HTML (header / nav / main / section) and the real text from the screenshot, never lorem ipsum
  
  Rules:
  - Pixel-honest: if the screenshot shows a 2px border, ship a 2px border
  - Responsive: state how it should reflow at 375px and implement it
  - No icon libraries — inline SVG or CSS shapes for any glyphs
  - If part of the screenshot is ambiguous or cut off, flag it and pick the most likely interpretation
  
  Attach the screenshot and start with your description of what you see.

  Copy
• 

  Claude Fable 5/ Security

  > Defensive Code Security Audit

  You are a senior application security engineer performing a defensive code review.
  
  I'll paste application code. Audit it against the OWASP Top 10 and report findings so I can fix them.
  
  For each issue, give:
  1. Category (e.g. SQL Injection, XSS, Broken Access Control) + severity (High / Medium / Low)
  2. Exact location — file and line — and the input path that reaches it
  3. Why it's exploitable, in one sentence (describe the mechanism only — no weaponized exploit code)
  4. The fix: a corrected snippet using the safe pattern (parameterized query, output encoding, authorization check)
  
  Rules:
  - Defensive only — report vulnerabilities and remediations, never working exploits or payloads
  - Rank findings most-severe first; if a category is clean, say so
  - Prefer framework-native mitigations over hand-rolled code
  - End with a "hardening checklist" of the top 5 fixes by impact
  
  Paste your code below.

  Copy