Skyscanner
A design blueprint Spectr produced from Skyscanner. Scroll to look closer.
Skyscanner design blueprint — build a flight-search and price-comparison app
A complete UI blueprint of the Skyscanner iOS app — the stacked search card, the month price grid, flight result rows, and the Best/Cheapest/Fastest sort triad — captured with every color, type scale, and spacing rule intact.
Use this spec as the foundation for any flight, travel, or price-comparison app where finding a good deal is the whole point. The signature green-amber-red price language and the Everywhere destination are documented down to hex codes and pixel values.
Screens documented
- Flight search card
- Month price calendar
- Everywhere explore
- Flight results list
- Price alerts
- Trips + profile
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 Skyscanner blueprint translates cleanly into an Expo Router app structure.