Goodreads
A design blueprint Spectr produced from Goodreads. Scroll to look closer.
Clone Goodreads iOS down to the brown chrome, amber stars, and shelves
A production-grade design spec reverse-engineered from the Goodreads iOS app — the book detail page, shelves, five-star rating, and the community reviews feed. Every brand token, the serif reading rhythm, the shelf model, and each elevation level is captured so an AI agent can rebuild it screen for screen.
Use it as the baseline for any reading, catalog, or social-library app: cover-first grids on warm tan paper, a green Want-to-Read CTA, an amber five-star rating, and a serif review feed. Goodreads brown #382110, tan paper #F4F1EA, rating amber #E9A100, the warm ink-brown #161310 dark canvas, and the 1.6 review line-height are all specified to exact values.
Screens documented
- Book detail with cover, rating and shelf CTA
- Rate this book interactive star strip
- Community reviews feed with avatars
- My Books shelves cover grid
- Shelf picker bottom sheet
- Reading Challenge progress widget
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 Goodreads blueprint translates cleanly into an Expo Router app structure.