Habit Tracker Gamification UI Designer

What this prompt does

This prompt generates a full gamified habit tracking UI spec — covering the today view, check-off animations, streaks, XP progression, badge systems, calendar heat maps, and habit creation flows. It does not just describe screens; it produces the structure and visual logic behind each state, including what happens when a user taps a habit (animation, streak increment, undo affordance) and how the achievement system gates progression.

What makes the template effective is the embedded industry design rules section. These are not aesthetic preferences — they are behavioral constraints drawn from what actually retains users in habit apps: no harsh punishment for missed days, a 3-habit starting cap for cognitive load, and celebratory feedback as the primary motivator. The AI cannot drift into punitive or overly analytical UI patterns because the template explicitly blocks them.

The [framework] variable ties the abstract spec to working code, so the output is not just a mockup description — it ends with a concrete implementation of the most critical screen: today's view with the check-off animation and live streak counter.

When to use it

• Building a Flutter, React Native, or SwiftUI habit app and need a full UI brief before opening Figma
• Prototyping a gamification layer on top of an existing wellness or productivity app
• Presenting a product concept to stakeholders and needing a cohesive, screen-by-screen walkthrough
• Designing the XP and badge economy before wiring up backend logic
• Exploring how different target users (teens vs. fitness athletes vs. remote workers) change the visual tone
• Generating a starting point for a Tailwind or CSS component library for a habit tracker SaaS

Example output

For inputs: habit_examples: drink water, meditate, read, gamification: streaks + XP + badges, target_user: busy professionals, badge_count: 20, framework: Flutter:

Today View — 7:42 AM
[ Drink Water ]  ● ○ ○ ○ ○ ○ ○ ○   🔥 12-day streak
[ Meditate    ]  ✓ (bounced, confetti burst, +15 XP toast)
[ Read        ]  ○

Daily ring: 1/3 complete (33%)
Quote: "Small steps, compounded."

Flutter snippet (AnimatedCheckmark is a custom widget —
build it with AnimationController + ScaleTransition, or
use the animated_checkmark pub.dev package):

GestureDetector(
  onTap: () => _completeHabit(habit, context),
  child: AnimatedCheckmark(
    onComplete: () {
      setState(() => habit.streak++);
      _showXPToast(context, '+15 XP');
    },
  ),
)

Pro tips

• Set badge_count between 15–25. Below 15 the system feels thin; above 30 it overwhelms casual users. The prompt generates progress bars for each badge, so the number directly controls how much the AI elaborates the achievement economy.
• Use target_user to control tone. "Teenagers" shifts the output toward louder animations and emoji-heavy copy; "senior professionals" shifts it toward subtle micro-interactions and muted palettes. This single variable changes more than any other.
• Specify the framework early and be exact. Flutter gets you idiomatic widgets. React Native + Reanimated gets you useSharedValue hooks. Vague inputs like "mobile" produce pseudo-code that needs rewriting.
• Pair with a habit science prompt first. The template handles UI, not behavior design. Run a separate prompt asking for the habit loop (cue–routine–reward) for your specific habits, then paste the result into habit_examples with context. The output spec becomes far more coherent.
• The undo option is load-bearing. The template explicitly includes it in the check-off spec. Do not strip it from generated code — accidental completions that cannot be reversed are a common early friction point that erodes user trust in the data, and the template includes the affordance specifically to prevent that.