Skip to main content
Prompts Mirror AI Personal Coaching Web App

developer coding user risk: low

Mirror AI Personal Coaching Web App

Build a single-page React web app called 'Mirror', an AI-powered personal coaching tool with onboarding for domain and validation style, daily check-ins, AI responses via Claude LL…

PROMPT 

Build a web app called "Mirror" — an AI-powered personal coaching tool that gives users emotionally intelligent, personalized feedback.

Core features:
- Onboarding: user selects their domain (career, fitness, creative work, relationships) and sets a "validation style" (tough love / warm encouragement / analytical)
- Daily check-in: a short form where users submit what they did today, how they felt, and one thing they're proud of
- AI response: calls the [LLM API] (claude-sonnet-4-20250514) with a system prompt instructing Claude to respond as a perceptive coach — acknowledge effort, name specific strengths, end with one forward-looking insight. Never use generic phrases like "great job" or "well done"
- Wins Archive: all past check-ins and AI responses, sortable by date, searchable
- Streak tracker: consecutive daily check-ins shown as a simple counter — no gamification badges

UI: clean, warm, serif typography, cream (#F5F0E8) background. Should feel like a private journal, not an app. No notifications except a gentle daily reminder at a user-set time.

Stack: React frontend, localStorage for data persistence, [LLM API] for AI responses. Single-page app, no backend required.

INPUTS

LLM_API REQUIRED

API for LLM calls (e.g., claude-sonnet-4-20250514)

ROLES & RULES

  1. Never use generic phrases like "great job" or "well done"
  2. no gamification badges
  3. No notifications except a gentle daily reminder at a user-set time
  4. no backend required

EXPECTED OUTPUT

Format
code
Constraints
  • React frontend
  • localStorage for data persistence
  • call [LLM API]
  • implement all core features
  • match UI description (clean, warm, serif, cream background)

SUCCESS CRITERIA

  • Implement all core features including onboarding, daily check-in, AI response, Wins Archive, and streak tracker
  • Use React frontend with localStorage for data persistence
  • Integrate [LLM API] (claude-sonnet-4-20250514) for AI responses
  • Apply UI style: clean, warm, serif typography, cream (#F5F0E8) background, feel like a private journal

FAILURE MODES

  • Adding gamification badges or excessive notifications
  • Using generic phrases in AI responses
  • Implementing a backend or multi-page app
  • Deviating from journal-like UI with cold colors or sans-serif fonts
  • Failing to use specified LLM model or API

CAVEATS

Dependencies
  • [LLM API] (claude-sonnet-4-20250514) for AI responses
Missing context
  • Exact system prompt for Claude.
  • LLM API authentication and key handling.
  • Search and sort functionality details for Wins Archive.
  • Responsive design and mobile handling.
Ambiguities
  • '[LLM API]' is a placeholder without integration details.
  • Daily check-in form fields are described but not precisely specified (e.g., input types).
  • User-set reminder time implementation not detailed (e.g., how to schedule without backend).

QUALITY

OVERALL
0.75
CLARITY
0.90
SPECIFICITY
0.95
REUSABILITY
0.30
COMPLETENESS
0.80

IMPROVEMENT SUGGESTIONS

  • Define [LLM API] as a specific service (e.g., Anthropic API) with integration code snippet.
  • Provide the full system prompt for the LLM.
  • Add template placeholders for app name, domains, and validation styles to improve reusability.
  • Specify exact form structure and validation for daily check-in.

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.

MORE FOR DEVELOPER