Frame, the mobile app Grok Bot
Mobile app Grok Bot template. Builds app screens at 375 by 812 with real thumb reach, native patterns and every state. It draws the screen itself, never a phone frame around it.
About this design Grok Bot template
Frame is the mobile app Grok Bot that draws the screen at 375 by 812 and nothing around it. No phone frame, no notch, no status bar, no home indicator. The output is the app, not a picture of a phone, which is the single most common thing wrong with generated mobile design.
It designs for the thumb: the primary action in the bottom third, targets at least 44 by 44 with real space between them, and safe areas kept clear. Body text never below 15, because there is no such thing as a phone user with better eyesight than a desktop user. It uses the platform's patterns rather than inventing, refuses a hamburger holding the main navigation, and builds the states a phone actually hits, including offline as distinct from error, since an app with only a generic error is an app people delete.
Use Frame for anything that ships in an app. Gate is the Grok Bot for the paywall inside it, Key for sign in, Ramp for the first run, and Lens for reviewing the screens before they go to build. Because Frame draws the screen and never a phone around it, what you get is usable as a real design rather than as a presentation image somebody then has to redraw.
Mentioned above: Lens UI Review Bot, Ramp Onboarding Bot, Gate Paywall Bot, Key Auth Bot. Or see every Design Grok Bot.
What to ask it
- Build the home screen for a habit tracking app.
- Design the settings screen with every state.
- Is my primary action reachable with a thumb on a large phone?
- Build the offline state, distinct from the error state.
- Lay out this three screen flow side by side at 375 by 812.
How to install this Grok Bot template
- Copy the template. You get the name, the description and the instructions.
- In Grok Bot, choose New, then Create new agent.
- Open Bot actions, then Edit Profile, and paste the name and the description.
- Paste the instructions.
- Switch on Web browsing. It needs no routines.
Or skip all five: add Frame Mobile Bot to Grok Bot in one click, using Grok Bot's own share as template link.
Questions about this Grok Bot
Will it draw a phone mockup around the screen?
No, and that is its first rule. You get the screen itself at 375 by 812, ready to use as a real design rather than a presentation image.
Does it follow iOS and Android patterns?
It uses the platform's own patterns rather than inventing: a sheet for a choice, a full screen modal for a task, a tab bar with three to five labelled items.
What states does it build?
Empty that teaches, loading as skeletons, error, offline as its own state, success that moves you forward, and the long content case where a name does not fit.
Can this mobile Grok Bot match my existing app?
Yes. Point it at the project and it works in your components and tokens rather than importing its own, so what it returns can be merged instead of translated.
Design templates for your tool
Frame Mobile Bot works alongside the vibe coding tool you already build in, and the same licence covers the design templates for it: Lovable templates, Bolt templates, Replit templates, Claude Code templates, ChatGPT Codex templates, Cursor templates, Windsurf templates, Framer templates, v0 templates and Cline templates.
Included in the BrowserMoon licence, alongside every design template and all 51 Grok Bot templates. One licence, unlimited projects, including work you sell.
More Design Grok Bot templates
View allMon, the design Grok Bot
Design and build any screen
Bloom, the design system Grok Bot
Builds or audits your design tokens
Lens, the UI review Grok Bot
Reviews a screen like a senior designer
North, the brand Grok Bot
Name, voice, wordmark and palette
Browse Grok Bot templates