Check the layout at 390 pixels before you build it.
Stated plainly because the buttons imply more than they do: these are viewport widths, not platforms.
The canvas previews a generated page at three widths: desktop at full width, tablet at 768 pixels and mobile at 390 pixels, which is a common phone viewport. These are preview widths for a responsive web page. They are not build targets, and Design mode does not produce iOS, Android, React Native or Flutter output. What you are checking is whether the layout you just generated survives a narrow viewport, which is where generated layouts most often fall apart.
What the three buttons actually do
They resize the preview frame. The page inside is one HTML document with its own media queries, so switching to mobile shows you how that document responds at 390 pixels. Nothing is recompiled, nothing is rebuilt for a platform, and no second artefact is produced.
Why narrow is where generated layouts break
A generated page usually looks fine at 1440 pixels because that is the shape most layouts assume. The failures show up narrow: a grid that will not collapse, a heading that overflows, a nav that has nowhere to go. Checking it at the point of generation is much cheaper than discovering it after the page is implemented.
It is not a device emulator
There is no touch simulation, no device pixel ratio emulation, no platform chrome and no operating system behaviour. It is a width. Anything that depends on real device behaviour belongs in a browser's own device tooling or on an actual phone.
What to reach for instead for native
If you need genuine native mobile screens, this is not the tool and the honest answer is Figma or Uizard for design and a native toolchain for implementation. Design mode covers responsive web, which is a smaller claim than the button labels suggest and the one that is actually true.
The three preview widths
| Button | Width | What it means |
|---|---|---|
| Desktop | 100% | The frame's full width |
| Tablet | 768px | A common tablet breakpoint |
| Mobile | 390px | A common phone viewport |
Questions
Does the mobile button build a mobile app?
No. It sets the preview frame to 390 pixels wide. The output is one responsive HTML page at every width.
Can Design mode produce native app screens?
No. Nothing in it targets iOS, Android, React Native, Flutter or SwiftUI. It generates responsive web pages.
Is this a device emulator?
No. There is no touch simulation, pixel ratio emulation or platform chrome. Use a browser's device tooling or a real phone for that.
Related
- AI Landing Page DesignA real page you can open and click, not a picture of one.
- Wireframe to High FidelityA finished-looking mockup gets reviewed as a design. A rough one gets reviewed as a structure.
- Click to Edit an AI DesignThe difference between iterating and rerolling.
- Design With Your Claude Code or Codex LoginNo second subscription for the design tool, because it is running the one you already pay for.
Last updated