How do I see my app design on my phone before building it?

You need a phone with a camera and a computer with a browser. On a phone alone, every step works too: the QR code becomes a button.

A design you can only see on a monitor is half a design

Screens look different in your hand. Text that reads well on a laptop is too small at arm’s length, a tab bar that looked tidy covers the last row, and a button you meant to be obvious sits where no thumb rests. Apple’s Human Interface Guidelines make the same point about touch targets for a reason: people judge an app with their thumb, not with a mouse.

So look at it on a phone first, before anyone writes code, while changing it costs a minute.

Step 1: pick a kind of app on the homepage

Open opointo.com on your computer. Under the headline, ten kinds of app sit in a row: Bookings, Orders & menu, Members & classes, Listings, Field jobs, Inspections, Community, Portfolio, Training and AI approvals. Pick the one closest to yours. Each is a whole app with its tabs, screens and sample content, such as a booking app for a salon or a field service app for a trade.

Check: the two phone pictures beside it change to that app straight away, an iPhone and an Android phone.

Step 2: give it your name and colour

Type your app’s name in the field under the row, then choose a colour. The name goes where the app shows it: under the logo on the opening screen, and as the first tab’s large title.

Check: both phone pictures show your name and your colour.

Step 3: scan the QR code

Under See it on your phone is a QR code. Point your phone’s camera at it and tap the link that appears. Your app opens full screen in the phone’s browser: the opening screen with your name, then the first tab. Tap the tabs, open a booking or a dish, swipe back. All of that takes about 15 seconds, most of it you typing the name and lifting the phone.

Check: your name is on the opening screen. If the camera does not read the code, type the short address printed under it. If the page says “This preview has ended”, a named preview lasts a day: go back to the homepage and scan again.

What the preview is, and what it is not

It is your design: every screen, tab, pushed screen, pop-up and arrow, in your phone’s own light or dark, with your platform’s design. It shows the same screens and arrows your coding agent receives later, so what you tap through is what gets built.

It is not the native app. The browser draws it with web code, and its bar says “Preview: the real app is native.” Liquid Glass, the system fonts and the motion are close, not exact. It holds sample content, nothing you type is saved, and there is no sign-in, data or payments behind it yet. Those belong in the real app.

Step 4: change it properly in the App Builder

On the phone page, tap Design it in the App Builder, or press Open the App Builder on the homepage. Either one opens the same starter with your name and colour already on it. On a computer, edit every word, drag blocks onto screens and draw arrows between them. The canvas draws the app as it looks, with its colours, sample photos and tab icons. The sample photos are for the canvas only and are not exported. Sketch, in the View menu, turns it back into a plain wireframe.

On a phone, the App Builder opens its preview straight away and offers Continue on your computer, a link that brings the same design up on a bigger screen, because dragging blocks needs one.

Check: press Preview in the top bar. It is the same preview your phone showed, now with your changes.

Step 5: show it to the people it is for

Open the App menu (the three dots in the top bar), choose Share a link, then Make a share link. You get a link and a QR code. Send it to two people who have the problem your app solves and watch what they tap first.

Anyone who opens it sees your design full screen on their phone, and can start a free copy of their own from it, which never changes yours. Update the link sends your latest changes to the same link; Stop sharing ends it. A link nobody opens for 30 days ends by itself.

Step 6: build the real app

When the design is right, press Send app to agent. The App Builder checks every screen in the order people reach it, flags anything unfinished, and gives you one line to paste into Claude Code, Cursor, Codex, VS Code or Gemini CLI. Your agent writes a normal Expo project into your repo, with the screens, the navigation and the app shell already wired. Then:

npx expo run:ios
npx expo run:android

Expo Go cannot run the app, because several components use real native controls, so it needs a development build. You need a Mac with Xcode 26 to build the iOS app. Android needs only the Android SDK. On iOS you get Apple’s own tab bar and controls with Liquid Glass; on Android, Material 3 Expressive. Native on both, from one codebase. How long from a design to a real app has the hours and the weeks.

What it costs

While opointo is in beta, the first 100 subscribers pay 40% less and keep that price for as long as they stay subscribed. Verified on iOS 26 and on Android 16 with Material 3 Expressive. iOS 27 support is in progress. The compatibility page shows what was verified, and when.

Open opointo.com on your computer, pick the kind of app closest to yours, and point your phone at the code.