30 Claude Prompts That Build a Working MVP

You are a senior product engineer and product designer who ships scrappy but credible v1 SaaS apps. <context> I am a founder validating a SaaS idea. Build a working MVP as one self-contained HTML file that uses inline CSS, vanilla JavaScript, and localStorage for all state, so I can open it and click through the whole product without any backend. It must be a previewable artifact. </context> <inputs> - Product in one line: [WHAT IT DOES] - Core user: [WHO] - The one job it must do well: [PRIMARY ACTION, E.G. TRACK X, CREATE Y] - Key objects the user manages: [E.G. PROJECTS, TASKS, CLIENTS] - Brand vibe: [E.G. CLEAN B2B, PLAYFUL] - Seed data I want preloaded: [2-3 EXAMPLE RECORDS] </inputs> <task> Build a single-page SaaS app shell: a top bar with product name and a primary action button, a left sidebar nav, and a main content area showing a list of the core objects with create, edit, and delete working against localStorage. Include an empty state, a create modal with a real form, inline editing, and a small stats summary at the top (counts derived from the data). Preload the seed records so the app looks alive on first open. </task> <constraints> - One self-contained HTML file; no frameworks, no CDN dependencies except Google Fonts. - All data persists in localStorage and survives refresh; no fake buttons — every control works. - Accessible forms with labels, keyboard-closable modal, responsive down to mobile. </constraints> <format> Return the full HTML as an artifact, then list which features are real vs. stubbed and the first backend endpoint you would build to make it production-ready. </format>

You are a full-stack engineer who builds fast internal tools for small teams. <context> My team needs a lightweight internal tool to replace a messy spreadsheet. Build it as one self-contained HTML file using inline CSS, vanilla JS, and localStorage so anyone can open it in a browser with no setup. It must be a previewable artifact. </context> <inputs> - What the tool manages: [E.G. SUPPORT TICKETS, INVENTORY, REQUESTS] - Fields per record: [LIST THE COLUMNS] - Statuses or stages: [E.G. NEW, IN PROGRESS, DONE] - Who uses it: [INTERNAL ROLE] - Bulk actions I need: [E.G. MARK DONE, FILTER, EXPORT] - Seed rows to preload: [2-4 EXAMPLE RECORDS] </inputs> <task> Build a table-driven internal tool: a filterable, sortable table of records with add-row, edit-in-place, delete, and a status dropdown per row; a top filter bar (search plus status filter); a counts summary by status; and an Export to CSV button that downloads the current data. Persist everything to localStorage and preload the seed rows. </task> <constraints> - One self-contained HTML file; no frameworks, Google Fonts allowed. - CSV export must produce a valid downloadable file from the live data. - Table is keyboard-navigable and readable; sensible empty state. </constraints> <format> Return the full HTML as an artifact, then explain the data shape you used and how to swap localStorage for a shared database later. </format>

You are a product engineer who builds clean, complete CRUD apps for early-stage products. <context> I need the core CRUD loop of my product working end to end. Build it as one self-contained HTML file with inline CSS, vanilla JavaScript, and localStorage persistence, returned as a previewable artifact I can click through. </context> <inputs> - The single entity my product is built around: [E.G. RECIPE, HABIT, DEAL] - Fields for that entity: [LIST FIELDS AND TYPES] - How users view the list: [CARDS / TABLE / KANBAN] - A detail view per item should show: [WHAT DETAILS] - Sort or filter I care about: [E.G. BY DATE, BY TAG] - Seed items to preload: [2-3 EXAMPLES] </inputs> <task> Build a full create-read-update-delete app for the entity: a list view in the chosen layout, a create form, a detail view, edit, and delete; client-side validation on the form; one sort and one filter control; and a small header showing the total count. All state lives in localStorage and persists across refresh. </task> <constraints> - One self-contained HTML file; no frameworks; Google Fonts only. - Validate required fields and show inline errors; confirm before delete. - Responsive, accessible, with a real empty state and a clear primary CTA. </constraints> <format> Return the full HTML as an artifact, then describe the entity schema and which fields you would index if this moved to a real database. </format>

You are an e-commerce engineer who builds DTC subscription-box storefronts. <context> I am launching a subscription box and need a working storefront MVP. Build it as one self-contained HTML file with inline CSS, vanilla JS, and localStorage so I can demo the full subscribe flow with no backend. Return it as a previewable artifact. </context> <inputs> - The box and what is inside: [E.G. ARTISAN COFFEE, MONTHLY] - Plans and prices: [E.G. MONTHLY $29, QUARTERLY $79] - Box-size or variant options: [E.G. SOLO, COUPLE, FAMILY] - Audience and vibe: [WHO IT IS FOR, AESTHETIC] - Proof: [REVIEWS, MEMBER COUNT] </inputs> <task> Build a subscription-box storefront: a hero with the box concept and a Choose Your Plan CTA, a plan-selector with the variant and frequency options updating a live price, a how-it-works three-step section, a what-is-inside showcase, a reviews strip, and a checkout-summary panel that stores the chosen plan in localStorage and shows a confirmation screen on subscribe. The plan picker and price must be fully interactive. </task> <constraints> - One self-contained HTML file; no frameworks; Google Fonts only; styled color blocks as product photos. - Price updates instantly from the selected plan and variant; subscribe writes the selection to localStorage and shows a confirmation. - Responsive and accessible; real benefit copy, no lorem ipsum. </constraints> <format> Return the full HTML as an artifact, then explain the pricing-state logic and where a real payment provider would hook in. </format>

You are a product engineer who designs freemium SaaS UIs with usage limits and upgrade prompts. <context> I want to validate a freemium model. Build an MVP as one self-contained HTML file with inline CSS, vanilla JS, and localStorage that simulates a free tier with a usage cap and an upgrade path, previewable instantly as an artifact. </context> <inputs> - Product and core action: [WHAT THE USER DOES] - The metered unit: [E.G. CREDITS, EXPORTS, PROJECTS] - Free-tier limit: [NUMBER] - Paid tiers and prices: [LIST] - What unlocks on upgrade: [BENEFITS] </inputs> <task> Build a SaaS app shell where the user performs the core action, each use decrements a usage meter stored in localStorage, and hitting the free-tier cap triggers an upgrade modal showing the paid tiers and benefits. Include a visible usage bar, a reset-month demo button, and a simulated upgrade that lifts the cap. Make the core action and the metering genuinely work. </task> <constraints> - One self-contained HTML file; no frameworks; Google Fonts only. - The usage meter and cap persist in localStorage; the upgrade modal is keyboard-closable and accessible. - Clear, non-pushy upgrade copy that names the unlocked benefit. </constraints> <format> Return the full HTML as an artifact, then explain the metering logic and what you would log to learn where users hit the wall. </format>

You are a marketplace engineer who builds two-sided platforms for early validation. <context> I am testing a marketplace idea. Build an MVP as one self-contained HTML file using inline CSS, vanilla JS, and localStorage so both sides of the market work without a backend, returned as a previewable artifact. </context> <inputs> - What is bought and sold: [E.G. FREELANCE GIGS, USED GEAR, LESSONS] - The two sides: [E.G. BUYERS AND SELLERS, CLIENTS AND PROS] - Listing fields: [TITLE, PRICE, CATEGORY, DESCRIPTION, ETC] - How buyers find listings: [SEARCH, CATEGORY, FILTERS] - Seed listings to preload: [4-6 EXAMPLES] </inputs> <task> Build a marketplace with a buyer view (browse, search, category filter, listing cards, and a listing detail) and a simple seller view (a form to post a new listing that appears immediately in the browse grid). Include a contact-seller or request action that stores an inquiry in localStorage. Preload the seed listings and persist everything across refresh. </task> <constraints> - One self-contained HTML file; no frameworks; Google Fonts only; labeled color blocks for listing images. - Posting a listing updates the live grid; search and filter operate on the real data. - Accessible forms and cards; responsive; sensible empty states. </constraints> <format> Return the full HTML as an artifact, then explain the listing data shape and the trust and payment features you would add for a real launch. </format>

You are a product engineer who builds searchable directory and listing sites. <context> I want to launch a niche directory to test demand. Build it as one self-contained HTML file with inline CSS, vanilla JS, and localStorage, previewable instantly as an artifact, with real search and filtering. </context> <inputs> - What the directory lists: [E.G. AI TOOLS, LOCAL ROASTERS, REMOTE JOBS] - Each entry has fields: [NAME, CATEGORY, TAGS, LINK, DESCRIPTION, RATING] - Filters that matter: [CATEGORY, TAGS, PRICE, ETC] - Sort options: [E.G. POPULAR, NEWEST, A-Z] - Seed entries to preload: [6-10 EXAMPLES] - Submit-an-entry: [YES/NO, FIELDS] </inputs> <task> Build a directory with a search bar, a sidebar of category and tag filters, a results grid of entry cards, and a sort control — all operating on the live data. Add an entry-detail view and, if requested, a Submit Listing form that adds to the directory and persists in localStorage. Show a result count and a clear empty state. Preload the seed entries. </task> <constraints> - One self-contained HTML file; no frameworks; Google Fonts only. - Search, filter, and sort all work together on the real dataset; URL-free state is fine. - Accessible filters and cards; responsive; submitted entries appear immediately. </constraints> <format> Return the full HTML as an artifact, then describe the entry schema and how you would moderate and rank submissions at scale. </format>

You are a product engineer who builds scheduling and booking apps. <context> I need a working booking MVP to validate an appointment-based service. Build it as one self-contained HTML file with inline CSS, vanilla JS, and localStorage so the full book-a-slot flow works with no backend, returned as a previewable artifact. </context> <inputs> - What gets booked: [E.G. HAIRCUTS, CONSULTATIONS, COURT TIME] - Services or session types: [NAME, DURATION, PRICE] - Availability rules: [DAYS, HOURS, SLOT LENGTH] - Info to collect from the customer: [NAME, EMAIL, NOTES] - Confirmation behavior: [WHAT THE USER SEES AFTER BOOKING] </inputs> <task> Build a booking app: a service picker, a calendar or day-list that shows available slots and greys out booked ones, a booking form to capture customer details, and a confirmation screen. Store bookings in localStorage so booked slots stay unavailable across refresh, and include a small admin view listing all bookings with a cancel action. </task> <constraints> - One self-contained HTML file; no frameworks; Google Fonts only. - Booked slots must persist and become unavailable; double-booking is prevented in the UI. - Accessible date and time controls; responsive; clear confirmation with the booking summary. </constraints> <format> Return the full HTML as an artifact, then explain the availability and conflict logic and where calendar sync or payments would plug in. </format>

You are a marketplace engineer building provider-discovery apps (think rideshare-of-X or local pros). <context> I am testing a find-a-provider product. Build an MVP as one self-contained HTML file with inline CSS, vanilla JS, and localStorage, previewable as an artifact, where users browse providers and request one. </context> <inputs> - The service: [E.G. DOG WALKERS, TUTORS, MOVERS] - Provider fields: [NAME, RATING, PRICE, LOCATION, SPECIALTIES, BIO] - How users filter: [LOCATION, PRICE, RATING, SPECIALTY] - The request action: [BOOK, MESSAGE, REQUEST QUOTE] - Seed providers to preload: [5-8 EXAMPLES] </inputs> <task> Build a provider-discovery app: a filter bar, a sortable list of provider cards with rating and price, a provider detail panel, and a request flow that captures the user's details and saves the request to localStorage. Show a my-requests view of submitted requests. Preload the seed providers and persist all state. </task> <constraints> - One self-contained HTML file; no frameworks; Google Fonts only; styled avatars as placeholders. - Filtering and sorting operate on live data; requests persist and show in the my-requests view. - Accessible cards and forms; responsive; clear empty states. </constraints> <format> Return the full HTML as an artifact, then describe the provider data shape and the matching or ranking logic you would build next. </format>

You are a product engineer who builds rental and peer-to-peer lending apps. <context> I want to validate a rentals idea. Build an MVP as one self-contained HTML file with inline CSS, vanilla JS, and localStorage, returned as a previewable artifact, covering browse, availability, and a reservation flow. </context> <inputs> - What gets rented: [E.G. CAMERAS, TOOLS, PARTY GEAR] - Item fields: [NAME, DAILY PRICE, DEPOSIT, CONDITION, OWNER] - Rental period model: [BY DAY / BY HOUR] - Filters: [CATEGORY, PRICE, AVAILABILITY] - Seed items to preload: [5-8 EXAMPLES] </inputs> <task> Build a rentals app: a browse grid with filters, an item detail showing price, deposit, and condition, a date-range picker that computes the total cost, and a reserve action that stores the reservation in localStorage and marks the item as booked for those dates. Include a my-reservations view. Preload the seed items and persist everything. </task> <constraints> - One self-contained HTML file; no frameworks; Google Fonts only; labeled color blocks for item photos. - Total cost is computed live from the date range and daily price; reservations persist and block overlapping dates. - Accessible date inputs and cards; responsive; clear reservation summary. </constraints> <format> Return the full HTML as an artifact, then explain the pricing and availability math and the deposit and insurance features a real launch would need. </format>

You are a growth engineer who builds pre-launch waitlist apps with viral mechanics. <context> I want to validate demand before building. Build a waitlist landing MVP as one self-contained HTML file with inline CSS, vanilla JS, and localStorage so the signup and referral loop works with no backend, returned as a previewable artifact. </context> <inputs> - Product teaser: [WHAT IS COMING] - Who it is for: [AUDIENCE] - Reason to join early: [PERK] - Capture fields: [EMAIL, OR EMAIL PLUS NAME] - Referral mechanic: [E.G. MOVE UP THE LIST PER REFERRAL] </inputs> <task> Build a landing page with a benefit-led hero and an email-capture form that, on submit, stores the signup in localStorage and shows a success state with a position number, a referral link, and a progress meter toward a reward. Track a referral count in localStorage that moves the user up the list. Include a small how-it-works strip and a live signup counter derived from stored data. </task> <constraints> - One self-contained HTML file; no frameworks; Google Fonts only. - The form, position number, and referral counter genuinely work and persist across refresh. - Accessible form labels; responsive; the email field is the single dominant action. </constraints> <format> Return the full HTML as an artifact, then explain the referral logic and how to wire the email capture to a real provider before launch. </format>

You are a lean-startup engineer who builds smoke-test pages to measure intent before building. <context> I want to measure whether people would buy before I build anything. Build a smoke-test landing MVP as one self-contained HTML file with inline CSS, vanilla JS, and localStorage that logs every click on a fake-door CTA, returned as a previewable artifact. </context> <inputs> - Product concept: [WHAT IT IS] - The promise and audience: [BENEFIT, WHO] - Pretend price or plan: [PRICE] - The fake-door CTA: [E.G. BUY NOW, START TRIAL] - What to ask after the click: [EMAIL, A ONE-QUESTION SURVEY] </inputs> <task> Build a convincing landing page with hero, value props, a pricing teaser, and a primary CTA that looks fully real. On click, instead of a real purchase, log the intent event to localStorage, then show a short capture step (email or a one-question survey) and an honest "we are gauging interest" message. Add a tiny hidden admin counter showing total clicks and captures so I can read the signal. </task> <constraints> - One self-contained HTML file; no frameworks; Google Fonts only. - The CTA, intent logging, and capture all work and persist in localStorage. - Accessible and responsive; the page reads as a real product, not a survey. </constraints> <format> Return the full HTML as an artifact, then explain what conversion signal to watch and how to be ethical about the fake-door test. </format>

You are a product engineer who builds AI-wrapper apps — a focused UI around a single LLM use case. <context> I am building an AI tool that wraps a model for one job. Build the front-end MVP as one self-contained HTML file with inline CSS, vanilla JS, and localStorage, returned as a previewable artifact, with the API call clearly stubbed so I can demo the full UX. </context> <inputs> - The single job: [E.G. REWRITE EMAILS, GENERATE PRODUCT NAMES] - The input the user gives: [TEXT, FORM FIELDS, ETC] - Output format: [TEXT, LIST, CARDS] - Controls the user tweaks: [TONE, LENGTH, COUNT] - History behavior: [SAVE PAST RUNS YES/NO] </inputs> <task> Build the full wrapper UI: an input area with the tweakable controls, a generate button, a loading state, and a results panel that renders the output nicely with copy and regenerate actions. Stub the model call with a clearly-marked mock function that returns plausible sample output so the whole flow is demoable. Save run history to localStorage with a sidebar to revisit past runs. </task> <constraints> - One self-contained HTML file; no frameworks; Google Fonts only. - Mark the mock API function with a comment showing exactly where to drop in the real fetch call and where the key goes (never hardcode a key). - History persists; UI is accessible, responsive, with copy-to-clipboard that works. </constraints> <format> Return the full HTML as an artifact, then explain the mock-to-real swap, the prompt you would send, and what to never expose client-side. </format>

You are a lean-startup engineer who builds concierge MVPs where a human fulfills behind a polished front-end. <context> I want to deliver the service manually but make the request experience feel like a real product. Build a concierge MVP as one self-contained HTML file with inline CSS, vanilla JS, and localStorage, returned as a previewable artifact. </context> <inputs> - The service delivered (by me, manually): [WHAT] - What the customer submits: [INTAKE FIELDS] - The stages a request moves through: [E.G. RECEIVED, IN PROGRESS, DELIVERED] - What the customer sees while waiting: [STATUS, ETA] - Audience and vibe: [WHO, AESTHETIC] </inputs> <task> Build a request app: a clean intake form, a confirmation with a request ID, and a status tracker the customer can revisit showing the current stage. Add a hidden operator view that lists all requests and lets me advance their stage — the change reflects in the customer status. Persist requests and stages in localStorage so the manual fulfillment loop is fully demoable. </task> <constraints> - One self-contained HTML file; no frameworks; Google Fonts only. - Intake, status tracking, and the operator stage controls all work and persist. - Accessible forms and status UI; responsive; reassuring, specific copy. </constraints> <format> Return the full HTML as an artifact, then explain how the manual operator loop works and what to automate first once volume grows. </format>

You are a mobile product engineer who prototypes app MVPs as phone-framed web previews. <context> I am validating a mobile app idea before building native. Build an interactive phone-framed MVP as one self-contained HTML file with inline CSS, vanilla JS, and localStorage, returned as a previewable artifact, that runs the core flow inside a phone mockup. </context> <inputs> - App in one line: [WHAT IT DOES] - The core loop: [THE 2-3 SCREENS THAT MATTER] - Main object the user creates or tracks: [E.G. WORKOUT, EXPENSE, NOTE] - Bottom-nav tabs: [LIST 3-4] - Vibe: [AESTHETIC] </inputs> <task> Build a phone-framed app preview with a bottom tab bar and working navigation between screens. Implement the core loop for real: a list screen, a create flow, and a detail or summary screen, all persisting to localStorage. Include realistic mobile interactions (tap targets, a bottom-sheet create form, a simple stats tab). Make the core object fully creatable and viewable. </task> <constraints> - One self-contained HTML file; no frameworks; Google Fonts only; centered phone frame with a max-width app viewport. - Tab navigation and the create-and-view loop genuinely work and persist. - Touch-friendly tap targets, accessible labels, smooth screen transitions. </constraints> <format> Return the full HTML as an artifact, then explain which native features the web preview can and cannot fake and what to build first in React Native or Swift. </format>