AI in Action #2: From an Idea to SleepCheck

AI does not replace engineering judgment. It changes where engineers spend time. SleepCheck is the demonstration. The engineering process — product intent, boundaries, review, and shipping discipline — is the product.

This is AI in Action #2, after RetireCheck. Same parent brand, different domain: a calm, local-first wind-down companion that went from a simple idea to a production PWA on sleepcheck.weidong-shi.com.

Wellness disclaimer: SleepCheck is a wind-down companion, not medical advice and not a treatment for sleep disorders. It does not track sleep with a microphone or wearable.

The problem

Most “sleep apps” ask for an account before they offer calm. They push dashboards, streaks behind a login wall, and cloud narration that needs a network at the worst possible moment — when you are already in bed.

I wanted the opposite: open the app, press play, and stay in the night. No signup. No tracking server. Natural soundscapes and soft stories that feel like a product, not a demo of an API key.

Product thinking

Player-first UX became the north star. The first viewport is the player — scenes, mix, timer — not a marketing wall of features. SleepCheck should feel cinematic and quiet: scene art on Sleep and Story surfaces, one big play affordance, and preferences that never leave the device.

• Local-first — preferences and streaks in localStorage; no accounts.
• Natural soundscapes — studio-quality ambience loops plus live noise and binaural layers.
• Stories without cloud TTS — device speechSynthesis with narrator chips and sentence pacing.
• Installable — PWA with offline app shell, cached audio, and lock-screen media controls.

Requirements that shaped the build

Before prompts, I wrote the product constraints as engineering requirements — the same habit as RetireCheck’s domain boundary rule, applied to wellness UX:

1. One primary job per night: help someone wind down.
2. Zero mandatory network after first load of assets.
3. Audio must loop gaplessly; encoder padding cannot create clicks.
4. Share a mix as a URL, not as a screenshot of settings.
5. Brand chrome matches AI in Action / RetireCheck so the series reads as one portfolio, not disconnected demos.
6. Every screen states what this is not: medical advice.

Architecture

SleepCheck is intentionally client-heavy. There is no ASP.NET domain service like RetireCheck — the “domain” is the audio engine, preference schema, and story/speech layer running in the browser.

Stack: Next.js App Router + TypeScript + Tailwind CSS v4 · Web Audio for gapless ambience · device TTS for stories · service worker for installable offline shell · deploy on Vercel at sleepcheck.weidong-shi.com.

Offline-rendered ambience loops live under public/audio/, generated by a Python DSP script so every loop is mathematically seamless. The engine crossfades loop passes and trims MP3 padding so the night never “ticks.”

AI-assisted development

The workflow matches the series: intent-driven vibe coding. I own product intent, information architecture, and review. The agent accelerates scaffolding, refactors, and repetitive UI polish — inside rules that keep the player calm and the data local.

• Human — scene taxonomy, mix URL contract, streak definition (a “night” until 5am), brand alignment with RetireCheck, wellness copy.
• AI — component iteration, Tailwind layout passes, PWA manifest/service-worker wiring, TTS pacing helpers, share-link encoding.
• Pipeline — typecheck, build, and deploy gates on every meaningful change. Cursor proposes; git and CI dispose.

Testing what matters at night

Wellness UX fails quietly: a click in a loop, a preference that resets, a story voice that jumps mid-sentence. Testing focused on the failure modes users feel in the dark:

• Preference round-trip through localStorage schema versioning.
• Mix query-string encode/decode for shareable links.
• Audio boot/resume paths across browsers that suspend AudioContext.
• Manual soak tests: long loops, timer fade-to-silence, PWA offline.

CI/CD and cloud

SleepCheck ships as a static-friendly Next.js app on Vercel with a custom domain under the same hub as RetireCheck. Preview deployments make review concrete: open the build, press play, listen for artifacts. Production is one promotion away — no separate API fleet to babysit, which is a deliberate trade for a local-first product.

Feedback and continuous improvement

Shipping is the start of the loop. Early feedback pushed toward clearer scenes, stronger lock-screen controls, and share links that actually reproduce a mix. The AI in Action roadmap tracks where the series goes next — more production case studies, shared brand patterns, and deeper write-ups for LinkedIn when the draft hardens.

Continuous improvement here is not “add another AI feature.” It is tighter player focus, better audio craft, and clearer engineering narrative so each app teaches the next.

Takeaways

1. Decide the product philosophy first — local-first and player-first beat feature lists.
2. Put constraints in writing before prompts; AI fills space you leave empty.
3. Match architecture to the domain: RetireCheck needed a pure C# calculator; SleepCheck needed a disciplined Web Audio + PWA client.
4. Review diffs and listen to the build — wellness UX is sensory.
5. Your leverage moves up the stack: intent, boundaries, taste, and shipping.

SleepCheck proves the series thesis again: the app is real and live, but the durable asset is the engineering process that produced it.