What this prompt does
This prompt generates a complete meditation and wellness app UI spec that treats visual calm as a first-class feature, not an afterthought. The template encodes domain-specific constraints directly — no harsh whites, no gamification, no aggressive notifications — because the biggest failure mode in wellness app design is borrowing patterns from productivity or social apps where urgency and dopamine loops are the goal. Here, every design decision is evaluated against a single criterion: does this lower or raise cognitive load?
The template structures output across seven sections: six distinct screens (home, library, player, breathing exercise, sleep stories, progress) with intentional flow — morning greeting through guided session to sleep wind-down — plus actual framework code for the most technically complex piece. The breathing exercise and player screens are specified to component level: expandable circle animation, progress ring, ambient sound mixer. The code output is a functional animation scaffold, not pseudocode — you get the state shape and animation logic ready to wire to your data layer.
The anti-patterns section is what separates this from a generic UI prompt. Explicitly ruling out streak guilt, tracking-as-surveillance, and jarring sound prevents the AI from defaulting to Duolingo-style engagement mechanics that are actively harmful in a therapeutic context.
When to use it
- You are building a white-label meditation app and need a full UI blueprint to hand to a design team or use directly in Figma.
- You are a solo developer prototyping a wellness product and want a React Native or Flutter player component with the animation already scaffolded.
- You need to pitch a wellness app concept and want a realistic, screen-by-screen walkthrough to include in a deck or PRD.
- You are redesigning an existing app that feels too clinical or gamified and need a reference for what serene-first UX actually looks like at component level.
- You are a freelancer scoping a wellness project and want a structured output to base your estimate and deliverables list on.
Example output
Home Screen — 6:47 AM
"Good morning. A calm start sets the tone."
[Recommended] Body Scan · 10 min · Dr. Sarah Lim
[Quick Start] Breathe | [Quick Start] Focus
Session Library
Categories: Stress Relief · Sleep Prep · Deep Focus · Anxiety · Self-Compassion
Filter: 5 min · 10 min · 20 min · 45 min
Featured teacher: Dr. Sarah Lim (127 sessions)
Player (Minimalist)
Background: midnight-blue → soft purple gradient, 0.4s fade on start
Progress ring: thin 2px stroke, fills clockwise over session duration
Controls: pause/resume only (no scrub bar — prevents anxiety about remaining time)
Ambient mixer: Rain · Forest · Tibetan Bowls (independent sliders, 0–100%)
Breathing Exercise — 4-7-8 Pattern
Circle: expands 4s (inhale), holds 7s, contracts 8s
Haptic pulse at each phase boundary (optional)
Voice prompt: soft, whispered cue
Sleep Stories
Library: 12 narrations, 8–25 min each
Auto-stop timer: 15 / 30 / 45 min
Background sound: Rainfall, Ocean, White Noise (mixable)
Screen dimming: gradual over first 2 minutes of playback
Progress
Minutes meditated this month: 340
Streak calendar — gaps shown in neutral grey, not red
Monthly reflection: "What did you notice this month?"
React Native — BreathingCircle.tsx
const scale = useRef(new Animated.Value(1)).current;
Animated.loop(
Animated.sequence([
Animated.timing(scale, { toValue: 1.6, duration: 4000, useNativeDriver: true }),
Animated.delay(7000),
Animated.timing(scale, { toValue: 1.0, duration: 8000, useNativeDriver: true }),
])
).start();
// Render
<Animated.View style={[styles.circle, { transform: [{ scale }] }]} />
Pro tips
- Lock
[framework]to your actual stack before running. "React Native with Reanimated 3" gets you worklet-based animations that run on the UI thread and won't cause jank during meditation — a meaningful technical difference from generic React Native Animated output. [content_library]specificity drives realism. "10 guided sessions, 5 sleep stories, 3 breathing patterns" gives you proportional UI (fewer categories, cleaner nav) versus "unlimited library" which produces over-engineered filter systems the MVP does not need.[target_audience]changes the home screen copy tone entirely. "Adults with clinical anxiety" shifts output toward clinical trust signals and avoids spiritual language. "Corporate wellness users" shifts toward lunchtime brevity and focus sessions over sleep content.[session_types]controls which screens the AI prioritizes. If you include "sound baths" but not "breathing exercises," the prompt will deprioritize the breathing screen and expand the player. Match this to your actual MVP scope.- Pair the output with a color token pass for accessibility. The prompt specifies gradient directions and mood but not hex values. Feed the generated spec into a color palette prompt and verify WCAG AA contrast: 4.5:1 for normal body text, 3:1 for large text (18pt+) and UI components like progress rings and icon labels. Gradient backgrounds require spot-checking at the lightest and darkest points, not just a single sample.
