What this prompt does
This prompt scaffolds a full mental health app UI across seven distinct output sections — mood check-in through crisis resources — while enforcing therapeutic design guardrails that most generic UI prompts ignore. The template hard-codes an opinionated color system (sage green, lavender, warm beige, sky blue), bans aggressive gamification, and mandates that crisis resources are never buried. That last point matters: a lot of wellness apps hide hotlines behind three taps of navigation, which is a genuine safety failure this prompt explicitly prevents.
The [framework] variable drives real deliverable code for the breathing exercise component — animated circle, timer, and pattern logic — so you get a working artifact, not a wireframe description. The [breathe_pattern] variable lets you specify 4-7-8, box breathing, or any other protocol without rewriting the prompt. The separation between [approach] (CBT, ACT, DBT-informed) and [features] means the design rationale stays coherent — a CBT-informed app should feel different from a somatic-focused one, and this prompt captures that distinction.
When to use it
- Building an MVP for a therapist-adjacent wellness app targeting a specific demographic (teens, veterans, new parents) — fill
[target_audience]precisely. - Generating the breathing exercise component for an existing app that lacks one; set
[features]to just that module. - Creating a design spec to hand off to a developer or pitch to a mental health nonprofit, where you need both rationale and code.
- Prototyping a crisis-resource flow that must pass clinical review — the anti-patterns list gives reviewers clear design constraints to audit against.
- Adapting an existing consumer wellness app to a clinical population where gamification is inappropriate.
Example output
For target_audience: "college students experiencing academic stress", framework: "React Native", breathe_pattern: "box breathing (4-4-4-4)":
Mood Check-In Component
— Four emoji options (calm / okay / stressed / overwhelmed) + optional slider
— Prompt: "What's taking up the most space in your head right now?"
— Time-aware greeting: "Good evening, how did today land?"
Breathing Exercise (React Native)
<BreathingCircle
pattern={{ inhale: 4, hold: 4, exhale: 4, holdEmpty: 4 }}
cycleCount={4}
colors={["#A8C5A0", "#C3B1E1"]} // sage to lavender
animationDuration={300}
/>
// Circle expands on inhale, holds, contracts on exhale
// Ambient option: rain / white noise toggle
Crisis Resources Component
— Persistent floating button: "I need help now" (always visible, never behind navigation)
— Tap opens: local hotline (geo-detected), 988 Suicide & Crisis Lifeline, text-based option
— No login wall. No "are you sure?" confirmation step before showing numbers.
— Background: warm white, not clinical blue — matches app tone rather than alarming with contrast shift
Pro tips
- Set
[target_audience]to a single, specific person ("a 19-year-old first-generation college student") rather than a category — the output specificity jumps significantly. - If you use
framework: "SwiftUI", explicitly add "use SwiftUI animations, not UIKit" or the model will mix paradigms. - The anti-patterns section is load-bearing: if your product owner wants streaks, pass
"gentle streaks with no guilt messaging"in[features]so the design intent survives the feature requirement. - For clinical deployments, append "include WCAG 2.1 AA contrast ratios" — the soft palette this prompt defaults to can fail contrast checks if a model picks the wrong shade.
- Pair this with a copywriting prompt using the same
[approach]value to keep microcopy (button labels, empty states) tonally consistent with the UI.
