Gamified posture tracking app for phone-addicted Gen Z

AI Prompts to Build This

Copy these build prompts into Claude, Cursor, or your AI coding tool. Create a free account to unlock the full research behind them.

1. 1. Project Setup

   Build the weekend MVP of "Downcrane": a phone-tilt game that turns how long your phone sits in a "crane" angle during a session into a neck-age score you can compare with friends. It is a game and a wellness estimate, not a diagnosis.
   
   Stack: Next.js (App Router), TypeScript, Tailwind, Supabase (Postgres, Row Level Security, Auth with email magic link), the browser DeviceOrientation API for tilt, read only while a session is open. It installs to the home screen as a PWA. Deploy on Vercel.
   
   Tables (Row Level Security on; a user reads their own scores, and the leaderboard reads only opted-in friends through a function):
   - profiles(user_id, display_name, age, hand, timezone, baseline_pitch, invite_code, private_mode boolean)
   - daily_scores(id, user_id, on_date, minutes_crane, minutes_upright, neck_age, confidence)
   - friendships(id, user_id, friend_id, created_at)
   - stretch_completions(id, user_id, routine, completed_at)
   
   Screens: /login, /calibrate (20 seconds at eye height), /session (the live score), /friends (the weekly leaderboard), /stretch (a 4-minute routine).
   Env vars (names only): NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY, SUPABASE_SERVICE_ROLE_KEY (server only).
   
   Do not build: billing, plans or stretch packs, a native app, all-day background tracking, video, a pocket or bag detector, campus leaderboards.
   Done when: npm run dev starts, you can sign in, and the four tables exist with Row Level Security on.

2. 2. Core Feature

   Build the one feature that proves Downcrane: a score people want to compare, built on a sensor reading you can test.
   1. Calibrate: ask for permission to read motion (iOS needs a tap), then record 20 seconds with the phone held at eye height. Save the median pitch as baseline_pitch.
   2. A session reads the tilt once a second while the page is open. Classify each sample as crane (the phone is tilted down more than 30 degrees from the baseline), upright, or unused (almost no movement and lying flat). Write the classifier as a pure function and unit test it with fixture traces for crane, upright and unused.
   3. Roll the day up: minutes_crane, minutes_upright and a confidence from 0 to 1 based on how many usable samples there were and how steady the baseline was. Compute neck_age from the share of crane minutes and the user's age with one documented formula in a code comment. Clamp it and show a whole number, always labeled "estimate".
   4. If the confidence is under 0.6, show "Noisy day, not ranked".
   5. Friends: an invite link and a 6-character code create a friendship. The leaderboard for the week (Monday 00:00 in the user's timezone) ranks the lowest neck-age among days with confidence of 0.6 or more, through a database function that returns only opted-in friends. Private mode scores locally and hides the user.
   6. The stretch page runs four stretches of 60 seconds with a timer and logs the completion. Write the steps as general stretches, label them "not medical advice" and have a physical therapist review them before launch.
   Rules: neck age is a display number and never a medical age. Say that on the score screen. Never shame screen time.
   Empty state: before calibration, show the calibrate step and what the page will read.
   Done when: the classifier tests pass, a calibrated session produces a daily score labeled estimate, a low-confidence day is not ranked, a friend sees the weekly leaderboard, and private mode hides the user.

3. 3. Landing Page

   Build a one-page landing site for Downcrane, a posture game for people who live on their phones.
   Hero: "Your phone already knows how you hold it. It should tell you your neck age." Sub: "A tilt score for the day. Compare with friends. Stretch when the week goes crane-shaped." One button: Join the waitlist.
   Sections: a mock neck-age card (a 22-year-old with a neck age of 34, labeled an estimate), how it works in four steps (calibrate, score, compare, stretch), and an FAQ on what the score is (a game, not a diagnosis), what the page reads (tilt, only while a session is open) and which phones work.
   Waitlist: store the email in a waitlist table in Supabase. No other service.
   Style: Geist, an off-white background, near-black type, one lime accent, no photos of people touching their necks.
   Done when: the page renders on a phone and a submitted email appears in the waitlist table.

4. 4. Branding Package

   Use a design or image tool for this one. A coding agent cannot draw a logo.
   Brand for Downcrane: a wordmark and an icon of a phone drawn as a crane silhouette, with the neck as the boom.
   Colors: near-black, bone off-white and one sharp lime. Type: Geist, with tabular numbers for scores.
   Deliverables: wordmark, icon, a neck-age share card, three share-card lines under 80 characters each, three stretch-complete messages, and one launch graphic. Voice rules: never diagnose, always pair neck age with "estimate", never shame screen time.
   Done when: each deliverable is saved in one folder and each share-card line is under 80 characters.