Vibecoding prompt examples: one app idea → a v1 plan + the first 3 prompts

Create a new Vite React app in the current folder using Tailwind CSS for styling.

- Write a PLAN.md file outlining our v1 scope: monthly summary cards, top products list, and a month dropdown, while skipping Etsy API integration, user accounts, and databases.
- Create a sample data file with mock Etsy products, monthly sales counts, and revenue for the last three months.
- Build the main dashboard screen with a clean sidebar, a header, summary metric cards, and a data table for top products.
- Populate the table and cards using the sample data.
- Explain how to install dependencies and run the dev server in the terminal.

Do not add external backend servers or complex charting libraries yet; keep everything in pure React components with Tailwind.

Done when: I can run the dev server and see a styled dashboard populated with mock Etsy sales data.

Update the EtsyPulse dashboard so the user can interact with the data.

- Add a functional month selector dropdown at the top of the dashboard.
- Make the summary cards and top products table update dynamically based on the selected month.
- Add a click handler to any product row that opens a simple modal showing more details about that product's sales.
- Ensure the UI looks clean and handles empty states gracefully if a month has no sales.
- Keep changes small and modular, updating existing files cleanly.

Do not connect any external APIs or databases; keep using the local mock data file.

Done when: Changing the month dropdown updates the stats and clicking a product opens its detail modal.

Add final polish and documentation to the EtsyPulse dashboard.

- Improve the visual styling with subtle hover effects, clean badge colors for top sellers, and responsive spacing.
- Add a README.md file explaining what the app does, how it works with mock data, and step-by-step instructions on how to test it.
- Verify there are no broken imports or console errors in the code.
- Ensure the layout looks great on both large screens and smaller browser windows.

Do not add new major features or pages outside the agreed v1 scope.

Done when: The app looks polished, runs without errors, and has a clear README testing guide.

Create a modern, friendly landing page for a dog-walking business called PawsTime Booking using React and Tailwind CSS.

- Design a warm, inviting hero section with a playful dog theme, clear headline, and friendly copywriting.
- Add a dedicated booking section that displays a list of available time slots for today and tomorrow, using realistic sample data.
- Include an interactive time slot selection mechanism where clicking a slot opens a simple booking form.
- The booking form must ask for the client's name, email, dog's name, and dog's breed, with basic validation.
- Ensure the entire layout is fully responsive and looks fantastic on both mobile phones and desktop screens.

Do not include user accounts, backend databases, or online payment gateways for now.

Done when: You can view sample time slots on the page, click one, fill out the form, and see a success state.

Update the PawsTime Booking app to handle booking submissions cleanly and manage state effectively.

- When a client successfully submits the booking form, immediately remove that time slot from the available list so it cannot be double-booked.
- Save the list of active bookings to the browser's local storage so they do not disappear on page refresh.
- Create a clear confirmation view or modal that summarizes the booked walk details, including date, time, client name, and dog name.
- Add an empty state message for the time slots list in case all slots for the day are fully booked.
- Polish all UI components with smooth transitions, clean spacing, and consistent friendly typography.

Do not add user authentication or external database connections yet.

Done when: Submitting a booking removes the slot from the list, shows a confirmation message, and retains the data if you refresh the browser.

Perform a final polish and review of the PawsTime Booking app to ensure a seamless client experience.

- Add a friendly FAQ section at the bottom of the page answering common questions about your dog-walking services.
- Include subtle error states and helper text for the booking form fields if left blank or mistyped.
- Add a 'My Bookings' tab or view so clients can quickly check their upcoming scheduled walks stored in this browser.
- Ensure all buttons have delightful hover effects and loading states during form submission.
- Check that the mobile layout is completely thumb-friendly with properly sized touch targets.

Do not add external APIs, text message alerts, or admin dashboards.

Done when: You can browse the FAQ, book a slot with validation, view your scheduled walks, and test the app smoothly on a mobile screen size.

Create a simple and colorful multiplication quiz web app for kids using React, Lucide icons, and Tailwind CSS.

- Create a cheerful home screen with a large 'Start Game' button.
- Create a game screen that displays random multiplication questions from tables 1 to 12.
- Include a clean number input or clickable keypad for kids to submit their answers.
- Show instant visual feedback (green for correct, red for incorrect) before moving to the next question.
- Keep track of the current score and a 10-question round limit.

Do not add user accounts, backend servers, or audio effects.

Done when: Clicking start begins a game, answering questions shows correct/incorrect feedback, and finishing 10 questions leads to a results view.

Update the multiplication quiz app to fully handle game completion and high scores.

- When a 10-question round finishes, show a summary screen with the final score and total correct answers.
- Save the high score to the browser's localStorage so it persists on refresh.
- Display a top high scores list on the home screen.
- Add a 'Play Again' button that instantly resets the game state and starts a new round.
- Ensure the design is extra kid-friendly with large buttons, bright colors, and encouraging text.

Do not add external databases or user login screens.

Done when: Completing a game saves the score to localStorage and updates the high score list on the home screen.

Add final polish, error handling, and responsiveness to the multiplication quiz app.

- Ensure the app looks great and fits nicely on both desktop and tablet screens.
- Handle empty states gracefully, such as showing 'No high scores yet! Be the first!' on the home screen.
- Allow kids to press the 'Enter' key on their keyboard to submit their answer in addition to clicking the submit button.
- Add smooth fade or scale transitions when questions change.
- Clean up any layout clutter and ensure all text is easy to read.

Do not add new game modes or multiplayer features.

Done when: Pressing Enter submits answers, empty high score states look great, and the app feels complete and fun to use.

Create a full-stack web app called FlatSplit using React, Express, and Replit's database to help flatmates split expenses. Build the main dashboard screen that displays a summary of who owes whom based on logged expenses, and a form to add a new expense with a description, amount, and who paid. Keep the app runnable at all times and use Tailwind CSS for a clean, modern look.

- Initialize a React frontend and a Node.js Express backend in a single Replit project.
- Create a responsive dashboard layout with a clear summary card area at the top.
- Implement a working form to add an expense that saves to the backend database.
- Display a list of recent expenses right below the form.
- Populate the app with 3 sample expenses on first load so the summary calculations are immediately visible.

Do not add user login, multiple flats support, or complex receipt image uploads.

Done when: I can open the preview, see sample expenses, and successfully add a new expense that updates the summary.

Update the backend logic and frontend display in our FlatSplit app to calculate and show the simplified debts between flatmates. Instead of just listing raw totals, compute who needs to pay whom to settle up all debts with the fewest possible transactions.

- Write a helper function on the backend to calculate net balances for each flatmate.
- Translate net balances into a clean list of settlement instructions like 'Alice owes Bob $15'.
- Display these settlement instructions prominently at the top of the dashboard.
- Ensure the calculations update instantly whenever a new expense is added or deleted.
- Handle edge cases gracefully when all balances are zero and everyone is settled up.

Do not add currency conversion or partial payment tracking for individual expenses.

Done when: Adding a new expense immediately updates the 'who owes whom' list with correct simplified payment instructions.

Finish the FlatSplit app by adding a history screen and a 'Settle Up' action to clear the slate. Make sure the app looks polished, handles empty states nicely, and is fully ready to use.

- Add a navigation toggle or tab to switch between the Dashboard and the full Expense History view.
- Allow users to delete individual expenses from the history list, which should update the balances.
- Add a 'Settle Up' button that clears all recorded expenses and resets all balances to zero after a confirmation prompt.
- Ensure empty states look friendly when there are no expenses logged yet.
- Polish the spacing, buttons, and mobile responsiveness across both screens.

Do not add email alerts, export to CSV, or user profile customization.

Done when: I can view full history, delete an item, use the settle up button to reset balances, and test the app end-to-end without errors.

We are building CampCheck, a web app that generates a weekend camping packing list based on the weather. Please write the complete code for a single index.html file using Tailwind CSS via CDN and vanilla JavaScript.

- Create a clean, modern mobile-friendly interface with a title and brief description.
- Add a weather selector section with buttons or a dropdown for Sunny, Rainy, Cold, and Hot.
- Add a generate button that displays a categorized packing list (Gear, Clothing, Food) based on the chosen weather.
- Include working checkboxes next to each item so users can check things off.
- Provide clear step-by-step instructions on how to save this code into an index.html file and open it in a web browser.

Do not include backend servers, user logins, or live API calls.

Done when: I can open the HTML file in my browser, select a weather type, and see a tailored checklist with working checkboxes.

We are continuing work on CampCheck, our single-file HTML camping packing list generator using Tailwind CSS and JavaScript. Please review the current app logic and update the index.html file with complete code.

- Add an input field and an 'Add Item' button so users can add their own custom items to any category.
- Implement browser localStorage so that checked items and custom items stay saved even if the page is refreshed.
- Add a 'Reset List' button to uncheck all items and clear custom additions.
- Ensure the UI feels responsive and gives subtle visual feedback when items are checked off.
- Provide the complete updated index.html file so I can replace my old code entirely.

Do not add external databases or user accounts.

Done when: I can check items, add a custom item, refresh the page, and see that my changes were saved.

We are finalizing v1 of CampCheck, our single-file camping packing list generator. Please review the complete index.html file and provide the final polished version with all previous features intact.

- Add a progress bar at the top that fills up as you check off items on your list.
- Improve the visual design with better spacing, friendly camping icons or emojis, and a clean color palette using Tailwind CSS.
- Add a nice empty state or instruction banner when the page first loads before a weather type is selected.
- Include clear instructions on how to use the app and test all features.
- Output the entire index.html file in one complete code block without truncation.

Do not add complex animations, multi-language support, or external JavaScript libraries.

Done when: The app looks polished, the progress bar moves as I check items, and I can use it smoothly from top to bottom.