--- name: forge-imagegen-mobile description: Art direction for mobile app reference screens. One screen per image, portrait device aspect, subtle straight-on phone frame, status bar with realistic content, real-looking content not Lorem ipsum, palette locked across all screens. Contains the prompt template + 6 worked prompts for a full app flow. Use with image generation tools for iOS, Android, cross-platform mobile design. license: MIT --- # forge-imagegen-mobile You are art-directing reference images for a mobile app that a developer or coding agent will translate into a real implementation. Default image-gen output for mobile is the floating-iPhone-on-purple-gradient at 30 degrees with stock-looking content. This skill exists to do it better. The deliverable: **a set of images that, handed to a competent mobile engineer, communicates the app's design language faithfully.** Each image is one screen; the set tells a coherent product story. ## Quick reference (the things you must never ship) 1. Multiple screens floating in space in one image. 2. Landscape or square aspect for a phone screen. 3. 30-degree tilted iPhone on a multicolor gradient backdrop. 4. Status bar showing `12:34` or `00:00` (fake-looking time). 5. Fake brand names in the status bar or app title ("AcmeApp"). 6. Stock photography of "person holding a phone." 7. Lorem ipsum visible. 8. Tap targets visibly smaller than 44pt. 9. Multiple devices (phone + tablet + watch) in one image unless that's the explicit subject. 10. Mixed visual register (3D blob backgrounds + flat UI screens). ## Hard rules ### Output structure **1. One screen per image. No "five screens floating in space" composites.** A flow with 8 screens produces 8 images. **2. Each image is portrait, aspect matches the device.** 19.5:9 for modern iPhone, 20:9 for many Android. **3. The phone is framed visibly but not the focus.** Subtle thin black phone frame around the screen content reminds the viewer this is mobile; the content stays primary. **4. No 30-degree tilted phones on gradient backgrounds.** Straight-on or 5-10° angle on a clean background. ### Device frame **5. Choose iOS or Android intentionally per project. Stay consistent.** Mixing platforms in one set requires explicit intent (a "works on both" demo); otherwise pick one. **6. The frame is subtle, not a marketing render.** Thin black frame, no chrome reflections, no studio lighting, no white Apple branding visible. **7. Status bar shows realistic content.** Time around `9:41` (Apple's canonical) or `10:08` (Android), signal/wifi present, battery around 80%. Not zero battery, not `12:34`. **8. Bottom of frame: home indicator (iOS) or navigation bar (Android) visible.** Cutting the frame off below the screen content is fine; pretending it does not exist is not. ### Content **9. Real-looking content, not Lorem ipsum.** Real names, real-looking messages, real-looking data. "Anna Petrova · 2m ago · Are we still on for tomorrow?" beats Lorem. **10. Type sizes are mobile-readable.** Headings ~24-32sp, body 15-17sp, captions 11-13sp. Anything smaller than 11sp is wrong on a real device. **11. No headlines wrapping to four lines on a phone.** Mobile copy is short. **12. Tap targets visibly 44pt or larger.** Tiny buttons suggest a designer who has never used a phone. ### Composition **13. Vary the screen types across the set.** Typical app shows: onboarding, list, detail, profile, settings. Each is a different visual shape. Do not produce 6 list screens. **14. Edge-to-edge content where appropriate.** Modern mobile uses full-width images, hero cards, pull-to-action sheets. Old-style centered cards on grey reads as 2015 Android. **15. Show motion through staging.** A "scrolling" screen has the topmost card partially cut at the top edge. A "loading" screen shows a tasteful spinner. A "post-action" screen shows a toast at the bottom. ### Palette **16. Three colors fixed across the entire set.** Background, foreground, accent. Same hex in every image. **17. No defaults.** Beige + sage + terracotta + matte black appears in every AI-generated app design. Avoid unless intentional. **18. Mobile-appropriate accent saturation.** Bright phone screens make oversaturated accents fatigue the eye. Medium-saturated accent reads more premium than pure neon. ### Background around the phone **19. Solid color or subtle gradient on a single hue.** Not the multi-color SaaS gradient. The background frames the device; it should not compete. **20. Subtle drop shadow under the phone, optional. If used, soft and warm-tinted.** **21. No floating particles, no abstract shapes, no "tech mesh" overlays.** ### Multi-screen sets **22. Lay out a contact sheet: all screens visible together.** The set reads as one app, not a grab-bag. **23. One hero screen leads, others support.** Most important screen (home or main use case) is rendered slightly larger or first in reading order. **24. Show flows when appropriate.** Onboarding 1 → 2 → 3 reads as a sequence; lay them out left-to-right or top-to-bottom in order. ### iOS-specific - Navigation bars use proper-sized titles (large or small) per Apple HIG. - System fonts are SF Pro (no need to label, but show the right weight/letter shape). - Sheet presentations use the corner-radius modern look (modal with rounded top corners, slight handle). - Tab bar where relevant; not on every screen. ### Android-specific - Material 3 typography (Display, Headline, Title, Body, Label). - FAB where the platform expects it. - System nav: gesture bar or three-button - pick one per set. - Color tokens dynamic-color-aware in spirit (same accent makes sense on both light and dark variants). ## Common AI-output patterns to reject | Pattern | Why slop | Fix | | --- | --- | --- | | 30-degree tilted iPhone on `from-purple to-pink` | 2022 portfolio cliche | Straight-on, clean background | | "Person holding a phone showing the app" | Stock photography | Phone alone, content primary | | Fake brand "AcmeApp" in status bar | Default | Real product name or `[App]` | | Multiple devices (phone + tablet + watch) | Cluttered, no focus | One device per image | | 80% transparent app icons | Hard to read | Solid icon at full opacity | | Loading skeleton presented as finished UI | Misleading | Show finished states, or a labeled "loading" screen | | Tap target 24pt | Untouchable on a real device | ≥44pt | | `12:34` status bar | Fake | `9:41` (iOS canonical) or `10:08` | | Lorem ipsum | Filler that ships | Real-looking message/name/data | | Mixed iOS + Android in same set | Unclear platform target | Pick one | ## Prompt template ``` SCREEN: [onboarding-1 | home | list | detail | profile | settings | empty-state | etc] ASPECT: 19.5:9 (iOS) or 20:9 (Android) PLATFORM: iOS 18 (SF Pro) or Android 15 (Material 3) FRAME: thin black phone frame, subtle, straight-on (no tilt) PALETTE: bg #..., fg #..., accent #... TYPE_REGISTER: [SF Pro / Roboto / Inter / system font character] CONTENT: [real-looking, name/data/copy specifics] COMPOSITION: [layout description, what is visible] MOOD: [3 adjectives max] ANTI: [no tilted phone, no purple gradient, no stock people] ``` ## Worked example: 6 screens for a meditation app ``` COMMON across all 6: PLATFORM: iOS 18 (SF Pro) ASPECT: 19.5:9 FRAME: thin black iPhone frame, straight-on, subtle warm shadow below PALETTE: bg #F5F2EC (warm cream), fg #1A1A1A, accent #C8501E (terracotta) TYPE: SF Pro Display, light/medium weights STATUS BAR: time 9:41, full signal, wifi, battery 87% ANTI: no tilted phones, no purple-pink gradients, no stock photos, no "Acme" branding 01_HOME Greeting "Good evening, Anna" top-left. Below: three featured session cards stacked vertically with breathing space - "Morning Calm 7m", "Deep Focus 25m", "Rest 12m". Gentle hand-drawn moon illustration top-right. Bottom tab bar: home / sessions / profile. 02_SESSION Mid-session screen. Centered: large circular progress ring at 23% complete with "07:13" elapsed inside. Below the ring: session title "Morning Calm", description "Breathing into stillness." Subtle pause button at bottom. No tab bar (full-screen mode). 03_LIBRARY List of sessions, scrollable. Header: large title "Sessions". Filter chips: "All / Morning / Focus / Sleep". 5 list items visible, each with thumbnail, title, duration. The topmost card is partially cut at the top edge (signals scrolled state). 04_PROFILE Avatar + name + stats. "Anna Petrova", "27-day streak", "183 sessions". Below: three stat cards (Total time / Avg session / Streak). Settings cog top-right. 05_EMPTY First-launch onboarding step 2 of 3. Centered illustration (subtle line-art). Headline "Sessions designed for you" plus two-line body. Primary CTA "Continue" filled in accent. Skip link top-right. Page indicator (2 of 3) above CTA. 06_TOAST Post-action confirmation. Same as 02_SESSION background. Toast at the bottom: "Session saved. 7-day streak." Subtle, only on for 2-3 seconds. Tab bar visible. ``` What this demonstrates: 6 separate images (rule 1); all portrait (rule 2); subtle straight-on iPhone frame (rules 3-4); realistic status bar (rule 7); locked palette (rule 16); varied screen types - home/session/list/profile/empty/toast (rule 13); staging conveys motion (rule 15 - scrolled list, mid-session ring, transient toast); iOS-consistent throughout (rule 5). ## Workflow 1. **List the screens needed.** Outline the flow. 2. **Pick palette, type register, platform, visual register. Once.** 3. **Pick composition per screen.** No two adjacent screens identical. 4. **Generate one image per screen.** Iterate before moving on. 5. **Lay out contact sheet. Verify consistency.** 6. **If palette drifted, fix the palette before fixing the image.** ## Verification Manual checklist: - [ ] One image per screen. - [ ] All portrait, correct aspect for the device. - [ ] Phone frame visible but not the focus; no extreme tilt. - [ ] Status bar shows realistic content. - [ ] Type sizes look mobile-readable. - [ ] Palette consistent across all images (same hex). - [ ] No purple-pink-blue gradient. - [ ] Content reads as real (real names, real-looking data). ## When to skip this skill - Web design references (use [`forge-imagegen-web`](../forge-imagegen-web/SKILL.md)). - Brand kits (use [`forge-brandkit`](../forge-brandkit/SKILL.md)). - Single icon or single asset. - Real device screenshots (those are not generated). ## Related skills - [`forge-imagegen-web`](../forge-imagegen-web/SKILL.md) - the web counterpart. - [`forge-brandkit`](../forge-brandkit/SKILL.md) - brand-identity boards. - [`forge-soft`](../../design/forge-soft/SKILL.md) / [`forge-minimalist`](../../design/forge-minimalist/SKILL.md) - the register the prompts target.