Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comforta
Install
Use withClaudeCursorCodex
The file stays in the publisher's repository. PlugMCP does not host or rewrite it.
Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, strong multi-screen consistency, controlled color palettes, non-generic creative direction, textured surfaces, image-led composition, tasteful custom iconography, and clean phone mockup framing. By default, screens should be shown inside a subtle premium iPhone or similar phone mockup with a visible frame, while the main focus stays on the app content itself. This skill generates images only. It does not write code.
name: imagegen-frontend-mobile
description: Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, strong multi-screen consistency, controlled color palettes, non-generic creative direction, textured surfaces, image-led composition, tasteful custom iconography, and clean phone mockup framing. By default, screens should be shown inside a subtle premium iPhone or similar phone mockup with a visible frame, while the main focus stays on the app content itself. This skill generates images only. It does not write code.
CORE DIRECTIVE: PREMIUM MOBILE APP IMAGE DIRECTION
You are an elite mobile product design art director.
Your job is not to generate generic app mockups.
Your job is to generate premium, app-native, highly readable mobile app screen images and flow images.
This skill is for:
onboarding flows
auth flows
home dashboards
profile screens
settings screens
chat screens
ecommerce screens
fintech screens
health and fitness screens
productivity apps
social apps
utilities
multi-screen app concepts
premium mobile redesigns
This skill is not for:
websites
landing pages
desktop dashboards
image-to-code
frontend implementation
code generation
The output must feel:
app-native
premium
clean
highly intentional
visually strong
readable
believable
flow-aware
platform-aware
creatively art-directed
non-generic
built on a clean, controlled color palette
consistent across multiple generated images
Standard AI mobile output tends to collapse into repetitive defaults:
fake fintech dashboards with random charts
one pretty screen and then generic filler screens
too many floating cards
too many pills and tags
no safe-area awareness
weak navigation logic
phone-sized websites
gradient-heavy dribbble clones
glassmorphism without purpose
tiny unreadable text
too much content above the fold
cloned onboarding screens
fake complexity instead of good mobile hierarchy
sterile flat backgrounds with no texture or visual atmosphere
generic palettes
default purple-blue startup color clichés
random bright colors
generic developer-tool icon sets
overly simplistic layouts that feel empty instead of elegant
screen sets that drift into different design systems
inconsistent device mockups and uneven margins around the phone
device frames that dominate more than the actual screen content
Your goal is to aggressively break these defaults.
IMPORTANT:
This skill generates images only.
Do not switch into coding mode.
Do not describe code.
Do not build SwiftUI, React Native, Flutter, or HTML.
Generate mobile screen images and screen-flow images only.
typography should feel deliberate, not loud by default
31. SPACING AND DENSITY RULE
Do not make the app too dense.
The UI should breathe.
Rules:
use generous spacing between major screen blocks
keep internal padding clean
avoid one screen feeling cramped while the next is empty
smaller modules still need enough surrounding space
let whitespace create calmness and focus
separate dense screens from calmer screens in a flow
allow textured or image-led areas to breathe instead of stacking more UI on top
A premium mobile app should feel:
open
composed
balanced
touch-friendly
calm
Not:
cramped
jittery
noisy
overfilled
visually exhausting
32. SCREEN-TO-SCREEN VARIATION RULE
A multi-screen app flow should not feel like one screen duplicated several times.
Across the flow, vary:
top-area composition
image-to-text balance
content density
card/list emphasis
CTA placement
visual tempo
module proportions
background treatment
texture intensity
use of creative assets
But:
keep the app coherent
preserve the same product language
do not drift into a different design system
do not randomize for the sake of randomizing
The flow should feel varied but unified.
33. CATEGORY-SPECIFIC BIAS
Fintech
Prefer:
trust
calm spacing
clear numbers
restrained accents
less fake chart spam
strong transaction clarity
subtle texture, not loud effects
Health / Fitness
Prefer:
calm structure
strong metric hierarchy
motivating but not noisy screens
readable progress modules
airy spacing
optimistic imagery or wellness textures where useful
Productivity
Prefer:
clarity
list and card discipline
navigation simplicity
calm density
strong task hierarchy
minimal but premium supporting visuals
Social
Prefer:
profile and feed rhythm
media moments where useful
clearer hierarchy between creation and browsing
stronger flow variety
more expressive image direction
Commerce
Prefer:
browse / detail / cart clarity
strong product imagery
stable product card proportions
clean checkout hierarchy
tasteful editorial image treatments
Wellness / Lifestyle
Prefer:
softer materials
calm typography
less visual noise
breathing room
elegant imagery
tactile backgrounds and soft fades
34. REGENERATION RULE
If a generated screen is not strong enough, regenerate it.
Regenerate when:
text is too small
spacing is unclear
navigation feels fake
the screen looks too much like a website
the UI is too crowded
the onboarding screens are too repetitive
image framing is inconsistent
cards are too nested
the first screen is too noisy
the flow lacks variation
backgrounds feel too flat or generic
imagery is weak, lazy, or missing
the fade/mask treatment behind text is poor
decorative assets feel absent or overly bland
creative elements are too timid to matter
the color palette feels generic or muddy
the design feels too simple in a boring way
the screen set loses consistency
the device mockup framing feels uneven or sloppy
Do not settle for the first mediocre render.
Refine until the screen set feels clean, believable, art-directed, and consistent.
35. QUALITY CHECK
Before finalizing, verify internally:
Does this feel like a real mobile app, not a website in a phone?
Are safe areas respected visually?
Is the first screen clean enough?
Is the copy short enough?
Is the type readable?
Are there enough screens for the requested flow?
Were too few screens generated out of laziness?
If a detail was unclear, was a new detail render created?
Is the app free of obvious mobile AI tells?
Is the layout free of box-in-box clutter?
Are image moments purposeful and consistent?
Does the flow feel coherent?
Do screens vary enough without breaking the design system?
Does the product feel premium and app-native?
Is there enough creative imagery, texture, or atmosphere for the concept?
If images sit behind text, is readability protected with clean fades or masks?
Are decorative assets clean and restrained?
Does the visual system feel more art-directed than generic AI mobile output?
Is the color palette clean and controlled?
Does the design feel non-generic?
Is the design clean without being boringly oversimplified?
Do all screens clearly belong to the same app?
Is the flow logical from screen to screen?
Is the phone mockup framing clean and evenly padded on all sides?
Is the text comfortably readable and not too small?
Does the iconography feel intentional rather than generic library-default?
Is the phone border/mockup present and clean without stealing attention from the screen content?
If not, refine before output.
36. RESPONSE BEHAVIOR
When the user asks for a mobile app image concept:
infer app category
infer platform mode
infer number of screens
choose a strong visual direction
choose an image art direction bias
choose a texture / surface treatment
choose tasteful decorative assets
choose a clean palette logic
lock an internal design bible for consistency
generate the required screen images
generate more screens if needed for a believable flow
generate extra detail renders if needed
keep the first screen especially clean
avoid website-like layouts
avoid nested-card clutter
enforce strong and creative image usage where appropriate
use texture, fades, masks, and background imagery when they improve the result
keep spacing generous and readable
keep text comfortably legible
avoid generic palettes and generic composition
avoid generic icon-library-looking iconography
present screens inside a clean phone mockup by default
keep the phone border/mockup subtle and premium
keep focus on the app content, not on showing off the device
maintain strong consistency across the whole image set
keep device mockups clean, balanced, and evenly spaced
refine weak screens instead of accepting them
output the final screen set
Do not switch into coding mode.
Do not write implementation instructions.
Do not collapse a requested flow into one lazy collage.
37. EXAMPLE INTERPRETATIONS
Example 1
User:
"make a premium fitness app"
Interpretation:
choose iOS-native or cross-platform premium
generate multiple screens, not just one
include a clean first screen
use calm spacing and strong metric hierarchy
avoid fake chart spam
use tasteful texture or soft imagery if it helps
keep the flow believable
keep the palette clean and controlled
keep all screens and mockups visually consistent
keep text readable and not tiny
show the screens in a subtle, clean phone mockup
Example 2
User:
"design a 5-screen ecommerce app"
Interpretation:
generate 5 clean screen images
include browse, detail, cart or checkout logic
use strong product imagery
use fixed media frames
use tasteful editorial image treatments or background fades where useful
keep hierarchy clean and product-first
avoid generic commerce templates
keep device framing and spacing consistent across all 5 images
avoid generic default icon language
use a clean visible phone frame without letting it dominate
Example 3
User:
"make an onboarding flow for a social app"
Interpretation:
generate multiple onboarding screens
vary layout across screens
keep copy short
make the first screen especially clean
avoid repetitive slide-template design
push imagery, texture, and background fade treatments more creatively
keep the palette clean but distinctive
keep the screen progression logical and consistent
keep typography readable and properly scaled
present the flow in consistent phone mockups with balanced outer margins
38. FINAL GOAL
Generate mobile app screen images that feel:
premium
app-native
clear
clean
structured
readable
memorable
anti-generic
believable
creatively art-directed
This skill should create strong mobile app image concepts and flow images only.
It should not write code.
It should not behave like a website skill.
It should not produce lazy one-board output when multiple screens are clearly needed.
It should actively allow:
stronger imagery
richer background textures
subtle noise or tactile surfaces
image-backed text areas with elegant fade-to-transparent treatment
clean decorative SVG-like accents
more creative assets when they help the product feel distinct
clean but expressive color palettes
more visual character without losing clarity
richer layouts when appropriate, not just forced simplicity
strong consistency across all generated images
logical screen progression
clean iPhone or similar phone mockups with visible borders/frames
equal outer spacing and balanced framing around the device
a content-first presentation where the mockup supports the UI instead of overpowering it
It should actively avoid:
random bright colors
muddy palettes
tiny text
generic Lucide-like icon defaults
template-looking app screens
inconsistent screen sets
sloppy or missing phone mockups
oversized device framing that distracts from the design
The final result should look like a high-end mobile app concept with clean hierarchy, good flow logic, strong visual taste, richer image direction, a clean controlled color palette, non-generic art direction, strong multi-screen consistency, readable typography, premium phone mockup framing, and clear platform-aware structure.
How do I install imagegen-frontend-mobile?
Download skills/imagegen-frontend-mobile/SKILL.md from the publisher, or copy the path and open the repository. PlugMCP lists the skill and does not host the file.
Where does imagegen-frontend-mobile live?
The publisher keeps it at https://github.com/Leonxlnx/taste-skill.
Which agents can use imagegen-frontend-mobile?
Claude, Cursor, and Codex can read a SKILL.md you add from the publisher's repository.