30 Claude Prompts That Build Trackers
Describe what you want to track and Claude returns the finished tracker: a self-contained HTML app that saves your data, or a ready-to-paste spreadsheet structure. Prompts for habits, budgets, fitness, projects, job applications, and mood. Not "give me a template idea."
In short: This page contains 30 copy-paste ready prompts, organized into 6 categories with a description and pro tip for each. The first 15 prompts are free instantly — no signup needed. Hand-curated and tested by the AI Academy team.
Habit Trackers
5 promptsDaily Habit Streak Tracker App
1/30You are a front-end developer and behavior-design specialist. <context> I want a daily habit tracker built as one self-contained HTML file with inline CSS and vanilla JavaScript that saves data in localStorage, so it works offline and survives a refresh. It must be previewable instantly as an artifact. </context> <inputs> - Habits to track: [E.G. WORKOUT, READ, MEDITATE, NO SUGAR] - View window: [CURRENT WEEK / CURRENT MONTH] - Streak goal per habit: [E.G. 30 DAYS] - Visual vibe: [MINIMAL, DARK MODE, PLAYFUL] - Week starts on: [MONDAY / SUNDAY] </inputs> <task> Build the app: a header with today's date, an add-habit input, and a row per habit showing a checkable dot for each day in the view. For each habit compute and display current streak, longest streak, and completion percentage. Let me add, rename, and delete habits, and mark days done or undone with one click. Persist everything to localStorage keyed by habit and date. Include a subtle celebratory cue when a streak goal is hit. </task> <constraints> - One self-contained responsive HTML file; no libraries except an optional Google Font. - All state in localStorage; reloading must not lose data. - Accessible: buttons have labels, checkable cells are keyboard-operable, sufficient contrast. </constraints> <format> Return the full HTML in an artifact, then explain the localStorage data shape and how to add an export-to-JSON button. </format>
Generates a self-contained daily habit tracker app with streaks, completion percentage, and localStorage persistence, ready to use.
Pro tip: Ask Claude to add a heatmap-style year view once the basic tracker works so you can see momentum at a glance.
Multi-Habit Weekly Grid
2/30You are a UI engineer who builds clean, gridded productivity tools. <context> I want a weekly habit matrix built as one self-contained HTML file with inline CSS and vanilla JavaScript, saving to localStorage and previewable instantly as an artifact. </context> <inputs> - Habits (rows): [LIST 4-8 HABITS] - Days (columns): [MON-SUN OR CUSTOM] - Weekly target per habit: [E.G. 5 OF 7 DAYS] - Color coding: [ONE COLOR PER HABIT OR SINGLE ACCENT] - Vibe: [DESCRIBE] </inputs> <task> Build a grid where habits are rows and days are columns. Each cell toggles done/not-done on click. Show a per-habit weekly total (e.g. 4/5 target hit) and a per-day column total. Add a week-navigation control (previous/next week) that stores each week separately in localStorage. Include an add-habit and remove-habit control, and a small end-of-week summary line stating which targets were met. </task> <constraints> - One self-contained responsive HTML file; Google Font optional, no other dependencies. - Each week keyed separately in localStorage; navigating weeks never overwrites another week. - Accessible cells and controls; readable on mobile with a horizontal scroll if needed. </constraints> <format> Return the full HTML in an artifact, then explain the week-keying scheme and how to change the target logic. </format>
Builds a weekly habit matrix with per-habit and per-day totals, week navigation, and saved history as a previewable artifact.
Pro tip: Tell Claude your real weekly targets; it will color cells green only once a habit hits its target, not per checkbox.
66-Day Challenge Heatmap
3/30You are a front-end developer building focused single-goal trackers. <context> I am doing a fixed-length habit challenge and want a single-habit tracker built as one self-contained HTML file with inline CSS and vanilla JavaScript, saving to localStorage and previewable instantly as an artifact. </context> <inputs> - The one habit: [E.G. WRITE 500 WORDS] - Challenge length: [30 / 66 / 100 DAYS] - Start date: [DATE] - Reward at the end: [WHAT I EARN] - Vibe: [MOTIVATING, CALM, GAME-LIKE] </inputs> <task> Build a page centered on one habit with a calendar-style grid of the full challenge length, each cell a day from the start date. Clicking a day marks it complete. Show a big progress ring or bar (days done / total), current streak, days remaining, and a projected finish date. Highlight today. Persist to localStorage. Display the reward text prominently as motivation and a completion message when all days are done. </task> <constraints> - One self-contained responsive HTML file; no dependencies except an optional Google Font. - Correct date math from the start date; today's cell is always visually distinct. - Accessible controls and adequate contrast; works on mobile. </constraints> <format> Return the full HTML in an artifact, then explain the date-math approach and how to change the challenge length. </format>
Produces a single-habit challenge tracker with a full-length heatmap grid, progress ring, and projected finish date, ready to use.
Pro tip: Ask Claude to add a 'why I started' note field that shows on the page so you see your reason every time you open it.
Habit Tracker Spreadsheet (Sheets/Excel)
4/30You are a spreadsheet designer who builds clean, formula-driven trackers. <context> I want a ready-to-paste habit tracker structure for Google Sheets or Excel: exact columns, sample rows, and the formulas that make it self-calculating. Deliver it as a table plus a formula list I can build in minutes. </context> <inputs> - Habits to track: [LIST 5-8 HABITS] - Tracking period: [ONE MONTH / QUARTER] - Success rule per habit: [E.G. DONE = 1, SKIP = 0] - Weekly or monthly summary I want: [E.G. COMPLETION RATE, LONGEST STREAK] </inputs> <task> Design a Date-down, Habits-across layout: column A is the date for each day of the period, one column per habit for a 1/0 entry, plus a daily-total column. Then specify a summary block with formulas for each habit's completion rate, current streak, longest streak, and best-day-of-week. Provide the exact formula for each summary cell (COUNTIF, SUM, and a streak formula), a couple of sample filled rows, and conditional-formatting rules to color completed cells. </task> <constraints> - Formulas must be valid Google Sheets syntax (note any Excel differences). - No macros or scripts; only cell formulas and conditional formatting. - Keep it to one tab; explain exactly which cell each formula goes in. </constraints> <format> Return the sheet layout as a table, then a formula reference list (cell reference to formula), then the conditional-formatting rules and how to extend it to a new month. </format>
Delivers a formula-driven habit tracker spreadsheet structure with completion rate, streaks, and conditional formatting, ready to build.
Pro tip: Ask Claude for the ARRAYFORMULA version of the summary so the totals auto-fill when you add new habit columns.
Habit-Stacking & Identity Tracker
5/30You are a behavior-change coach and front-end developer. <context> I want a habit-stacking tracker based on cue-routine-reward and identity-based habits, built as one self-contained HTML file with inline CSS and vanilla JavaScript, saving to localStorage and previewable instantly as an artifact. </context> <inputs> - Identity I want to build: [E.G. I AM A HEALTHY PERSON] - Habit stacks: [AFTER I [CUE], I WILL [HABIT] — 3-5 STACKS] - Tracking period: [WEEK / MONTH] - Vibe: [DESCRIBE] </inputs> <task> Build a tracker that displays my chosen identity at the top, lists each habit stack in "After I X, I will Y" format with a daily check, and tracks a per-stack streak and a weekly consistency score. Add a votes-for-my-identity counter that increments with each completed habit (framing every rep as a vote for the identity). Let me add and edit stacks, and persist all data to localStorage. </task> <constraints> - One self-contained responsive HTML file; no dependencies except an optional Google Font. - Cue and routine are editable per stack; the identity statement is always visible. - Accessible controls; state fully in localStorage. </constraints> <format> Return the full HTML in an artifact, then explain the identity-vote logic and how to add a monthly review view. </format>
Builds an identity-based habit-stacking tracker with cue-routine framing and a votes-for-your-identity counter as a previewable artifact.
Pro tip: Write your habit stacks with a specific real cue ("after my morning coffee") so the tracker doubles as your implementation intention.
XML tags are just the start. Learn the full Claude workflow.
A growing library of 300+ hands-on AI tutorials covering Claude, ChatGPT, and 50+ tools. New tutorials added every week.
Expense & Budget Trackers
5 promptsMonthly Expense Tracker App
6/30You are a front-end developer building personal-finance tools. <context> I want a monthly expense tracker built as one self-contained HTML file with inline CSS and vanilla JavaScript, saving to localStorage and previewable instantly as an artifact. </context> <inputs> - Spending categories: [E.G. RENT, FOOD, TRANSPORT, FUN, SUBSCRIPTIONS] - Currency and symbol: [E.G. USD $] - Monthly income or budget cap: [AMOUNT] - Vibe: [CLEAN, DARK, MINIMAL] </inputs> <task> Build an app with a quick add-expense form (amount, category, date, note), a running total for the current month, a remaining-vs-budget figure, and a per-category breakdown with amounts and percentage of total. Render a simple bar or donut breakdown using pure CSS or inline SVG (no chart library). List recent transactions with edit and delete. Let me switch months and keep each month's data separate. Persist everything to localStorage. </task> <constraints> - One self-contained responsive HTML file; no dependencies except an optional Google Font — build any chart with CSS/SVG, not a library. - Money math correct to two decimals; totals recompute live on add/edit/delete. - Accessible form with labels and input types; readable on mobile. </constraints> <format> Return the full HTML in an artifact, then explain the data model and how to add a CSV export of transactions. </format>
Generates a monthly expense tracker app with category breakdown, budget-remaining figure, and a no-library chart, ready to use.
Pro tip: Tell Claude your real monthly cap so the remaining figure turns red and warns you as you approach the limit.
50/30/20 Budget Tracker
7/30You are a personal-finance product designer and front-end developer. <context> I want a 50/30/20 budgeting tracker (needs / wants / savings) built as one self-contained HTML file with inline CSS and vanilla JavaScript, saving to localStorage and previewable instantly as an artifact. </context> <inputs> - Monthly take-home income: [AMOUNT] - Currency: [SYMBOL] - My real needs/wants/savings split if not 50/30/20: [PERCENTAGES] - Vibe: [DESCRIBE] </inputs> <task> Build a tracker that computes the target amount for each bucket (needs, wants, savings) from my income and split. Let me log expenses tagged to a bucket, then show for each bucket: target, spent, remaining, and a progress bar that turns amber near the limit and red over it. Show a top summary of total spent vs income. Let me edit the split and income. Persist logged items and settings to localStorage. </task> <constraints> - One self-contained responsive HTML file; no dependencies except an optional Google Font. - Bucket targets recompute instantly when income or split changes. - Accessible inputs and progress bars with visible numeric labels; correct money math. </constraints> <format> Return the full HTML in an artifact, then explain the allocation math and how to add a rollover option for unspent savings. </format>
Builds a 50/30/20 needs-wants-savings budget tracker with live bucket targets and over-budget warnings as a previewable artifact.
Pro tip: Enter your true after-tax income, not gross, so the bucket targets reflect money you can actually allocate.
Zero-Based Budget Spreadsheet
8/30You are a spreadsheet designer specializing in personal-finance systems. <context> I want a ready-to-paste zero-based budget structure for Google Sheets or Excel where every dollar is assigned a job. Deliver exact columns, sample rows, and the formulas that make it balance to zero automatically. </context> <inputs> - Monthly income sources: [E.G. SALARY, SIDE INCOME] - Expense categories: [FIXED AND VARIABLE — LIST THEM] - Savings and debt goals: [E.G. EMERGENCY FUND, CARD PAYOFF] - Currency: [SYMBOL] </inputs> <task> Design a layout with an Income section, an Expenses section grouped by fixed/variable/savings, and columns for Planned, Actual, and Difference. Provide the formulas: total planned income, total planned outflows, a "Left to Budget" cell that must reach zero, per-category Difference, and a percent-of-income column. Include a few sample rows, conditional formatting that flags any category over its plan, and a summary block showing total planned vs actual and total saved. </task> <constraints> - Valid Google Sheets formula syntax (note Excel differences where relevant). - No scripts or macros; formulas and conditional formatting only. - Explain exactly which cell each formula belongs in and how the zero-balance check works. </constraints> <format> Return the sheet layout as a table, then a formula reference list, then the conditional-formatting rules and how to copy the tab for a new month. </format>
Delivers a zero-based budget spreadsheet structure with planned-vs-actual columns and a self-balancing left-to-budget cell, ready to build.
Pro tip: Ask Claude for a second linked tab that charts actual spend by category from your monthly tabs automatically.
Subscription & Recurring-Bill Tracker
9/30You are a front-end developer who builds money-saving utilities. <context> I want a subscription and recurring-bill tracker built as one self-contained HTML file with inline CSS and vanilla JavaScript, saving to localStorage and previewable instantly as an artifact. </context> <inputs> - Subscriptions to track: [NAME, AMOUNT, BILLING CYCLE — MONTHLY/YEARLY] - Currency: [SYMBOL] - Renewal reminder lead time: [E.G. 3 DAYS BEFORE] - Vibe: [DESCRIBE] </inputs> <task> Build an app to add subscriptions with name, amount, cycle, next renewal date, and category. Normalize everything to a monthly and an annual total so I see true cost. List subscriptions sorted by next renewal, flag any renewing within the reminder window, and highlight the most expensive ones. Let me mark a subscription as cancelled (excluded from totals but kept for reference). Persist to localStorage. </task> <constraints> - One self-contained responsive HTML file; no dependencies except an optional Google Font. - Yearly plans correctly divided to a monthly figure; totals update on add/edit/delete/cancel. - Accessible form and list; correct date handling for next renewal; mobile-friendly. </constraints> <format> Return the full HTML in an artifact, then explain the monthly-normalization math and how to add an annual-cost projection. </format>
Builds a subscription tracker that normalizes every plan to true monthly and annual cost and flags upcoming renewals, ready to use.
Pro tip: List your yearly subscriptions too; Claude will divide them to a monthly figure so you finally see what they really cost per month.
Debt Payoff Tracker (Snowball/Avalanche)
10/30You are a personal-finance analyst and spreadsheet designer. <context> I want a ready-to-paste debt payoff tracker for Google Sheets or Excel that supports both the snowball and avalanche methods. Deliver exact columns, sample rows, and the formulas that project my debt-free date. </context> <inputs> - My debts: [NAME, BALANCE, APR, MINIMUM PAYMENT — LIST EACH] - Extra monthly amount toward debt: [AMOUNT] - Method: [SNOWBALL (SMALLEST BALANCE FIRST) / AVALANCHE (HIGHEST APR FIRST)] - Currency: [SYMBOL] </inputs> <task> Design a debt-list block ordered by the chosen method, then a month-by-month amortization block showing, per month, each debt's balance, interest accrued, payment applied, and the rolling extra payment cascading to the next debt as each is cleared. Provide the formulas for monthly interest, remaining balance, and the payoff-month detection, plus summary cells for total interest paid, total months to debt-free, and the projected debt-free date. Include sample rows and formatting that greys out a debt once paid off. </task> <constraints> - Valid Google Sheets formula syntax (note Excel differences); no macros. - Interest math correct (monthly rate = APR/12); the extra payment must roll to the next target debt automatically. - Explain each formula's cell and how to switch between snowball and avalanche ordering. </constraints> <format> Return the layout as a table, then a formula reference list, then the summary block and how to update it when balances change. </format>
Delivers a snowball/avalanche debt payoff spreadsheet with month-by-month amortization and a projected debt-free date, ready to build.
Pro tip: Enter your real APRs; Claude will show side by side how many months and how much interest each method saves you.
Fitness & Health Trackers
5 promptsWorkout & Strength Log App
11/30You are a front-end developer who builds fitness-logging tools. <context> I want a workout log built as one self-contained HTML file with inline CSS and vanilla JavaScript, saving to localStorage and previewable instantly as an artifact. </context> <inputs> - Training split or exercises: [E.G. PUSH/PULL/LEGS, OR A LIST OF LIFTS] - Units: [KG / LB] - What I want to track per set: [WEIGHT, REPS, RPE] - Vibe: [GYM DARK, CLEAN, MINIMAL] </inputs> <task> Build an app to start a workout for a date, add exercises, and log sets (weight x reps, optional RPE). For each exercise show my previous session's numbers so I can beat them, and compute session volume (sets x reps x weight) and per-exercise best set. Keep a dated history of workouts I can reopen. Let me add/edit/delete exercises and sets. Persist everything to localStorage. </task> <constraints> - One self-contained responsive HTML file; no dependencies except an optional Google Font. - "Last time" values pulled from the most recent prior session for that exercise. - Accessible numeric inputs, big tap targets for the gym, correct volume math; state in localStorage. </constraints> <format> Return the full HTML in an artifact, then explain the history data model and how to add a per-lift progress chart. </format>
Generates a workout log app that shows last-session numbers, computes volume, and keeps dated history in localStorage, ready to use.
Pro tip: Ask Claude to surface a personal-record badge whenever a logged set beats your best for that lift.
Water Intake Tracker
12/30You are a front-end developer building simple daily-wellness widgets. <context> I want a water intake tracker built as one self-contained HTML file with inline CSS and vanilla JavaScript, saving to localStorage and previewable instantly as an artifact. </context> <inputs> - Daily goal: [E.G. 2.5 LITERS OR 8 GLASSES] - Unit and cup size: [ML/OZ, GLASS = HOW MUCH] - Quick-add buttons I want: [E.G. GLASS, BOTTLE, CUSTOM] - Vibe: [FRESH, CALM, PLAYFUL] </inputs> <task> Build an app with a large visual fill indicator (a filling bottle or ring via CSS/SVG) showing today's intake against the goal. Add quick-add buttons and a custom-amount input, an undo, and a percentage plus remaining-amount readout. Reset automatically at the start of a new day while keeping a 7-day history strip with mini bars. Persist everything to localStorage keyed by date. </task> <constraints> - One self-contained responsive HTML file; no dependencies except an optional Google Font — visuals via CSS/SVG only. - Correct daily rollover; each day stored separately; totals update instantly. - Accessible buttons with labels; readable on mobile; adequate contrast. </constraints> <format> Return the full HTML in an artifact, then explain the daily-rollover logic and how to add a streak of goal-hit days. </format>
Builds a water intake tracker with a visual fill indicator, quick-add buttons, and a 7-day history as a previewable artifact.
Pro tip: Set your real cup and bottle sizes so one tap logs an exact amount instead of you doing mental math.
Weight & Measurements Tracker
13/30You are a front-end developer who builds body-metric trackers with clean charts. <context> I want a weight and body-measurement tracker built as one self-contained HTML file with inline CSS and vanilla JavaScript, saving to localStorage and previewable instantly as an artifact. </context> <inputs> - Metrics to track: [E.G. WEIGHT, WAIST, CHEST, ARMS] - Units: [KG/CM OR LB/IN] - Goal for the primary metric: [TARGET AND DATE] - Vibe: [DESCRIBE] </inputs> <task> Build an app to log a dated entry for each metric. Plot weight over time as a line chart drawn with inline SVG (no chart library), with the goal as a reference line. Show current value, change since first entry, change over the last 7 and 30 days, and a moving-average line to smooth daily noise. Let me switch which metric is charted, and edit or delete entries. Persist to localStorage. </task> <constraints> - One self-contained responsive HTML file; no dependencies except an optional Google Font — chart via inline SVG only. - Chart axes scale to the data; dates sorted; moving average computed correctly. - Accessible controls and table of entries; mobile-friendly; state in localStorage. </constraints> <format> Return the full HTML in an artifact, then explain the SVG chart approach and how to add a body-fat or BMI derived metric. </format>
Builds a weight and measurements tracker with an SVG line chart, goal line, and moving average as a previewable artifact.
Pro tip: Ask Claude to plot a 7-day moving average so a single heavy-meal day does not look like real progress lost.
Meal, Calorie & Macro Tracker
14/30You are a nutrition-app front-end developer. <context> I want a daily calorie and macro tracker built as one self-contained HTML file with inline CSS and vanilla JavaScript, saving to localStorage and previewable instantly as an artifact. </context> <inputs> - Daily targets: [CALORIES, PROTEIN, CARBS, FAT] - Meals to group by: [E.G. BREAKFAST, LUNCH, DINNER, SNACKS] - A few foods I eat often: [NAME + CALORIES + MACROS] - Vibe: [DESCRIBE] </inputs> <task> Build an app to log foods under each meal with calories and macros. Show per-meal subtotals and a daily total with remaining calories and remaining grams of each macro against my targets, plus macro progress bars. Keep a small reusable food list I can quick-add from. Let me switch days and edit or delete entries, storing each day separately. Persist to localStorage. </task> <constraints> - One self-contained responsive HTML file; no dependencies except an optional Google Font — bars via CSS. - Totals and remaining values recompute live; each day stored separately. - Accessible form and lists; correct arithmetic; mobile-friendly. </constraints> <format> Return the full HTML in an artifact, then explain the food-list reuse model and how to add a weekly average view. </format>
Generates a calorie and macro tracker with meal grouping, remaining-vs-target readouts, and a reusable food list, ready to use.
Pro tip: Pre-load the 5-10 foods you eat weekly so logging a day takes a few taps instead of typing macros each time.
Sleep Tracker
15/30You are a front-end developer building sleep and wellness trackers. <context> I want a sleep tracker built as one self-contained HTML file with inline CSS and vanilla JavaScript, saving to localStorage and previewable instantly as an artifact. </context> <inputs> - What to log each night: [BEDTIME, WAKE TIME, QUALITY 1-5, NOTES] - Sleep goal: [E.G. 8 HOURS] - Time format: [12H / 24H] - Vibe: [CALM, DARK, MINIMAL] </inputs> <task> Build an app to log a night's bedtime and wake time and auto-calculate hours slept (handling crossing midnight), plus a quality rating and note. Show last night's duration vs goal, a 7-night average, and a small bar chart of the last 7-14 nights drawn with CSS/SVG. Flag nights under goal. Let me edit or delete entries. Persist to localStorage keyed by date. </task> <constraints> - One self-contained responsive HTML file; no dependencies except an optional Google Font. - Duration math correct across midnight; averages computed over logged nights only. - Accessible time inputs and rating control; mobile-friendly; state in localStorage. </constraints> <format> Return the full HTML in an artifact, then explain the cross-midnight duration logic and how to add a quality-vs-duration comparison. </format>
Builds a sleep tracker that computes hours across midnight, tracks quality, and charts recent nights against your goal, ready to use.
Pro tip: Ask Claude to correlate your quality rating with hours slept so you learn your real optimal sleep window.
Project & Task Trackers
5 promptsDrag-and-Drop Kanban Board
16/30You are a front-end developer who builds task-management tools. <context> I want a Kanban board built as one self-contained HTML file with inline CSS and vanilla JavaScript, saving to localStorage and previewable instantly as an artifact. </context> <inputs> - Columns: [E.G. TO DO, IN PROGRESS, DONE — OR CUSTOM] - Card fields: [TITLE, NOTE, PRIORITY, DUE DATE] - Priority levels and colors: [E.G. LOW/MED/HIGH] - Vibe: [DESCRIBE] </inputs> <task> Build a board with the given columns where I can add cards, edit them inline, and drag cards between columns (HTML5 drag-and-drop). Each card shows title, priority tag, and due date, with overdue dates highlighted. Show a count per column and a total-done counter. Let me add, rename, and reorder columns, and delete cards. Persist the entire board to localStorage so it restores on reload. </task> <constraints> - One self-contained responsive HTML file; no libraries except an optional Google Font — drag-and-drop is native. - Board state (columns, cards, order) fully persisted to localStorage. - Accessible: cards are keyboard-movable as a fallback; adequate contrast; mobile-usable. </constraints> <format> Return the full HTML in an artifact, then explain the board data model and how to add a card-filter by priority. </format>
Generates a drag-and-drop Kanban board with priority tags, overdue highlighting, and localStorage persistence, ready to use.
Pro tip: Ask Claude to add a keyboard fallback for moving cards so the board still works if native drag-and-drop misbehaves on your device.
To-Do List with Priorities & Due Dates
17/30You are a front-end developer building focused productivity apps. <context> I want a smart to-do list built as one self-contained HTML file with inline CSS and vanilla JavaScript, saving to localStorage and previewable instantly as an artifact. </context> <inputs> - Task fields: [TITLE, PRIORITY, DUE DATE, TAG/PROJECT] - Priority levels: [E.G. LOW/MED/HIGH] - Default sort: [BY DUE DATE / BY PRIORITY] - Vibe: [DESCRIBE] </inputs> <task> Build a to-do app to add tasks with priority, due date, and a tag. Support checking tasks done (with a done section), editing inline, and deleting. Add filter chips (all / active / done / overdue / by tag) and sorting by due date or priority. Show counts of active, done, and overdue tasks. Persist tasks to localStorage. Highlight overdue tasks and today's tasks distinctly. </task> <constraints> - One self-contained responsive HTML file; no dependencies except an optional Google Font. - Filters and sort recompute live; date comparisons correct for overdue/today. - Accessible checkboxes, labels, and filter controls; state in localStorage; mobile-friendly. </constraints> <format> Return the full HTML in an artifact, then explain the filter/sort logic and how to add a keyboard shortcut for quick-add. </format>
Builds a to-do app with priorities, due dates, tags, filters, and overdue highlighting saved to localStorage, ready to use.
Pro tip: Tell Claude to default the sort to due date so your list always surfaces what is actually next, not what you added last.
Project Milestone & Progress Tracker
18/30You are a project-management tool designer and front-end developer. <context> I want a project milestone tracker built as one self-contained HTML file with inline CSS and vanilla JavaScript, saving to localStorage and previewable instantly as an artifact. </context> <inputs> - Project name and goal: [NAME + OUTCOME] - Milestones: [LIST WITH TARGET DATES] - Tasks under each milestone: [OPTIONAL LIST] - Vibe: [DESCRIBE] </inputs> <task> Build a tracker showing the project with an overall completion percentage derived from completed tasks or milestones. List milestones as sections, each with its target date, a progress bar, and checkable tasks. Compute per-milestone percent complete and flag milestones whose target date has passed while incomplete (at risk). Show a top summary: percent complete, milestones done vs total, and the next upcoming milestone. Let me add/edit milestones and tasks. Persist to localStorage. </task> <constraints> - One self-contained responsive HTML file; no dependencies except an optional Google Font. - Percentages roll up correctly from tasks to milestone to project; date-based at-risk flagging. - Accessible controls and progress bars with numeric labels; mobile-friendly. </constraints> <format> Return the full HTML in an artifact, then explain the roll-up percentage logic and how to add a simple timeline view. </format>
Builds a project milestone tracker with roll-up progress bars, at-risk date flagging, and a next-milestone summary, ready to use.
Pro tip: Give each milestone a real target date so the tracker can automatically flag which ones are slipping.
Sprint / Issue Tracker Spreadsheet
19/30You are an agile delivery lead and spreadsheet designer. <context> I want a ready-to-paste sprint and issue tracker for Google Sheets or Excel: exact columns, sample rows, and the formulas that produce a live sprint summary and a simple burndown. </context> <inputs> - Sprint length: [E.G. 2 WEEKS] - Statuses: [E.G. BACKLOG, IN PROGRESS, REVIEW, DONE] - Fields per issue: [ID, TITLE, ASSIGNEE, STATUS, STORY POINTS, PRIORITY] - Team members: [LIST] </inputs> <task> Design an issues tab with the given columns and data-validation dropdowns for status, priority, and assignee. Then a summary block with formulas for: total points, points done, points remaining, percent complete, count of issues per status, and points per assignee. Add a small day-by-day burndown table (ideal vs remaining points) with formulas, plus conditional formatting that colors rows by status and flags high-priority not-done issues. Include a few sample issues. </task> <constraints> - Valid Google Sheets formula syntax (note Excel differences); use SUMIF/COUNTIF and data validation. - No macros; formulas, dropdowns, and conditional formatting only. - State exactly which cell each formula and dropdown goes in. </constraints> <format> Return the tab layout as a table, then a formula reference list, then the dropdown and conditional-formatting rules and how to roll into the next sprint. </format>
Delivers a sprint tracker spreadsheet with status dropdowns, points-per-assignee formulas, and a burndown table, ready to build.
Pro tip: Ask Claude for the burndown as a chart spec too, so the ideal-vs-remaining lines render straight from the summary table.
Pomodoro Timer & Time-Log App
20/30You are a front-end developer building focus and time-tracking tools. <context> I want a Pomodoro timer with a time log built as one self-contained HTML file with inline CSS and vanilla JavaScript, saving to localStorage and previewable instantly as an artifact. </context> <inputs> - Focus and break lengths: [E.G. 25 MIN FOCUS, 5 MIN BREAK, 15 MIN LONG BREAK] - Projects/tasks to log time against: [LIST] - Long-break interval: [E.G. EVERY 4 POMODOROS] - Vibe: [DESCRIBE] </inputs> <task> Build an app with a working countdown timer that cycles focus and break sessions, a start/pause/reset, and an audible or visual end-of-session cue. Let me pick which task each focus session counts toward. Log every completed focus session with its task, date, and duration, and show totals: pomodoros today, focus minutes today, and minutes per task this week. Persist sessions and settings to localStorage. </task> <constraints> - One self-contained responsive HTML file; no dependencies except an optional Google Font. - Timer accurate and continues correctly through pause/resume; session cycle logic correct. - Accessible controls; state in localStorage; readable on mobile. </constraints> <format> Return the full HTML in an artifact, then explain the timer and session-cycle logic and how to add a daily focus goal. </format>
Builds a Pomodoro timer with per-task time logging and daily/weekly focus totals saved to localStorage, ready to use.
Pro tip: Assign each pomodoro to a real task so the weekly per-task minutes reveal where your focus time actually goes.
Job-Application Trackers
5 promptsJob Application Pipeline Board
21/30You are a front-end developer building job-search tools. <context> I want a job-application pipeline tracker built as one self-contained HTML file with inline CSS and vanilla JavaScript, saving to localStorage and previewable instantly as an artifact. </context> <inputs> - Pipeline stages: [E.G. WISHLIST, APPLIED, PHONE SCREEN, INTERVIEW, OFFER, REJECTED] - Fields per application: [COMPANY, ROLE, LINK, DATE APPLIED, SALARY, NOTES] - Follow-up reminder window: [E.G. 7 DAYS AFTER APPLYING] - Vibe: [DESCRIBE] </inputs> <task> Build a board with the pipeline stages as columns where each application is a card I can drag between stages (native HTML5 drag-and-drop). Cards show company, role, and date applied. Flag applications with no movement past the follow-up window so I know to nudge. Show counts per stage and a top summary: total applied, active, interviews, offers, and a response rate. Let me add, edit, and delete applications. Persist the board to localStorage. </task> <constraints> - One self-contained responsive HTML file; no libraries except an optional Google Font — native drag-and-drop. - Response-rate math correct; follow-up flag based on date applied vs today. - Accessible cards with a keyboard move fallback; state in localStorage; mobile-usable. </constraints> <format> Return the full HTML in an artifact, then explain the pipeline data model and how to add a per-company activity timeline. </format>
Generates a job-application pipeline board with draggable stages, stale-application flags, and a response-rate summary, ready to use.
Pro tip: Ask Claude to flag any application stuck in one stage past your follow-up window so nothing goes cold silently.
Job Application Spreadsheet Tracker
22/30You are a career coach and spreadsheet designer. <context> I want a ready-to-paste job-search tracker for Google Sheets or Excel: exact columns, sample rows, and the formulas that give me a live dashboard of my search. </context> <inputs> - Fields per application: [COMPANY, ROLE, SOURCE, DATE APPLIED, STATUS, SALARY, CONTACT, NEXT STEP, NOTES] - Statuses: [E.G. APPLIED, SCREEN, INTERVIEW, OFFER, REJECTED, GHOSTED] - Weekly application goal: [E.G. 10] - Currency: [SYMBOL] </inputs> <task> Design an applications tab with the given columns, a status dropdown via data validation, and a date-applied column. Add a dashboard block with formulas for: total applications, count per status, response rate, interview rate, offer rate, applications this week vs goal, and days-since-last-application. Add conditional formatting that colors rows by status and highlights any application older than 14 days with no update. Include a few sample rows. </task> <constraints> - Valid Google Sheets formula syntax (note Excel differences); use COUNTIF, date functions, and data validation. - No macros; formulas, dropdowns, and conditional formatting only. - State exactly which cell each formula and dropdown goes in. </constraints> <format> Return the tab layout as a table, then a formula reference list, then the dropdown and conditional-formatting rules and how to reset it weekly. </format>
Delivers a job-search spreadsheet with status dropdowns, response/interview/offer-rate formulas, and a weekly-goal dashboard, ready to build.
Pro tip: Track the source of each application; the formulas will show which job board actually gets you interviews.
Interview Prep & Follow-Up Tracker
23/30You are a front-end developer and interview coach. <context> I want an interview preparation and follow-up tracker built as one self-contained HTML file with inline CSS and vanilla JavaScript, saving to localStorage and previewable instantly as an artifact. </context> <inputs> - Companies I am interviewing with: [LIST WITH ROLE] - Interview rounds per company: [E.G. RECRUITER, HIRING MANAGER, TECHNICAL, FINAL] - Prep checklist items: [E.G. RESEARCH COMPANY, PREP STORIES, QUESTIONS TO ASK] - Vibe: [DESCRIBE] </inputs> <task> Build a tracker where each company has its interview rounds with date/time, interviewer name, a prep checklist (checkable), my questions to ask, and a post-interview notes field. Flag rounds where I have not yet sent a thank-you follow-up, and flag upcoming interviews within 48 hours. Show a readiness percentage per round from the prep checklist. Let me add companies, rounds, and checklist items. Persist to localStorage. </task> <constraints> - One self-contained responsive HTML file; no dependencies except an optional Google Font. - Upcoming and follow-up flags based on date/time vs now; readiness percent from checklist. - Accessible checkboxes and inputs; state in localStorage; mobile-friendly. </constraints> <format> Return the full HTML in an artifact, then explain the follow-up flag logic and how to add a common-questions bank per role. </format>
Builds an interview prep tracker with per-round checklists, readiness percentages, and thank-you follow-up flags, ready to use.
Pro tip: Add a thank-you follow-up flag so you never lose an offer over a missed note after a strong interview.
Networking & Outreach Tracker
24/30You are a front-end developer building relationship-management tools. <context> I want a networking and outreach tracker for my job search built as one self-contained HTML file with inline CSS and vanilla JavaScript, saving to localStorage and previewable instantly as an artifact. </context> <inputs> - Fields per contact: [NAME, COMPANY, ROLE, CHANNEL, LAST CONTACT DATE, STATUS] - Relationship stages: [E.G. TO REACH OUT, MESSAGED, REPLIED, MEETING SET, REFERRAL] - Follow-up cadence: [E.G. NUDGE AFTER 5 DAYS OF NO REPLY] - Vibe: [DESCRIBE] </inputs> <task> Build a tracker listing contacts with their stage, company, channel, and last-contact date. Flag contacts due for a follow-up based on the cadence and no reply, and surface a "who to contact today" list. Show counts per stage and totals: outreach sent, replies, meetings, and a reply rate. Let me add, edit, and advance contacts through stages, and log the date of each touch. Persist to localStorage. </task> <constraints> - One self-contained responsive HTML file; no dependencies except an optional Google Font. - Follow-up due logic based on last-contact date vs cadence; reply-rate math correct. - Accessible controls and list; state in localStorage; mobile-friendly. </constraints> <format> Return the full HTML in an artifact, then explain the follow-up-due logic and how to add message-template snippets per stage. </format>
Builds a networking tracker with relationship stages, follow-up-due flags, and a who-to-contact-today list saved to localStorage, ready to use.
Pro tip: Log the date of every touch; the tracker will resurface warm contacts before they go cold instead of you guessing.
Salary Offer Comparison Tracker
25/30You are a compensation analyst and front-end developer. <context> I want a job-offer comparison tracker built as one self-contained HTML file with inline CSS and vanilla JavaScript, saving to localStorage and previewable instantly as an artifact. </context> <inputs> - Offers to compare: [COMPANY, BASE SALARY, BONUS, EQUITY/YEAR, BENEFITS VALUE] - Non-money factors and their weight: [E.G. REMOTE, GROWTH, COMMUTE, CULTURE] - Currency: [SYMBOL] - Vibe: [DESCRIBE] </inputs> <task> Build a side-by-side comparison where each offer is a column showing total first-year compensation (base + bonus + equity + benefits) and each non-money factor scored 1-5. Compute a weighted score combining normalized total comp and the weighted factor scores, and highlight the top offer. Show the pure-money winner and the weighted-preference winner separately so I can see the trade-off. Let me add offers, edit numbers, and adjust factor weights, recomputing live. Persist to localStorage. </task> <constraints> - One self-contained responsive HTML file; no dependencies except an optional Google Font. - Compensation and weighted-score math correct and transparent; weights adjustable. - Accessible inputs and comparison table; state in localStorage; mobile-friendly. </constraints> <format> Return the full HTML in an artifact, then explain the weighted-score formula and how to add a cost-of-living adjustment per city. </format>
Builds a salary-offer comparison tracker with total-comp math and a weighted money-vs-preference score as a previewable artifact.
Pro tip: Set the weights before you see the totals so your priorities, not the biggest base number, drive the recommendation.
Most people use 10% of Claude. Tutorials unlock the rest.
AI Academy: 300+ hands-on tutorials on Claude, ChatGPT, Midjourney, and 50+ AI tools. New tutorials added every week.
Mood & Journal Trackers
5 promptsDaily Mood Tracker with Heatmap
26/30You are a front-end developer building wellbeing trackers. <context> I want a daily mood tracker built as one self-contained HTML file with inline CSS and vanilla JavaScript, saving to localStorage and previewable instantly as an artifact. </context> <inputs> - Mood scale: [E.G. 5 EMOJI FROM AWFUL TO GREAT] - Optional tags per day: [E.G. WORK, SLEEP, EXERCISE, SOCIAL] - View: [MONTH CALENDAR HEATMAP] - Vibe: [CALM, SOFT, MINIMAL] </inputs> <task> Build an app to log one mood per day with an optional note and tags. Render a month calendar where each day is colored by that day's mood (a heatmap). Show this month's average mood, a current logging streak, and the most common tag on good vs bad days. Let me navigate months, edit a past day, and see a day's note on click. Store one entry per date in localStorage. </task> <constraints> - One self-contained responsive HTML file; no dependencies except an optional Google Font — heatmap via CSS. - One mood per date; month navigation keeps each day intact; averages over logged days only. - Accessible mood buttons and calendar; adequate contrast; mobile-friendly. </constraints> <format> Return the full HTML in an artifact, then explain the entry data model and how to add a mood-vs-tag insight summary. </format>
Generates a daily mood tracker with a color-coded month heatmap, average mood, and logging streak saved to localStorage, ready to use.
Pro tip: Add a couple of tags like sleep and exercise so over a month the heatmap reveals what actually lifts your mood.
Mood & Trigger Journal
27/30You are a front-end developer building CBT-style reflection tools. <context> I want a mood-and-trigger journal built as one self-contained HTML file with inline CSS and vanilla JavaScript, saving to localStorage and previewable instantly as an artifact. </context> <inputs> - What to log per entry: [MOOD RATING, SITUATION/TRIGGER, THOUGHT, REFRAME] - Mood scale: [E.G. 1-10] - Common triggers to pick from: [LIST] - Vibe: [CALM, SUPPORTIVE, MINIMAL] </inputs> <task> Build a journal to log timestamped entries with a mood rating, the situation or trigger, the automatic thought, and a balanced reframe. List entries newest-first with the ability to edit and delete. Show simple insights: average mood, most frequent trigger, and how mood compares before vs after entries tagged with a reframe. Let me add custom triggers. Persist all entries to localStorage. </task> <constraints> - One self-contained responsive HTML file; no dependencies except an optional Google Font. - Entries timestamped and sorted; insight math over logged entries only. - Accessible form fields and controls; state in localStorage; mobile-friendly; calm, non-clinical tone in the UI copy. </constraints> <format> Return the full HTML in an artifact, then explain the entry model and how to add a weekly trigger-frequency chart. </format>
Builds a mood-and-trigger journal with situation-thought-reframe fields and frequent-trigger insights as a previewable artifact.
Pro tip: Fill the reframe field even briefly; over time the tracker shows whether reframing actually shifts your mood.
Gratitude Journal Tracker
28/30You are a front-end developer building simple daily-journaling apps. <context> I want a gratitude journal tracker built as one self-contained HTML file with inline CSS and vanilla JavaScript, saving to localStorage and previewable instantly as an artifact. </context> <inputs> - Prompts per day: [E.G. 3 THINGS I AM GRATEFUL FOR] - Optional daily win field: [YES/NO] - View: [LIST + STREAK] - Vibe: [WARM, MINIMAL, UPLIFTING] </inputs> <task> Build an app with a daily entry of the configured number of gratitude lines plus an optional win of the day. Save one entry per date. Show a current streak of consecutive days journaled, total entries, and a random past entry as a resurfaced memory. Let me browse past days, edit today's entry, and search entries by keyword. Persist everything to localStorage keyed by date. </task> <constraints> - One self-contained responsive HTML file; no dependencies except an optional Google Font. - One entry per date; streak counts consecutive logged days correctly; search filters live. - Accessible inputs and controls; state in localStorage; mobile-friendly. </constraints> <format> Return the full HTML in an artifact, then explain the streak logic and how to add an on-this-day memory feature. </format>
Builds a gratitude journal with daily prompts, a logging streak, and a resurfaced-memory feature saved to localStorage, ready to use.
Pro tip: Ask Claude to resurface a random past entry each day so the journal becomes a source of encouragement, not just input.
Wellness Wheel Check-in Tracker
29/30You are a front-end developer and wellbeing-app designer. <context> I want a weekly wellness check-in tracker built as one self-contained HTML file with inline CSS and vanilla JavaScript, saving to localStorage and previewable instantly as an artifact. </context> <inputs> - Life dimensions to rate: [E.G. HEALTH, WORK, RELATIONSHIPS, FINANCES, GROWTH, FUN] - Rating scale: [E.G. 1-10] - Check-in cadence: [WEEKLY] - Vibe: [CALM, MODERN, MINIMAL] </inputs> <task> Build a tracker where each week I rate every life dimension 1-10 and add a one-line note per dimension. Render the current week's ratings as a wheel or radar drawn with inline SVG. Show the overall balance score (average), the strongest and weakest dimension, and the change per dimension since last week (up/down arrows). Let me store each week separately, browse past weeks, and see a trend line for one dimension over time. Persist to localStorage. </task> <constraints> - One self-contained responsive HTML file; no dependencies except an optional Google Font — wheel/radar via inline SVG. - Each week keyed separately; week-over-week deltas computed correctly. - Accessible sliders/inputs and controls; state in localStorage; mobile-friendly. </constraints> <format> Return the full HTML in an artifact, then explain the radar-drawing approach and how to add a quarterly average view. </format>
Builds a weekly wellness-wheel tracker with an SVG radar, balance score, and week-over-week deltas per dimension, ready to use.
Pro tip: Add a one-line note per dimension each week; the notes explain later why a score moved, not just that it did.
Mood-Habit Correlation Spreadsheet
30/30You are a data-minded spreadsheet designer focused on personal analytics. <context> I want a ready-to-paste mood-and-habit correlation tracker for Google Sheets or Excel: exact columns, sample rows, and the formulas that reveal which habits move my mood. </context> <inputs> - Daily mood scale: [E.G. 1-10] - Habits/factors to log: [E.G. SLEEP HOURS, EXERCISE Y/N, CAFFEINE, SCREEN TIME, SOCIAL] - Tracking period: [E.G. ONE MONTH] - Insight I want: [E.G. WHICH FACTOR CORRELATES MOST WITH GOOD DAYS] </inputs> <task> Design a daily-log tab: column A the date, a mood column, and one column per habit/factor. Then a correlation/summary block with formulas for: average mood on days a habit was done vs not (AVERAGEIF), a CORREL between each numeric factor and mood, the average mood of the top vs bottom quartile of a factor, and a ranked note of the strongest positive and negative associations. Provide sample rows, and conditional formatting that colors mood cells on a red-to-green scale. </task> <constraints> - Valid Google Sheets formula syntax (note Excel differences); use AVERAGEIF, CORREL, and date functions. - No macros; formulas and conditional formatting only. - Note that correlation is not causation, and state which cell each formula goes in. </constraints> <format> Return the tab layout as a table, then a formula reference list, then the conditional-formatting rules and how to extend it to another month. </format>
Delivers a mood-habit correlation spreadsheet with AVERAGEIF and CORREL formulas that surface what lifts your mood, ready to build.
Pro tip: Log at least three weeks before trusting the correlations; a handful of days is not enough signal to act on.
Frequently Asked Questions
Prompts are the starting line. Tutorials are the finish.
A growing library of 300+ hands-on tutorials on ChatGPT, Claude, Midjourney, and 50+ AI tools. New tutorials added every week.
7-day free trial. Cancel anytime.