# Vibe Coding Prompt Examples

Practical prompts organized by project type, complexity, and tool. Each prompt demonstrates the level of detail that produces good results.

---

## The Anatomy of a Great Prompt

Before the examples, understand what makes a prompt work:

```
1. WHO uses this? (audience, skill level)
2. WHAT does it do? (features, not implementation)
3. HOW should it look? (design direction, colors, references)
4. WHAT data does it manage? (entities, relationships)
5. WHAT happens when things go wrong? (edge cases, errors)
6. ANY technical preferences? (framework, language, hosting)
```

---

## Quick Prototypes (15-30 minutes)

### Job Application Tracker
```
Build a job application tracker for someone actively job hunting.

Features:
- Table view showing all applications with columns: company, role, date applied,
  status (applied/screen/interview/offer/rejected), salary range, and next action
- Kanban board view grouped by status with drag-and-drop between columns
- Click any application to see a detail panel with notes, contact info, and
  timeline of events
- Quick-add form that only requires company and role (everything else optional)
- Filter by status, date range, and search by company name
- Stats bar at top: total applications, response rate, interviews this week

Design: Clean and professional. Slate/blue color scheme. No clutter.
Data: localStorage. Structure it as an array of objects.
Responsive: Must work on mobile for checking between interviews.
```

### Habit Tracker with Streaks
```
Build a daily habit tracker focused on streaks and consistency.

I want to track 5-10 habits per day. Each habit is a simple checkbox.
Show a calendar heat map (like GitHub contributions) for each habit.
Display current streak and longest streak prominently.

Features:
- Add/remove/reorder habits
- Today's view: list of habits with checkboxes
- Week view: 7-day grid for each habit
- Monthly heat map showing consistency
- Streak counters with streak-freeze option (1 per month)
- Daily completion percentage

Design: Warm, encouraging colors. Green for done, soft gray for missed.
Celebrate streaks with subtle animations (not annoying).
Dark mode by default.
Data: localStorage with date-keyed entries.
```

### Meeting Cost Calculator
```
Build a meeting cost calculator that shows the real-time cost of a meeting.

Setup: User enters number of attendees and their average hourly rate
(or pick from presets: junior $50, mid $75, senior $100, executive $200).

During meeting: A timer counts up showing:
- Elapsed time
- Running cost in dollars (animated counter)
- Cost per minute
- "This meeting has cost more than [relatable comparison]"
  (e.g., "a month of Netflix", "a flight to Chicago")

End: Summary with total cost, cost per person, and a suggestion:
"This meeting cost $X. Could it have been an email?"

Design: Bold, large typography. Red/orange color scheme that subtly
intensifies as cost grows. Full-screen mode for projecting in meetings.
```

---

## Full Applications (1-3 hours)

### Freelancer Invoice Generator
```
Build an invoice generator for freelance consultants.

Core workflow:
1. Set up profile (name, address, logo, payment details, default rate)
2. Create clients (name, company, email, address)
3. Create invoices:
   - Select client (auto-fills their info)
   - Add line items: description, hours/quantity, rate, amount
   - Tax calculation (configurable percentage)
   - Notes and payment terms section
   - Due date with net-30/net-60 presets
4. Generate PDF invoice with professional formatting
5. Track invoice status: draft, sent, paid, overdue
6. Dashboard showing: outstanding amount, paid this month, overdue invoices

Design: Professional, clean. Accent color customizable per-user.
The generated PDF should look like something you'd be proud to send.

Data: localStorage with export/import JSON for backup.
Tech: Use html2pdf.js or similar for PDF generation.
Include a "preview" mode before generating.
```

### Recipe Collection Manager
```
Build a personal recipe collection app for a home cook who wants to
organize family recipes and meal plan.

Features:
- Add recipes with: title, photo (URL or upload), ingredients list,
  step-by-step instructions, prep time, cook time, servings, tags
- Parse ingredients intelligently (e.g., "2 cups flour" separates into
  quantity, unit, ingredient)
- Scale recipes: change serving count and all ingredients adjust
- Meal planner: drag recipes onto a weekly calendar
- Shopping list: auto-generated from the week's meal plan, combining
  duplicate ingredients (e.g., two recipes needing onions = total onions)
- Search by ingredient ("what can I make with chicken and rice?")
- Tag system: cuisine type, dietary (vegetarian, gluten-free), meal type

Design: Warm, food-friendly. Cream/terracotta palette. Cards with
rounded corners. Generous whitespace. Photos should be prominent.

Data: localStorage with structured recipe objects.
Responsive: Optimized for tablet in the kitchen.
```

### Personal Finance Dashboard
```
Build a personal finance overview dashboard.

The user manually enters transactions (this is not connected to a bank).

Features:
- Add transactions: amount, category, date, description, type (income/expense)
- Preset categories: Housing, Food, Transport, Entertainment, Health,
  Shopping, Utilities, Income, Freelance, Other
- Custom categories with color and icon
- Dashboard showing:
  - This month: total income, total expenses, net savings, savings rate %
  - Spending by category (donut chart)
  - Daily spending trend (line chart)
  - Month-over-month comparison (bar chart)
  - Top 5 largest expenses
- Budget setting: set monthly budget per category, show progress bars
- Alerts when approaching budget limit (80% and 100%)

Design: Clean, data-focused. Dark theme with green for income, red for
expenses. Charts should be interactive (hover for details).
Use Chart.js for visualization.

Data: localStorage. Include CSV export.
```

---

## Games (1-2 hours)

### Wordle Clone with Custom Words
```
Build a Wordle-style word guessing game with a twist: users can create
and share custom word puzzles with friends.

Core game:
- 6 attempts to guess a 5-letter word
- Color feedback: green (correct position), yellow (wrong position),
  gray (not in word)
- Animated tile flipping for reveals
- On-screen keyboard that updates with letter status
- Statistics: games played, win %, current streak, max streak,
  guess distribution histogram

Custom puzzle mode:
- "Create Puzzle" button lets you set any 5-letter word
- Generates a shareable URL with the word encoded (not visible in URL)
- Optional hint that reveals after 3 failed guesses
- "Daily Challenge" mode with a pre-set daily word

Design: Clean, focused. Dark mode. Satisfying animations on correct guess.
Confetti animation on win. Smooth keyboard feedback.
Share results as emoji grid (like original Wordle).
```

### Typing Speed Test
```
Build a typing speed test with a retro terminal aesthetic.

Gameplay:
- Show a paragraph of text (randomly selected from a pool of 20+ passages)
- User types in real-time, character by character
- Correct characters highlighted green, errors highlighted red
- Timer starts on first keystroke
- Results: WPM (words per minute), accuracy %, time taken
- Highlight problem keys (most frequently mistyped)

Difficulty modes:
- Easy: common English words, short sentences
- Medium: technical vocabulary, longer paragraphs
- Hard: code snippets (JavaScript, Python)
- Custom: paste your own text

Progress tracking:
- History of last 20 tests with WPM chart
- Personal best indicators
- Average WPM over time trend line

Design: Retro green-on-black terminal look. Monospace font throughout.
CRT scan-line effect (subtle, CSS only). Blinking cursor.
Sound effects: soft keyclick sounds (optional, muted by default).
```

### Memory Card Game with Themes
```
Build a memory matching card game with multiple visual themes.

Gameplay:
- Grid of face-down cards (4x4, 6x6, or 8x8)
- Click to flip two cards. Match = they stay. No match = they flip back.
- Move counter and timer
- Star rating: 3 stars (under X moves), 2 stars, 1 star
- Combo multiplier for consecutive matches

Themes (different card face designs):
- Emoji: food items
- Animals: cute animal illustrations (use Unicode/emoji)
- Flags: world flags
- Code: programming language logos (use text abbreviations)
- Numbers: simple digit matching for kids

Features:
- Difficulty selector (grid size)
- Leaderboard per difficulty (localStorage)
- Smooth 3D card flip animation (CSS transform)
- Win screen with stats and replay option
- Hint button (briefly shows all cards, costs 3 moves)

Design: Playful, colorful. Different background color per theme.
Cards should have satisfying flip and match animations.
Mobile-optimized with touch-friendly card sizes.
```

---

## Productivity Tools (2-4 hours)

### Markdown Note-Taking App
```
Build a markdown note-taking application with real-time preview.

Layout: Split pane. Editor on left, rendered preview on right.
Optionally toggle to full-editor or full-preview mode.

Features:
- Folder/notebook organization (nested folders)
- Full markdown support including code blocks with syntax highlighting
- Auto-save as you type (debounced, 500ms)
- Full-text search across all notes
- Tag system (add tags to notes, filter by tag)
- Recent notes quick-access list
- Word count and reading time estimate
- Export individual notes as .md files
- Keyboard shortcuts:
  - Ctrl+N: new note
  - Ctrl+S: force save
  - Ctrl+/: toggle preview
  - Ctrl+K: search
  - Ctrl+B/I: bold/italic

Design: Minimal, distraction-free. Light and dark themes.
Editor: monospace font. Preview: serif font with comfortable line height.
Sidebar collapsible for focused writing.

Data: localStorage with JSON structure for notebooks and notes.
Use marked.js for markdown parsing and highlight.js for code highlighting.
```

### Pomodoro Timer with Analytics
```
Build a Pomodoro technique timer with detailed productivity analytics.

Timer:
- 25-minute work sessions, 5-minute short breaks, 15-minute long breaks
- Long break after every 4 work sessions
- Large, clear countdown display
- Start/pause/skip/reset controls
- Notification sound when session ends (using Web Audio API)
- Browser notification when timer completes (if permitted)

Task integration:
- Before each pomodoro, select or create a task you're working on
- Track how many pomodoros each task takes
- Estimate pomodoros when creating a task, compare to actual

Analytics dashboard:
- Today: pomodoros completed, focus time, break time
- This week: daily pomodoro chart (bar chart)
- Focus score: actual focus time vs. available time
- Most productive day of week
- Most productive time of day
- Task completion rate

Design: Warm, calming. Tomato red accent for work mode, cool blue for
breaks. Circular progress indicator around the timer. Gentle transitions
between modes. The analytics page should feel rewarding to look at.

Custom settings: adjustable durations, auto-start next session option,
sound selection (or mute).
```

---

## AI-Powered Tools (Agent-Assisted)

These prompts are designed for coding agents (Claude Code, Devin, Codex) working
on real codebases rather than browser-based builders.

### Add Authentication to Existing App
```
Add email/password authentication to this Next.js application.

Requirements:
- Sign up page with email, password, and confirm password
- Login page with email and password
- Password requirements: minimum 8 characters, at least one number
  and one special character
- Protected routes: redirect to login if not authenticated
- Session management using HTTP-only cookies (not localStorage)
- "Remember me" checkbox that extends session to 30 days
- Password reset flow via email link
- Rate limiting: max 5 failed login attempts per 15 minutes per IP
- CSRF protection on all forms

Use the existing design system and component library in the project.
Add proper error messages for all failure cases.
Write tests for the auth flow (happy path and error cases).
```

### Refactor API to REST Standards
```
Refactor the API endpoints in this project to follow REST conventions.

Current state: Mixed naming patterns, inconsistent response formats,
no proper error handling.

Target:
- RESTful URL patterns: GET /api/users, POST /api/users,
  GET /api/users/:id, PUT /api/users/:id, DELETE /api/users/:id
- Consistent response format: { data: ..., error: null } on success,
  { data: null, error: { code: "...", message: "..." } } on failure
- Proper HTTP status codes (200, 201, 400, 401, 403, 404, 500)
- Input validation on all endpoints with descriptive error messages
- Pagination for list endpoints: ?page=1&limit=20
- Sort and filter query parameters where appropriate

Don't change any business logic. Only restructure the API surface.
Update all frontend API calls to match the new patterns.
Run existing tests after changes and fix any that break.
```

### Add Comprehensive Test Suite
```
Add a comprehensive test suite to this project.

Testing strategy:
- Unit tests for all utility functions and business logic
- Integration tests for API endpoints
- Component tests for React components with user interactions
- E2E tests for critical user flows (signup, create item, checkout)

Guidelines:
- Use the testing framework already in the project (check package.json)
- If no framework exists, use Vitest + Testing Library for unit/component,
  Playwright for E2E
- Each test should have a clear description of what it's testing
- Use realistic test data, not "test123" or "foo bar"
- Test error states and edge cases, not just happy paths
- Aim for 80%+ coverage on business logic, don't test trivial getters

Critical paths to cover:
- Authentication flow (login, signup, logout, session expiry)
- Data creation and validation
- Permission checks (can user X do action Y?)
- Error handling (API down, invalid input, timeout)

Run the full suite after writing to ensure all tests pass.
```

---

## Prompt Patterns for Common Situations

### The Bug Fix
```
Bug: [describe what's happening]
Expected: [what should happen]
Steps to reproduce:
1. [step]
2. [step]
Error message: [paste exact error]
This started happening after: [recent change]
```

### The Feature Addition
```
Add [feature] to the existing [component/page].

It should:
- [behavior 1]
- [behavior 2]
- [behavior 3]

It should NOT:
- [thing to avoid]
- [thing to avoid]

Match the existing design patterns and component style.
```

### The Redesign
```
Redesign the [component/page] without changing any functionality.

Current problems:
- [visual issue]
- [usability issue]

Target design:
- [specific visual direction]
- [specific layout change]
- [reference: "similar to how [app] handles this"]

Keep all existing features working. Don't modify data handling or APIs.
```

### The Performance Fix
```
The [page/component] is slow. Specifically:
- [what's slow: initial load, scrolling, interaction]
- [how slow: "takes 3 seconds to load", "janky scrolling"]
- [when: "with 1000+ items in the list"]

Optimize for performance. Possible approaches:
- Virtualization for long lists
- Lazy loading for images/components
- Debouncing for frequent updates
- Memoization for expensive calculations

Measure before and after if possible.
```

---

## Tips for Specific Tools

### For Bolt.new / Lovable / Replit Agent
- Be as complete as possible in your first prompt -- these tools work best with comprehensive descriptions
- Specify "single HTML file" or "React app" to control the output format
- Include specific color hex codes rather than vague descriptions
- Always mention "responsive" and "mobile-friendly" explicitly

### For Cursor Composer / Claude Code
- Reference specific files: "modify the UserProfile component in src/components/"
- Be explicit about what NOT to change: "don't modify the database schema"
- Ask for incremental changes: one feature at a time
- Use "@" to reference specific files for context

### For Devin / Jules / Codex
- Write prompts like tickets: clear acceptance criteria, definition of done
- Specify testing requirements explicitly
- Mention which branch to base work on
- Include links to relevant documentation or examples

---

## Anti-Patterns: Prompts That Fail

### Too vague
```
Make me a cool website
```
*Why it fails: No specifics about what, who, how, or why.*

### Too technical
```
Implement a red-black tree with O(log n) insertion using TypeScript generics
with proper type covariance for the node type parameter
```
*Why it fails: If you know enough to write this prompt, you probably don't need vibe coding for it. And the AI might implement it differently than you expect.*

### Contradictory requirements
```
Build a simple app with user auth, real-time collaboration, offline mode,
end-to-end encryption, and make it a single HTML file
```
*Why it fails: These requirements conflict. Simplify or prioritize.*

### No success criteria
```
Build something for project management
```
*Why it fails: How will you know if the result is right? Define what "done" looks like.*