App Designer
App Designer is a focused design mode inside Whiteboard that turns a short brief and a few reference screenshots into polished, consistently styled phone-screen mockups — each placed inside an editable device frame on your board, ready to arrange, annotate, and hand off.
What App Designer is
Instead of sketching wireframes by hand, you describe the app you have in mind and let Theo design a coherent flow of mobile screens. Theo plans the set of screens from your brief, then renders each one as a high-quality portrait mockup and arranges them on the infinite whiteboard canvas.
Every screen lands inside an editable device frame, so the result reads like a clickable storyboard you can keep iterating on — move frames around, drop in arrows and notes, regenerate individual screens, and share the board with your team.
Launching App Designer
App Designer lives inside Whiteboard mode and opens in three quick moves:
Open the launcher
From a whiteboard, open the dedicated App Designer launcher. It is the entry point for turning a brief into a set of designed screens.
Enter App Designer mode
Launching switches the board into App Designer mode, a purpose-built design surface layered on top of your usual whiteboard canvas.
Use the dedicated toolbox
A mode-specific toolbox and panel appear with everything you need: the brief field, reference uploads, platform and screen controls, the style lock, and per-screen actions.
App Designer is an opt-in feature. If you do not see the launcher yet, it has not been enabled for your workspace — the rest of Whiteboard mode works exactly as before.
The design workflow
From blank board to a full set of styled screens in five steps.
Write a brief
Describe the app and the screens you need in plain language — for example, a meditation app with onboarding, a home dashboard, a session player, and a profile screen. Tap Theo enhance to expand a rough one-liner into a fuller brief.
Add references or a website
Upload up to five screenshots of apps or styles you like, or paste a website URL to pull a real brand's colors, fonts, and logo. Flip “Desktop → mobile” to reflow desktop-site screenshots into native mobile screens.
Pick platform, device & screen count
Choose iOS or Android, then pick the exact target device profile — such as iPhone 17 Pro Max or Galaxy S26 Ultra — and set how many screens to generate (up to eight in a single run). Open Vibe to lock a color scheme, fonts, and styling traits.
Generate
Theo plans a coherent flow, then renders each screen as a portrait phone mockup and drops it into an editable device frame on the board — laid out so it never overlaps existing content.
Refine & hand off
Regenerate any single screen you are not happy with, rearrange or annotate the frames, and use the board as a shared canvas for design exploration and handoff.
Key capabilities
Brief + reference workflow
A text brief sets the intent; uploaded reference screenshots set the style. Together they steer every generated screen toward the look you are after.
Realistic device frames
Each generated screen is composited inside a realistic, front-facing device shell for the phone you picked — a near-black glass bezel with a thin polished metal edge, smooth continuous corners, an accurate Dynamic Island or punch-hole camera, and physical side buttons. Frames are normal board elements — move, resize, label, and group them freely.
Per-screen regenerate
Not loving one screen? Regenerate just that frame. The locked style and your reference set are reused so the new render stays consistent with the rest of the flow.
Visual style lock
An expandable style field pins a single visual direction across the whole flow, and is carried into every regenerate so screens never drift apart.
Vibe: color scheme & fonts
Pick a color scheme (presets or per-role hex pickers), heading & body fonts, and styling traits like mood, corner style, and density. Theo applies them to every generated screen.
Theo enhance
Turn a rough one-liner into a fuller brief, or polish your visual-style notes, with a single tap — Theo adds product, audience, and UI detail before you generate.
Import from a website
Paste a site URL and Theo pulls its real brand DNA — palette, fonts, and logo — then designs the screens around it so the mockups look on-brand from the first render.
Convert iOS ↔ Android
Select any generated screen and convert it to the other platform in one click. Theo re-renders it with the target platform's conventions and places it directly below the original.
Platform, device & screen count
Platform
Pick iOS or Android. The platform shapes the native UI conventions and filters the device profiles you can choose from.
Device profile
Target a real profile such as iPhone 17 Pro Max, Galaxy S26 Ultra, Oppo Find X9 Pro, Pixel 10 Pro XL, or OnePlus 14 Pro. The profile controls frame size, safe areas, and cutouts.
Up to 8 screens
Generate between one and eight screens per run. Frames wrap into a tidy grid so larger flows stay readable on the board.
Up to 5 references
Attach up to five reference screenshots. The full set is reused as a shared style anchor for every screen in the flow.
Vibe: color scheme, fonts & styling
Color scheme
Tap a preset (Midnight, Sunset, Forest, Mono, Ocean, Grape) or fine-tune each role — primary, accent, background, surface, and text — with a color picker or hex value. Your palette is applied to every generated screen.
Fonts
Choose a heading and body typeface from a curated list of well-known families. Because each screen is a rendered image, the typographic character is honored strongly while exact glyph-level font matching is best-effort.
Styling traits
Set an aesthetic mood (Minimal, Bold, Elegant, and more), corner style (sharp, rounded, pill), and layout density (compact, comfortable, spacious). Your Vibe is reused on every per-screen regenerate, and takes precedence over an imported website's brand when both are set.
Import from a website or desktop screenshots
Paste a website URL
Drop a site URL into the “Import from website” field and Theo extracts the brand's color palette, typography, and logo, then designs every screen around that real brand identity.
Turn desktop screenshots into a mobile app
Upload screenshots of an existing desktop site and flip the “Desktop → mobile” toggle. Theo reflows those web layouts into native mobile patterns for the platform you chose, instead of just shrinking the page.
Convert between iOS and Android
Designed your flow for iOS and now need Android too? Select any generated screen and use the convert action in the toolbox. Theo re-renders that screen with the target platform's conventions — iOS Human Interface Guidelines or Android Material 3 — while preserving the content and layout intent.
The converted screen is placed directly below the original on the board, so you can build a matched iOS + Android set side by side and keep iterating on either. The target device profile is carried into the conversion so the new frame uses the correct safe area, camera cutout, and physical proportions.
Device frames
Every generated screen is composited inside a photorealistic device frame for the exact profile you selected, with the screen title rendered just above it. Theo renders a true-to-life phone shell — metallic rails, glass edges, large rounded corners, physical buttons, and the right camera cutout (a Dynamic Island on iPhone, a punch-hole on the Android profiles) — and drops your screenshot into the phone's real screen opening, untouched, so the UI fits the display exactly and each mockup reads like an actual photographed device.
Frames render fast and stay reusable: each device's shell is generated once and shared across every screen of that device. The whole board stays a living storyboard — lay out the flow, connect screens with arrows, drop in feedback notes, reopen the App Designer panel to switch the active device profile, and keep iterating without leaving the board.
Regenerating & the visual style lock
Regenerate a single screen
Each frame can be regenerated on its own. The screen keeps its title and position, and only that one mockup is re-rendered — so you can dial in a specific screen without touching the rest of the flow.
Visual style lock
Set an optional style descriptor to pin one visual direction across the whole flow. The locked style and your reference screenshots are sent with every regenerate, so a re-rendered screen always matches the screens around it.
What to expect from the output
App Designer screens are AI-generated mockup images — high-fidelity concept renders, not coded components or layered design files. Set expectations accordingly:
- Concept fidelity is the goal. Expect a convincing look and feel for the overall design direction, layout, and styling.
- In-screen text can be imperfect. Because each screen is a rendered image, small labels and body copy may be approximate or placeholder-like. Treat the copy as indicative, not final.
- Built for exploration & handoff. The mockups live inside editable frames so you can arrange, annotate, and share them as a starting point — not as pixel-perfect production assets.
Theo-branded engines: every screen is produced by a Theo image engine. The only engine name you will ever see on the board is the Theo-branded label (always prefixed with Theo) — the underlying providers and models stay behind the scenes.
Tip: the more specific your brief and the more on-point your reference screenshots, the more consistent the generated flow. Name each screen and describe its purpose, then lock a style before generating for the tightest results.