lulu-mobile-app

name	lulu-mobile-app
version	1.0.0
description	Design mobile app prototypes with native-feeling UI patterns
triggers	["mobile app","app design","mobile prototype","app ui","ios design","android design"]
category	design
quality_bar	Prototype looks native, has realistic content, and demonstrates the core user flow
tools	["write_file"]
permissions	["write"]

Mobile App Prototype

Design mobile app prototypes that feel native with realistic screen flows, tab bars, and gesture-friendly layouts.

Steps

1. Ask discovery questions — What does the app do? What is the primary user flow? iOS or Android or both? Dark or light mode?
2. Sketch the screen map — Identify 3-5 key screens (e.g., Home, Search, Detail, Profile, Settings).
3. Choose a device frame — Use a phone-shaped container (375x812 for iPhone-like proportions).
4. Draft quickly — Build a single HTML page that cycles through or shows all screens in a scrollable/tappable format.
5. Add realistic UI — Use real app-style navigation (tab bar, nav bar, status bar). Write real-looking content.
6. Self-critique — Run the Visual Quality Checklist before finalizing.

Output Format

A single self-contained index.html file:

• Phone-frame container centered on desktop, full-width on mobile
• Status bar + navigation bar at top
• Content area with scrollable screen content
• Tab bar at bottom with 3-5 tabs (one active)
• Multiple screens shown as hidden/swipeable sections
• Tap targets for tab switching (pure CSS using :target or radio buttons)

Artifact Constraints

• File size: Max 40KB
• Device frame: 375x812px on desktop, full viewport on mobile
• Screens: Minimum 3, maximum 5
• Navigation: Pure CSS tab switching (no JS)
• Content: Realistic placeholder data (real names, real-looking UI elements)
• Icons: Use Unicode symbols or embedded SVG
• No frameworks: No React Native, no Ionic, no Tailwind. Raw HTML/CSS.
• Gestures: No swipe simulation. Tab-based navigation only.

Visual Quality Checklist

• Status bar shows time, battery, signal (icon-only is fine)
• Navigation bar has a title and optional back button
• Tab bar icons are clear and the active tab is highlighted
• Content fills the screen — no empty white panels
• Lists have proper spacing, avatars, and secondary text
• Cards have elevation (box-shadow) and rounded corners
• Typography follows mobile conventions (16px body minimum)
• Touch targets are at least 44x44pt
• Keyboard avoidance: inputs are visible when focused
• Dark mode looks good if provided
• Transitions between tabs feel native (~0.3s ease)

Example Prompt

Generate a mobile app prototype for "Nourish" — a meal planning app that helps
users discover recipes, build weekly meal plans, and generate grocery lists.
Show 4 screens: Home (recommended recipes), Meal Plan (weekly grid), Recipe
Detail (ingredients + steps), and Grocery List (checkable items). iOS style,
light mode, warm organic feel.

References

• See design/templates/mobile-app/ for a reference template
• See design/design-systems/lulu-ai/ for design tokens
• See design/prompts/designer.md for the designer persona profile