Why Most Vibe Coding Prompts Fail (And How to Fix Yours)
Vibe coding has changed how we build software. Instead of writing every line by hand, you describe what you want and an AI model — Claude, GPT-4, Gemini, DeepSeek, or others — generates working code in seconds. But here is the uncomfortable truth: the quality of your output is directly proportional to the quality of your prompt.
A vague prompt like "build me an app" produces vague, generic code. A precise prompt produces production-grade components you can ship the same day. The difference is not the AI model. It is the prompt.
This article gives you 50 vibe coding prompts that actually work — tested, refined, and ready to copy-paste. Each prompt is categorized by use case, explained so you understand why it works, and paired with a description of what you should expect as output.
Whether you are using Claude, GPT-4o, Gemini 2.5 Pro, DeepSeek V3, MiniMax, or Qwen through a platform like Serenities AI, these prompts will dramatically improve your results.
The CLEAR Framework for Vibe Coding Prompts
Before diving into the prompts, let us establish a framework. The best vibe coding prompts follow what we call the CLEAR pattern:
Context — Tell the AI what the project is, what already exists, and what tech stack you are using.
Language — Specify the programming language, framework, and any libraries you want (or want to avoid).
Examples — Reference existing designs, patterns, or behaviors you want to replicate.
Action — State exactly what you want the AI to build, fix, or change.
Result — Describe the expected output format, file structure, or behavior.
Here is a concrete comparison:
Bad Prompt
Build me a pricing page.Good Prompt (Using CLEAR)
Context: I am building a SaaS product for project management. The app uses Next.js 14 with the App Router and Tailwind CSS.
Language: TypeScript, React server components where possible.
Examples: The pricing page should look similar to Linear's pricing page — clean, minimal, with a toggle between monthly and annual billing.
Action: Build a responsive pricing page with three tiers: Free ($0/mo), Pro ($29/mo), and Enterprise (custom pricing). Include a monthly/annual toggle where annual shows a 20% discount. Each tier should list 5-6 features with checkmarks.
Result: A single page.tsx file I can drop into my app/pricing directory. Use Tailwind for all styling. No external UI libraries.The second prompt produces a complete, usable component. The first produces something you will spend an hour fixing.
How to Iterate on Prompts
Even great prompts sometimes need refinement. Here is the iteration cycle that works best with vibe coding:
Start broad, then narrow. Begin with the overall structure, then ask for specific sections or features in follow-up prompts.
Reference the output. Say "In the component you just created, change the header to..." rather than repeating the entire prompt.
Ask for alternatives. Say "Give me three different approaches to the navigation layout" to explore options before committing.
Specify constraints last. Once the base works, add constraints: "Now make it accessible with proper ARIA labels" or "Add loading states and error boundaries."
Common Prompt Mistakes to Avoid
Before we get to the 50 prompts, here are the five mistakes that ruin most vibe coding sessions:
1. Too Vague
Build me an app for managing tasks.This gives the AI no constraints. You will get a generic to-do app with random tech choices. Always specify the stack, scope, and style.
2. Too Specific on Implementation
Use React useState hook to create a variable called isOpen, then use useEffect with an empty dependency array to fetch data from /api/tasks using fetch(), then map over the results using .map() and render each one in a div with className="task-item".If you are dictating every line, you are not vibe coding — you are just typing slowly. Describe the what and the why, not the how.
3. Not Specifying Tech Stack
Create a login form with validation.Login form in what? React? Vue? Svelte? Plain HTML? With which validation library? The AI will guess, and it will guess wrong for your project.
4. Not Mentioning Design or Styling
Build a dashboard with charts showing sales data.Without styling guidance, you will get unstyled or inconsistently styled output. Always mention your CSS framework (Tailwind, CSS modules, styled-components) and design references.
5. Forgetting Error Handling and Edge Cases
Build a file upload component.What happens when the file is too large? Wrong format? Network fails mid-upload? If you do not mention edge cases, the AI will not handle them. Always add: "Include error handling for [specific cases] and loading states."
Category 1: Landing Pages and Marketing Sites (Prompts 1–8)
Prompt 1: SaaS Hero Section with Animated Gradient
Build a hero section for a SaaS landing page using Next.js 14 App Router and Tailwind CSS.
Requirements:
- Large headline with a gradient text effect (blue to purple) that subtly animates
- Subheadline below it (16-20 words max) in muted gray
- Two CTA buttons side by side: primary "Start Free" (filled, blue) and secondary "Watch Demo" (outlined)
- A hero image placeholder on the right side (use a rounded div with a subtle shadow as placeholder)
- Fully responsive: stacked layout on mobile, side-by-side on desktop
- Add a subtle fade-in animation on page load using CSS only (no JS animation libraries)
Output a single React component file with TypeScript.Why it works: It specifies the exact visual treatment (gradient, animation), layout behavior at different breakpoints, and constraints (CSS-only animations). The AI has zero ambiguity about what to produce.
Expected output: A complete hero component with Tailwind classes, responsive grid, and CSS keyframe animations — ready to drop into your app.
Prompt 2: Feature Grid with Icons
Create a features section for a SaaS marketing site. Use Next.js and Tailwind CSS.
- Display 6 features in a 3-column grid (2 columns on tablet, 1 on mobile)
- Each feature card has: an icon placeholder (use a colored circle with an emoji), a bold title, and a 2-sentence description
- Cards should have a subtle hover effect (slight lift with shadow)
- Use these features: AI Code Generation, Visual App Builder, One-Click Deploy, Team Collaboration, Custom Domains, Built-in Analytics
- Color scheme: dark background (#0a0a0a), white text, accent color #6366f1 for icon backgrounds
- TypeScript, no external icon libraries
Output a single component file.Why it works: It provides exact content, exact colors, exact grid behavior, and even the hover interaction. No guessing needed.
Expected output: A polished feature grid component with responsive columns and hover animations.
Prompt 3: Pricing Table with Toggle
Build a pricing section with monthly/annual toggle. Next.js 14, TypeScript, Tailwind CSS.
Three tiers:
1. Starter — $0/mo (free forever) — 3 projects, 1GB storage, community support
2. Pro — $29/mo ($24/mo annual) — unlimited projects, 50GB storage, priority support, custom domains
3. Enterprise — $99/mo ($79/mo annual) — everything in Pro plus SSO, audit logs, dedicated support, SLA
Requirements:
- Toggle switch between Monthly and Annual at the top (show "Save 20%" badge next to Annual)
- Pro tier should be visually highlighted as "Most Popular" with a border accent and badge
- Each tier: name, price, description, feature list with checkmarks, CTA button
- CTA buttons: Starter="Get Started", Pro="Start Free Trial", Enterprise="Contact Sales"
- Responsive: 3 columns desktop, stacked mobile
- Animate price change on toggle (CSS transition on the number)
Output a single client component with 'use client' directive.Why it works: Every tier, price, feature, and interaction is spelled out. The AI produces a complete, working pricing page.
Expected output: A client component with state management for the toggle, smooth price transitions, and a responsive three-column layout.
Prompt 4: Testimonial Carousel
Create a testimonial section with a horizontal carousel. Next.js 14, TypeScript, Tailwind CSS. No external carousel libraries — build it with CSS scroll-snap.
- Show 6 testimonials in a horizontal scrollable container
- Each card: avatar placeholder (colored circle with initials), name, role/company, star rating (1-5 filled stars), quote text
- Cards should snap into place when scrolling
- Show subtle left/right arrow buttons on desktop (hidden on mobile where swipe works naturally)
- Card style: white background, rounded-xl, subtle shadow, p-6
- Include dot indicators below showing current position
Use dummy testimonial data with realistic names and quotes about AI-powered development tools.
Output a single client component.Why it works: Specifying CSS scroll-snap instead of a library means the output is dependency-free and lightweight. The detailed card structure eliminates follow-up questions.
Expected output: A smooth-scrolling testimonial carousel with snap behavior, navigation arrows, and dot indicators.
Prompt 5: FAQ Accordion
Build an FAQ accordion section. Next.js 14, TypeScript, Tailwind CSS.
- 8 FAQ items about an AI app-building platform
- Each item: question (bold, clickable) and answer (hidden by default, expands on click)
- Smooth height animation when opening/closing (use CSS grid trick: grid-template-rows 0fr to 1fr)
- Only one item open at a time (clicking a new one closes the previous)
- Plus/minus icon rotates on open/close
- Section title: "Frequently Asked Questions" centered above
- Max-width 768px, centered on page
Write realistic questions about pricing, AI models, deployment, custom domains, data privacy, team collaboration, supported frameworks, and export options.
Output a single client component.Why it works: The CSS grid animation trick is specified explicitly, which produces smoother animations than the typical max-height hack. The single-open constraint is clearly stated.
Expected output: An accessible accordion component with smooth expand/collapse animations and auto-close behavior.
Prompt 6: Newsletter Signup with Validation
Build a newsletter signup section. Next.js 14 App Router, TypeScript, Tailwind CSS.
- Centered section with a heading "Stay in the Loop" and subtext about product updates
- Email input field with inline validation (check valid email format on blur)
- Submit button next to the input on desktop, full-width below on mobile
- States: default, loading (show spinner in button), success (replace form with "You're in!" message with checkmark), error (show red text below input)
- The form should POST to /api/newsletter with JSON body { email: string }
- Use React useActionState or useTransition for the submission
- Add subtle background pattern or gradient behind the section
- Accessible: proper labels, aria attributes, focus states
Output a client component and a separate route handler file for the API endpoint (just return success for now).Why it works: It covers every state (default, loading, success, error), specifies the API contract, and asks for accessibility — three things most prompts forget.
Expected output: Two files: a polished signup component with full state management and a stub API route.
Prompt 7: Social Proof Bar
Build a social proof / logos bar section. Next.js 14, TypeScript, Tailwind CSS.
- Text above: "Trusted by teams at" in small muted text, centered
- Below: a horizontal row of 8 company logo placeholders (use styled divs with company name text as placeholder — do not use actual logos)
- Logos should be in a continuous marquee animation (scroll left infinitely, seamless loop)
- Grayscale by default, full color on hover
- On mobile: smaller logos, same marquee
- Use CSS animation only, no JS intervals
- Companies: use generic names like "Acme Corp", "NovaTech", "Skyline Inc", "DataForge", "CloudPeak", "Nexus Labs", "Quantum AI", "StackBridge"
Output a single component.Why it works: The marquee effect with CSS-only animation is specified, along with the grayscale-to-color hover treatment. Realistic placeholder names keep the output usable.
Expected output: An infinitely scrolling logo bar with smooth CSS animation and hover color transitions.
Prompt 8: Full Landing Page Assembly
Create a complete landing page layout that combines these sections in order. Next.js 14 App Router, TypeScript, Tailwind CSS.
Sections (top to bottom):
1. Navigation bar — logo text on left, 4 nav links center, "Get Started" button right. Sticky on scroll with backdrop blur.
2. Hero — large headline, subheadline, two CTA buttons, abstract graphic placeholder on right
3. Social proof bar — "Trusted by 10,000+ developers" with logo placeholders, marquee scroll
4. Features grid — 6 features in 3-col grid with icon placeholders
5. How it works — 3 steps with numbered circles, connecting lines between them
6. Testimonials — 3 testimonial cards in a row
7. Pricing — 3-tier pricing table with monthly/annual toggle
8. FAQ — 6-item accordion
9. CTA banner — full-width dark section with headline and email signup
10. Footer — 4-column links grid, copyright, social icon placeholders
Requirements:
- Consistent color scheme: dark theme, primary accent #6366f1, background #09090b
- Smooth scroll between sections with scroll-margin-top for sticky nav offset
- All sections should have proper id attributes for anchor navigation
- Fully responsive at all breakpoints
- Page should feel cohesive — consistent spacing (py-20 for sections), typography scale, and border treatments
Output a single page.tsx file. Extract section data (features, testimonials, pricing, FAQ) into a const object at the top of the file for easy editing.Why it works: This is the "full assembly" prompt — it lists every section in order with a unified design system. The data extraction instruction makes the output easy to customize.
Expected output: A complete, production-quality landing page in a single file with all sections, responsive design, and centralized content data.
Category 2: SaaS and Web Apps (Prompts 9–18)
Prompt 9: Authentication Flow
Build a complete authentication UI with three pages: Sign Up, Sign In, and Forgot Password. Next.js 14 App Router, TypeScript, Tailwind CSS.
Sign Up page:
- Fields: Full Name, Email, Password, Confirm Password
- Password strength indicator (weak/medium/strong with color bar)
- "By signing up you agree to Terms" checkbox
- Google and GitHub OAuth buttons above the form with divider "or continue with email"
Sign In page:
- Fields: Email, Password
- "Remember me" checkbox and "Forgot password?" link
- Same OAuth buttons
Forgot Password page:
- Email field only
- Submit sends reset link
- Success state shows "Check your email" message
All pages:
- Centered card layout (max-w-md) with subtle border and shadow
- Form validation on submit with inline error messages
- Loading state on buttons during submission
- Each page links to the others ("Already have an account? Sign in")
- Use server actions for form submission (stub the logic, just validate inputs)
Output three page.tsx files with a shared AuthLayout component.Why it works: It covers three related pages in one prompt with shared layout, ensuring visual consistency. Every field, validation rule, and state is specified.
Expected output: Four files — three page components and one shared layout — with complete form validation and state handling.
Prompt 10: Data Table with Search, Sort, and Pagination
Build a data table component for managing users in an admin panel. Next.js 14, TypeScript, Tailwind CSS. No external table libraries.
Features:
- Columns: Avatar (circle with initials), Name, Email, Role (badge), Status (active/inactive dot), Joined Date, Actions (dropdown)
- Search bar above table that filters by name or email (client-side, debounced 300ms)
- Click column headers to sort (ascending/descending, show arrow indicator)
- Pagination: 10 rows per page, show "Showing 1-10 of 97" text, Previous/Next buttons, page number buttons
- Row hover highlight
- Actions dropdown per row: Edit, Deactivate, Delete (with red text)
- Responsive: horizontal scroll on mobile with sticky first column
- Empty state when search returns no results: illustration placeholder + "No users found" text
Generate 30 rows of realistic dummy user data.
Output a single client component.Why it works: Every column type, interaction (search, sort, pagination), and edge case (empty state) is specified. The 30 rows of dummy data makes it immediately testable.
Expected output: A fully interactive data table with client-side search, multi-column sorting, pagination controls, and responsive horizontal scrolling.
Prompt 11: Multi-Step Form Wizard
Build a multi-step form wizard for user onboarding. Next.js 14, TypeScript, Tailwind CSS.
4 steps:
1. Personal Info — name, email, avatar upload placeholder
2. Company Info — company name, size dropdown (1-10, 11-50, 51-200, 200+), industry dropdown
3. Preferences — checkboxes for notification preferences, timezone selector, theme toggle (light/dark)
4. Review — summary of all entered data with edit buttons per section
Requirements:
- Step indicator at top showing all 4 steps with current highlighted (numbered circles connected by lines)
- Next/Back buttons at bottom
- Validate current step before allowing Next (show inline errors)
- Form state persists across steps (use React state, not URL params)
- Final step has "Complete Setup" button
- Animate transitions between steps (slide left/right)
- Progress bar below step indicator showing percentage complete
Output a client component with step sub-components.Why it works: The step content, validation rules, navigation behavior, and animation direction are all specified. The review step with edit buttons is a nice UX detail that the AI will implement because you asked.
Expected output: A wizard component with four step sub-components, shared state management, slide animations, and a progress indicator.
Prompt 12: Real-Time Chat Interface
Build a chat interface UI (front-end only, no WebSocket). Next.js 14, TypeScript, Tailwind CSS.
Layout:
- Left sidebar (280px): list of conversations with avatar, name, last message preview, timestamp, unread count badge
- Main area: chat header (avatar + name + online status), message list, input bar at bottom
- Right panel (hidden by default, toggle with info button): contact details, shared files, shared media
Messages:
- Sent messages: right-aligned, blue background, white text
- Received messages: left-aligned, gray background, dark text
- Show avatar next to received messages
- Group consecutive messages from same sender (only show avatar on first)
- Timestamp shown between message groups (e.g., "Today", "Yesterday", "March 15")
- Support message types: text, image placeholder, file attachment placeholder
Input bar:
- Text input with auto-grow (multiline)
- Attachment button, emoji button placeholder, send button
- "User is typing..." indicator above input
Generate 3 conversations with realistic message history.
Output a client component.Why it works: The three-panel layout, message grouping logic, timestamp separators, and typing indicator are all things that would take hours to specify through iteration. One detailed prompt gets it all.
Expected output: A complete chat UI with sidebar, message list with grouping, and input bar — styled and populated with sample conversations.
Prompt 13: Kanban Board
Build a Kanban board for project management. Next.js 14, TypeScript, Tailwind CSS. No drag-and-drop libraries — use the native HTML Drag and Drop API.
Columns: To Do, In Progress, Review, Done
Each card shows:
- Title (bold)
- Description (2 lines max, truncated)
- Priority badge (Low=green, Medium=yellow, High=red)
- Assignee avatar (colored circle with initials)
- Due date (show in red if overdue)
- Tag chips (1-3 tags per card)
Features:
- Drag cards between columns (visual feedback: card opacity reduces, drop zone highlights)
- "Add Card" button at bottom of each column opens an inline form (title + description + priority dropdown)
- Column header shows card count
- Cards within a column can be reordered via drag
- Responsive: horizontal scroll on mobile, min-width per column 280px
Generate 12 sample cards distributed across columns.
Output a client component.Why it works: Specifying native HTML DnD API avoids library bloat. The card structure, visual feedback during drag, and inline add form are all detailed upfront.
Expected output: A working Kanban board with native drag-and-drop, inline card creation, and visual drag feedback.
Prompt 14: Settings Page with Tabs
Build a settings page with vertical tab navigation. Next.js 14, TypeScript, Tailwind CSS.
Left sidebar tabs: Profile, Account, Notifications, Billing, API Keys, Danger Zone
Profile tab:
- Avatar upload area (click to change, show current as circle)
- Full Name, Display Name, Bio (textarea), Website URL fields
- Save/Cancel buttons
Account tab:
- Email (with "Change email" flow), Password change (current + new + confirm)
- Two-factor authentication toggle with setup flow placeholder
Notifications tab:
- Toggle switches for: Email notifications, Push notifications, Marketing emails, Weekly digest
- Grouped into sections: "Activity", "Marketing", "Reports"
Billing tab:
- Current plan card showing tier and next billing date
- Payment method card (ending in ****4242, expiry, change button)
- Billing history table (date, amount, status, download link)
API Keys tab:
- List of existing keys (name, key partially masked, created date, last used)
- "Generate New Key" button that shows the full key once (with copy button and warning)
Danger Zone tab:
- Red-bordered section
- "Delete Account" with confirmation dialog (type account email to confirm)
- "Export Data" button
Layout: sidebar tabs on left (200px), content area on right. On mobile, tabs become horizontal scrollable pills at top.
Output a client component with tab sub-components.Why it works: Each tab's content is fully specified, eliminating the need for multiple follow-up prompts. The mobile behavior is explicitly called out.
Expected output: A complete settings page with six functional tabs, each containing properly structured forms and interactive elements.
Prompt 15: File Manager Interface
Build a file manager UI (front-end only). Next.js 14, TypeScript, Tailwind CSS.
Layout:
- Top bar: breadcrumb navigation, view toggle (grid/list), sort dropdown, search input, "Upload" button
- Main area: file/folder grid or list depending on toggle
Grid view: cards showing file icon/thumbnail placeholder, filename (truncated), file size, modified date
List view: table rows with icon, name, size, modified date, shared status
Features:
- Click folder to navigate into it (update breadcrumbs)
- Right-click context menu: Open, Rename, Move, Copy, Share, Delete
- Multi-select with checkboxes (show bulk action bar: Move, Delete, Download)
- Drag files into folders
- Upload area: drag-and-drop zone that appears when dragging files over the window
- Empty folder state: illustration + "This folder is empty" + Upload button
Generate a nested folder structure 3 levels deep with various file types (pdf, jpg, docx, xlsx, mp4).
Output a client component.Why it works: Both view modes, context menu, multi-select, and drag-to-folder are specified. The nested dummy data ensures realistic testing.
Expected output: A file manager with grid/list toggle, folder navigation, context menus, multi-select, and drag-and-drop zones.
Prompt 16: Notification Center
Build a notification center dropdown component. Next.js 14, TypeScript, Tailwind CSS.
Trigger: bell icon button in the header with a red unread count badge.
Dropdown panel (on click):
- Header: "Notifications" title + "Mark all as read" link
- Tabs: All | Unread | Mentions
- Notification list (scrollable, max-height 400px)
- Each notification: icon (based on type), title, description, timestamp ("2 min ago", "1 hour ago", "Yesterday"), unread dot indicator
- Notification types with different icons/colors: comment (blue), mention (purple), system (gray), alert (red), success (green)
- Click a notification to mark it as read (dot disappears)
- "View All" link at bottom
Generate 15 sample notifications of different types, some read, some unread.
Close dropdown when clicking outside (useRef + useEffect).
Output a client component.Why it works: The type-based styling, tab filtering, relative timestamps, and click-outside-to-close behavior are all specified precisely.
Expected output: A complete notification dropdown with badge, tabbed filtering, typed notifications, and outside-click dismissal.
Prompt 17: Onboarding Checklist Widget
Build an onboarding checklist widget that appears as a floating card in the bottom-right corner. Next.js 14, TypeScript, Tailwind CSS.
- Collapsed state: small pill showing "Setup Guide — 2/5 complete" with progress ring
- Expanded state (click to toggle): card with title, progress bar, and checklist items
- 5 checklist items: "Create your first project", "Invite a team member", "Connect your domain", "Deploy your app", "Set up billing"
- Each item: checkbox, title, brief description, estimated time ("2 min")
- Completed items show green checkmark and strikethrough title
- Clicking an incomplete item opens a link or triggers an action (just log to console)
- Smooth expand/collapse animation
- Dismissible with X button (sets a cookie/localStorage flag to not show again)
- Progress ring in collapsed state updates as items are completed
Output a client component.Why it works: Both states (collapsed and expanded), the progress ring, dismiss persistence, and item interaction are all defined. This is a complex micro-UI that benefits enormously from upfront specification.
Expected output: A floating onboarding widget with two states, animated transitions, progress tracking, and localStorage persistence.
Prompt 18: Command Palette (Cmd+K)
Build a command palette (Cmd+K / Ctrl+K) dialog. Next.js 14, TypeScript, Tailwind CSS.
Trigger: Cmd+K (Mac) or Ctrl+K (Windows) keyboard shortcut opens a centered modal with backdrop blur.
Features:
- Search input at top with magnifying glass icon (auto-focused on open)
- Results grouped by category: "Pages", "Actions", "Recent", "Settings"
- Each result: icon, title, description, keyboard shortcut hint on the right (if applicable)
- Navigate results with arrow keys, select with Enter, close with Escape
- Highlight the currently selected result
- Show "No results found" when search matches nothing
- Recent searches section when input is empty
- Fuzzy-ish matching: search "set" should match "Settings", "Account Settings", "Notification Settings"
Sample commands:
- Pages: Dashboard, Projects, Settings, Team, Billing
- Actions: Create Project, Invite Member, Toggle Theme, Export Data
- Settings: Profile, Notifications, API Keys, Security
Close on backdrop click or Escape.
Output a client component.Why it works: Keyboard navigation, grouped categories, shortcut hints, and fuzzy matching are all specified. This is a power-user feature that needs these details to feel polished.
Expected output: A command palette modal with keyboard shortcut activation, searchable grouped commands, arrow key navigation, and backdrop dismiss.
Category 3: Dashboards and Admin Panels (Prompts 19–26)
Prompt 19: Analytics Dashboard
Build an analytics dashboard page. Next.js 14, TypeScript, Tailwind CSS. Use Recharts for charts (it is already installed).
Layout:
- Top row: 4 stat cards (Total Users, Active Users, Revenue, Conversion Rate) with value, percentage change (green up or red down arrow), and sparkline mini-chart
- Second row: large area chart showing "Revenue Over Time" (last 12 months) with hover tooltip
- Third row: two charts side by side — bar chart "Users by Plan" (Free, Pro, Enterprise) and donut chart "Traffic Sources" (Direct, Organic, Social, Referral)
- Fourth row: table "Recent Transactions" — 5 rows with user, amount, plan, date, status badge
Requirements:
- Date range picker in top-right (Last 7 days, Last 30 days, Last 90 days, Custom)
- All charts use consistent color palette: #6366f1, #8b5cf6, #a78bfa, #c4b5fd
- Dark theme: bg-[#09090b], cards bg-[#1a1a2e], text white/gray
- Responsive: cards stack on mobile, charts go full-width
Generate realistic sample data for all charts.
Output a client component.Why it works: The exact layout grid, chart types, color palette, and data requirements are all specified. Naming Recharts explicitly avoids the AI choosing a different library.
Expected output: A complete analytics dashboard with stat cards, four chart types, a data table, and date range filtering.
Prompt 20: User Management Table with Bulk Actions
Build an admin user management page. Next.js 14, TypeScript, Tailwind CSS.
Top section:
- Title "User Management" with total count
- Search bar, role filter dropdown (All, Admin, Editor, Viewer), status filter (All, Active, Suspended)
- "Add User" button that opens a modal
Table:
- Select-all checkbox in header
- Columns: Checkbox, User (avatar + name + email), Role (colored badge), Plan (Free/Pro/Enterprise), Status (green/red dot + text), Last Active, Actions (three-dot menu)
- Three-dot menu: View Profile, Edit Role, Reset Password, Suspend/Activate, Delete
- Hover row to reveal quick action icons
Bulk actions bar (appears when rows selected):
- Shows "X users selected" count
- Buttons: Change Role, Suspend, Delete, Export Selected
- "Delete" requires confirmation modal with count
Modal for Add User:
- Fields: Name, Email, Role dropdown, Send invite checkbox
- Validates email format and required fields
Pagination at bottom: rows per page dropdown (10, 25, 50), page navigation.
Generate 45 sample users with varied roles, plans, and statuses.
Output a client component.Why it works: The bulk action bar, confirmation modal, and three-dot menu are common patterns that are often forgotten. This prompt covers the complete admin workflow.
Expected output: A full user management page with search, filters, bulk operations, add user modal, and pagination.
Prompt 21: Activity Feed / Audit Log
Build an activity feed / audit log page. Next.js 14, TypeScript, Tailwind CSS.
Layout: vertical timeline with events.
Each event shows:
- Colored dot on timeline (color based on event type)
- Avatar of user who performed action
- Description: "[User] [action] [target]" (e.g., "Sarah Chen created project 'Marketing Site'")
- Timestamp with relative time ("2 hours ago") and absolute on hover ("March 15, 2026 at 2:30 PM")
- Event type badge: Created (green), Updated (blue), Deleted (red), Shared (purple), Deployed (orange)
Features:
- Filter by event type (multi-select checkboxes)
- Filter by user (dropdown)
- Date range filter
- "Load more" button at bottom (not pagination)
- Search within activity descriptions
- Group events by date ("Today", "Yesterday", "March 14, 2026")
Generate 30 sample events across different types and users.
Output a client component.Why it works: The timeline visual, event types with colors, relative/absolute timestamps, and load-more pattern are all specified.
Expected output: A styled audit log timeline with filtering, search, date grouping, and load-more functionality.
Prompt 22: Dashboard Sidebar Navigation
Build a collapsible sidebar navigation for a dashboard. Next.js 14, TypeScript, Tailwind CSS.
Expanded state (260px):
- Logo/brand at top
- Navigation sections with headers: "Main" (Dashboard, Projects, Analytics), "Workspace" (Team, Files, Messages with unread badge), "Settings" (Account, Billing, API Keys)
- Each item: icon placeholder (emoji), label, optional badge/count
- Active item: highlighted background, accent left border
- Nested sub-items for "Projects" (expand/collapse with arrow): My Projects, Shared, Archived
- User profile at bottom: avatar, name, role, three-dot menu (Profile, Preferences, Sign Out)
Collapsed state (64px):
- Only icons visible, centered
- Hover shows tooltip with label
- User profile shows only avatar
Toggle button: chevron arrow at the bottom of sidebar that flips direction.
Animation: smooth width transition (200ms ease).
Persist collapsed/expanded state in localStorage.
On mobile: sidebar is hidden by default, hamburger menu in top bar opens it as overlay with backdrop.
Output a client component.Why it works: Both states, the transition, nested navigation, badges, tooltips, persistence, and mobile behavior are all defined. This is a component you will use across every page.
Expected output: A fully animated collapsible sidebar with nested navigation, user menu, localStorage persistence, and mobile overlay behavior.
Prompt 23: CRUD Modal System
Build a reusable modal system for CRUD operations. Next.js 14, TypeScript, Tailwind CSS.
Create a generic Modal wrapper component with:
- Backdrop with blur effect
- Centered card with configurable max-width (sm, md, lg, xl)
- Header with title and X close button
- Scrollable body
- Footer with configurable buttons
- Close on Escape key and backdrop click
- Focus trap inside modal
- Animate in: fade + scale up. Animate out: fade + scale down.
- Prevent body scroll when open
Then build these specific modals using the wrapper:
1. CreateProjectModal — form: name, description (textarea), template dropdown, visibility toggle (public/private)
2. ConfirmDeleteModal — warning icon, "Are you sure?" message, entity name in bold, "Cancel" and "Delete" buttons (red)
3. EditProfileModal — avatar upload, name, bio, save button with loading state
4. InviteTeamModal — email input with "Add" button that adds to a list below, role dropdown per invite, "Send Invites" button
Output the shared Modal component and the 4 specific modal components as separate files.Why it works: Building the generic wrapper first, then specific implementations, teaches the AI your pattern. The focus trap and scroll lock are professional touches most prompts miss.
Expected output: Five files — one reusable modal wrapper and four specific CRUD modals with proper animations, focus management, and form handling.
Prompt 24: Dashboard Widgets with Drag-to-Rearrange
Build a customizable dashboard where users can rearrange widgets. Next.js 14, TypeScript, Tailwind CSS. Use native HTML Drag and Drop API.
Widgets (each is a card):
1. Stats Overview — 4 mini stat boxes in a 2x2 grid
2. Revenue Chart — placeholder area chart
3. Recent Activity — list of 5 recent events
4. Quick Actions — grid of 4 shortcut buttons
5. Team Members — list of 5 team members with status
6. Upcoming Tasks — list of 5 tasks with due dates
Layout: 3-column grid on desktop, 2 on tablet, 1 on mobile.
Drag behavior:
- Grab handle icon in each widget header
- While dragging: widget becomes semi-transparent, drop zones highlight
- Smooth reorder animation when dropped
- Save layout order to localStorage
- "Reset Layout" button to restore default order
Each widget has:
- Header with title, drag handle, and three-dot menu (Remove, Resize placeholder)
- Card body with content
- Consistent styling: rounded-xl, subtle border, shadow
Output a client component.Why it works: The widget list, drag behavior, layout persistence, and responsive columns are all defined. This is a complex interaction that benefits from detailed specification.
Expected output: A rearrangeable dashboard grid with six widget types, drag-and-drop reordering, and localStorage persistence.
Prompt 25: Real-Time Metrics Panel
Build a real-time metrics display panel. Next.js 14, TypeScript, Tailwind CSS.
Simulate real-time data with setInterval (update every 2 seconds with random fluctuations).
Display:
- Top row: 3 large number displays with labels — "Active Users" (animate count up/down), "Requests/sec" (with sparkline), "Error Rate %" (changes color: green < 1%, yellow 1-5%, red > 5%)
- Middle: live line chart that scrolls horizontally showing last 60 data points for "Response Time (ms)" — new points appear on the right, old points scroll off the left
- Bottom row: 4 progress bars — "CPU Usage", "Memory", "Disk", "Network" — each with percentage and color coding (green < 60%, yellow 60-85%, red > 85%)
- Status indicator in corner: green pulsing dot + "Live" text when data is updating
Requirements:
- Smooth number transitions (count up/down animation)
- Chart updates without full re-render
- Pause/Resume button to stop/start the simulated updates
- Timestamp showing "Last updated: X seconds ago"
Output a client component. Use Recharts for the line chart.Why it works: The simulated real-time behavior, color-coded thresholds, scrolling chart, and animation details make this prompt produce a convincing live dashboard.
Expected output: An animated metrics panel with simulated real-time updates, color-coded indicators, and a scrolling time-series chart.
Prompt 26: Admin Content Moderation Queue
Build a content moderation queue for an admin panel. Next.js 14, TypeScript, Tailwind CSS.
Layout: split view — list on the left (40%), content preview on the right (60%).
Left panel (queue list):
- Tabs: Pending, Approved, Rejected
- Each item: user avatar, username, content snippet (truncated), submitted time, content type badge (text, image, link)
- Selected item highlighted
- Count badges on tabs
Right panel (content detail):
- Full content display
- User info card: avatar, name, join date, total posts, previous violations count
- Reported reason (if applicable)
- Action buttons: Approve (green), Reject (red), Flag for Review (yellow), Ban User (dark red)
- Reject opens a dropdown to select reason: Spam, Harassment, Inappropriate Content, Copyright, Other
- Notes textarea for moderator comments
- History: previous moderation actions on this user's content
Keyboard shortcuts: A = Approve, R = Reject, N = Next item, P = Previous item. Show shortcut hints on buttons.
Generate 15 sample items in the queue.
Output a client component.Why it works: The split-view layout, moderation actions with reasons, user context, and keyboard shortcuts create a professional moderation tool from a single prompt.
Expected output: A split-panel moderation interface with queue management, content preview, action buttons, and keyboard navigation.
Category 4: APIs and Backend (Prompts 27–34)
Prompt 27: RESTful CRUD API
Build a complete REST API for a "Projects" resource. Next.js 14 App Router route handlers, TypeScript, Prisma ORM.
Endpoints:
- GET /api/projects — list all projects with pagination (?page=1&limit=10), search (?q=), and sort (?sort=createdAt&order=desc)
- GET /api/projects/[id] — get single project with related data (owner, members)
- POST /api/projects — create project (validate: name required, name max 100 chars, description max 500 chars)
- PATCH /api/projects/[id] — partial update (only update provided fields)
- DELETE /api/projects/[id] — soft delete (set deletedAt timestamp, don't remove from DB)
Prisma model (assume it exists):
model Project {
id String @id @default(cuid())
name String
description String?
status String @default("active")
ownerId String
deletedAt DateTime?
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
Requirements:
- Consistent JSON response format: { success: boolean, data?: any, error?: string, meta?: { page, limit, total } }
- Input validation with Zod schemas
- Error handling: try/catch with appropriate HTTP status codes (400, 404, 500)
- Exclude soft-deleted records from list/get queries by default
- Type-safe throughout
Output the route handler files and a shared validation schema file.Why it works: The response format, Zod validation, soft delete pattern, and Prisma model are all specified. This produces consistent, professional API routes.
Expected output: Route handler files for each endpoint plus a Zod schema file, all with proper typing and error handling.
Prompt 28: tRPC Router with Procedures
Build a tRPC router for a "workspace" domain. TypeScript, tRPC v11, Prisma, Zod.
Procedures:
- workspace.list — query: returns user's workspaces with member count
- workspace.getById — query: input { id: string }, returns workspace with members and recent activity
- workspace.create — mutation: input { name: string, description?: string }, validates name length (3-50 chars), creates workspace and adds creator as owner
- workspace.update — mutation: input { id: string, name?: string, description?: string }, only owner can update
- workspace.delete — mutation: input { id: string }, only owner can delete, soft delete
- workspace.invite — mutation: input { workspaceId: string, email: string, role: "admin" | "member" | "viewer" }, sends invite (stub the email sending)
- workspace.removeMember — mutation: input { workspaceId: string, userId: string }, owner/admin only, cannot remove self
Requirements:
- Use a protectedProcedure that ensures user is authenticated (assume ctx.session.user exists)
- Authorization checks: throw TRPCError with FORBIDDEN code when unauthorized
- Zod input validation on all mutations
- Consistent error messages
- Return types should be well-typed (infer from Prisma)
Output the router file and any shared helper files.Why it works: Each procedure's authorization rules and input validation are specified. The AI produces a router that handles both authentication and authorization correctly.
Expected output: A tRPC router file with seven procedures, Zod schemas, authorization checks, and proper error handling.
Prompt 29: Webhook Handler with Verification
Build a webhook handler for processing Stripe payment events. Next.js 14 App Router route handler, TypeScript.
Endpoint: POST /api/webhooks/stripe
Requirements:
- Verify webhook signature using Stripe's signing secret (stripe.webhooks.constructEvent)
- Handle these events:
- checkout.session.completed — create/update subscription in DB, send welcome email (stub)
- customer.subscription.updated — update plan and status in DB
- customer.subscription.deleted — mark subscription as cancelled, send cancellation email (stub)
- invoice.payment_failed — update subscription status, send failed payment email (stub)
- invoice.payment_succeeded — update last payment date, reset failed payment counter
- Log each webhook event (type, timestamp, success/failure) for debugging
- Return 200 immediately for unhandled event types (don't error)
- Return 400 for invalid signature
- Wrap each handler in try/catch — return 200 even if processing fails (to prevent Stripe retries for non-transient errors), but log the error
- Use a switch statement with typed event handlers
Output the route handler and a webhookHandlers utility file with the individual event processors.Why it works: The specific Stripe events, the return-200-on-error pattern, and the signature verification are all production-critical details that are easy to get wrong. This prompt gets them right.
Expected output: Two files — a route handler with signature verification and a handlers file with typed event processors.
Prompt 30: Background Job Queue
Build a simple in-memory job queue system for background task processing. TypeScript, no external queue libraries.
Job Queue class:
- addJob(type: string, payload: any, options?: { priority?: number, delay?: number, maxRetries?: number }) — adds job to queue
- processJobs() — processes jobs in priority order (higher number = higher priority)
- Job lifecycle: pending → processing → completed | failed
- Retry failed jobs with exponential backoff (1s, 2s, 4s, 8s, up to maxRetries)
- Concurrency limit: process max N jobs simultaneously (configurable, default 3)
- Event emitter pattern: onComplete, onFail, onRetry callbacks
- getStatus() — returns counts by status and list of active jobs
Job types to implement as examples:
1. "send_email" — simulate with setTimeout (500ms-2000ms random)
2. "process_image" — simulate with setTimeout (1000ms-3000ms random)
3. "generate_report" — simulate with setTimeout (2000ms-5000ms random)
Include a demonstration script that adds 10 jobs of different types and priorities, then processes them, logging the lifecycle events.
Output a JobQueue class file, job handler files, and a demo script.Why it works: The queue semantics (priority, concurrency, retry with backoff) are specified precisely. The demo script makes the output immediately testable.
Expected output: A typed job queue class with priority processing, concurrency limiting, exponential backoff retry, and a working demo.
Prompt 31: Rate Limiter Middleware
Build a rate limiting middleware for Next.js 14 API routes. TypeScript.
Algorithm: Token bucket with sliding window.
Configuration per route:
- requests: max requests per window (default 100)
- window: time window in seconds (default 60)
- keyBy: function to extract the rate limit key (default: IP address from headers)
Features:
- In-memory store (Map) with automatic cleanup of expired entries (setInterval every 60s)
- Response headers: X-RateLimit-Limit, X-RateLimit-Remaining, X-RateLimit-Reset (Unix timestamp)
- When rate limited: return 429 status with JSON { error: "Too Many Requests", retryAfter: seconds }
- Support different limits for authenticated vs unauthenticated users
- Optional: whitelist certain IPs or API keys from rate limiting
Usage example in a route handler:
const limiter = createRateLimiter({ requests: 10, window: 60 });
export async function POST(req: Request) {
const rateLimitResult = await limiter.check(req);
if (!rateLimitResult.allowed) {
return rateLimitResult.response; // 429 response
}
// ... handle request
}
Output the rate limiter module and an example route using it.Why it works: The algorithm choice, response headers, cleanup mechanism, and usage API are all specified. This produces a drop-in rate limiter.
Expected output: A rate limiter module with token bucket algorithm, automatic cleanup, standard headers, and an example route handler.
Prompt 32: Database Seed Script
Build a comprehensive database seed script. TypeScript, Prisma ORM.
Seed the following with realistic data:
1. 5 Users — varied names, emails, roles (1 admin, 2 editors, 2 viewers), profile pictures (use placeholder URLs)
2. 3 Workspaces — each with 2-4 members from the user pool, different plans
3. 12 Projects — distributed across workspaces, different statuses (active, archived, draft), varied creation dates over last 6 months
4. 50 Tasks — distributed across projects, different priorities (low, medium, high, urgent), statuses (todo, in_progress, review, done), assigned to workspace members
5. 30 Comments — distributed across tasks, by different users, some nested (replies)
6. 10 File records — associated with projects, different types (pdf, png, docx)
7. Activity log entries — 100 events across all entities (created, updated, deleted, shared)
Requirements:
- Use faker-like realistic data (but don't import faker — write helper functions for random names, emails, dates, sentences)
- Maintain referential integrity (foreign keys match)
- Deterministic: use a seed for random generation so running twice produces same data
- Clear existing data before seeding (in correct order to respect FK constraints)
- Log progress: "Seeding users... done (5)", "Seeding workspaces... done (3)", etc.
- Run with: npx tsx prisma/seed.ts
Output the seed script file.Why it works: The exact counts, relationship distribution, and deterministic requirement ensure reproducible, realistic test data.
Expected output: A complete seed script with helper functions, referential integrity, progress logging, and deterministic output.
Prompt 33: Email Template System
Build a type-safe email template system. TypeScript, React Email-style approach (but use plain functions, no external libraries).
Templates to build:
1. Welcome email — greeting, product name, CTA button to dashboard
2. Password reset — reset link with expiry time, security notice
3. Team invitation — inviter name, workspace name, accept button, decline link
4. Invoice/receipt — amount, plan name, date, invoice number, line items table
5. Weekly digest — summary stats (new users, revenue, top pages), link to dashboard
Each template:
- Returns an HTML string (for sending via any email provider)
- Accepts typed props (e.g., WelcomeEmailProps { userName: string, dashboardUrl: string })
- Consistent layout: header with logo placeholder, body, footer with unsubscribe link
- Inline CSS only (for email client compatibility)
- Responsive: single column, max-width 600px, centered
- Preheader text support (hidden preview text for email clients)
Build a shared layout function that wraps all templates with:
- DOCTYPE html with email-safe meta tags
- Consistent header/footer
- Brand colors: primary #6366f1, background #f9fafb, text #111827
Also build a renderEmail(template, props) function that handles the rendering.
Output the template files, layout file, and render utility.Why it works: Email HTML has unique constraints (inline CSS, limited layout support). Specifying those constraints and the shared layout system produces email-safe output.
Expected output: A template system with five typed email templates, a shared layout function, and a render utility.
Prompt 34: API Error Handling System
Build a comprehensive error handling system for a Next.js 14 API. TypeScript.
Custom error classes extending a base AppError:
- BadRequestError (400) — invalid input, validation failures
- UnauthorizedError (401) — missing or invalid authentication
- ForbiddenError (403) — authenticated but lacking permission
- NotFoundError (404) — resource not found
- ConflictError (409) — duplicate resource, version conflict
- RateLimitError (429) — too many requests
- InternalError (500) — unexpected server errors
Each error class:
- HTTP status code
- Machine-readable error code (e.g., "VALIDATION_ERROR", "RESOURCE_NOT_FOUND")
- Human-readable message
- Optional details field (e.g., validation errors array with field names)
- Optional requestId for tracing
Consistent error response format:
{
success: false,
error: {
code: "VALIDATION_ERROR",
message: "Invalid input",
details: [{ field: "email", message: "Invalid email format" }],
requestId: "req_abc123"
}
}
Build:
1. Error class hierarchy
2. errorHandler wrapper function for route handlers (catches errors and returns proper response)
3. Zod validation helper that catches ZodError and converts to BadRequestError with field details
4. Logging utility that logs errors with context (don't log sensitive data)
Output the error classes file, handler wrapper, and utilities.Why it works: The error hierarchy, response format, and utility functions create a complete error handling layer. The Zod integration is a common real-world need.
Expected output: An error system with typed error classes, a route handler wrapper, Zod integration, and logging utilities.
Category 5: Mobile-First Apps (Prompts 35–40)
Prompt 35: Mobile Navigation with Bottom Tab Bar
Build a mobile app shell with bottom tab bar navigation. Next.js 14, TypeScript, Tailwind CSS. Design for mobile-first (max-width 430px feel).
Bottom tab bar (fixed):
- 5 tabs: Home, Search, Create (+), Notifications, Profile
- Active tab: filled icon + colored label, inactive: outline icon + muted label
- Create tab: larger circular button that rises above the bar (floating action style)
- Tapping Create opens a bottom sheet with options: New Post, New Story, New Poll
- Safe area padding at bottom for notched phones (env(safe-area-inset-bottom))
Top bar:
- Logo/app name on left
- Two icon buttons on right (messages and settings)
- Scrolls away on scroll down, reappears on scroll up
Page content area:
- Full-height between top bar and bottom tab
- Pull-to-refresh indicator (visual only, no actual refresh logic)
- Scrollable content
Build a simple feed page for the Home tab as demo content (list of card items).
Output a client component with the shell layout and the home page.Why it works: Safe area padding, scroll-aware header, and the floating create button are mobile-specific patterns that need explicit mention to get right.
Expected output: A mobile app shell with bottom tabs, floating create button, bottom sheet, scroll-hiding header, and a sample feed page.
Prompt 36: Swipeable Card Stack (Tinder-style)
Build a swipeable card stack interface. Next.js 14, TypeScript, Tailwind CSS. No external gesture libraries — use touch events.
Cards stacked in the center, showing the top card fully and the next 2 cards slightly visible behind (scaled down and offset).
Swipe behavior:
- Touch/drag a card left or right
- Card follows the finger with rotation (tilt in swipe direction)
- Swipe right past threshold (40% of screen width): "Like" — card flies off right with green overlay
- Swipe left past threshold: "Pass" — card flies off left with red overlay
- Release before threshold: card snaps back to center with spring animation
- Show "LIKE" or "PASS" text overlay on card that fades in as you swipe
Each card contains:
- Large image placeholder (full card background)
- Bottom gradient overlay with: name, age, short bio
- 2-3 tag chips (interests)
Buttons below the stack: X (pass), Star (super like), Heart (like) — tapping triggers the same animation as swiping.
Generate 10 sample profile cards.
Output a client component.Why it works: Touch event handling, rotation math, threshold logic, and spring-back animation are all specified. This produces a smooth, native-feeling card stack.
Expected output: A swipeable card stack with touch gesture handling, rotation physics, overlay indicators, and action buttons.
Prompt 37: Mobile Checkout Flow
Build a mobile-optimized checkout flow. Next.js 14, TypeScript, Tailwind CSS. Design for 390px-430px viewport width.
3-step checkout:
Step 1 — Cart Review:
- List of 3 items with thumbnail, name, quantity stepper (+/-), price, remove button
- Subtotal, shipping, tax, total at bottom
- "Proceed to Shipping" button (full-width, sticky at bottom)
Step 2 — Shipping:
- Saved address card (with "Change" button)
- Shipping method radio buttons: Standard (free, 5-7 days), Express ($9.99, 2-3 days), Next Day ($19.99)
- "Continue to Payment" button
Step 3 — Payment:
- Card input: number (auto-format with spaces every 4 digits), expiry (MM/YY auto-format), CVC
- Card brand detection (show Visa/Mastercard/Amex icon based on first digits)
- "Pay $XX.XX" button with loading state and success animation (checkmark)
- Order confirmation: checkmark animation, order number, estimated delivery
Navigation:
- Step indicator at top (1—2—3 with progress line)
- Back button (top-left arrow) to go to previous step
- Swipe right to go back (gesture navigation)
All inputs should have mobile-appropriate attributes: inputmode="numeric", autocomplete values.
Output a client component.Why it works: Mobile-specific details (input modes, sticky buttons, swipe-back gesture, auto-formatting) are the difference between a desktop form and a mobile-native experience. This prompt covers all of them.
Expected output: A three-step mobile checkout with cart management, shipping selection, payment with card detection, and a success animation.
Prompt 38: Stories / Reels Viewer
Build a Stories viewer component (similar to Instagram Stories). Next.js 14, TypeScript, Tailwind CSS.
Story circles bar (horizontal scroll):
- Circular avatars with gradient ring (unseen) or gray ring (seen)
- Username below each avatar
- "Your Story" first with plus icon overlay
Full-screen story viewer (opens on tap):
- Full viewport height
- Progress bars at top (one per story in the set, auto-advancing every 5 seconds)
- Tap left half: previous story. Tap right half: next story.
- Long press: pause story (progress bar pauses, dims slightly)
- Swipe left/right to move between users' stories
- Story content: image placeholder with overlay text
- Top: avatar, username, timestamp, close X button
- Bottom: reply input bar ("Send message...") and share button
Transitions:
- Opening: scale up from the tapped circle with cube-like rotation transition
- Between users: horizontal slide
- Closing: scale back down or slide down
Generate 5 users with 2-4 stories each.
Output a client component.Why it works: The precise tap zones, progress bar behavior, pause-on-hold, and transition animations produce a polished Stories experience. These micro-interactions need explicit specification.
Expected output: A full-screen Stories viewer with progress bars, tap/swipe navigation, pause-on-hold, and smooth transitions.
Prompt 39: Bottom Sheet Component
Build a reusable bottom sheet component. Next.js 14, TypeScript, Tailwind CSS. Touch-optimized.
Features:
- Slides up from bottom of screen with backdrop overlay
- Drag handle bar at top (small gray pill shape)
- Drag down to dismiss (velocity-based: slow drag past 50% = dismiss, fast flick down = dismiss)
- Snap points: collapsed (30% height), half (50%), expanded (90%) — drag to snap between them
- Smooth spring-like animation between snap points
- Touch events for drag handling (not mouse events)
- Body scroll lock when open
- Backdrop tap to dismiss
Props:
- initialSnap: "collapsed" | "half" | "expanded"
- onDismiss: () => void
- children: ReactNode
- title?: string (optional header)
Build three demo usages:
1. Map location selector — list of locations with radio buttons
2. Filter panel — category checkboxes, price range, sort options, Apply button
3. Share sheet — grid of share option icons (Copy Link, Message, Email, Twitter, etc.)
Output the reusable BottomSheet component and the three demo components.Why it works: Snap points, velocity-based dismissal, and spring animations are the three things that make a bottom sheet feel native. Specifying them gets professional results.
Expected output: A reusable bottom sheet with snap points, gesture handling, and three demo implementations.
Prompt 40: Gesture-Based Image Gallery
Build a mobile image gallery with gestures. Next.js 14, TypeScript, Tailwind CSS. Use touch events, no external libraries.
Gallery grid:
- 3-column masonry-style grid of image placeholders (colored rectangles with different aspect ratios)
- Tap image to open full-screen viewer
Full-screen viewer:
- Pinch to zoom (track two touch points, calculate scale)
- Pan when zoomed in (constrain to image bounds)
- Double-tap to toggle between fit and 2x zoom (animate the transition)
- Swipe left/right to navigate between images (disabled when zoomed in)
- Swipe down to close (image shrinks back to grid position)
- Image counter "3 of 12" at top
- Background fades from transparent to black as image opens
Performance:
- Use CSS transforms for all animations (translate, scale) — no layout thrashing
- will-change: transform on the active image
- Cancel momentum scroll when entering viewer
Generate 12 image placeholders with varied aspect ratios and colors.
Output a client component.Why it works: Pinch-zoom math, double-tap toggle, constrained panning, and the swipe-down-to-close gesture are all specified. Performance hints (CSS transforms, will-change) ensure smooth rendering.
Expected output: An image gallery with masonry grid, full-screen viewer, pinch-zoom, pan, double-tap zoom toggle, and swipe-to-close.
Category 6: Debugging and Fixing (Prompts 41–45)
Prompt 41: Fix Hydration Mismatch
I have a Next.js 14 App Router application with a hydration mismatch error. The error occurs in my ThemeProvider component.
Here is the component:
[PASTE YOUR COMPONENT CODE HERE]
The error in the console says: "Hydration failed because the initial UI does not match what was rendered on the server."
Diagnose the issue and fix it. Common causes I want you to check:
1. Are we reading localStorage or window during server render?
2. Is there a mismatch between server and client initial state?
3. Are we using Date.now() or Math.random() during render?
4. Is a browser extension injecting elements?
Provide the fixed code with comments explaining each change. If the fix requires a loading/skeleton state to avoid the mismatch, include that too.Why it works: Pasting actual code with the error message and listing common causes directs the AI to check specific patterns rather than guessing.
Expected output: Fixed component code with inline comments explaining the hydration mismatch cause and the solution pattern.
Prompt 42: Performance Audit and Fix
Audit this React component for performance issues and fix them. The component renders a list of 500+ items and the UI is sluggish when filtering or scrolling.
[PASTE YOUR COMPONENT CODE HERE]
Check for and fix:
1. Unnecessary re-renders (missing React.memo, inline function props, new object/array references in render)
2. Expensive computations in render (should use useMemo)
3. Missing virtualization for long lists (suggest react-window or implement a simple virtual scroll)
4. Event handlers that could be debounced (search input, scroll handlers)
5. State updates that cause full tree re-renders (state too high in tree)
6. Missing key props or using index as key with sortable lists
Provide the optimized code and a brief explanation of each change with the expected performance improvement.Why it works: The numbered checklist tells the AI exactly what to audit for. Without this, the AI might fix one issue and miss five others.
Expected output: Optimized component code with memoization, virtualization, debouncing, and explanatory comments for each change.
Prompt 43: Debug API Route Returning 500
My Next.js 14 API route is returning a 500 Internal Server Error in production but works fine locally. Help me debug it.
Route code:
[PASTE YOUR ROUTE CODE HERE]
Error from server logs:
[PASTE ERROR MESSAGE/STACK TRACE HERE]
Environment differences:
- Local: Node 20, SQLite via Prisma, no connection pooling
- Production: Node 20, PostgreSQL via Prisma, connection pooling with pgbouncer
Check for:
1. Database connection issues (pool exhaustion, connection timeouts)
2. Environment variable differences (missing or different values)
3. File system access that works locally but fails in serverless/containerized environments
4. BigInt serialization issues (PostgreSQL bigint vs SQLite integer)
5. Transaction handling differences between SQLite and PostgreSQL
6. Missing error handling that swallows the real error
Provide the fixed code and a checklist of things to verify in the production environment.Why it works: Providing the environment differences (SQLite local vs PostgreSQL production) immediately surfaces the most likely causes. The checklist request ensures comprehensive coverage.
Expected output: Fixed route code with production-safe patterns and a deployment verification checklist.
Prompt 44: Fix TypeScript Errors
Fix all TypeScript errors in this file. Do not use 'any' type as an escape hatch — provide proper types.
[PASTE YOUR CODE WITH TS ERRORS HERE]
TypeScript errors reported:
[PASTE THE TSC ERROR OUTPUT HERE]
Rules:
- Create interfaces/types for all data structures
- Use generic types where appropriate
- Handle null/undefined cases with proper narrowing (not non-null assertion !)
- If an external library has missing types, create a declaration file
- Prefer union types over enums where it makes sense
- Ensure all function parameters and return types are explicitly typed
Output the fully typed code and any additional type declaration files needed.Why it works: The "no any" and "no non-null assertion" rules force the AI to write proper types instead of taking shortcuts. Pasting the actual TSC errors gives precise targets.
Expected output: Fully typed code with proper interfaces, type narrowing, and optional type declaration files for external libraries.
Prompt 45: Fix Memory Leak
This React component has a memory leak. The browser's memory usage grows continuously when navigating to and from this page. Diagnose and fix the leak.
[PASTE YOUR COMPONENT CODE HERE]
Common leak sources to investigate:
1. setInterval or setTimeout not cleared in cleanup
2. Event listeners added in useEffect not removed
3. WebSocket/EventSource connections not closed
4. AbortController not used for fetch requests (stale responses updating unmounted component state)
5. Subscriptions (e.g., ResizeObserver, IntersectionObserver) not disconnected
6. Closures holding references to large data structures
7. Global state / module-level caches growing unbounded
For each leak found:
- Explain what is leaking and why
- Show the fix with proper cleanup in useEffect return function
- If applicable, show the AbortController pattern for fetch cleanup
Output the fixed component.Why it works: Memory leaks are notoriously hard to find. The numbered checklist ensures the AI examines every common source rather than stopping at the first one it finds.
Expected output: Fixed component with proper cleanup functions, abort controllers, and comments explaining each leak source and its resolution.
Category 7: Advanced Patterns (Prompts 46–50)
Prompt 46: Recursive Component Tree
Build a recursive file tree component that renders a nested folder structure. Next.js 14, TypeScript, Tailwind CSS.
Features:
- Renders folders and files from a nested data structure
- Folders expand/collapse on click (with animated rotation of chevron icon)
- File icons based on extension: .ts/.tsx (blue), .css (purple), .json (yellow), .md (gray), default (white)
- Folder icons change from closed to open when expanded
- Indent each level by 20px with a subtle vertical line guide
- Right-click context menu on any item: Rename, Delete, New File, New Folder (for folders only)
- Drag and drop files between folders (update the data structure)
- Search/filter: text input that highlights matching filenames and auto-expands their parent folders
- Selected file highlighted with accent background
- Keyboard navigation: arrow keys to move, Enter to expand/select, Delete key to delete
Data structure:
type TreeNode = {
id: string;
name: string;
type: "file" | "folder";
children?: TreeNode[];
};
Generate a sample tree with 3 levels of nesting, 5 folders, 15 files.
Output a client component.Why it works: The recursive rendering, keyboard navigation, drag-and-drop, and search-with-auto-expand are all complex features that benefit from upfront specification.
Expected output: A recursive file tree with expand/collapse, context menus, drag-and-drop, search highlighting, and keyboard navigation.
Prompt 47: Optimistic UI Update Pattern
Build a task list that demonstrates the optimistic UI update pattern. Next.js 14, TypeScript, Tailwind CSS.
Features:
- List of tasks with checkbox (complete/incomplete), title, and delete button
- Adding a task: appears immediately in the list with temporary ID, then updates with real ID after API response
- Completing a task: checkbox toggles immediately, strikethrough appears, API call fires in background
- Deleting a task: task fades out immediately, API call fires in background
- On API failure: revert the optimistic update, show a toast notification ("Failed to update, changes reverted")
Implementation:
- Use useOptimistic (React 19) or implement a custom optimistic state hook
- Simulate API calls with random latency (200ms-1000ms) and 20% failure rate
- Show subtle loading indicator per item during sync (small spinner next to items waiting for confirmation)
- Maintain a "pending changes" queue that resolves in order
- Type-safe: proper TypeScript types for optimistic vs confirmed states
Include these UI states:
- Synced (normal appearance)
- Pending (subtle opacity or indicator showing it hasn't been confirmed)
- Failed (red highlight with retry button)
Output a client component with the custom hook separated into its own file.Why it works: The three states (synced, pending, failed), failure simulation, and revert behavior are precisely defined. This produces a robust optimistic UI implementation.
Expected output: A task list component and a reusable optimistic update hook with proper state management, error handling, and visual feedback.
Prompt 48: Real-Time Collaborative Cursor Presence
Build a collaborative cursor presence system (like Figma's live cursors). Next.js 14, TypeScript, Tailwind CSS.
Simulate multiple users with setInterval (no actual WebSocket needed).
Display:
- Current user's cursor tracked via mousemove
- 3 simulated other users' cursors moving randomly around the canvas
- Each cursor: colored arrow pointer + name label pill (e.g., "Sarah" in a purple pill next to a purple cursor)
- Cursors move smoothly with CSS transitions (interpolate between positions, 50ms transition)
- When a simulated cursor stops moving for 3 seconds, show it as "idle" (faded)
- When a cursor leaves the viewport, show an indicator on the edge pointing to where they are
Canvas area:
- A large div (2000x2000px) that can be scrolled/panned
- Some placeholder content on the canvas (boxes representing design elements)
- Viewport indicator: small minimap in the corner showing where all users are looking
Cursor colors: assign each user a distinct color from a palette.
Output a client component.Why it works: The smooth interpolation, idle state, edge indicators, and minimap are specific details that make the difference between a demo and a polished feature.
Expected output: A canvas with live cursor presence simulation, smooth movement interpolation, idle detection, edge indicators, and a minimap.
Prompt 49: Plugin/Extension Architecture
Design and implement a plugin system for a web application. TypeScript only (framework-agnostic).
Plugin interface:
interface Plugin {
name: string;
version: string;
dependencies?: string[]; // names of required plugins
init(context: PluginContext): Promise<void>;
destroy?(): Promise<void>;
}
Plugin context (what plugins can access):
- registerHook(name: string, handler: Function) — register for lifecycle hooks
- registerCommand(name: string, handler: Function) — add commands to command palette
- registerMenuItem(location: string, item: MenuItem) — add items to menus
- getStore() — access a shared key-value store
- getAPI() — access core API methods
- emit(event: string, data: any) — emit events other plugins can listen to
- on(event: string, handler: Function) — listen for events
Plugin Manager:
- loadPlugin(plugin: Plugin) — validates dependencies, initializes plugin
- unloadPlugin(name: string) — calls destroy, removes registrations
- getPlugin(name: string) — returns loaded plugin
- listPlugins() — returns all loaded plugins with status
- Dependency resolution: load plugins in correct order based on dependencies
- Circular dependency detection: throw error with clear message
Build 3 example plugins:
1. WordCountPlugin — counts words in a text field, registers a "word-count" command
2. AutoSavePlugin — auto-saves content every 30 seconds, registers a toggle command
3. ThemePlugin — depends on a core "settings" plugin (stub it), registers theme-switching commands
Output the plugin system core files and the 3 example plugins.Why it works: The interface, context API, dependency resolution, and example plugins are all specified. This produces an extensible, well-architected plugin system.
Expected output: A plugin manager with dependency resolution, a plugin context implementation, and three example plugins demonstrating different registration patterns.
Prompt 50: AI-Powered Form Builder
Build an AI-powered form builder UI. Next.js 14, TypeScript, Tailwind CSS.
Two panels:
Left panel — Form Builder (drag and drop):
- Field palette at top: Text Input, Textarea, Select, Checkbox, Radio Group, Date Picker, File Upload, Number, Email, Phone
- Drag fields from palette onto the form canvas below
- Reorder fields on canvas via drag
- Click a field to select it and show configuration in right panel
- Delete button on hover of each field
- Preview of the form as it will appear
Right panel — Field Configuration (changes based on selected field):
- Label, Placeholder, Help text
- Required toggle
- Validation rules (min/max length, pattern, custom message)
- Options editor (for Select, Radio, Checkbox — add/remove/reorder options)
- Conditional logic: show/hide this field based on another field's value
- Width: full, half, third
Top bar:
- Form name (editable)
- Preview button (opens the form in a modal as an end user would see it)
- Export JSON button (downloads the form schema as JSON)
- "Generate with AI" button: text input where you describe a form in plain English, it generates the field list (stub the AI call, just parse some simple patterns like "name, email, message" into corresponding fields)
Form schema:
type FormSchema = {
name: string;
fields: FormField[];
};
type FormField = {
id: string;
type: string;
label: string;
placeholder?: string;
required?: boolean;
validation?: Record<string, any>;
options?: { label: string; value: string }[];
conditionalLogic?: { field: string; operator: string; value: string };
width?: "full" | "half" | "third";
};
Output a client component with the builder, configuration panel, and preview modal.Why it works: The two-panel layout, field types, configuration options, conditional logic, and export functionality create a complete form builder. The AI generation stub makes it forward-compatible with actual LLM integration.
Expected output: A drag-and-drop form builder with field palette, configuration panel, conditional logic, preview mode, and JSON export.
How to Use These Prompts with Serenities AI
These 50 prompts work with any AI model — but where you run them matters. Here is how to get the most out of them using Serenities AI:
Bring Your Own AI Key (BYOAI)
Serenities AI supports BYOAI mode, meaning you can plug in your own API keys for Claude, GPT-4o, Gemini 2.5 Pro, DeepSeek V3, MiniMax, Qwen, or any other supported provider. You use your own key, your own rate limits, and your own pricing — Serenities just provides the development environment and tooling around it.
Pick the Right Model for the Job
Not every prompt needs the most powerful model. Here is a practical guide:
Landing pages and UI components (Prompts 1–18): Claude Sonnet or GPT-4o work great. These are well-understood patterns with lots of training data.
Complex backend logic (Prompts 27–34): Claude Opus or GPT-4o tend to produce the most reliable API code with proper error handling.
Debugging (Prompts 41–45): Use the most capable model available. Debugging requires deep reasoning about code behavior.
Advanced patterns (Prompts 46–50): Claude Opus, Gemini 2.5 Pro, or GPT-4o. These multi-file, architecturally complex outputs benefit from stronger reasoning.
Unlimited Iteration
The best vibe coding workflow is not "one prompt, one perfect output." It is an iterative conversation. Serenities AI gives you the workspace to have that conversation — start with a prompt from this list, see the output, refine it, add constraints, and iterate until the code is exactly what you need.
From Prompt to Deployed App
The real power of Serenities AI is that these prompts do not just generate code snippets that sit in a file. You can go from prompt to component to deployed application in the same workspace. Write a prompt, generate the code, preview it live, and deploy — all without leaving the platform.
Final Thoughts
Vibe coding is only as good as your prompts. Vague instructions produce vague code. Specific, structured prompts — like the 50 in this article — produce specific, production-ready output.
The key takeaways:
Use the CLEAR framework — Context, Language, Examples, Action, Result.
Specify everything that matters — tech stack, styling, responsiveness, error handling, edge cases.
Iterate, do not restart — build on previous outputs instead of starting over.
Match the model to the task — use capable models for complex tasks, faster models for simpler ones.
Copy, paste, customize — every prompt in this article is designed to be modified for your specific project. Change the tech stack, swap the features, adjust the styling. The structure is what matters.
Bookmark this page, copy the prompts that match your current project, and start building. The gap between idea and working code has never been smaller.