Skip to main content

Claude/ChatGPT Prompt to Design a Daily Habit Tracker UI

Design a daily habit tracker UI with one-tap check-offs, per-habit streaks, a completion ring, and a weekly heat-map, gently motivating instead of nagging.

Fill in the placeholders

Edit the values, then copy your finished prompt.

Your Prompt
prompt.txt

                                

What this prompt does

This prompt casts the model as a senior mobile product designer and asks it to specify a daily habit tracker tightly enough to build — naming components, states, and the feedback on each interaction — while keeping the tone gentle and motivating, never nagging. The behavioral insight is that habit apps fail when they shame users, so the design protects motivation. Three variables steer it: [stack] sets the framework (React Native by default), [platform_theme] covers platforms and light/dark themes, and [motivation] describes how the app keeps users going, like streaks plus gentle non-punitive nudges.

The deliverables center on a today header with date and an overall completion ring that fills as habits are checked, a habit list with one-tap check/uncheck and a per-habit streak counter, an add-habit FAB with category filters, and a weekly heat-map showing consistency at a glance. The feedback section is the heart of it: a gentle haptic on completion, a non-punitive pattern for missed days, and a streak-saved moment. It also covers the empty, all-done celebration, and partial-day states, so the daily view stays encouraging. Because the prompt asks for named components, states, and the feedback on each interaction rather than a loose mood, every tap has a defined response, and the deliberate non-punitive handling of missed days is what keeps a single off day from triggering the shame spiral that gets habit apps deleted in the first week.

When to use it

  • Designing a habit tracker that motivates without shaming users
  • Specifying a completion ring and per-habit streak counters
  • Building a weekly consistency heat-map with day detail
  • Defining a non-punitive missed-day pattern via [motivation]
  • Supporting light and dark themes through [platform_theme]
  • Generating a screen spec with interaction feedback for your [stack]

Example output

You get a screen spec with components, interaction feedback, and each key state: the today header with completion ring, the one-tap habit list with streak counters, the add-habit FAB and category filter, the weekly heat-map with tap-to-detail, the feedback model (gentle haptic, non-punitive missed-day pattern, streak-saved moment), and the empty, all-done celebration, and partial-day states.

Pro tips

  • Design the missed-day pattern in the feedback step deliberately; protecting motivation matters more than a perfect streak.
  • Set [motivation] to a gentle model so the app encourages rather than nags — miss one day and a punitive app gets deleted.
  • Keep check-offs one tap; friction here is what makes users abandon the daily habit.
  • Use [platform_theme] to confirm light and dark support so the ring and heat-map stay legible in both.
  • Make the all-done celebration a real designed state, not just a toast, so completion feels rewarding.
  • If the heat-map feels noisy, ask the model to simplify it to a single consistency color scale.

Frequently Asked Questions

How does the prompt avoid making users feel shamed?
It specifies a non-punitive pattern for missed days, gentle haptic feedback on completion, and a streak-saved moment. The prompt explicitly keeps the tone encouraging because habit apps that shame users tend to get deleted after a single missed day.
What does the completion ring do?
The today header includes an overall completion ring that fills as habits are checked off, giving a single glanceable sense of daily progress. It works alongside per-habit streak counters so users see both the day's status and their longer-term consistency.
Can I control the motivation model?
Yes, the `[motivation]` variable describes how the app keeps users engaged, such as streaks plus gentle non-punitive nudges. Setting this thoughtfully shapes the feedback design so the app encourages rather than guilt-trips users into returning.
Does it support dark mode?
Yes, the `[platform_theme]` variable can specify light and dark mode across platforms. Confirming both themes ensures the completion ring and weekly heat-map stay legible regardless of the user's appearance setting.
Does it return code or a spec?
It returns a screen spec with components, interaction feedback, and each key state, rather than finished code. You can follow up asking for components in your `[stack]`, such as React Native, once the states and feedback model are settled.
Engr Mejba Ahmed

Need this built for real?

Engr Mejba Ahmed

AI Developer · Software Engineer

I'm Mejba — I design and ship production AI systems, automations, and full-stack apps. If you want this turned into a working solution for your team, let's talk.

More in Lifestyle App UI Prompts

Engr Mejba Ahmed

Engr Mejba Ahmed

Claude Code Expert · Online

👋

Hey there!

Quick Actions

WhatsApp Instant reply

Chat on WhatsApp

+880 1723 741224 · Instant reply

Popular Questions

Engr Mejba Ahmed is connected
Engr Mejba Ahmed is typing...
Engr Mejba Ahmed avatar

✉ Want me to follow up? Drop your email

Engr Mejba Ahmed avatar

📞 Connect Directly

Choose how you'd like to reach me

WhatsApp

+880 1723 741224

Email

[email protected]

✓ Details sent! I'll get back to you shortly.

Powered by OpenAI

335+

Blog Posts

25

AI Courses

63

Projects

Services & Expertise

Pricing & Process

Learning & Resources

Connect & Support