| name | mobile-design |
| description | Create distinctive, production-grade mobile UI screens as HTML files. Use when the user asks to 'design a mobile app,' 'create mobile screens,' 'mobile UI,' 'app prototype,' 'iOS screen,' 'mobile mockup,' or 'mobile design.' Generates memorable, polished HTML that avoids generic AI aesthetics. |
Mobile UI Design
Generate production-grade iOS mobile screens as standalone HTML files. Each screen is an iPhone 14 Pro viewport (393x852) using Tailwind CSS v4, Google Fonts, and Iconify icons.
References
- HTML Template: See
references/template.html for the base boilerplate
- Style Guide: See
references/style-guide.md for domain-specific palettes, fonts, and anti-patterns
How It Works
- Clarify the app concept -- ask what the app does if not specified
- Pick an aesthetic direction -- commit to a bold tone (minimal, glassmorphic, editorial, retro-futuristic, organic, luxury, etc.)
- Generate 3 cohesive screens using the HTML template from
references/template.html
- Write each screen as a separate file:
screens/home.html, screens/detail.html, screens/action.html
- Verify all screens share the same theme tokens, fonts, and color palette
Usage
Use the Write tool to create HTML files. Do NOT output raw HTML as text.
File naming: screens/{screen-name}.html (kebab-case)
Include data-title attribute on the <html> tag for the screen name.
Screen Set (default: 3 screens)
| Screen | Purpose | Examples |
|---|
| Home/Dashboard | Main landing view | Feed, dashboard, overview |
| Detail/Content | Deeper view | Item detail, article, profile |
| Action/Input | User interaction | Create, edit, settings, search |
Each screen must feel like part of the same app family while showing different UI patterns (lists, cards, forms, charts, etc.).
Design Thinking
Before coding, answer three questions:
- Purpose -- What problem does this solve? Who uses it?
- Tone -- Minimal, soft, bold, glassmorphic, editorial, retro-futuristic, organic, luxury?
- Differentiation -- What is the ONE thing someone will remember about this screen?
Make It Memorable
Achievements Must Feel Tangible
Numbers in circles are forgettable. Make achievements feel like real rewards:
- Streaks: Growing flames, stacking coins, rising plants, filling jars
- Progress: Liquid filling a glass, a path being walked, rings completing
- Milestones: Trophies, badges with texture, celebratory bursts
Navigation Fits the App
| App Type | Nav Style |
|---|
| Content-first (TikTok, Instagram) | Standard bottom tab bar |
| Utility/productivity | Minimal -- floating pill, single FAB, or hidden nav |
| Premium/luxury | Floating blurred dock, asymmetric layout, gesture-based |
Bottom Navigation Spacing
- Do NOT stack large bottom offsets and fake spacer blocks together
- Avoid trailing spacer divs like
<div class="h-24"></div> unless explicitly requested
- If using a floating bottom nav/dock:
- Place nav around
bottom-[12px] to bottom-[18px]
- Reserve clearance in scroll container with
pb-[88px] to pb-[104px]
- Keep nav visually near the bottom edge -- avoid "floating too high"
Icons
<span class="iconify" data-icon="solar:home-bold" data-width="24"></span>
Preferred sets: solar (modern), phosphor (friendly), tabler (crisp)
NEVER use emoji as icons.
Images
https://images.unsplash.com/photo-PHOTOID?w=WIDTH&h=HEIGHT&fit=crop
Present Results to User
After generating screens, present:
- List of screens created with file paths
- The aesthetic direction chosen and why
- Key design decisions (palette, typography, navigation pattern)
- Suggest next steps (additional screens, animations, interactions)
