| name | mobile-ui-design |
| description | Design mobile-style HTML pages (iOS / Android) for preview in the Mobile UI Preview panel. Use when the user asks to build a mobile screen, app UI, phone mockup page, or "make this look like a native app". Enforces correct status-bar and bottom safe-area handling so content never hides under the notch/Dynamic Island or the home indicator. |
Mobile UI Design
Build single-file HTML pages that look like native mobile screens and preview correctly inside the Mobile UI Preview panel (iPhone / Android / iPad device frames).
The preview panel renders your HTML edge to edge inside the device screen and draws its own immersive status bar (clock, signal, wifi, battery) floating on top of your content. It does not shrink your content into the safe area for you. That means the two things that go wrong most often are:
- Content collides with the status bar at the top (title/text sits under the clock and battery).
- Content collides with the home indicator / gesture bar at the bottom (a fixed CTA button gets cut by the gesture area).
This skill exists to prevent both. Reserve the top and bottom safe areas explicitly; never paint interactive or important content into them.
Non-negotiable rules
-
Viewport meta is required and must be viewport-fit=cover:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
-
Reserve the top safe area (status bar). The panel overlays a status bar of roughly:
- iPhone with Dynamic Island (15 Pro): ~54px
- iPhone with notch (14): ~47px
- Classic iPhone SE: ~20px
- Android: ~28px
- iPad: ~20–24px
The iframe has no real notch, so env(safe-area-inset-top) resolves to 0. Do not rely on it alone. Use a variable with a sensible fallback and let env() upgrade it on real devices:
:root {
--safe-top: max(env(safe-area-inset-top), 54px);
--safe-bottom: max(env(safe-area-inset-bottom), 34px);
}
Default --safe-top to the tallest target you care about (54px covers Dynamic Island). If the design is meant only for SE-class devices, lower it to 20px.
-
Reserve the bottom safe area (home indicator). Modern iPhones/Android reserve ~34px for the gesture bar. Any bottom-fixed bar (tab bar, primary CTA) must sit above it:
.bottom-bar { padding-bottom: var(--safe-bottom); }
-
Fixed headers get the top inset, scroll content clears it. A sticky/fixed app header must add padding-top: var(--safe-top) so its title sits below the clock. A full-bleed hero image may extend under the status bar, but any text or control on it must still start below --safe-top.
-
Full height, no page scroll bleed. Use height: 100dvh (or 100vh fallback) on the app root; scroll happens in an inner content region, not the <body>.
Reusable scaffold
Start every mobile page from this structure and fill in the content region:
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<style>
:root {
--safe-top: max(env(safe-area-inset-top), 54px);
--safe-bottom: max(env(safe-area-inset-bottom), 34px);
--bg: #f2f2f7;
--card: #ffffff;
--text: #1c1c1e;
--muted: #8e8e93;
--tint: #007aff;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
font-family: -apple-system, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
background: (--bg);
: (--text);
-webkit-: antialiased;
}
{ : flex; : column; : dvh; }
{
: (--safe-top);
: ;
: ;
: (--card);
: solid (,,,);
}
{ : ; : ; }
{ : ; : auto; : ; }
{
: (--card);
: solid (,,,);
: ;
: (--safe-bottom);
: flex;
: space-around;
}
标题
Platform style cues
Match the target OS the user names (default to iOS if unspecified):
- iOS: system blue
#007aff tint; generous 16px side padding; grouped rounded cards (border-radius: 12px); large bold navigation titles; -apple-system font; subtle hairline separators; bottom tab bar with icon + tiny label.
- Android (Material): primary color surfaces, elevation via soft shadows, ripple-style buttons, FAB for the primary action, top app bar;
Roboto. Reserve ~28px top inset instead of 54.
Layout checklist before finishing
Working with the preview
- Save the page as a
.html file inside the current scope; the panel lists it automatically and reloads on save.
- Switch device model / orientation in the panel toolbar to verify safe areas across frames.
- After the design is solid, "Generate engineering prompt" in the panel export menu turns the current page into an engineering prompt for productionizing it.
