Claude Prompt Library

50 Claude Prompts That Build Mobile Apps

50 copy-paste prompts

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 15 prompts are free instantly — no signup needed. Hand-curated and tested by the AI Academy team.

By Louis Corneloup · Founder, Techpresso

Last updated May 15, 2026·Hand-curated & tested by the AI Academy team

Productivity & Habit Apps

10 prompts

Habit Streak Tracker

1/50

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>

Generates a tappable habit tracker with Today, Calendar heatmap and Stats screens as a previewable artifact.

💡

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

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>

Generates a focus-driven to-do app with Today, Focus timer and Inbox screens as a previewable artifact.

💡

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

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>

Generates a Pomodoro focus timer with animated ring, session log and settings as a previewable artifact.

💡

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

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>

Generates a quick-capture notes app with search, tags and an editor as a previewable artifact.

💡

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

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>

Generates a book tracker with shelves, progress and a yearly reading goal as a previewable artifact.

💡

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

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>

Generates a journaling app with mood picker, entry timeline and mood insights as a previewable artifact.

💡

Pro tip: Have Claude rotate the daily writing prompt and tag entries by mood so patterns surface in Insights.

Weekly Planner App

7/50

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>

Generates a weekly planner with week, day and add-task screens as a previewable artifact.

💡

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

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>

Generates a goal tracker with milestone breakdowns and progress rings as a previewable artifact.

💡

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

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>

Generates a hydration and reminders app with an animated water goal and history as a previewable artifact.

💡

Pro tip: Ask Claude to make the +1 button animate the water level so logging feels instantly rewarding.

Time-Blocking Schedule App

10/50

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>

Generates a time-blocking app with an hour timeline, block creation and category summary as a previewable artifact.

💡

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.

Start 7-Day Free Trial

Finance & Budgeting Apps

10 prompts

Budget & Expense App

11/50

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>

Generates a budgeting app with category bars, a transaction log and budget limits as a previewable artifact.

💡

Pro tip: Ask Claude to recompute every bar and the money-left figure instantly when a transaction is added.

Expense Splitter App

12/50

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>

Generates a bill-splitting app with balances, expense entry and settle-up math as a previewable artifact.

💡

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

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>

Generates a savings tracker with goal jars, contributions and finish-date projections as a previewable artifact.

💡

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

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>

Generates a subscription manager with spend totals, renewals and a service list as a previewable artifact.

💡

Pro tip: Have Claude normalize annual plans to a monthly cost so every subscription compares fairly.

Net Worth Dashboard App

15/50

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>

Generates a net-worth dashboard with accounts, asset/debt split and a trend chart as a previewable artifact.

💡

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

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>

Generates a bill reminder app with an upcoming list, calendar and paid history as a previewable artifact.

💡

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

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>

Generates a tip and split calculator with a keypad, presets and recents as a previewable artifact.

💡

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

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>

Generates a spending-insights app with a category donut, drill-downs and month trends as a previewable artifact.

💡

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

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>

Generates a debt-payoff planner with snowball/avalanche strategies and a debt-free date as a previewable artifact.

💡

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

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>

Generates a stock and crypto watchlist with sparklines, detail charts and a portfolio as a previewable artifact.

💡

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 prompts

Workout Logger

21/50

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>

Generates a workout logger with set entry, session history and strength progress charts as a previewable artifact.

💡

Pro tip: Ask Claude to auto-suggest last session's weight for each exercise so logging is one tap.

Calorie & Meal Tracker

22/50

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>

Generates a calorie tracker with a macro ring, meal sections and a diary as a previewable artifact.

💡

Pro tip: Have Claude update the calorie ring and macro bars instantly as foods are added or removed.

Sleep Tracker App

23/50

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>

Generates a sleep tracker with last-night stats, a two-week chart and a bedtime schedule as a previewable artifact.

💡

Pro tip: Ask Claude to compute a rolling average and flag nights that fell short of your sleep target.

Meditation & Breathing App

24/50

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>

Generates a meditation app with themed sessions, animated breathing guide and streaks as a previewable artifact.

💡

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

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>

Generates an activity tracker with a steps ring, weekly bars and goals as a previewable artifact.

💡

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

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>

Generates a workout routine builder with weekly splits and an exercise library as a previewable artifact.

💡

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

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>

Generates a mental wellness app with check-ins, coping tools and mood trends as a previewable artifact.

💡

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

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>

Generates a yoga app with themed flows, a timed pose player and history as a previewable artifact.

💡

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

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>

Generates a medication and symptom tracker with reminders, schedule and history as a previewable artifact.

💡

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

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>

Generates a fasting timer with stage progress, water logging and fast history as a previewable artifact.

💡

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.

Try AI Academy Free

Business & Utility Apps

10 prompts

Mini CRM App

31/50

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>

Generates a mini CRM with a pipeline, contact details and follow-up reminders as a previewable artifact.

💡

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

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>

Generates an invoicing app with an invoice builder, line-item math and client list as a previewable artifact.

💡

Pro tip: Have Claude auto-number invoices and recompute the total live as line items, quantities or tax change.

Inventory Tracker App

33/50

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>

Generates an inventory tracker with stock adjustment, item details and low-stock alerts as a previewable artifact.

💡

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

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>

Generates an appointment booking app with service selection, time slots and confirmations as a previewable artifact.

💡

Pro tip: Tell Claude to compute slot availability from service duration so long services block enough time.

Team Task Board App

35/50

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>

Generates a kanban team board with swipeable columns, card moves and per-member views as a previewable artifact.

💡

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

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>

Generates a QR toolkit app with a live generator, history and saved codes as a previewable artifact.

💡

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

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>

Generates a field-service app with job lists, step checklists and completion tracking as a previewable artifact.

💡

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

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>

Generates an event check-in app with searchable guests, toggles and arrival stats as a previewable artifact.

💡

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

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>

Generates an expense-report app with report totals, line items and submission flow as a previewable artifact.

💡

Pro tip: Ask Claude to lock a report from editing once submitted and show a clear status badge.

Restaurant Menu & Ordering App

40/50

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>

Generates a restaurant ordering app with a menu, cart and order status as a previewable artifact.

💡

Pro tip: Have Claude keep a live cart badge and total so diners always see what they'll pay before ordering.

Frequently Asked Questions

Yes. Each prompt asks Claude to build a self-contained HTML file styled as a mobile app inside a phone frame, with multiple screens, a bottom nav and working vanilla-JS interactivity, that you preview instantly as an artifact. It's a real, tappable prototype, not a static mockup or a coding tutorial.

No. You copy a prompt, fill in the bracketed placeholders like your app's data and colors, and paste it into Claude. Claude writes all the HTML, CSS and JavaScript for you and renders the app in an artifact you can click through. No engineer, no setup, no code knowledge needed.

These are browser-based prototypes for validating ideas, demos, pitches and feedback, not native iOS or Android binaries. They run anywhere a web page runs. To ship to an app store you'd hand the working prototype to a developer or rebuild it in a native framework, but the prototype proves the concept first.

Edit the bracketed placeholders to match your concept, then ask Claude follow-ups like add a dark mode, change the bottom nav, add a screen, or use my brand colors. Because the whole app is one file in an artifact, Claude can revise any screen or feature on request without breaking the rest.

The phone frame makes the prototype feel like a real mobile app so you can judge layout, tap targets and flow at true scale. Building it as a single self-contained artifact means it previews instantly, needs no installation or dependencies, and is easy to share, screenshot or iterate on in the same chat.

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.

Start 7-Day Free Trial Explore AI for Entrepreneurs

7-day free trial. Cancel anytime.

Browse All Claude Prompt Collections Browse All Prompt Collections

50 Claude Prompts That Build Mobile Apps

Productivity & Habit Apps

Habit Streak Tracker

Daily To-Do & Focus App

Pomodoro Timer App

Note-Taking & Quick Capture App

Reading List & Book Tracker

Pocket Journal & Mood Log

Weekly Planner App

Goal & Milestone Tracker

Water & Daily Reminders App

Time-Blocking Schedule App

Finance & Budgeting Apps

Budget & Expense App

Expense Splitter App

Savings Goal Tracker

Subscription Manager App

Net Worth Dashboard App

Bill Reminder & Tracker

Tip & Bill Calculator App

Spending Insights App

Debt Payoff Planner

Crypto & Stock Watchlist App

Health, Fitness & Wellness Apps

Workout Logger

Calorie & Meal Tracker

Sleep Tracker App

Meditation & Breathing App

Step & Activity Tracker

Workout Routine Builder

Mood & Mental Wellness App

Yoga & Stretch Flow App

Symptom & Medication Tracker

Fasting & Hydration Timer

Business & Utility Apps

Mini CRM App

Invoice Generator App

Inventory Tracker App

Appointment Booking App

Team Task Board App

QR & Barcode Toolkit App

Field Service Checklist App

Event Check-In App

Expense Report App

Restaurant Menu & Ordering App

Social, Lifestyle & Fun Apps

Recipe Saver App

Travel Itinerary App

Movie & Show Watchlist

Event Countdown App

Trivia Quiz Game App

Plant Care App

Gift & Wishlist Organizer

Daily Affirmations App

Group Poll & Decision App

Local Events Discovery App

Frequently Asked Questions

Prompts are the starting line. Tutorials are the finish.