30 Claude Prompts That Build Working Apps

You are a senior front-end engineer who builds clean, dependable productivity tools. <context> I want a working to-do list app built as one self-contained HTML file with inline CSS and vanilla JavaScript, so it runs instantly in the artifact preview with no setup. All data lives in localStorage so my tasks survive a refresh. </context> <inputs> - App name and vibe: [E.G. DAYLIST, CALM AND MINIMAL] - Fields per task: [TITLE, DUE DATE, PRIORITY] - Grouping: [BY LIST / BY DUE DATE / NONE] - Accent color: [HEX OR NAME] - Empty-state message: [WHAT TO SHOW WITH ZERO TASKS] </inputs> <task> Build a fully working to-do app: an add-task input that creates tasks on Enter or button click; a list with a checkbox to complete, inline edit on double-click, and a delete button; priority badges and a due-date display; filter tabs for All / Active / Completed; a "clear completed" action; and a live count of remaining tasks. Persist everything to localStorage and restore it on load. </task> <constraints> - One self-contained HTML file, no external libraries; vanilla JS only. - Accessible: labelled inputs, keyboard-operable controls, visible focus states. - A clean empty state and no console errors; data must survive a page refresh. </constraints> <format> Return the full HTML as an artifact, then explain the localStorage data shape and how to add a new task field. </format>

You are a front-end engineer who builds fast, distraction-free writing tools. <context> I want a notes app built as one self-contained HTML file with inline CSS and vanilla JavaScript, previewable instantly as an artifact. Notes persist in localStorage so nothing is lost on refresh. </context> <inputs> - App name and tone: [E.G. SCRATCH, FAST AND PLAIN] - Note structure: [TITLE PLUS BODY / BODY ONLY] - Sort order: [LAST EDITED / CREATED / TITLE] - Accent color: [HEX OR NAME] - Optional tags: [YES OR NO] </inputs> <task> Build a two-pane notes app: a sidebar list of notes showing title and a snippet, a main editor that autosaves as I type, a new-note button, a delete-note action with confirm, a live search box that filters notes by title and body, and a timestamp showing when each note was last edited. Auto-select the most recent note on load. Persist all notes to localStorage. </task> <constraints> - One self-contained HTML file, vanilla JS only, no dependencies. - Search must be instant and case-insensitive; autosave must not lose keystrokes. - Accessible controls, visible focus, and a friendly empty state; no console errors. </constraints> <format> Return the full HTML as an artifact, then explain the autosave debounce and how to add tag filtering later. </format>

You are a front-end engineer who builds precise, well-behaved timer apps. <context> I want a Pomodoro focus timer built as one self-contained HTML file with inline CSS and vanilla JavaScript, runnable instantly in the artifact preview. It should keep accurate time and track completed sessions across the day in localStorage. </context> <inputs> - App name and mood: [E.G. DEEPWORK, FOCUSED AND QUIET] - Focus length and break length: [E.G. 25 MIN / 5 MIN] - Long-break rule: [E.G. 15 MIN AFTER 4 FOCUS BLOCKS] - Accent color: [HEX OR NAME] - Sound or visual cue at zero: [DESCRIBE] </inputs> <task> Build a working Pomodoro timer: a large countdown display, Start / Pause / Reset controls, automatic switching between focus and break with a clear mode label, a session counter showing completed focus blocks today, a long break after the configured number of blocks, and an editable focus and break length. Use an accurate timer that does not drift, and persist today's completed-session count to localStorage. </task> <constraints> - One self-contained HTML file, vanilla JS only, no dependencies. - Timing must stay accurate even if the tab is backgrounded; compute from timestamps, not setInterval ticks alone. - Accessible controls and clear mode indication; no console errors. </constraints> <format> Return the full HTML as an artifact, then explain how you kept the timer accurate and how to add a subtle progress ring. </format>

You are a front-end engineer who builds smooth drag-and-drop board apps. <context> I want a kanban board built as one self-contained HTML file with inline CSS and vanilla JavaScript, previewable instantly as an artifact. Cards and columns persist in localStorage so the board survives a refresh. </context> <inputs> - App name: [E.G. FLOWBOARD] - Columns: [E.G. TO DO, IN PROGRESS, DONE] - Card fields: [TITLE, AND OPTIONALLY A LABEL OR COLOR] - Accent and column colors: [DESCRIBE] - Starting cards: [A FEW EXAMPLE CARDS OR NONE] </inputs> <task> Build a working kanban board: the configured columns, an add-card input on each column, drag-and-drop to move cards between and within columns using the native HTML5 drag API, inline edit of a card title, a delete-card control, and a per-column card count. Persist the full board state to localStorage and restore it on load. </task> <constraints> - One self-contained HTML file, vanilla JS only, no drag libraries. - Drag-and-drop must work on desktop with clear drop indicators; falls back to move buttons if dragging is unavailable. - Accessible, keyboard-reachable controls; no console errors; state survives refresh. </constraints> <format> Return the full HTML as an artifact, then explain the board data structure and how to add a new column at runtime. </format>

You are a front-end engineer who builds calm, well-structured planning tools. <context> I want a time-blocked daily planner built as one self-contained HTML file with inline CSS and vanilla JavaScript, previewable instantly as an artifact. The day's blocks persist in localStorage keyed by date. </context> <inputs> - App name and vibe: [E.G. ONEDAY, FOCUSED] - Day range and slot size: [E.G. 7AM TO 9PM, 30-MIN SLOTS] - Block fields: [LABEL, AND OPTIONALLY A CATEGORY COLOR] - Accent color: [HEX OR NAME] - A top-three priorities box: [YES OR NO] </inputs> <task> Build a working daily planner: a vertical timeline of time slots for the chosen range, click a slot to add or edit a block label, a category color picker per block, a top-three-priorities panel, a date selector that loads that day's plan, and a clear-day action. Persist each day's plan separately in localStorage so switching dates keeps everything. </task> <constraints> - One self-contained HTML file, vanilla JS only, no dependencies. - Time slots must align cleanly; editing a block must be obvious and reversible. - Accessible controls and visible focus; no console errors; state survives refresh. </constraints> <format> Return the full HTML as an artifact, then explain the per-date storage scheme and how to add a weekly view later. </format>

You are a front-end engineer who builds motivating, low-friction habit tools. <context> I want a habit tracker built as one self-contained HTML file with inline CSS and vanilla JavaScript, previewable instantly as an artifact. All habits and check-ins persist in localStorage. </context> <inputs> - App name and tone: [E.G. STREAKLY, ENCOURAGING] - Starting habits: [E.G. READ, WORKOUT, NO SUGAR] - View: [WEEKLY GRID / LAST 30 DAYS] - Accent color and "done" color: [DESCRIBE] - Show current streak: [YES OR NO] </inputs> <task> Build a working habit tracker: add and remove habits; a grid where each row is a habit and each column is a day, with a tap to toggle a day done; a current-streak count and a completion percentage per habit; a today-summary line; and the ability to navigate between weeks or scroll the 30-day window. Persist habits and all daily check-ins to localStorage and restore on load. </task> <constraints> - One self-contained HTML file, vanilla JS only, no dependencies. - Streak math must be correct across day and week boundaries using real dates. - Accessible toggles with clear done/not-done states; no console errors; survives refresh. </constraints> <format> Return the full HTML as an artifact, then explain the streak calculation and how to add habit reminders later. </format>

You are a front-end engineer who builds clear, trustworthy personal-finance tools. <context> I want a budget and expense tracker built as one self-contained HTML file with inline CSS and vanilla JavaScript, previewable instantly as an artifact. Transactions persist in localStorage. </context> <inputs> - App name and currency: [E.G. PURSE, USD WITH $ SYMBOL] - Categories: [E.G. RENT, FOOD, TRANSPORT, FUN] - Monthly budget total: [NUMBER OR "NONE"] - Accent color: [HEX OR NAME] - Date handling: [PER-MONTH VIEW / ALL TIME] </inputs> <task> Build a working expense tracker: an add-transaction form (amount, category, date, optional note); a running list grouped by date with edit and delete; totals for income, spending, and balance; a spending-by-category breakdown shown as simple CSS bars; a budget-remaining indicator if a budget is set; and a month switcher. Format all amounts in the chosen currency. Persist everything to localStorage. </task> <constraints> - One self-contained HTML file, vanilla JS only, no chart libraries (use CSS bars). - Money math must avoid floating-point errors (work in cents); totals must always reconcile. - Accessible form and controls; no console errors; data survives refresh. </constraints> <format> Return the full HTML as an artifact, then explain how you avoided rounding errors and how to add CSV export. </format>

You are a front-end engineer who builds friendly daily-goal tracking apps. <context> I want a hydration tracker built as one self-contained HTML file with inline CSS and vanilla JavaScript, previewable instantly as an artifact. The day's intake resets each day and persists in localStorage. </context> <inputs> - App name and mood: [E.G. SIP, CHEERFUL] - Daily goal and unit: [E.G. 2000 ML OR 8 CUPS] - Quick-add amounts: [E.G. 250 ML, 500 ML] - Accent and "filled" color: [DESCRIBE] - Celebrate at goal: [DESCRIBE THE CUE] </inputs> <task> Build a working hydration tracker: quick-add buttons for the configured amounts and a custom-amount input; a visual fill (a glass or bar) that grows toward the daily goal; a percentage and remaining-amount readout; an undo for the last entry; an automatic reset when the date changes; and a small history of the last several days. Persist today's intake and recent history to localStorage. </task> <constraints> - One self-contained HTML file, vanilla JS only, no dependencies. - The day must roll over correctly at midnight using real dates. - Accessible buttons and clear progress; no console errors; survives refresh. </constraints> <format> Return the full HTML as an artifact, then explain the daily-reset logic and how to make the goal adjustable in settings. </format>

You are a front-end engineer who builds practical fitness-logging apps. <context> I want a workout log built as one self-contained HTML file with inline CSS and vanilla JavaScript, previewable instantly as an artifact. Logged sessions persist in localStorage. </context> <inputs> - App name and tone: [E.G. LIFTLOG, NO-NONSENSE] - Tracked fields per set: [EXERCISE, WEIGHT, REPS] - Common exercises to prefill: [E.G. SQUAT, BENCH, DEADLIFT] - Unit: [KG OR LB] - Show personal bests: [YES OR NO] </inputs> <task> Build a working gym log: start a session for today; add exercises and log sets with weight and reps; edit or delete a set; see a session summary (total volume, set count); a history list of past sessions grouped by date; and a per-exercise personal-best display if enabled. Persist all sessions to localStorage and restore on load. </task> <constraints> - One self-contained HTML file, vanilla JS only, no dependencies. - Fast set entry on mobile with large tap targets; numeric inputs for weight and reps. - Accessible controls and clear summaries; no console errors; survives refresh. </constraints> <format> Return the full HTML as an artifact, then explain the session data structure and how to add a simple progress chart. </format>

You are a front-end engineer who builds motivating goal-progress apps. <context> I want a savings-goal tracker built as one self-contained HTML file with inline CSS and vanilla JavaScript, previewable instantly as an artifact. Goals and contributions persist in localStorage. </context> <inputs> - App name and currency: [E.G. NESTEGG, USD] - Goals to start with: [E.G. EMERGENCY FUND $5000, TRIP $1200] - Track contributions over time: [YES OR NO] - Accent and progress color: [DESCRIBE] - Show projected finish date: [YES OR NO] </inputs> <task> Build a working savings-goal tracker: create goals with a name, target amount, and optional deadline; log contributions toward a goal; a progress bar and percentage per goal; remaining-amount and (if a deadline is set) suggested monthly amount to stay on track; edit and delete goals; and a contributions history per goal. Format amounts in the chosen currency and persist everything to localStorage. </task> <constraints> - One self-contained HTML file, vanilla JS only, no dependencies. - Money math in integer cents to avoid rounding errors; progress must never exceed 100%. - Accessible forms and controls; no console errors; survives refresh. </constraints> <format> Return the full HTML as an artifact, then explain the on-track calculation and how to add a celebratory state when a goal is hit. </format>

You are a front-end engineer who builds effective spaced-study tools. <context> I want a flashcard study app built as one self-contained HTML file with inline CSS and vanilla JavaScript, previewable instantly as an artifact. Decks and progress persist in localStorage. </context> <inputs> - App name and subject: [E.G. RECALL, SPANISH VOCAB] - Starting cards: [A FEW FRONT/BACK PAIRS OR NONE] - Study mode: [FLIP THROUGH / KNOW-VS-AGAIN SORTING] - Accent color: [HEX OR NAME] - Shuffle by default: [YES OR NO] </inputs> <task> Build a working flashcard app: add, edit, and delete cards (front and back); a study mode that shows the front, flips to the back on click or spacebar, and lets me mark a card "got it" or "again"; a deck progress readout (remaining, known); a shuffle and restart control; and a card manager view. "Again" cards come back around in the session. Persist the deck and study state to localStorage. </task> <constraints> - One self-contained HTML file, vanilla JS only, no dependencies. - Keyboard-driven study (space to flip, arrows or keys to grade); smooth flip animation. - Accessible controls and clear progress; no console errors; survives refresh. </constraints> <format> Return the full HTML as an artifact, then explain the again-queue logic and how to add a simple spaced-repetition interval. </format>

You are a front-end engineer who builds engaging quiz and assessment apps. <context> I want a multiple-choice quiz app built as one self-contained HTML file with inline CSS and vanilla JavaScript, previewable instantly as an artifact. The question set is defined in a JS array at the top of the file so it is easy to edit. </context> <inputs> - App name and topic: [E.G. BRAINBUZZ, WORLD CAPITALS] - Questions: [5-10 QUESTIONS WITH OPTIONS AND THE CORRECT ANSWER] - Show explanations: [YES OR NO] - Timer per question: [SECONDS OR NONE] - Accent and correct/wrong colors: [DESCRIBE] </inputs> <task> Build a working quiz: a start screen, one question at a time with selectable options, immediate correct/wrong feedback (and an explanation if enabled), a progress indicator, an optional per-question countdown, a running score, and a results screen showing score, percentage, and a review of missed questions with a retry button. Put all questions in a clearly-labelled array at the top so they are easy to swap. </task> <constraints> - One self-contained HTML file, vanilla JS only, no dependencies. - Cannot change an answer after submitting; no answer leakage in the DOM before selection. - Accessible options (keyboard-selectable, ARIA where useful); no console errors. </constraints> <format> Return the full HTML as an artifact, then explain the question-array format and how to add image-based questions. </format>

You are a front-end engineer who builds focused practice-drill apps. <context> I want a spelling and vocabulary drill built as one self-contained HTML file with inline CSS and vanilla JavaScript, previewable instantly as an artifact. The word list and progress persist in localStorage. </context> <inputs> - App name and level: [E.G. SPELLWELL, GRADE 5] - Word list: [WORDS, EACH WITH A SHORT DEFINITION OR HINT] - Drill type: [TYPE THE WORD FROM A HINT / FILL THE MISSING LETTERS] - Accent color: [HEX OR NAME] - Track accuracy: [YES OR NO] </inputs> <task> Build a working spelling drill: present one word at a time as a hint or definition, an input to type the answer, instant correct/incorrect feedback with the right spelling shown on a miss, the ability to retry a missed word at the end, a running accuracy and streak, and a manage-words view to add or remove entries. Persist the word list and accuracy stats to localStorage. </task> <constraints> - One self-contained HTML file, vanilla JS only, no dependencies. - Answer matching trims whitespace and is case-insensitive; Enter submits. - Accessible input and feedback; no console errors; survives refresh. </constraints> <format> Return the full HTML as an artifact, then explain the matching logic and how to add audio pronunciation later. </format>

You are a front-end engineer who builds quick, replayable guessing games. <context> I want an image-guessing game built as one self-contained HTML file with inline CSS and vanilla JavaScript, previewable instantly as an artifact. Items are defined in a JS array; visuals use emoji or CSS shapes so no external images are needed. </context> <inputs> - App name and theme: [E.G. GUESSIT, COUNTRY FLAGS] - Items: [LABEL PLUS AN EMOJI OR DESCRIBED VISUAL FOR EACH] - Answer style: [MULTIPLE CHOICE / TYPE THE NAME] - Rounds per game: [NUMBER] - Accent and correct/wrong colors: [DESCRIBE] </inputs> <task> Build a working guessing game: show one item's visual per round, present the chosen answer style, give instant feedback, track score and round number, and end with a results screen and a play-again button that reshuffles. Use emoji or CSS-drawn shapes for the visuals so the file stays self-contained. Keep the item list in a labelled array at the top. </task> <constraints> - One self-contained HTML file, vanilla JS only, no external images or libraries. - Distractor options for multiple choice must be plausible and never repeat the answer. - Accessible controls; no console errors; replay reshuffles the order. </constraints> <format> Return the full HTML as an artifact, then explain how distractors are generated and how to swap in a different theme. </format>

You are a front-end engineer who builds adaptive practice apps for learners. <context> I want a math practice app built as one self-contained HTML file with inline CSS and vanilla JavaScript, previewable instantly as an artifact. It generates fresh problems each session; settings persist in localStorage. </context> <inputs> - App name and learner level: [E.G. NUMBERLAB, GRADE 3] - Operations: [ADD, SUBTRACT, MULTIPLY, DIVIDE] - Difficulty / number range: [E.G. 0-12 OR 0-100] - Problems per set: [NUMBER] - Accent and correct/wrong colors: [DESCRIBE] </inputs> <task> Build a working math practice app: settings to choose operations and number range; auto-generated problems for the set; an answer input with instant correct/incorrect feedback; a running score and timer; a results screen with accuracy and the problems missed; and a "new set" button that generates fresh problems. Keep division clean (no awkward remainders unless chosen). Persist the last-used settings to localStorage. </task> <constraints> - One self-contained HTML file, vanilla JS only, no dependencies. - Generated problems must respect the chosen range and avoid negatives unless subtraction is selected. - Accessible numeric input (Enter submits); no console errors. </constraints> <format> Return the full HTML as an artifact, then explain the problem generator and how to add a leaderboard of best times. </format>