Skype
A design blueprint Spectr produced from Skype. Scroll to look closer.
Skype cloud-blue call-first chat with video grid, call cards, presence dots
A pixel-faithful blueprint of the Skype iOS app: outgoing deep Skype Blue (#0078D4) bubbles with white text, incoming gray bubbles (#EBEBEF light, #2A2A30 dark) at a 14pt radius with a 4pt tail, and the bright Skype Blue (#00AFF0) driving buttons, call FABs, and tab selection. Includes the call-first header with phone and video icons, inline call cards interleaved in the chat, the gradient video-call grid with per-tile mic and a circular control bar, and presence dots on every avatar.
Build a complete call-first messenger documented to the exact Microsoft cloud-blue hex palette, Segoe-UI-substitute type ramp, and 5pt/8pt bubble grouping rhythm. Ship SwiftUI, Expo, and Jetpack Compose with the video grid, inline call cards, accept-green and end-red controls, and a neutral near-black (#16161A) dark canvas all specced to production fidelity.
Screens documented
- Conversation thread with blue and gray bubbles
- Inline call card in chat history
- Video call grid with self-view and per-tile mic
- Circular in-call control bar
- Call-first chat header with phone and video
- Presence dots green away offline
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 Skype blueprint translates cleanly into an Expo Router app structure.