Locket
A design blueprint Spectr produced from Locket. Scroll to look closer.
Ship a warm, widget-first photo app with Locket-grade intimacy
A complete UI blueprint of the Locket Widget iOS app, documenting the warm cream-gold world, the square full-bleed friend photo, the big circular capture button, and the friends photo-history grid. Captured from a real screen recording and distilled into exact tokens an AI agent can build against directly.
Use it as the baseline for any widget-first, close-friends, or photo-sharing app and skip months of taste calibration. Every value is documented to the exact hex, font weight, corner radius, and motion timing — the #FFF7EC cream world, the #FFB02E gold accent, the 40pt square viewfinder, the 84pt capture button, and the honey-tinted shadows.
Screens documented
- Square full-bleed friend photo viewfinder
- Big circular capture button with gold ring
- Sender chip and caption pill on frosted glass
- Friends photo-history grid
- Home Screen widget mock
- Three-slot minimal tab bar over the warm world
What a Spectr spec includes
Screen-by-screen documentation, complete design system (color, typography, spacing), navigation map, component library, implementation notes, and a Claude Code prompt — everything an AI coding agent needs to build.
Turnaround
Most mobile apps produce a full spec in under 90 seconds from a single screen recording. Upload your own MP4 and watch the blueprint generate live.
Why not a design file?
Design files don't compile. A Spectr spec is optimized for AI coding agents like Claude Code — it produces working code on the first prompt, not layered artboards.
Target stack
Every spec targets Expo SDK 54 and React Native on an iPhone 15 baseline. The Locket blueprint translates cleanly into an Expo Router app structure.