Canva
A design blueprint Spectr produced from Canva. Scroll to look closer.
Clone Canva: gradient design home, template galleries and a one-tap create flow
A complete UI blueprint of the Canva iOS design app, captured from a real screen recording and documented down to exact hex, type and spacing. It covers the personalized home, design-type tiles, template galleries, the gradient create FAB and the editor chrome so an AI agent can rebuild the app faithfully.
Use it as the baseline for a friendly template-driven design tool: the cyan-to-purple brand gradient (#00C4CC to #7D2AE8), the warm-neutral dark canvas (#18191B), gold Pro accents (#FFC24B) and Plus Jakarta Sans display weights are all documented to exact values. Every signature surface — the centered lifted create FAB, the design-type tile rail and the slide-up bottom sheets — is specified for SwiftUI, Expo and Jetpack Compose.
Screens documented
- Personalized home feed
- Design-type tile rail
- Template galleries grid
- Create-a-design bottom sheet
- Design editor with tool rail
- Pro upsell sheet
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 Canva blueprint translates cleanly into an Expo Router app structure.