50 Claude Prompts That Build Mobile Apps
Paste a prompt and Claude builds a working mobile app prototype, with real screens, bottom navigation and live logic, inside a phone frame you can preview instantly. Not a static mockup, a tappable artifact.
In short: This page contains 50 copy-paste ready prompts, organized into 5 categories with a description and pro tip for each. The first 5 prompts are free instantly, no signup needed. Hand-curated and tested by the AI Academy team.
Productivity & Habit Apps
10 promptsHabit Streak Tracker
1/50✨ What it does
Claude builds a tappable habit tracker with today's habits, a calendar heatmap, and stats. You click the working screen in the chat, then try marking a day and protecting a streak.
You are a senior mobile product designer and front-end engineer. <context> I want a working mobile app prototype I can preview instantly as an artifact: a habit tracker that helps me build daily routines and protect my streaks. </context> <inputs> - Habits to seed: [E.G. DRINK WATER, READ, WORKOUT] - Accent color: [HEX OR COLOR NAME] </inputs> <task> Build a tappable habit tracker app with a Today view (habit cards with tap-to-complete and streak counters), a Calendar/heatmap view of past completions, and a Stats view (best streak, completion rate). Add a bottom nav to switch screens and a celebratory state when all habits are done. </task> <constraints> - One self-contained, responsive HTML file rendered inside a realistic phone frame; inline CSS, Google Fonts only, vanilla JS for interactivity. - Seed realistic sample data so streaks and the heatmap look populated. - Semantic, accessible markup with real microcopy and tasteful animations. </constraints> <format> Return the full HTML in an artifact, then a short list of design and data decisions. </format>
Pro tip: Ask Claude to add a weekly goal per habit and a progress ring so partial weeks still feel rewarding.
Daily To-Do & Focus App
2/50✨ What it does
Claude builds a daily to-do app from [LIST A FEW] in a [MINIMAL / PLAYFUL / DARK] vibe, with today's list, a one-task timer, and a later inbox. You click the working screen in the chat, then run one task through the timer.
You are a senior mobile product designer and front-end engineer. <context> I need a working mobile app prototype, previewable as an artifact: a focused daily to-do app that keeps me on one task at a time. </context> <inputs> - Sample tasks: [LIST A FEW] - Vibe: [MINIMAL / PLAYFUL / DARK] </inputs> <task> Build a to-do app with a Today list (add, complete, delete, reorder), a Focus view with a single highlighted task and a simple timer, and an Inbox for unscheduled items. Bottom nav switches screens; show progress for today at the top. </task> <constraints> - One self-contained, responsive HTML file inside a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed realistic tasks across all screens; persist state in memory during the session. - Accessible semantic HTML, real copy, smooth transitions. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Have Claude add a swipe-to-complete gesture and an end-of-day summary card to make wins feel tangible.
Pomodoro Timer App
3/50✨ What it does
Claude builds a Pomodoro focus timer with an animated ring, a session log, and settings you can change. You start a session in the chat, then decide if the lengths fit your deep-work block.
You are a senior mobile product designer and front-end engineer. <context> I want a working mobile app prototype as an artifact: a Pomodoro timer for deep-work sessions. </context> <inputs> - Focus length: [E.G. 25 MIN] - Break length: [E.G. 5 MIN] </inputs> <task> Build a Pomodoro app with a Timer view (animated countdown ring, start/pause/reset, auto-switch between focus and break), a Sessions view listing completed pomodoros with what I worked on, and a Settings view to adjust durations. Bottom nav ties it together. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed a realistic session history; make the ring animate via JS. - Semantic, accessible markup with real labels and gentle sound-free cues. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Ask for a daily focus-minutes goal bar so completed pomodoros visibly fill toward a target.
Note-Taking & Quick Capture App
4/50✨ What it does
Claude builds a quick-capture notes app with search, tags, an editor, and accent [HEX]. You type a note in the chat, then try search and tags the way you would on your phone.
You are a senior mobile product designer and front-end engineer. <context> I need a working mobile app prototype, previewable as an artifact: a fast note-taking app for capturing thoughts on the go. </context> <inputs> - Note categories: [E.G. IDEAS, WORK, PERSONAL] - Accent color: [HEX] </inputs> <task> Build a notes app with a Notes list (search, pinned notes, color tags), a Note editor (title, body, tag picker), and a Tags view that filters by category. Add a floating compose button and a bottom nav. </task> <constraints> - One self-contained, responsive HTML file inside a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed a realistic, varied set of notes with timestamps and tags. - Accessible semantic HTML, real copy, polished list and editor transitions. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Tell Claude to add a pin-to-top action and a recently-edited sort so your active notes stay on top.
Reading List & Book Tracker
5/50✨ What it does
Claude builds a reading tracker for [TITLES + AUTHORS] with shelves, progress, and a yearly goal of [NUMBER]. You move a book between shelves in the chat, then see how the year goal looks.
You are a senior mobile product designer and front-end engineer. <context> I want a working mobile app prototype as an artifact: a reading tracker for books I'm reading, want to read, and finished. </context> <inputs> - Sample books: [TITLES + AUTHORS] - Yearly reading goal: [NUMBER] </inputs> <task> Build a reading app with a Library view (shelves: Reading, To-Read, Finished with cover-style cards and progress bars), a Book detail view (progress slider, rating, notes), and a Goal view showing books read vs yearly target. Bottom nav switches screens. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed realistic books with progress, ratings and short notes. - Semantic, accessible markup, real copy, tasteful cover cards. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Ask Claude to compute pages-per-day needed to hit your goal and surface it on the Goal screen.
Pocket Journal & Mood Log
6/50✨ What it does
Claude builds a pocket journal with a mood picker, an entry timeline, and [REFLECTIVE / GRATITUDE / GOALS] prompts. You write a short entry in the chat, then check the mood timeline.
You are a senior mobile product designer and front-end engineer. <context> I need a working mobile app prototype, previewable as an artifact: a daily journaling app that pairs a short entry with a mood. </context> <inputs> - Mood scale: [E.G. 5 EMOJI MOODS] - Daily prompt style: [REFLECTIVE / GRATITUDE / GOALS] </inputs> <task> Build a journal app with a Today view (mood picker, a writing prompt, an entry box), an Entries timeline of past days, and an Insights view charting mood over time. Bottom nav connects the screens. </task> <constraints> - One self-contained, responsive HTML file inside a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed two weeks of realistic entries and moods so the chart looks alive. - Accessible semantic HTML, real copy, calm visual design. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Have Claude rotate the daily writing prompt and tag entries by mood so patterns surface in Insights.
Weekly Planner App
7/50✨ What it does
Claude builds a weekly planner with week and day views, add-task screens, and [LIST] commitments. You drop a task on a day in the chat, then scan the week.
You are a senior mobile product designer and front-end engineer. <context> I want a working mobile app prototype as an artifact: a weekly planner to map tasks and events across the week. </context> <inputs> - Time blocks: [E.G. MORNING, AFTERNOON, EVENING] - Sample commitments: [LIST] </inputs> <task> Build a planner app with a Week view (7 day columns or a swipeable day strip with time-blocked cards), a Day view for detail, and an Add screen to create tasks with a day and block. Bottom nav switches views; highlight today. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed a realistic week of tasks and events across blocks. - Semantic, accessible markup, real copy, clear visual hierarchy. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Ask Claude to flag over-booked blocks in red so an overloaded day is obvious at a glance.
Goal & Milestone Tracker
8/50✨ What it does
Claude builds a goal tracker for [LIST 2-3] with milestone breakdowns, progress rings, and accent [HEX]. You open a goal in the chat, then tick a milestone and watch the ring move.
You are a senior mobile product designer and front-end engineer. <context> I need a working mobile app prototype, previewable as an artifact: a goal tracker that breaks big goals into milestones. </context> <inputs> - Sample goals: [LIST 2-3] - Accent color: [HEX] </inputs> <task> Build a goals app with a Goals view (cards with overall progress rings), a Goal detail view listing milestones with checkable steps, and a Progress view summarizing momentum this month. Bottom nav switches screens. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed realistic goals, milestones and partial progress. - Accessible semantic HTML, real copy, satisfying check animations. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Tell Claude to auto-update each goal's ring as milestones are checked so progress feels live.
Water & Daily Reminders App
9/50✨ What it does
Claude builds a hydration and reminders app with an animated water goal and history. You log a glass in the chat, then see how the day fills up.
You are a senior mobile product designer and front-end engineer. <context> I want a working mobile app prototype as an artifact: a gentle reminders app for water, stretching and small daily habits. </context> <inputs> - Reminders to seed: [E.G. WATER, STAND, BREATHE] - Daily water goal: [E.G. 8 GLASSES] </inputs> <task> Build a reminders app with a Today view (animated water fill toward the goal, quick +1 buttons), a Reminders view to toggle and schedule each habit, and a History view of the last 7 days. Bottom nav ties it together. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed realistic intake history and a few active reminders. - Semantic, accessible markup, real copy, friendly micro-animations. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Ask Claude to make the +1 button animate the water level so logging feels instantly rewarding.
Time-Blocking Schedule App
10/50✨ What it does
Claude builds a time-blocking app with an hour timeline, block creation, and a category summary. You add a block in the chat, then read how the day is split.
You are a senior mobile product designer and front-end engineer. <context> I need a working mobile app prototype, previewable as an artifact: a time-blocking app that turns my day into focused blocks. </context> <inputs> - Working hours: [E.G. 8AM-7PM] - Block categories: [E.G. DEEP WORK, MEETINGS, ADMIN] </inputs> <task> Build a time-blocking app with a Timeline view (vertical hour grid with colored blocks), an Add Block screen (start, end, category, label), and a Summary view showing hours spent per category today. Bottom nav switches screens; mark the current time with a live line. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed a realistic full day of blocks across categories. - Accessible semantic HTML, real copy, clean color coding. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Have Claude add a now-line that auto-positions to the current time so the timeline feels live.
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.
Finance & Budgeting Apps
10 promptsBudget & Expense App
11/50✨ What it does
Claude builds a budgeting app against monthly income [AMOUNT], with category bars, a transaction log, and limits. You add a spend in the chat, then see which bar is over.
You are a senior mobile product designer and front-end engineer. <context> I want a working mobile app prototype as an artifact: a budgeting app to track spending against monthly category budgets. </context> <inputs> - Budget categories: [E.G. FOOD, RENT, FUN] - Monthly income: [AMOUNT] </inputs> <task> Build a budget app with a Home view (money left this month, category budget bars), a Transactions list (add, categorize, delete), and a Budgets view to set per-category limits. Bottom nav switches screens; warn when a category is over budget. </task> <constraints> - One self-contained, responsive HTML file inside a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed a realistic month of transactions across categories. - Accessible semantic HTML, real copy, currency formatting. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Ask Claude to recompute every bar and the money-left figure instantly when a transaction is added.
Expense Splitter App
12/50✨ What it does
Claude builds a bill-splitting app for [NAMES] with balances, expense entry from [LIST], and settle-up math. You add a shared cost in the chat, then see who owes whom.
You are a senior mobile product designer and front-end engineer. <context> I need a working mobile app prototype, previewable as an artifact: a bill-splitting app for trips and shared houses. </context> <inputs> - Group members: [NAMES] - Sample expenses: [LIST] </inputs> <task> Build a splitter app with a Group view (who owes whom, settle-up balances), an Add Expense screen (amount, who paid, split between whom), and a History view of all expenses. Bottom nav ties it together; show a clear settle-up summary. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed realistic members and expenses; compute balances in JS. - Semantic, accessible markup, real copy, currency formatting. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Tell Claude to minimize the number of settle-up payments so the group settles in the fewest transfers.
Savings Goal Tracker
13/50✨ What it does
Claude builds a savings tracker with goal jars, contributions, finish-date projections, and accent [HEX]. You add a deposit in the chat, then check the projected finish date.
You are a senior mobile product designer and front-end engineer. <context> I want a working mobile app prototype as an artifact: a savings app for tracking goals like a trip or emergency fund. </context> <inputs> - Sample goals: [E.G. JAPAN TRIP $3000] - Accent color: [HEX] </inputs> <task> Build a savings app with a Goals view (progress jars/rings with saved vs target), a Goal detail view (add a contribution, see history, projected finish date), and an Overview of total saved. Bottom nav switches screens. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed realistic goals, contributions and progress. - Accessible semantic HTML, real copy, satisfying fill animations. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Ask Claude to project a finish date from your average monthly contribution and show it on each goal.
Subscription Manager App
14/50✨ What it does
Claude builds a subscription manager with monthly totals, renewal dates, and a service list. You scan the list in the chat, then decide what to cancel.
You are a senior mobile product designer and front-end engineer. <context> I need a working mobile app prototype, previewable as an artifact: a subscription tracker that surfaces what I pay monthly. </context> <inputs> - Sample subscriptions: [E.G. NETFLIX, SPOTIFY, GYM] - Currency: [E.G. USD] </inputs> <task> Build a subscriptions app with a Home view (total monthly + yearly spend, upcoming renewals), a Subscriptions list (logo-style icon, price, billing cycle), and an Add screen. Bottom nav switches screens; flag renewals due this week. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed realistic subscriptions with varied cycles and renewal dates. - Semantic, accessible markup, real copy, clean number formatting. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Have Claude normalize annual plans to a monthly cost so every subscription compares fairly.
Net Worth Dashboard App
15/50✨ What it does
Claude builds a net-worth dashboard with accounts, an asset-versus-debt split, and a trend chart. You change a balance in the chat, then read the new total.
You are a senior mobile product designer and front-end engineer. <context> I want a working mobile app prototype as an artifact: a net-worth dashboard tracking assets and debts. </context> <inputs> - Asset accounts: [E.G. CHECKING, INVESTMENTS] - Liabilities: [E.G. CARD, LOAN] </inputs> <task> Build a net-worth app with a Dashboard (total net worth, assets vs liabilities, a trend chart), an Accounts view listing each account with balance, and an Add/Edit account screen. Bottom nav switches screens. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed realistic accounts and several months of trend data. - Accessible semantic HTML, real copy, currency formatting. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Ask Claude to draw the trend chart in inline SVG so it stays crisp without any external library.
Bill Reminder & Tracker
16/50✨ What it does
Claude builds a bill reminder app with upcoming dues, a calendar, and paid history. You mark one paid in the chat, then check what is due next.
You are a senior mobile product designer and front-end engineer. <context> I need a working mobile app prototype, previewable as an artifact: a bills app so I never miss a due date. </context> <inputs> - Recurring bills: [E.G. RENT, ELECTRIC, INTERNET] - Currency: [E.G. USD] </inputs> <task> Build a bills app with a Upcoming view (sorted by due date, mark-as-paid), a Calendar view showing bills on their days, and a Paid history view. Bottom nav switches screens; highlight overdue bills. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed realistic bills with mixed due dates and statuses. - Semantic, accessible markup, real copy, clear status colors. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Tell Claude to surface total due this week at the top so cash-flow pressure is visible immediately.
Tip & Bill Calculator App
17/50✨ What it does
Claude builds a tip and split calculator with a keypad, tip presets, and recents. You enter a bill in the chat, then pick a tip and see each person's share.
You are a senior mobile product designer and front-end engineer. <context> I want a working mobile app prototype as an artifact: a fast tip and bill-splitting calculator for restaurants. </context> <inputs> - Default tip presets: [E.G. 15/18/20%] - Currency: [E.G. USD] </inputs> <task> Build a calculator app with a Calculator view (bill amount keypad, tip presets and slider, split-by-people stepper, per-person total), a Presets screen to edit tip options, and a Recent view of past bills. Bottom nav ties it together. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed a few recent bills; recompute totals live as inputs change. - Accessible semantic HTML, real copy, large tappable keypad. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Ask Claude to round the per-person total up to the nearest dollar with a toggle for awkward splits.
Spending Insights App
18/50✨ What it does
Claude builds a spending-insights app with a category donut, drill-downs, and month trends. You tap a slice in the chat, then see where the money went.
You are a senior mobile product designer and front-end engineer. <context> I need a working mobile app prototype, previewable as an artifact: a spending-insights app that visualizes where my money goes. </context> <inputs> - Categories: [E.G. GROCERIES, DINING, TRANSPORT] - Month to show: [E.G. CURRENT MONTH] </inputs> <task> Build an insights app with an Overview (donut chart by category, biggest changes vs last month), a Category detail view with its transactions, and a Trends view comparing months. Bottom nav switches screens. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed two months of realistic transactions so comparisons are meaningful. - Accessible semantic HTML, real copy, inline SVG charts. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Have Claude call out the single category that grew the most month-over-month as a headline insight.
Debt Payoff Planner
19/50✨ What it does
Claude builds a debt-payoff planner from [NAME, BALANCE, APR, MIN PAYMENT] plus extra [AMOUNT], comparing smallest-first and highest-interest plans to a debt-free date. You switch strategies in the chat, then pick the date you will aim for.
You are a senior mobile product designer and front-end engineer. <context> I want a working mobile app prototype as an artifact: a debt-payoff planner using snowball or avalanche strategies. </context> <inputs> - Debts: [NAME, BALANCE, APR, MIN PAYMENT] - Extra monthly payment: [AMOUNT] </inputs> <task> Build a payoff app with a Plan view (debt-free date, total interest, ordered payoff list), a Debts view to add/edit debts, and a Strategy toggle between snowball and avalanche that re-orders the plan. Bottom nav switches screens. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed realistic debts; compute payoff order and timeline in JS. - Accessible semantic HTML, real copy, clear progress visuals. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Ask Claude to show the interest saved when switching to avalanche so the trade-off is obvious.
Crypto & Stock Watchlist App
20/50✨ What it does
Claude builds a stock and crypto watchlist with sparklines, detail charts, and a portfolio view. You open a ticker in the chat, then treat it as a prototype, not live prices.
You are a senior mobile product designer and front-end engineer. <context> I need a working mobile app prototype, previewable as an artifact: a portfolio watchlist app for stocks and crypto. </context> <inputs> - Watchlist tickers: [E.G. AAPL, BTC, ETH] - Currency: [E.G. USD] </inputs> <task> Build a watchlist app with a Watchlist view (tickers with price, % change, mini sparkline), an Asset detail view (larger chart, stats), and a Portfolio view showing holdings and total value. Bottom nav switches screens; color gains green and losses red. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed realistic prices, changes and chart data (static sample, clearly fake). - Accessible semantic HTML, real copy, inline SVG sparklines. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Tell Claude to label the data as sample only so no one mistakes the seeded prices for live quotes.
Health, Fitness & Wellness Apps
10 promptsWorkout Logger
21/50✨ What it does
Claude builds a workout logger in [KG / LB] with set entry, session history, and strength charts. You log a set in the chat, then check the progress chart.
You are a senior mobile product designer and front-end engineer. <context> I want a working mobile app prototype as an artifact: a strength-training logger for tracking sets, reps and weight. </context> <inputs> - Sample exercises: [E.G. SQUAT, BENCH, DEADLIFT] - Units: [KG / LB] </inputs> <task> Build a workout app with a Today view (current workout, add sets with reps and weight, rest timer), a History view of past sessions, and a Progress view charting top weight per exercise. Bottom nav switches screens. </task> <constraints> - One self-contained, responsive HTML file inside a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed realistic workouts and progression data. - Accessible semantic HTML, real copy, big tappable set rows. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Ask Claude to auto-suggest last session's weight for each exercise so logging is one tap.
Calorie & Meal Tracker
22/50✨ What it does
Claude builds a calorie tracker toward [NUMBER] calories and [PROTEIN/CARBS/FAT] targets, with a macro ring, meal sections, and a diary. You add a meal in the chat, then see how the ring fills.
You are a senior mobile product designer and front-end engineer. <context> I need a working mobile app prototype, previewable as an artifact: a calorie and macro tracker for daily meals. </context> <inputs> - Daily calorie goal: [NUMBER] - Macro targets: [PROTEIN/CARBS/FAT] </inputs> <task> Build a nutrition app with a Today view (calories ring, macro bars, meals by Breakfast/Lunch/Dinner/Snacks), an Add Food screen (name, calories, macros), and a Diary view of past days. Bottom nav switches screens. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed a realistic day of meals plus a few days of diary history. - Accessible semantic HTML, real copy, clean numeric display. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Have Claude update the calorie ring and macro bars instantly as foods are added or removed.
Sleep Tracker App
23/50✨ What it does
Claude builds a sleep tracker with last-night stats, a two-week chart, a bedtime schedule, and accent [HEX]. You enter a night in the chat, then read the trend.
You are a senior mobile product designer and front-end engineer. <context> I want a working mobile app prototype as an artifact: a sleep tracker showing duration and quality trends. </context> <inputs> - Target sleep: [E.G. 8 HOURS] - Accent color: [HEX] </inputs> <task> Build a sleep app with a Last Night view (hours slept, quality score, bedtime vs wake), a History view charting nightly hours over two weeks, and a Bedtime view to set a target schedule. Bottom nav switches screens. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed two weeks of realistic sleep data with variation. - Accessible semantic HTML, real copy, calm night-mode palette. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Ask Claude to compute a rolling average and flag nights that fell short of your sleep target.
Meditation & Breathing App
24/50✨ What it does
Claude builds a meditation app with themed sessions, an animated breathing guide, and streaks. You start a short session in the chat, then see how the breath animation feels.
You are a senior mobile product designer and front-end engineer. <context> I need a working mobile app prototype, previewable as an artifact: a calm meditation app with guided breathing. </context> <inputs> - Session lengths: [E.G. 1, 3, 5 MIN] - Breathing pattern: [E.G. 4-7-8] </inputs> <task> Build a meditation app with a Home view (session cards by theme), a Breathe view with an animated expanding/contracting circle guiding inhale-hold-exhale, and a Streak view of minutes meditated. Bottom nav switches screens. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed realistic session history and a current streak. - Accessible semantic HTML, real copy, soothing animation and palette. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Tell Claude to drive the breathing circle from the chosen pattern so timing matches the inhale-hold-exhale.
Step & Activity Tracker
25/50✨ What it does
Claude builds an activity tracker in [KM / MI] with a steps ring, weekly bars, and goals. You enter a day in the chat, then see how close you are to the ring.
You are a senior mobile product designer and front-end engineer. <context> I want a working mobile app prototype as an artifact: a daily activity tracker for steps, distance and active minutes. </context> <inputs> - Daily step goal: [E.G. 10000] - Units: [KM / MI] </inputs> <task> Build an activity app with a Today view (steps ring, distance, active minutes, calories), a Week view bar chart of daily steps, and a Goals view to adjust targets. Bottom nav switches screens; celebrate hitting the goal. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed a realistic week of activity data. - Accessible semantic HTML, real copy, energetic but clean visuals. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Ask Claude to add a +500 demo button so you can watch the ring fill and trigger the goal celebration.
Workout Routine Builder
26/50✨ What it does
Claude builds a workout routine builder for a [STRENGTH / HYPERTROPHY / FULL BODY] plan across [NUMBER] days, with weekly splits and an exercise library. You add an exercise in the chat, then save a week of sessions.
You are a senior mobile product designer and front-end engineer. <context> I need a working mobile app prototype, previewable as an artifact: a routine builder that assembles workouts from an exercise library. </context> <inputs> - Goal: [STRENGTH / HYPERTROPHY / FULL BODY] - Days per week: [NUMBER] </inputs> <task> Build a routine app with a My Plans view (weekly split cards), a Routine detail view listing exercises with sets/reps, and an Exercise library to browse and add moves to a routine. Bottom nav switches screens. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed a realistic split and a categorized exercise library. - Accessible semantic HTML, real copy, clear muscle-group tags. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Have Claude tag each exercise by muscle group so you can balance a split at a glance.
Mood & Mental Wellness App
27/50✨ What it does
Claude builds a mental wellness app with daily check-ins, coping tools, and mood trends. You log a check-in in the chat, then try one coping tool.
You are a senior mobile product designer and front-end engineer. <context> I want a working mobile app prototype as an artifact: a mental wellness app for daily check-ins and coping tools. </context> <inputs> - Mood options: [E.G. GREAT TO LOW] - Coping tools: [E.G. BREATHE, WALK, JOURNAL] </inputs> <task> Build a wellness app with a Check-in view (mood picker, optional note, factors like sleep/stress), a Tools view of quick coping exercises, and a Trends view charting mood and factors. Bottom nav switches screens. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed two weeks of realistic check-ins. - Accessible semantic HTML, real copy, gentle supportive tone. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Ask Claude to correlate mood with logged factors so patterns like poor-sleep days surface in Trends.
Yoga & Stretch Flow App
28/50✨ What it does
Claude builds a yoga app with themed flows, a timed pose player, and a history of sessions. You start the flow in the chat, then step through the poses.
You are a senior mobile product designer and front-end engineer. <context> I need a working mobile app prototype, previewable as an artifact: a yoga app that plays through a timed pose flow. </context> <inputs> - Flow type: [E.G. MORNING, WIND-DOWN] - Flow length: [E.G. 10 MIN] </inputs> <task> Build a yoga app with a Flows view (cards by theme and length), a Player view that steps through poses with a per-pose countdown and next-pose preview, and a History view of completed flows. Bottom nav switches screens. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed realistic flows with named poses and durations. - Accessible semantic HTML, real copy, calm visuals and clear timers. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Tell Claude to auto-advance poses on the countdown and show the next pose so you can prepare.
Symptom & Medication Tracker
29/50✨ What it does
Claude builds a medication and symptom tracker from [NAME, DOSE, SCHEDULE] and symptoms [LIST], with reminders, a schedule, and history. You mark a dose in the chat, then log a symptom on the same day.
You are a senior mobile product designer and front-end engineer. <context> I want a working mobile app prototype as an artifact: a health log for medications and symptoms. </context> <inputs> - Medications: [NAME, DOSE, SCHEDULE] - Symptoms to track: [LIST] </inputs> <task> Build a health app with a Today view (meds due with mark-as-taken, quick symptom logging with severity), a Schedule view of recurring meds, and a History view charting symptoms over time. Bottom nav switches screens. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed realistic meds, doses and a symptom history. - Accessible semantic HTML, real copy, clear status indicators. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Ask Claude to add a non-medical disclaimer and let you export a simple summary to share with a doctor.
Fasting & Hydration Timer
30/50✨ What it does
Claude builds a fasting timer with stage progress, water logging, and fast history. You start a fast in the chat, then log water as the timer runs.
You are a senior mobile product designer and front-end engineer. <context> I need a working mobile app prototype, previewable as an artifact: an intermittent-fasting timer with hydration tracking. </context> <inputs> - Fasting protocol: [E.G. 16:8] - Daily water goal: [E.G. 2L] </inputs> <task> Build a fasting app with a Timer view (circular fasting progress, current stage, start/stop eating window), a Water view to log intake toward the goal, and a History view of past fasts. Bottom nav switches screens. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed realistic fasting history and water logs. - Accessible semantic HTML, real copy, clear stage labels. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Have Claude label fasting stages by elapsed hours so the timer teaches what's happening, not just counts.
These prompts give you the what. Tutorials give you the why.
Learn when to use extended thinking, how to build Claude Projects, and workflows that compound. 300+ tutorials and growing.
Business & Utility Apps
10 promptsMini CRM App
31/50✨ What it does
Claude builds a mini CRM for [NAMES + COMPANIES] with a pipeline, contact details, and follow-up reminders. You open a contact in the chat, then move them a stage.
You are a senior mobile product designer and front-end engineer. <context> I want a working mobile app prototype as an artifact: a lightweight CRM for managing leads and follow-ups. </context> <inputs> - Pipeline stages: [E.G. LEAD, CONTACTED, WON] - Sample contacts: [NAMES + COMPANIES] </inputs> <task> Build a CRM app with a Pipeline view (contacts grouped by stage, move between stages), a Contact detail view (notes, next follow-up, activity log), and a Today view of due follow-ups. Bottom nav switches screens. </task> <constraints> - One self-contained, responsive HTML file inside a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed realistic contacts across stages with notes and dates. - Accessible semantic HTML, real copy, clear stage tags. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Ask Claude to surface overdue follow-ups at the top of Today so no warm lead goes cold.
Invoice Generator App
32/50✨ What it does
Claude builds a freelancer invoicing app for [NAME] with an invoice builder, line-item math, and a client list. You add a line in the chat, then save a draft invoice.
You are a senior mobile product designer and front-end engineer. <context> I need a working mobile app prototype, previewable as an artifact: an invoicing app for freelancers. </context> <inputs> - Business name: [NAME] - Currency: [E.G. USD] </inputs> <task> Build an invoice app with an Invoices list (status: draft/sent/paid, totals), an Invoice builder (client, line items with qty and rate, tax, auto-calculated total), and a Clients view. Bottom nav switches screens; render a clean invoice preview. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed realistic invoices, clients and line items. - Accessible semantic HTML, real copy, currency and tax math in JS. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Have Claude auto-number invoices and recompute the total live as line items, quantities or tax change.
Inventory Tracker App
33/50✨ What it does
Claude builds an inventory tracker for [LIST] with stock adjustments, item details, and alerts when stock hits [NUMBER]. You change a count in the chat, then see which items go low.
You are a senior mobile product designer and front-end engineer. <context> I want a working mobile app prototype as an artifact: an inventory app for a small shop or storeroom. </context> <inputs> - Product categories: [LIST] - Low-stock threshold: [NUMBER] </inputs> <task> Build an inventory app with a Stock view (items with quantity, +/- adjust, low-stock badges), an Item detail view (SKU, price, history), and a Categories view to filter. Bottom nav switches screens; highlight items below threshold. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed realistic products with varied stock levels. - Accessible semantic HTML, real copy, clear low-stock styling. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Ask Claude to add a low-stock filter chip so restock decisions take one tap, not a scroll.
Appointment Booking App
34/50✨ What it does
Claude builds an appointment booking app for services [NAME + DURATION] with time slots and confirmations. You pick a service in the chat, then book a slot as a customer would.
You are a senior mobile product designer and front-end engineer. <context> I need a working mobile app prototype, previewable as an artifact: a booking app for a service business like a salon. </context> <inputs> - Services offered: [NAME + DURATION] - Business hours: [E.G. 9-6] </inputs> <task> Build a booking app with a Book view (pick service, date, available time slots), an Appointments view of upcoming bookings, and a Confirmation screen. Bottom nav switches screens; gray out taken slots. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed realistic services, a few booked slots and upcoming appointments. - Accessible semantic HTML, real copy, clear slot availability. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Tell Claude to compute slot availability from service duration so long services block enough time.
Team Task Board App
35/50✨ What it does
Claude builds a team task board for [NAMES] with swipeable columns, card moves, and per-member views. You move a card in the chat, then filter to one person.
You are a senior mobile product designer and front-end engineer. <context> I want a working mobile app prototype as an artifact: a kanban task board for a small team. </context> <inputs> - Columns: [E.G. TO DO, DOING, DONE] - Team members: [NAMES] </inputs> <task> Build a task board app with a Board view (swipeable columns of task cards with assignee and priority, move cards between columns), a Task detail view, and a My Tasks view filtered to one member. Bottom nav switches screens. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed realistic tasks across columns with assignees and priorities. - Accessible semantic HTML, real copy, clear priority tags. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Ask Claude to make moving a card to Done strike it through and bump a visible completed count.
QR & Barcode Toolkit App
36/50✨ What it does
Claude builds a QR toolkit with a live generator, history, saved codes, and accent [HEX]. You generate a code in the chat, then save it to the history.
You are a senior mobile product designer and front-end engineer. <context> I need a working mobile app prototype, previewable as an artifact: a utility app that generates QR codes and stores scans. </context> <inputs> - QR types to support: [E.G. URL, WIFI, TEXT] - Accent color: [HEX] </inputs> <task> Build a QR app with a Generate view (type picker, input fields, live-rendered QR preview), a History view of generated codes, and a Saved view of favorites. Bottom nav switches screens. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Render the QR with a small inline JS algorithm or drawn placeholder grid; seed history. - Accessible semantic HTML, real copy, clean utility design. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Have Claude switch the input fields by QR type so a WiFi code asks for SSID and password specifically.
Field Service Checklist App
37/50✨ What it does
Claude builds a field-service app for jobs from [LIST], with step checklists and completion tracking. You open a job in the chat, then tick the steps as done.
You are a senior mobile product designer and front-end engineer. <context> I want a working mobile app prototype as an artifact: a job-checklist app for field technicians. </context> <inputs> - Job types: [E.G. INSTALL, REPAIR, INSPECTION] - Sample jobs: [LIST] </inputs> <task> Build a field app with a Jobs view (today's jobs with address and status), a Job detail view (checklist of steps, photos placeholder, notes, mark complete), and a Completed view. Bottom nav switches screens; show overall checklist progress per job. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed realistic jobs with multi-step checklists. - Accessible semantic HTML, real copy, large tappable checklist rows. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Ask Claude to block marking a job complete until every checklist step is done to enforce quality.
Event Check-In App
38/50✨ What it does
Claude builds an event check-in app for [NAME] with about [APPROX NUMBER] guests, search, check-in toggles, and arrival stats. You search a name in the chat, then toggle them as arrived.
You are a senior mobile product designer and front-end engineer. <context> I need a working mobile app prototype, previewable as an artifact: a guest check-in app for events. </context> <inputs> - Event name: [NAME] - Guest list size: [APPROX NUMBER] </inputs> <task> Build a check-in app with a Guests view (searchable list, check-in toggle, checked-in count), a Guest detail view (ticket type, table, notes), and a Stats view (arrived vs expected). Bottom nav switches screens. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed a realistic guest list with mixed statuses and ticket types. - Accessible semantic HTML, real copy, fast search interaction. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Tell Claude to keep a live arrived-count in the header so the door team always sees turnout.
Expense Report App
39/50✨ What it does
Claude builds an expense-report app with report totals, line items, and a submit flow. You add a line in the chat, then send the report through the working screen.
You are a senior mobile product designer and front-end engineer. <context> I want a working mobile app prototype as an artifact: a business expense-report app for submitting reimbursements. </context> <inputs> - Expense categories: [E.G. TRAVEL, MEALS] - Currency: [E.G. USD] </inputs> <task> Build an expense app with a Reports view (report cards with status and total), a Report detail view (line items, receipt placeholders, submit button), and an Add Expense screen. Bottom nav switches screens; sum each report automatically. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed realistic reports and expense line items. - Accessible semantic HTML, real copy, currency math in JS. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Ask Claude to lock a report from editing once submitted and show a clear status badge.
Restaurant Menu & Ordering App
40/50✨ What it does
Claude builds a restaurant ordering app with a menu, a cart, and order status. You add a dish in the chat, then follow the order as if you were at the table.
You are a senior mobile product designer and front-end engineer. <context> I need a working mobile app prototype, previewable as an artifact: an in-table ordering app for a restaurant. </context> <inputs> - Menu sections: [E.G. STARTERS, MAINS, DRINKS] - Currency: [E.G. USD] </inputs> <task> Build an ordering app with a Menu view (sections, item cards with add-to-cart and quantity), a Cart view (line items, running total, place order), and an Order Status view. Bottom nav switches screens; badge the cart with item count. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed a realistic full menu with prices and descriptions. - Accessible semantic HTML, real copy, appetizing card design. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Have Claude keep a live cart badge and total so diners always see what they'll pay before ordering.
Free tool
Prompt Optimizer
Turn a rough idea into a structured, professional AI prompt.
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.
Related guides
Social, Lifestyle & Fun Apps
10 promptsRecipe Saver App
41/50✨ What it does
Claude builds a recipe app including [TITLES], with browsing, scalable ingredients, and step-by-step method. You open a recipe in the chat, then change the serving size.
You are a senior mobile product designer and front-end engineer. <context> I want a working mobile app prototype as an artifact: a recipe app to save, browse and cook recipes. </context> <inputs> - Recipe categories: [E.G. BREAKFAST, DINNER, DESSERT] - Sample recipes: [TITLES] </inputs> <task> Build a recipe app with a Browse view (recipe cards with time and difficulty), a Recipe detail view (ingredients with checkable items, step-by-step method, serving stepper that scales quantities), and a Favorites view. Bottom nav switches screens. </task> <constraints> - One self-contained, responsive HTML file inside a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed realistic recipes with ingredients and steps. - Accessible semantic HTML, real copy, warm appetizing visuals. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Ask Claude to scale ingredient quantities live when the servings stepper changes so math is automatic.
Travel Itinerary App
42/50✨ What it does
Claude builds a travel app for [CITY] over [DAYS], with a day-by-day itinerary, activity details, and a packing list. You tap a day in the chat, then add or drop an activity.
You are a senior mobile product designer and front-end engineer. <context> I need a working mobile app prototype, previewable as an artifact: a trip-planner app organizing a multi-day itinerary. </context> <inputs> - Destination: [CITY] - Trip length: [DAYS] </inputs> <task> Build a travel app with an Itinerary view (day tabs with timed activities), an Activity detail view (notes, location, cost), and a Trip overview (dates, budget total, packing checklist). Bottom nav switches screens. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed a realistic multi-day itinerary with activities and costs. - Accessible semantic HTML, real copy, travel-magazine visual polish. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Have Claude total the trip cost from activity prices so the budget updates as you plan each day.
Movie & Show Watchlist
43/50✨ What it does
Claude builds a movie and show watchlist from titles [LIST] tagged with genres [LIST], with poster cards, ratings, and discovery. You add a title in the chat, then mark one as watched.
You are a senior mobile product designer and front-end engineer. <context> I want a working mobile app prototype as an artifact: a watchlist app for movies and TV shows. </context> <inputs> - Sample titles: [LIST] - Genres to tag: [LIST] </inputs> <task> Build a watchlist app with a Watchlist view (poster-style cards, want-to-watch vs watched), a Title detail view (rating, genre, notes, mark watched), and a Discover view of suggestions by genre. Bottom nav switches screens. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed realistic titles with genres, ratings and statuses. - Accessible semantic HTML, real copy, cinematic dark palette. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Ask Claude to base Discover suggestions on the genres you've rated highest for a personalized feel.
Event Countdown App
44/50✨ What it does
Claude builds a countdown app for [NAME + DATE] with live ticking timers, event details, creation, and accent [HEX]. You watch a timer in the chat, then add another event.
You are a senior mobile product designer and front-end engineer. <context> I need a working mobile app prototype, previewable as an artifact: a countdown app for upcoming events I'm excited about. </context> <inputs> - Sample events: [NAME + DATE] - Accent color: [HEX] </inputs> <task> Build a countdown app with a Home view (live ticking countdown cards for each event), an Event detail view (full date, notes, custom color), and an Add Event screen. Bottom nav switches screens; sort by soonest. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed realistic future events; tick the countdowns in JS. - Accessible semantic HTML, real copy, bold celebratory visuals. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Tell Claude to update each countdown every second with setInterval so the timers feel genuinely live.
Trivia Quiz Game App
45/50✨ What it does
Claude builds a trivia game with [NUMBER] questions per round, categories, a timer, scoring, and results. You play a round in the chat, then check the score screen.
You are a senior mobile product designer and front-end engineer. <context> I want a working mobile app prototype as an artifact: a trivia quiz game with categories and scoring. </context> <inputs> - Quiz categories: [E.G. SCIENCE, MOVIES, HISTORY] - Questions per round: [NUMBER] </inputs> <task> Build a trivia app with a Home view (category cards, high score), a Quiz view (question, multiple-choice answers, timer, instant correct/wrong feedback, running score), and a Results view with score and replay. Bottom nav switches screens. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed real questions and answers across categories. - Accessible semantic HTML, real copy, lively game feedback. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Ask Claude to shuffle question order each round and persist a high score so replays stay fresh.
Plant Care App
46/50✨ What it does
Claude builds a plant-care app for [NAMES + TYPES] with watering countdowns, care guides, due-today lists, and accent [HEX]. You water a plant in the chat, then see what is due today.
You are a senior mobile product designer and front-end engineer. <context> I need a working mobile app prototype, previewable as an artifact: a plant-care app that reminds me to water and tend my plants. </context> <inputs> - My plants: [NAMES + TYPES] - Accent color: [HEX] </inputs> <task> Build a plant app with a My Plants view (cards with next-watering countdown, mark-as-watered), a Plant detail view (care guide, light, watering interval, history), and a Today view of care due. Bottom nav switches screens. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed realistic plants with care schedules and history. - Accessible semantic HTML, real copy, fresh botanical visuals. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Have Claude compute next-watering from each plant's interval and last-watered date so reminders stay accurate.
Gift & Wishlist Organizer
47/50✨ What it does
Claude builds a gift organizer for [NAMES + OCCASIONS] with a budget of [AMOUNT], idea lists, and purchase tracking. You add an idea in the chat, then mark one as bought.
You are a senior mobile product designer and front-end engineer. <context> I want a working mobile app prototype as an artifact: a gift planner tracking ideas and purchases for people. </context> <inputs> - People to track: [NAMES + OCCASIONS] - Budget per person: [AMOUNT] </inputs> <task> Build a gift app with a People view (cards with occasion, budget, spent), a Person detail view (gift ideas with price, bought toggle, notes), and a Budget overview. Bottom nav switches screens; show remaining budget per person. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed realistic people, occasions and gift ideas. - Accessible semantic HTML, real copy, friendly festive visuals. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Ask Claude to subtract bought-gift prices from each person's budget so overspend shows immediately.
Daily Affirmations App
48/50✨ What it does
Claude builds an affirmations app with a daily card, favorites, theme selection, and accent [HEX]. You flip today's card in the chat, then save one to favorites.
You are a senior mobile product designer and front-end engineer. <context> I need a working mobile app prototype, previewable as an artifact: an affirmations app delivering a daily uplifting message. </context> <inputs> - Themes: [E.G. CONFIDENCE, CALM, FOCUS] - Accent color: [HEX] </inputs> <task> Build an affirmations app with a Today view (large affirmation card, swipe or tap for a new one, favorite it), a Favorites view, and a Themes view to pick which categories appear. Bottom nav switches screens. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed a generous library of real affirmations across themes. - Accessible semantic HTML, real copy, serene gradient visuals. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Tell Claude to draw affirmations only from your selected themes so the daily card stays relevant.
Group Poll & Decision App
49/50✨ What it does
Claude builds a group-poll app for [NAME] using [QUESTION + OPTIONS], with voting, live result bars, and poll creation. You cast a vote in the chat, then watch the bars update.
You are a senior mobile product designer and front-end engineer. <context> I want a working mobile app prototype as an artifact: a quick-poll app for groups to decide things like where to eat. </context> <inputs> - Sample poll: [QUESTION + OPTIONS] - Group name: [NAME] </inputs> <task> Build a poll app with a Polls view (active and closed polls), a Poll detail view (vote on options, live results bars, winner highlight), and a Create Poll screen. Bottom nav switches screens; update results instantly on vote. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed realistic polls with options and seeded votes. - Accessible semantic HTML, real copy, animated result bars. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Ask Claude to animate the result bars and crown the leading option so the group decision feels alive.
Local Events Discovery App
50/50✨ What it does
Claude builds a local-events app for [CITY] with filters, event details, and saved RSVPs. You open an event in the chat, then save one as going.
You are a senior mobile product designer and front-end engineer. <context> I need a working mobile app prototype, previewable as an artifact: an app for discovering local events to attend. </context> <inputs> - City: [CITY] - Event categories: [E.G. MUSIC, FOOD, SPORTS] </inputs> <task> Build an events app with a Discover view (event cards with date, venue, category filter chips), an Event detail view (description, time, save/RSVP), and a Saved view of events I'm attending. Bottom nav switches screens. </task> <constraints> - One self-contained, responsive HTML file in a phone frame; inline CSS, Google Fonts only, vanilla JS. - Seed realistic local events across categories and dates. - Accessible semantic HTML, real copy, vibrant card design. </constraints> <format> Return the full HTML in an artifact, then a short list of decisions. </format>
Pro tip: Have Claude make the category chips filter the feed instantly so finding tonight's plans takes one tap.