McDonald's
A design blueprint Spectr produced from McDonald's. Scroll to look closer.
Ship a bold, deal-driven QSR loyalty app with McDonald’s-grade polish
A complete UI blueprint of the McDonald’s iOS app, documenting the two-color Golden Arches Yellow and McDonald’s Red brand system, the MyMcDonald’s Rewards points hero, the deals grid, and the mobile-order mode selector. Captured from the real product and distilled into exact tokens an AI agent can build against directly.
Use it as the baseline for any quick-service restaurant, loyalty, or mobile-order app and skip months of taste calibration. Every value is documented to the exact hex, font weight, corner radius, and motion timing — the #FFC72C yellow with its mandatory #1A1A1A text, the #DA291C deal flags, the rewards progress bar, and the elevated yellow Order FAB.
Screens documented
- Personal greeting header with the Golden Arches and a bell
- MyMcDonald’s Rewards card with points hero and progress bar
- Two-up deals grid with red DEAL and FREE flags
- Order-mode selector: Pickup, Curbside, Drive Thru, Delivery
- Dashed-border deal coupon with an Add to order pill
- Five-slot bottom bar with an elevated yellow Order FAB
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 McDonald's blueprint translates cleanly into an Expo Router app structure.