Vibe coding changed how I build software. Instead of typing every line, I describe what I want and an AI agent writes it. But here's the thing nobody talks about: the quality of your prompt determines 90% of the output quality.
I've spent the last 6 months building production infrastructure, SaaS apps, and developer tools using Claude Code, Cursor, and Windsurf. Along the way I collected every prompt that consistently produced clean, working, production-ready code on the first try.
This is that collection. 50 prompts, organized by use case, with notes on which tool handles each one best.
Try the Vibe Coding Prompt Generator — it builds custom prompts based on your stack and project type.
How to Use These Prompts
Every prompt follows a structure I call SCOPE:
- Situation — what exists right now
- Constraints — tech stack, patterns, rules
- Outcome — what you want to see when done
- Pattern — code style, architecture preference
- Edge cases — what should NOT happen
You don't need all five for every prompt. But the more you include, the better the output.
Section 1: Project Scaffolding (10 prompts)
1. Full-Stack SaaS App
Create a full-stack SaaS application with:
- Next.js 15 App Router with TypeScript strict mode
- Tailwind CSS with a dark/light theme system
- Supabase for auth and database
- Stripe for billing with usage-based pricing
- Dashboard with sidebar navigation
- Landing page with pricing table
- Settings page with profile, billing, and team management
Use server components by default. Client components only where state/interactivity is needed.
No "use client" on pages unless absolutely required.
All API calls through server actions, not route handlers.
Best tool: Claude Code — handles the full architecture in one shot.
2. REST API with Auth
Build a REST API using Python FastAPI with:
- JWT auth with refresh tokens
- SQLAlchemy ORM with PostgreSQL
- Alembic migrations
- Pydantic v2 schemas for all request/response models
- Rate limiting with slowapi
- CORS configured for localhost:3000 and production domain
- Health check endpoint at /health
- OpenAPI docs auto-generated
Structure: src/api/routes, src/models, src/schemas, src/core, src/db
Follow the repository pattern. No business logic in routes.
Best tool: Cursor — excels at Python backend code.
3. CLI Tool
Build a CLI tool in Node.js with:
- Commander.js for argument parsing
- Interactive prompts with inquirer
- Colorful output with chalk
- Spinner for long operations with ora
- Config file support (.toolrc in home directory)
- --verbose and --json output flags on every command
- Proper exit codes (0 success, 1 error, 2 usage error)
Commands: init, run, config, status
Package as an npm global install.
Include a README with usage examples.
Best tool: Claude Code — handles CLI architecture well.
4. Chrome Extension
Build a Chrome extension (Manifest V3) that:
- Adds a sidebar panel on any webpage
- Extracts the main content of the current page
- Summarizes it in 3 bullet points (using the page text, no API calls)
- Allows saving summaries to local storage
- Shows history of saved summaries
- Has a popup with settings (summary length, auto-summarize toggle)
Use TypeScript. Vanilla JS for the content script (no React in content scripts).
React for the popup and sidebar panel only.
Include manifest.json with correct permissions.
Best tool: Windsurf — great at browser extension scaffolding.
5. Landing Page
Create a landing page with:
- Hero section with animated gradient background
- Feature grid (3 columns on desktop, stacked on mobile)
- Pricing table with 3 tiers and a toggle for monthly/annual
- Testimonial carousel
- FAQ accordion
- Footer with newsletter signup
- Fully responsive, mobile-first
- Dark mode by default with light mode toggle
- Smooth scroll between sections
- Intersection Observer animations on scroll
Next.js with Tailwind CSS. No component libraries.
Apple-style design: clean, lots of white space, SF Pro font stack.
Best tool: Claude Code — produces the most polished UI.
6. Dashboard
Build an admin dashboard with:
- Sidebar navigation with collapsible sections
- Top bar with search, notifications, and user avatar
- Overview page with 4 stat cards and 2 charts
- Data table with sorting, filtering, pagination, and row selection
- Detail page with tabs
- Settings page with form validation
- Dark/light theme
- Responsive: sidebar collapses to hamburger on mobile
Next.js 15, Tailwind CSS, Recharts for charts.
All data from static JSON files (no backend needed).
TypeScript strict. No any types.
Best tool: Cursor — handles complex stateful UIs well.
7. Mobile App
Build a React Native app with Expo that:
- Has tab navigation (Home, Search, Profile)
- Home feed with pull-to-refresh and infinite scroll
- Search with debounced input and results list
- Profile page with edit mode
- AsyncStorage for local data persistence
- Dark/light theme using useColorScheme
- Proper TypeScript types for all screens and components
Use expo-router for navigation.
Functional components only, no class components.
Best tool: Cursor — best React Native support.
8. E-commerce Store
Build a Next.js e-commerce store with:
- Product listing page with category filters and search
- Product detail page with image gallery, size selector, and reviews
- Shopping cart with add/remove/quantity controls
- Checkout flow (3 steps: shipping, payment, confirmation)
- Order confirmation page with order summary
- Responsive design, mobile-first
Use Zustand for cart state. Tailwind CSS for styling.
Product data from a local JSON file (15 sample products with images from picsum.photos).
No backend. All client-side.
Best tool: Claude Code — handles the full flow in one pass.
9. Documentation Site
Build a documentation site with:
- MDX content with syntax highlighting
- Sidebar navigation auto-generated from file structure
- Search with Cmd+K command palette
- Light/dark theme
- Previous/Next page navigation
- Table of contents sidebar (right side, sticky)
- Copy button on code blocks
- Responsive
Next.js App Router. Content in /content/docs directory.
Frontmatter for title, description, order.
Best tool: Claude Code.
10. Monorepo Setup
Set up a Turborepo monorepo with:
- apps/web — Next.js 15 app
- apps/api — Express API server
- packages/ui — shared React component library
- packages/config — shared ESLint, TypeScript, Tailwind configs
- packages/types — shared TypeScript types
Configure:
- pnpm workspaces
- Turbo pipeline for build, dev, lint, test
- Shared tsconfig base
- GitHub Actions CI that only builds changed packages
- Docker Compose for local development
Best tool: Claude Code — understands monorepo architecture.
Section 2: Feature Implementation (15 prompts)
11. Authentication System
Add authentication to this Next.js app using NextAuth.js v5:
- Google and GitHub OAuth providers
- Email magic link sign-in
- Session stored in JWT
- Protected routes via middleware (all /dashboard/* routes)
- Sign in, sign out, and sign up pages
- User profile stored in Prisma/PostgreSQL
- Rate limit login attempts (5 per minute per IP)
Do NOT use the pages router. App Router only.
12. Real-time Features
Add real-time functionality to this app:
- WebSocket connection using Socket.io
- Presence indicators (who's online)
- Live typing indicators
- Optimistic updates for messages
- Reconnection with exponential backoff
- Connection status indicator in the UI
Server: Express with socket.io
Client: React with socket.io-client
Handle disconnections gracefully. No data loss.
13. File Upload System
Build a file upload system:
- Drag and drop zone with visual feedback
- Multiple file selection
- File type validation (images only: jpg, png, webp, gif)
- Max file size: 10MB per file, 50MB total
- Upload progress bar per file
- Image preview before upload
- Retry failed uploads
- Cancel in-progress uploads
Upload to S3 using presigned URLs.
Show toast notifications for success/failure.
14. Search with Filters
Build a search page with:
- Full-text search input with debounce (300ms)
- Filter sidebar: category checkboxes, price range slider, date range picker, sort dropdown
- Results grid with skeleton loading states
- URL-based filter state (shareable URLs)
- Clear all filters button
- Result count and pagination
- Mobile: filters in a slide-out drawer
All filters should compose — applying category + price range should AND them together.
Update URL params on every filter change without page reload.
15. Notification System
Build a notification system:
- Bell icon with unread count badge in the navbar
- Dropdown panel showing recent notifications (last 20)
- Mark as read on click, mark all as read button
- Different notification types: info, success, warning, error
- Toast notifications for real-time events (bottom-right, auto-dismiss after 5s)
- Notification preferences page (email, push, in-app toggles per type)
- Unread notifications persist in localStorage
No backend. All client-side with localStorage.
16. Data Table
Build a data table component with:
- Column sorting (click header to sort asc/desc)
- Multi-column filtering (text input per column)
- Row selection with checkbox (select all, select individual)
- Pagination (10, 25, 50, 100 rows per page)
- Column resizing by dragging
- Sticky header on scroll
- Export selected rows as CSV
- Responsive: horizontal scroll on mobile with sticky first column
- Loading skeleton state
- Empty state with illustration
Generic component — accepts any data shape via TypeScript generics.
No external table library. Pure implementation.
17. Form Builder
Build a dynamic form builder:
- Drag and drop fields: text, email, number, textarea, select, checkbox, radio, date
- Field properties panel: label, placeholder, required, validation rules
- Live preview of the form as you build it
- Export form as JSON schema
- Import JSON schema to recreate a form
- Form submission preview (shows what data would be collected)
- Responsive preview (desktop/tablet/mobile toggle)
Use dnd-kit for drag and drop.
Zod for validation schema generation.
18. Multi-step Wizard
Build a multi-step form wizard:
- Step indicator at top (numbered, with labels)
- Next/Previous navigation
- Form validation per step before allowing Next
- Data persists across steps (not lost on back)
- Review step at the end showing all entered data
- Submit button on final step
- Progress saved to localStorage (resume where you left off)
- Animated transitions between steps (slide left/right)
4 steps: Personal Info, Address, Preferences, Review & Submit.
Use react-hook-form with Zod validation.
19. Markdown Editor
Build a Markdown editor with:
- Split view: editor on left, preview on right
- Toolbar: bold, italic, heading, link, image, code, list, quote
- Keyboard shortcuts (Cmd+B bold, Cmd+I italic, etc.)
- Syntax highlighting in the editor
- Auto-save to localStorage every 5 seconds
- Word count and reading time
- Full-screen mode
- Export as .md file
- Dark mode support
No external markdown editor libraries. Build from textarea + custom rendering.
Use react-markdown for the preview side.
20. Infinite Scroll Feed
Build an infinite scroll feed:
- Load 20 items initially
- Intersection Observer triggers loading next batch at 80% scroll
- Loading spinner at bottom while fetching
- Pull to refresh on mobile
- Skeleton loading for initial load
- Error state with retry button
- "Back to top" floating button after scrolling 3 screens
- Maintain scroll position when navigating back
Use a fake API that returns paginated data (simulate 500ms latency).
Virtual scrolling NOT needed for this scale.
21-25. More Feature Prompts
(I'll keep the remaining feature prompts shorter for space)
21. Dark/Light Theme System: "Add a theme system with CSS variables, localStorage persistence, system preference detection, smooth transitions, and no flash on load."
22. Keyboard Shortcuts: "Add Cmd+K command palette, keyboard shortcut hints on hover, customizable keybindings stored in localStorage."
23. Error Boundary: "Add error boundaries with fallback UI, error logging, retry button, and route-level error pages for Next.js."
24. Analytics Dashboard: "Build a dashboard with line charts, bar charts, pie charts using Recharts. Date range picker, metric cards with sparklines, CSV export."
25. Email Template Builder: "Build a drag-and-drop email template builder with MJML output. Components: header, text, image, button, divider, columns."
Section 3: DevOps & Infrastructure (10 prompts)
26. Terraform Module
Write a Terraform module for an AWS ECS Fargate service:
- ECS cluster, task definition, service
- ALB with HTTPS listener and ACM certificate
- Auto-scaling based on CPU and memory (min 2, max 10)
- CloudWatch log group with 30-day retention
- IAM roles with least privilege
- Security groups: ALB allows 443, tasks allow ALB only
- Variables: app_name, container_image, cpu, memory, desired_count, vpc_id, subnet_ids, domain_name
- Outputs: service_url, cluster_arn, task_definition_arn
Include a README with usage example.
Use Terraform 1.9+ syntax.
27. GitHub Actions CI/CD
Create a GitHub Actions workflow that:
- Triggers on push to main and pull requests
- Runs lint, type check, and tests in parallel
- Builds Docker image and pushes to ECR (only on main)
- Deploys to ECS Fargate (only on main, after tests pass)
- Sends Slack notification on failure
- Caches node_modules and Docker layers
- Uses OIDC for AWS authentication (no long-lived secrets)
Include: .github/workflows/ci.yml and .github/workflows/deploy.yml
Use composite actions for shared steps.
28. Docker Compose Stack
Create a Docker Compose stack for local development:
- Next.js app (hot reload)
- Express API (hot reload with nodemon)
- PostgreSQL 16 with persistent volume
- Redis for caching
- Mailhog for email testing
- Adminer for database management
- Nginx reverse proxy routing /api to Express, everything else to Next.js
Include health checks on all services.
.env.example with all required variables.
Makefile with: make up, make down, make logs, make db-reset, make seed.
29. Kubernetes Deployment
Create Kubernetes manifests for a production deployment:
- Deployment with 3 replicas, rolling update strategy
- Service (ClusterIP)
- Ingress with TLS (cert-manager)
- HPA (2-10 pods, 70% CPU target)
- ConfigMap for non-sensitive config
- Secret for sensitive values (reference by name, don't include values)
- PodDisruptionBudget (minAvailable: 1)
- NetworkPolicy (only allow ingress from ingress-nginx namespace)
- ServiceMonitor for Prometheus scraping
Use Kustomize with base/ and overlays/production/ structure.
30. Monitoring & Alerting
Set up monitoring for a production service:
- CloudWatch dashboard with key metrics
- Alarms: CPU > 80%, memory > 85%, 5xx rate > 1%, latency p99 > 2s
- SNS topic for alerts (email + Slack webhook)
- Lambda function to format CloudWatch alarms as Slack messages
- Log metric filters for ERROR and CRITICAL log levels
- Terraform for all resources
Include a runbook for each alarm (what it means, how to investigate, how to fix).
31-35. More DevOps Prompts
31. Ansible Playbook: "Write an Ansible playbook to configure an Ubuntu server: install Docker, configure UFW firewall, set up fail2ban, create non-root user, configure SSH hardening, install monitoring agent."
32. Helm Chart: "Create a Helm chart for deploying a microservice with configurable replicas, resources, ingress, secrets, and service account."
33. Disaster Recovery: "Write a Terraform module for cross-region DR with RDS read replica, S3 cross-region replication, Route53 health checks, and automated failover Lambda."
34. Cost Optimization: "Write a Lambda function that runs daily, finds idle EC2 instances (CPU < 5% for 7 days), unattached EBS volumes, and unused Elastic IPs. Sends a Slack report with estimated savings."
35. Security Scanning: "Set up a security scanning pipeline: Trivy for container images, Checkov for Terraform, Gitleaks for secrets, OWASP ZAP for DAST. GitHub Actions workflow that blocks PR merge on critical findings."
Section 4: Debugging & Refactoring (10 prompts)
36. Bug Investigation
I'm seeing this error in production:
[paste error]
The relevant code is in [file path].
Investigate the root cause. Don't just fix the symptom.
1. Explain what's happening and why
2. Show the minimal fix
3. Show the proper fix if different from minimal
4. Add a test that would have caught this
5. Suggest monitoring/alerting to detect this class of bug
37. Performance Optimization
This React component re-renders too often and causes jank:
[paste component]
Profile it and fix:
1. Identify every unnecessary re-render
2. Apply memoization where appropriate (React.memo, useMemo, useCallback)
3. Move expensive computations out of render
4. Virtualize long lists if present
5. Show before/after render count comparison
38. Code Review
Review this code like a senior engineer:
[paste code]
Check for:
1. Bugs and logic errors
2. Security vulnerabilities (injection, XSS, auth bypass)
3. Performance issues
4. Error handling gaps
5. TypeScript type safety (any types, missing null checks)
6. Naming and readability
7. Test coverage gaps
Be specific. Line numbers. Severity ratings. Concrete fixes.
39. Refactor for Testability
Refactor this code to be testable:
[paste code]
1. Extract pure functions from side effects
2. Inject dependencies instead of importing directly
3. Make state changes explicit and observable
4. Write the tests alongside the refactored code
5. Use vitest with @testing-library/react for React components
40. Migration
Migrate this codebase from [old] to [new]:
- Map every feature to its equivalent in the new stack
- Handle breaking changes with a compatibility layer
- Create the migration in phases (not big bang)
- Include rollback instructions for each phase
- Verify with tests at each phase
Phase 1 should be achievable in one PR.
41-45. More Debugging Prompts
41. Memory Leak: "This Node.js service leaks memory. It starts at 200MB and reaches 2GB in 24 hours. Here's the code. Find the leak, fix it, and add monitoring."
42. Race Condition: "This code has an intermittent bug that only happens under load. Identify the race condition, fix it, and add a test that reproduces it."
43. Type Safety: "Add strict TypeScript types to this JavaScript file. Replace all any with proper types. Add interfaces for all function parameters and return types."
44. API Error Handling: "Add comprehensive error handling to this API: input validation, database error mapping, rate limiting, proper HTTP status codes, and error response schema."
45. Accessibility Fix: "Audit this component for WCAG 2.1 AA compliance. Fix all issues: focus management, ARIA labels, keyboard navigation, color contrast, screen reader announcements."
Section 5: AI-Specific (5 prompts)
46. RAG Pipeline
Build a RAG (Retrieval-Augmented Generation) pipeline:
- Ingest: Load PDF/Markdown documents, chunk into 500-token segments with 50-token overlap
- Embed: Generate embeddings using OpenAI text-embedding-3-small
- Store: Save in a local ChromaDB vector store
- Retrieve: Find top-5 relevant chunks for a query using cosine similarity
- Generate: Pass chunks as context to Claude with a system prompt that cites sources
- API: FastAPI endpoint that accepts a question and returns an answer with sources
Python. Include requirements.txt and a README.
47. AI Agent with Tools
Build an AI agent that can:
- Search the web (using Serper API)
- Read and summarize URLs
- Execute Python code in a sandbox
- Write and read files
- Make API calls
Architecture:
- ReAct loop: Observe → Think → Act → Observe
- Maximum 10 tool calls per request
- Conversation memory (last 10 turns)
- Structured tool output parsing
- Error recovery (retry failed tool calls once)
Use Claude API with tool_use. Python with anthropic SDK.
48. Fine-tuning Data Pipeline
Build a pipeline to prepare fine-tuning data:
- Input: CSV with columns (instruction, input, output)
- Validation: Check format, length, duplicates, quality heuristics
- Formatting: Convert to OpenAI JSONL format and Anthropic format
- Statistics: token counts per example, total tokens, estimated cost, distribution chart
- Splitting: 90/10 train/eval split with stratified sampling
- Export: Ready-to-upload files for both platforms
Python script with argparse CLI.
Include sample data for testing.
49. Prompt Chain
Build a prompt chain for technical blog post generation:
1. Research: Given a topic, generate 5 subtopics and key points
2. Outline: Create a structured outline with H2s and H3s
3. Draft: Write each section (one API call per section for quality)
4. Review: Self-critique the draft for accuracy, tone, and completeness
5. Polish: Apply edits from the review step
6. Format: Output as Markdown with frontmatter
Each step's output feeds into the next step's prompt.
Include retry logic and cost tracking.
Use Claude API. Python.
50. Evaluation Framework
Build an LLM evaluation framework:
- Define test cases as YAML: input, expected output, evaluation criteria
- Support multiple eval methods: exact match, contains, regex, LLM-as-judge
- Run evaluations against multiple models in parallel
- Score each response on a 1-5 scale across: accuracy, relevance, completeness, safety
- Generate a markdown report with pass/fail rates, scores, and failure analysis
- Track scores over time (append to a JSON log file)
Python. Support Claude, OpenAI, and Gemini APIs.
Include 10 sample test cases for a customer support bot.
Tool-Specific Tips
Claude Code
- Always include a
CLAUDE.mdfile in your project root with coding standards - Use
@filereferences to point Claude at specific files - Claude excels at full-stack TypeScript and infrastructure code
- Best for: architecture decisions, complex refactors, multi-file changes
Cursor
- Use
.cursorrulesfile for project-specific instructions - Cmd+K for inline edits, Cmd+L for chat
- Tab completion learns your patterns over time
- Best for: rapid iteration, Python backends, familiar codebase
Windsurf
- Cascade mode for multi-file changes
- Flows feature chains multiple edits together
- Best for: scaffolding new projects, frontend work, browser extensions
Get the Prompt Generator
Tired of writing prompts manually? I built a Vibe Coding Prompt Generator that creates tailored prompts based on your tool, tech stack, and project type. It's free, runs in your browser, and needs no sign-up.
What prompts have worked best for you? Find me on X or LinkedIn — I'm always collecting new ones.