重构
This commit is contained in:
wchino
1465
.agents/skills/imagegen-frontend-mobile/SKILL.md
Normal file
1465
.agents/skills/imagegen-frontend-mobile/SKILL.md
Normal file
@@ -0,0 +1,1465 @@
|
||||
---
|
||||
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.
|
||||
|
||||
---
|
||||
|
||||
## 1. ACTIVE BASELINE CONFIGURATION
|
||||
|
||||
- DESIGN_VARIANCE: 8
|
||||
`(1 = rigid / standard, 10 = highly art-directed / varied)`
|
||||
- VISUAL_DENSITY: 3
|
||||
`(1 = airy / calm, 10 = dense / packed)`
|
||||
- ART_DIRECTION: 9
|
||||
`(1 = safe utility UI, 10 = bold premium mobile statement)`
|
||||
- PLATFORM_AWARENESS: 9
|
||||
`(1 = generic phone UI, 10 = strongly app-native)`
|
||||
- FLOW_VARIETY: 8
|
||||
`(1 = repeated screen templates, 10 = clearly differentiated screen rhythm)`
|
||||
- IMAGE_GENERATION_EAGERNESS: 10
|
||||
`(1 = minimal screens, 10 = generate as many screens and detail views as needed)`
|
||||
- SPACING_GENEROSITY: 9
|
||||
`(1 = tight, 10 = spacious and breathable)`
|
||||
- CLARITY_DISCIPLINE: 10
|
||||
`(1 = loose vibe, 10 = highly readable, structured, and clean)`
|
||||
- IMAGE_CREATIVITY: 9
|
||||
`(1 = minimal image involvement, 10 = strongly art-directed imagery and creative visual treatments)`
|
||||
- TEXTURE_STRENGTH: 7
|
||||
`(1 = perfectly flat, 10 = rich tactile/noisy/textured surfaces)`
|
||||
- COLOR_PALETTE_DISCIPLINE: 10
|
||||
`(1 = random or muddy color use, 10 = always clean, controlled, premium palette logic)`
|
||||
- NON_GENERICITY: 10
|
||||
`(1 = acceptable to look standard, 10 = must feel distinct and specific)`
|
||||
- COMPLEXITY_WITH_CONTROL: 8
|
||||
`(1 = forced minimalism only, 10 = allowed to be richer and more layered as long as it stays clean)`
|
||||
- CONSISTENCY_STRENGTH: 10
|
||||
`(1 = loose screen relationship, 10 = one clear product system across all images)`
|
||||
- FLOW_LOGIC_DISCIPLINE: 10
|
||||
`(1 = random screen set, 10 = clearly logical app progression)`
|
||||
- MOCKUP_FRAME_DISCIPLINE: 9
|
||||
`(1 = sloppy device presentation, 10 = clean, even, premium device framing)`
|
||||
- TEXT_READABILITY_PRIORITY: 10
|
||||
`(1 = text may become decorative/small, 10 = text must stay clearly readable)`
|
||||
- CONTENT_FIRST_MOCKUP_BALANCE: 10
|
||||
`(1 = device frame dominates, 10 = device frame supports the screen but content remains the hero)`
|
||||
- MIN_TEXT_SIZE_DISCIPLINE: 10
|
||||
`(1 = small text acceptable, 10 = text must never feel too small at normal viewing size)`
|
||||
|
||||
AI Instruction:
|
||||
Use these as defaults unless the user clearly wants something else.
|
||||
Adapt them to the app category.
|
||||
|
||||
Interpretation:
|
||||
- If the user says "clean", reduce density and increase clarity.
|
||||
- If the user says "premium iOS", bias toward elegant restraint and native-feeling hierarchy.
|
||||
- If the user says "Android", bias toward stronger Material-like structure and navigation clarity.
|
||||
- If the user says "creative social app", increase visual variance and image creativity without sacrificing readability.
|
||||
- If the user says "fintech", "health", or "productivity", increase trust, calmness, and structural clarity.
|
||||
- Do not be lazy with screen count.
|
||||
- If more screens would make the flow better, generate more screens.
|
||||
- If more detail renders would make the UI clearer, generate more detail renders.
|
||||
- Default toward richer art direction than standard AI mobile output.
|
||||
- Use creative assets, texture, and imagery deliberately, not randomly.
|
||||
- Always keep the color palette clean, controlled, and intentional.
|
||||
- Avoid generic color choices.
|
||||
- Do not force every app into ultra-simple minimalism.
|
||||
- Keep text comfortably readable at normal viewing size.
|
||||
- Maintain strong consistency across all generated images in the same set.
|
||||
- Keep device framing neat, even, and professional.
|
||||
- Show the app inside a clean phone mockup by default, but keep the focus on the app content.
|
||||
|
||||
---
|
||||
|
||||
## 2. PLATFORM MODE RULE
|
||||
|
||||
Always decide the platform mode first.
|
||||
|
||||
Choose one:
|
||||
1. iOS-native premium
|
||||
2. Android-native premium
|
||||
3. cross-platform premium neutral
|
||||
|
||||
### iOS-native premium
|
||||
Bias toward:
|
||||
- cleaner top areas
|
||||
- tab-bar clarity
|
||||
- safe-area awareness
|
||||
- elegant spacing
|
||||
- restrained chrome
|
||||
- calm hierarchy
|
||||
- native-feeling sheets and cards
|
||||
- polished but not overdecorated interfaces
|
||||
|
||||
### Android-native premium
|
||||
Bias toward:
|
||||
- stronger component rhythm
|
||||
- clearer app bar behavior
|
||||
- bottom navigation clarity
|
||||
- sheet logic
|
||||
- card/list structure
|
||||
- slightly firmer layout framing
|
||||
- more explicit state clarity where useful
|
||||
|
||||
### Cross-platform premium neutral
|
||||
Bias toward:
|
||||
- clean safe-area handling
|
||||
- universal mobile navigation patterns
|
||||
- clear hierarchy
|
||||
- less platform-specific ornament
|
||||
- premium but broadly buildable visual language
|
||||
|
||||
Do not mix iOS and Android patterns carelessly.
|
||||
Pick one dominant platform feel and stay coherent.
|
||||
|
||||
---
|
||||
|
||||
## 3. MANDATORY SCREEN-FIRST RULE
|
||||
|
||||
For mobile app requests, generate the screen image or screen set directly.
|
||||
|
||||
Do not:
|
||||
- answer with only text
|
||||
- describe what the app could look like without generating it
|
||||
- collapse multiple screens into one vague idea board if the user actually needs a flow
|
||||
|
||||
The main deliverable is:
|
||||
- one or more mobile screen images
|
||||
- optionally extra detail views when needed
|
||||
- a clear flow set when multiple screens are requested
|
||||
|
||||
---
|
||||
|
||||
## 4. GENERATE ENOUGH SCREENS RULE
|
||||
|
||||
Generate enough screens to make the flow feel real.
|
||||
|
||||
Do not be lazy with screen count.
|
||||
|
||||
If the user asks for:
|
||||
- 1 screen → generate 1 screen image
|
||||
- 2 screens → generate 2 screen images
|
||||
- 3 screens → generate 3 screen images
|
||||
- 5 screens → generate 5 screen images
|
||||
- 7 screens → generate 7 screen images
|
||||
- onboarding flow → generate multiple onboarding screens, not one
|
||||
- auth flow → generate separate sign in / sign up / recovery states when useful
|
||||
- app concept → generate a meaningful set, not one isolated hero mockup
|
||||
|
||||
It is better to generate:
|
||||
- multiple clean readable screens
|
||||
than:
|
||||
- one compressed board with tiny unreadable text
|
||||
|
||||
If a detail is unclear:
|
||||
- generate an extra detail image
|
||||
- or regenerate that screen cleanly
|
||||
|
||||
Never reduce screen count just for convenience if it weakens the app concept.
|
||||
|
||||
---
|
||||
|
||||
## 5. DO NOT CROP OLD IMAGES RULE
|
||||
|
||||
When a screen or detail needs a dedicated view, do not just crop or zoom into a previously generated larger image.
|
||||
|
||||
Do not:
|
||||
- crop a settings view out of a larger board
|
||||
- crop tiny onboarding copy out of a multi-screen collage
|
||||
- crop a small card from a broader screen to inspect it
|
||||
- rely on cutouts if they distort spacing, proportions, or typography
|
||||
|
||||
Instead:
|
||||
- generate a fresh standalone screen image
|
||||
- generate a fresh detail render
|
||||
- keep the same design language, colors, type mood, and component family
|
||||
- make the new image specifically optimized for readability
|
||||
|
||||
Fresh screen-specific generation is strongly preferred over cropping.
|
||||
|
||||
---
|
||||
|
||||
## 6. APP DESIGN BIBLE RULE
|
||||
|
||||
When generating multiple images for the same app, lock an internal design bible before continuing.
|
||||
|
||||
This design bible should remain consistent across the whole set:
|
||||
- platform mode
|
||||
- device frame style
|
||||
- device scale
|
||||
- palette logic
|
||||
- typography mood
|
||||
- type scale rhythm
|
||||
- spacing system
|
||||
- corner radius logic
|
||||
- icon style
|
||||
- illustration / imagery treatment
|
||||
- texture intensity
|
||||
- decorative asset language
|
||||
- navigation model
|
||||
- card and list behavior
|
||||
- button styling
|
||||
- shadow language
|
||||
|
||||
Do not let screen 3, 4, or 5 drift into a different app.
|
||||
|
||||
Every new screen should feel like it belongs to the same product world.
|
||||
|
||||
---
|
||||
|
||||
## 7. MULTI-SCREEN CONSISTENCY RULE
|
||||
|
||||
If multiple screens are requested, consistency is mandatory.
|
||||
|
||||
Keep consistent:
|
||||
- overall brand mood
|
||||
- type hierarchy
|
||||
- palette
|
||||
- safe-area handling
|
||||
- navigation behavior
|
||||
- component family
|
||||
- surface treatment
|
||||
- card treatment
|
||||
- background logic
|
||||
- image framing
|
||||
- decorative accents
|
||||
- device frame presentation
|
||||
|
||||
Variation is allowed in:
|
||||
- composition
|
||||
- feature emphasis
|
||||
- image placement
|
||||
- screen purpose
|
||||
- visual tempo
|
||||
|
||||
But not in:
|
||||
- product identity
|
||||
- design system
|
||||
- mockup quality
|
||||
- core spacing logic
|
||||
|
||||
The flow should feel varied but unified.
|
||||
|
||||
---
|
||||
|
||||
## 8. LOGICAL FLOW RULE
|
||||
|
||||
When multiple images are generated, they must form a believable app flow.
|
||||
|
||||
Do not generate random unrelated screens.
|
||||
|
||||
The screen order should make sense.
|
||||
|
||||
Examples:
|
||||
- onboarding → auth → home
|
||||
- home → browse → detail
|
||||
- profile → settings → edit profile
|
||||
- cart → checkout → confirmation
|
||||
- dashboard → activity → detail
|
||||
- welcome → permissions → personalized home
|
||||
|
||||
Ask internally:
|
||||
- why does screen 2 come after screen 1?
|
||||
- what action or navigation leads to the next screen?
|
||||
- is this a believable user journey?
|
||||
- does the UI state carry forward logically?
|
||||
|
||||
A good screen set should feel like a real product walkthrough, not a loose visual collection.
|
||||
|
||||
---
|
||||
|
||||
## 9. DEFAULT MOCKUP PRESENCE RULE
|
||||
|
||||
By default, present the mobile UI inside a clean phone mockup with a visible device border/frame.
|
||||
|
||||
This should usually be:
|
||||
- a clean iPhone-style mockup for iOS or neutral premium concepts
|
||||
- a clean Android-style mockup for Android-native concepts
|
||||
- a subtle premium generic phone mockup for cross-platform concepts
|
||||
|
||||
Do not omit the device frame by default.
|
||||
|
||||
Only remove the visible device frame if:
|
||||
- the user explicitly asks for raw screen-only output
|
||||
- the concept clearly benefits from borderless presentation
|
||||
- the user asks for UI sheets or assets instead of full phone compositions
|
||||
|
||||
Default rule:
|
||||
phone mockup present
|
||||
content still primary
|
||||
|
||||
---
|
||||
|
||||
## 10. DEVICE MOCKUP FRAME RULE
|
||||
|
||||
When using an iPhone, Android, or generic phone mockup, the mockup must look clean and premium.
|
||||
|
||||
Rules:
|
||||
- use one coherent device style across the full set unless the user explicitly wants mixed devices
|
||||
- keep device scale consistent across all screens in the same series
|
||||
- keep the mockup centered or aligned with clear discipline
|
||||
- keep outer spacing around the device clean and balanced
|
||||
- keep top, bottom, left, and right canvas margins visually even
|
||||
- do not let the phone touch the canvas edges
|
||||
- do not use awkwardly cropped device frames
|
||||
- do not use inconsistent bezels or random frame sizes across screens
|
||||
- keep shadows soft and controlled
|
||||
- keep the mockup presentation calm and premium
|
||||
- the phone border/frame should be visible and clean
|
||||
- the mockup should support the screen, not overpower it
|
||||
- keep visual emphasis on the UI content inside the phone
|
||||
|
||||
If multiple device mockups appear in one composition:
|
||||
- keep the same scale
|
||||
- keep equal gutter spacing between devices
|
||||
- align them cleanly
|
||||
- avoid random overlap unless explicitly art-directed
|
||||
|
||||
If the concept works better without a visible device frame:
|
||||
- only then present the screen cleanly with equal outer margins and controlled padding
|
||||
|
||||
The presentation should feel:
|
||||
- neat
|
||||
- balanced
|
||||
- premium
|
||||
- intentional
|
||||
- content-first
|
||||
|
||||
---
|
||||
|
||||
## 11. ONBOARDING FLOW RULE
|
||||
|
||||
Onboarding should not feel like repeated template slides.
|
||||
|
||||
If the user asks for onboarding:
|
||||
- generate multiple distinct onboarding screens
|
||||
- vary composition across screens
|
||||
- vary the balance of image, text, and CTA
|
||||
- keep the flow coherent
|
||||
- keep copy short
|
||||
- keep the first screen especially clean
|
||||
|
||||
Good onboarding should feel:
|
||||
- clear
|
||||
- fast
|
||||
- helpful
|
||||
- visually memorable
|
||||
- not overexplained
|
||||
|
||||
Avoid:
|
||||
- 3 identical screens with only icon and headline changes
|
||||
- too much copy
|
||||
- giant abstract blobs with no product meaning
|
||||
- fake motivational filler language
|
||||
- early rating/review prompts
|
||||
- cluttered first-run screens
|
||||
|
||||
---
|
||||
|
||||
## 12. FIRST SCREEN CLEANLINESS RULE
|
||||
|
||||
The first visible screen matters most.
|
||||
|
||||
Whether it is:
|
||||
- onboarding
|
||||
- home
|
||||
- auth
|
||||
- intro
|
||||
- welcome
|
||||
- dashboard
|
||||
|
||||
it must feel:
|
||||
- calm
|
||||
- premium
|
||||
- immediately readable
|
||||
- visually focused
|
||||
|
||||
Rules:
|
||||
- use one primary focal point
|
||||
- keep the top screen area controlled
|
||||
- keep the headline short
|
||||
- do not overload the first viewport
|
||||
- do not fill it with extra stats, chips, tags, or pills
|
||||
- do not bury the main CTA
|
||||
- make the first screen work on a normal phone size without feeling cramped
|
||||
- if imagery is used behind text, preserve clear readability with fades, masks, or soft scrims
|
||||
|
||||
Strong preference:
|
||||
- 1 to 3 short lines for the main statement
|
||||
- concise supporting text
|
||||
- one clear next action
|
||||
|
||||
Avoid:
|
||||
- giant wall of text
|
||||
- too many micro-labels
|
||||
- too many overlapping cards
|
||||
- fake enterprise complexity
|
||||
- "website hero inside a phone frame"
|
||||
|
||||
---
|
||||
|
||||
## 13. SAFE AREA AND SYSTEM REGION RULE
|
||||
|
||||
Respect mobile screen realities.
|
||||
|
||||
Always design with awareness of:
|
||||
- safe areas
|
||||
- status bar region
|
||||
- top bar or title region
|
||||
- bottom navigation region
|
||||
- home indicator region
|
||||
- sheet docking zone
|
||||
- gesture space
|
||||
|
||||
Do not:
|
||||
- cram important content into unsafe areas
|
||||
- ignore top and bottom system regions
|
||||
- make screens feel like edge-to-edge posters with no functional logic
|
||||
- place critical UI where it would be visually unsafe
|
||||
|
||||
Mobile images should feel like real app screens, not posters.
|
||||
|
||||
---
|
||||
|
||||
## 14. NAVIGATION RULE
|
||||
|
||||
Navigation must feel intentional and believable.
|
||||
|
||||
Use familiar mobile patterns when appropriate:
|
||||
- tab bar / bottom navigation for major app sections
|
||||
- stack navigation feel for drill-down flows
|
||||
- sheets for secondary tasks
|
||||
- segmented controls for local switching
|
||||
- app bars where useful
|
||||
- clear primary and secondary actions
|
||||
|
||||
Do not:
|
||||
- overload bottom navigation
|
||||
- hide the main path through the app
|
||||
- make every action equally important
|
||||
- create unclear hierarchy between tabs, sheets, and actions
|
||||
|
||||
The screen set should imply a believable app flow.
|
||||
|
||||
---
|
||||
|
||||
## 15. CLEAN LAYOUT RULE
|
||||
|
||||
Do not default to box-in-box-in-box mobile UI.
|
||||
|
||||
Avoid:
|
||||
- giant nested card stacks
|
||||
- floating surfaces everywhere
|
||||
- 5 levels of framing
|
||||
- dashboard clutter for no reason
|
||||
- tiny widgets packed together
|
||||
- fake operating-system labels
|
||||
- decorative pills and micro-status elements
|
||||
|
||||
Prefer:
|
||||
- cleaner surfaces
|
||||
- stronger whitespace
|
||||
- fewer but clearer containers
|
||||
- direct hierarchy
|
||||
- cleaner grouping
|
||||
- flatter structure where possible
|
||||
- one strong structural move rather than many small noisy ones
|
||||
|
||||
A premium mobile screen should not feel trapped inside too many boxes.
|
||||
|
||||
---
|
||||
|
||||
## 16. CREATIVE IMAGE DIRECTION RULE
|
||||
|
||||
This skill should be more creative than generic app UI generators.
|
||||
|
||||
Actively use imagery and art direction when it helps the concept.
|
||||
|
||||
Creative image usage may include:
|
||||
- photography-led onboarding
|
||||
- large editorial image blocks
|
||||
- image-backed headers
|
||||
- product or lifestyle imagery
|
||||
- scenic or atmospheric backgrounds
|
||||
- illustration-driven entry screens
|
||||
- media cards with layered treatment
|
||||
- bold visual covers on key screens
|
||||
- image strips, shelves, or carousels
|
||||
- background images partially revealed behind typography
|
||||
|
||||
Do not make imagery feel like an afterthought.
|
||||
Do not use lazy filler thumbnails.
|
||||
Use real image logic as part of the layout and mood.
|
||||
|
||||
When the app category supports it, prefer:
|
||||
- stronger hero imagery
|
||||
- more visual storytelling
|
||||
- richer art direction
|
||||
- more memorable image composition
|
||||
|
||||
---
|
||||
|
||||
## 17. BACKGROUND TEXTURE AND SURFACE RULE
|
||||
|
||||
Do not default to perfectly sterile flat backgrounds.
|
||||
|
||||
When appropriate, introduce subtle or medium-strength texture to create a richer visual atmosphere.
|
||||
|
||||
Allowed background treatments:
|
||||
- soft film grain
|
||||
- subtle noise
|
||||
- paper-like texture
|
||||
- lightly speckled surfaces
|
||||
- brushed or frosted texture feel
|
||||
- tonal gradient fog
|
||||
- clouded ambient depth
|
||||
- tactile matte surfaces
|
||||
- faint grid or pattern texture
|
||||
- blurred photographic background layers
|
||||
|
||||
Use texture to make the UI feel:
|
||||
- more premium
|
||||
- more tactile
|
||||
- less generic
|
||||
- more art-directed
|
||||
|
||||
But:
|
||||
- keep it controlled
|
||||
- keep the UI readable
|
||||
- do not let heavy texture overwhelm text
|
||||
- do not introduce noise just for the sake of noise
|
||||
|
||||
Good rule:
|
||||
texture should support the mood, not compete with the interface.
|
||||
|
||||
---
|
||||
|
||||
## 18. IMAGE-BEHIND-TEXT RULE
|
||||
|
||||
When appropriate, use images behind or beneath text in a controlled, premium way.
|
||||
|
||||
Preferred treatments:
|
||||
- image background under a title block with a fade to transparent
|
||||
- bottom-to-top gradient fade to support text legibility
|
||||
- side fade masks so text sits over the clean portion
|
||||
- soft blur overlays behind text
|
||||
- image partially visible behind copy, fading into the background color
|
||||
- large edge-to-edge visual with a scrim under headline and CTA
|
||||
- photo or illustration bleeding behind typography but gently masked
|
||||
|
||||
This is especially useful for:
|
||||
- onboarding
|
||||
- welcome screens
|
||||
- media apps
|
||||
- fashion / travel / lifestyle apps
|
||||
- premium commerce apps
|
||||
- social apps
|
||||
- editorial experiences
|
||||
|
||||
Rules:
|
||||
- text must stay readable
|
||||
- the fade / mask should feel elegant
|
||||
- the image should still be visually meaningful
|
||||
- the treatment should feel intentional, not like random opacity
|
||||
|
||||
Avoid:
|
||||
- raw image under text with no readability support
|
||||
- muddy overlays
|
||||
- too many heavy gradients
|
||||
- noisy backgrounds that destroy hierarchy
|
||||
|
||||
---
|
||||
|
||||
## 19. CREATIVE ASSET RULE
|
||||
|
||||
Use tasteful supporting creative assets when they improve the visual language.
|
||||
|
||||
Allowed creative assets:
|
||||
- clean micro-illustrations
|
||||
- simple geometric SVG-style motifs
|
||||
- tiny line-art accents
|
||||
- subtle vector icons
|
||||
- dotted guides
|
||||
- arc shapes
|
||||
- orbital lines
|
||||
- tasteful starbursts
|
||||
- calm abstract marks
|
||||
- mini diagram-like elements
|
||||
- product-relevant iconography
|
||||
- clean sticker-like accent elements when suitable
|
||||
|
||||
These assets should feel:
|
||||
- clean
|
||||
- premium
|
||||
- restrained
|
||||
- integrated into the design system
|
||||
- supportive, not distracting
|
||||
|
||||
Do not:
|
||||
- spam random stickers
|
||||
- clutter the interface with decorative icons
|
||||
- add meaningless SVG art
|
||||
- use childish doodles unless the brand clearly wants it
|
||||
|
||||
A few clean visual accents are good.
|
||||
Too many become noise.
|
||||
|
||||
---
|
||||
|
||||
## 20. ICONOGRAPHY RULE
|
||||
|
||||
Do not default to generic developer-style icon packs or bland Lucide-like icon vibes.
|
||||
|
||||
Avoid:
|
||||
- generic line-icon defaults that make the app feel like a template
|
||||
- overused developer-tool icon language
|
||||
- icons that feel too plain, too open-source-default, or too undifferentiated
|
||||
- randomly mixing icon weights and styles
|
||||
|
||||
Prefer:
|
||||
- a clean custom-feeling icon system
|
||||
- restrained, brand-appropriate iconography
|
||||
- consistent stroke or filled logic
|
||||
- icons with slightly more character when the concept allows it
|
||||
- product-specific icon decisions instead of default library-looking symbols
|
||||
|
||||
Icons should feel:
|
||||
- clean
|
||||
- intentional
|
||||
- premium
|
||||
- integrated
|
||||
- not generic
|
||||
|
||||
---
|
||||
|
||||
## 21. MOBILE ANTI-AI-TELLS RULE
|
||||
|
||||
Strictly avoid these unless explicitly requested.
|
||||
|
||||
### Visual AI tells
|
||||
- purple-blue fintech gradients everywhere
|
||||
- random glass cards
|
||||
- ambient blobs with no purpose
|
||||
- fake neon premium look
|
||||
- generic dribbble-style floating widgets
|
||||
- oversized corner radii on everything
|
||||
- over-rendered glossy surfaces without hierarchy
|
||||
|
||||
### Layout AI tells
|
||||
- fake chart dashboard spam
|
||||
- repeated stat cards with no product reason
|
||||
- a homepage that looks like 12 widgets fighting for attention
|
||||
- cloned screens in a flow
|
||||
- giant empty cards with weak content
|
||||
- phone-shaped websites instead of app screens
|
||||
|
||||
### Copy AI tells
|
||||
Avoid filler phrases like:
|
||||
- elevate your life
|
||||
- unlock your potential
|
||||
- next-gen finance
|
||||
- seamless control
|
||||
- smarter than ever
|
||||
- transform your day
|
||||
|
||||
Avoid fake brand slop:
|
||||
- Acme
|
||||
- NovaCore
|
||||
- Flowbit
|
||||
- Quantix
|
||||
- VeloPay
|
||||
|
||||
### UI clutter tells
|
||||
- too many pills
|
||||
- too many badges
|
||||
- too many tiny labels
|
||||
- fake system markers
|
||||
- meaningless avatar rows
|
||||
- random chart inserts
|
||||
- decorative toggles with no product meaning
|
||||
|
||||
---
|
||||
|
||||
## 22. STYLE VARIATION ENGINE
|
||||
|
||||
To avoid repetitive mobile design output, choose a clear visual direction and commit to it.
|
||||
|
||||
### Theme Paradigm
|
||||
Choose 1:
|
||||
1. pristine light
|
||||
2. deep dark
|
||||
3. soft wellness neutral
|
||||
4. premium monochrome
|
||||
5. rich accent-driven
|
||||
6. editorial luxe
|
||||
7. playful consumer color
|
||||
8. calm productivity minimal
|
||||
|
||||
### Typography Character
|
||||
Choose 1:
|
||||
1. clean system-like sans
|
||||
2. refined grotesk
|
||||
3. expressive premium display + clean body
|
||||
4. soft humanist sans
|
||||
5. sharper product sans with disciplined hierarchy
|
||||
|
||||
### Structure Bias
|
||||
Choose 1:
|
||||
1. list-led utility
|
||||
2. card-led modular
|
||||
3. dashboard-led overview
|
||||
4. media-led storytelling
|
||||
5. profile-led identity
|
||||
6. commerce-led browse and detail flow
|
||||
7. chat-led conversational flow
|
||||
8. wellness-led calm block rhythm
|
||||
|
||||
### Image Art Direction Bias
|
||||
Choose 1:
|
||||
1. editorial photography
|
||||
2. cinematic lifestyle imagery
|
||||
3. soft illustration-led
|
||||
4. tactile abstract compositions
|
||||
5. premium product imagery
|
||||
6. mixed photo + vector art direction
|
||||
7. moody atmospheric backdrops
|
||||
8. collage-lite layered imagery
|
||||
|
||||
### Texture / Surface Treatment
|
||||
Choose 1:
|
||||
1. ultra-subtle grain
|
||||
2. matte paper texture
|
||||
3. foggy gradient atmosphere
|
||||
4. soft noise wash
|
||||
5. blurred image haze
|
||||
6. clean flat with one textured hero area
|
||||
7. tactile monochrome surface
|
||||
8. low-opacity technical pattern
|
||||
|
||||
### Palette Logic
|
||||
Choose 1:
|
||||
1. restrained monochrome + one accent
|
||||
2. warm neutral palette + sharp dark contrast
|
||||
3. cool mineral palette + clean highlight accent
|
||||
4. editorial cream / charcoal / muted accent
|
||||
5. rich dark base + refined warm accent
|
||||
6. wellness soft palette with controlled saturation
|
||||
7. bright consumer palette with disciplined balance
|
||||
8. desaturated premium palette with one bold hit
|
||||
|
||||
### Signature Component Set
|
||||
Choose exactly 4:
|
||||
- large hero metric card
|
||||
- compact stat strip
|
||||
- modular collection grid
|
||||
- media carousel
|
||||
- layered profile header
|
||||
- premium segmented control
|
||||
- bottom action sheet
|
||||
- framed product card stack
|
||||
- progress ring block
|
||||
- message bubble system
|
||||
- settings group cells
|
||||
- photo-led card strip
|
||||
- sticky mini player
|
||||
- collection shelf
|
||||
- habit tracker block
|
||||
- checkout summary card
|
||||
- journal entry card
|
||||
- achievement tile row
|
||||
|
||||
### Decorative Asset Set
|
||||
Choose exactly 2:
|
||||
- minimal line icon cluster
|
||||
- abstract orbit lines
|
||||
- dotted arc accents
|
||||
- starburst micro-motif
|
||||
- rounded sticker accent
|
||||
- tiny directional arrow system
|
||||
- fine-grid motif
|
||||
- soft waveform line
|
||||
- clean badge glyphs
|
||||
- mini geometric markers
|
||||
|
||||
### Motion-Implied Language
|
||||
Choose exactly 2:
|
||||
- springy card lift energy
|
||||
- sheet rise energy
|
||||
- tab transition calmness
|
||||
- staggered list reveal energy
|
||||
- soft dashboard fade-up energy
|
||||
- parallax header drift energy
|
||||
- carousel glide energy
|
||||
|
||||
These are image-direction cues, not code instructions.
|
||||
|
||||
---
|
||||
|
||||
## 23. COLOR PALETTE RULE
|
||||
|
||||
Always use a clean, controlled color palette.
|
||||
|
||||
Color should feel:
|
||||
- intentional
|
||||
- premium
|
||||
- coherent
|
||||
- non-generic
|
||||
- visually calm even when expressive
|
||||
|
||||
Rules:
|
||||
- use a strong palette with internal logic
|
||||
- keep color relationships clean
|
||||
- let one or two accents do real work
|
||||
- avoid muddy, accidental, or chaotic color combinations
|
||||
- avoid generic startup gradients unless they truly fit
|
||||
- avoid default purple-blue AI palettes unless specifically justified
|
||||
- avoid random bright rainbow color use
|
||||
- avoid throwing many unrelated saturated colors together
|
||||
- keep saturation under control unless the brand clearly benefits from stronger intensity
|
||||
|
||||
A palette can be:
|
||||
- bold
|
||||
- soft
|
||||
- dark
|
||||
- editorial
|
||||
- playful
|
||||
- luxurious
|
||||
- atmospheric
|
||||
|
||||
But it must still feel clean.
|
||||
|
||||
Good color direction should make the app feel:
|
||||
- distinctive
|
||||
- art-directed
|
||||
- brand-specific
|
||||
- expensive or thoughtfully designed
|
||||
|
||||
Not:
|
||||
- template-like
|
||||
- random
|
||||
- overcooked
|
||||
- generic
|
||||
|
||||
---
|
||||
|
||||
## 24. NON-GENERICITY RULE
|
||||
|
||||
The app should not feel like a default template.
|
||||
|
||||
Do not settle for:
|
||||
- standard generic fintech
|
||||
- standard wellness pastel app
|
||||
- standard social feed clone
|
||||
- standard productivity dashboard clone
|
||||
- standard ecommerce browse/detail clone without personality
|
||||
|
||||
Push the concept toward:
|
||||
- stronger identity
|
||||
- stronger mood
|
||||
- stronger art direction
|
||||
- cleaner but more original composition
|
||||
- better image treatment
|
||||
- more distinctive asset language
|
||||
- more specific palette logic
|
||||
- more memorable screen-to-screen rhythm
|
||||
|
||||
The result should feel like:
|
||||
- a real designed product
|
||||
not:
|
||||
- a reusable starter template with better lighting
|
||||
|
||||
---
|
||||
|
||||
## 25. NOT ALWAYS SIMPLE RULE
|
||||
|
||||
Do not force every app into hyper-minimal simplicity.
|
||||
|
||||
Simplicity is not the goal by itself.
|
||||
Cleanliness is the goal.
|
||||
|
||||
This means:
|
||||
- a screen may be rich, layered, and expressive if it remains readable
|
||||
- a flow may have stronger visuals, texture, and more atmosphere if it stays structured
|
||||
- an app may use bold imagery, richer backgrounds, and more art direction without becoming messy
|
||||
|
||||
Allowed:
|
||||
- sophisticated layering
|
||||
- controlled visual depth
|
||||
- richer compositions
|
||||
- stronger image presence
|
||||
- decorative accents with purpose
|
||||
- multiple visual zones within a screen
|
||||
- more character when the brand needs it
|
||||
|
||||
Not allowed:
|
||||
- noisy complexity
|
||||
- clutter disguised as creativity
|
||||
- random decorative overload
|
||||
- muddy hierarchy
|
||||
- unreadable interfaces
|
||||
|
||||
The rule is:
|
||||
not always simple
|
||||
always clean
|
||||
|
||||
---
|
||||
|
||||
## 26. IMAGE SYSTEM RULE
|
||||
|
||||
Images are not mandatory on every app screen, but when they appear they must feel important.
|
||||
|
||||
Use images when the app category benefits from them:
|
||||
- social
|
||||
- ecommerce
|
||||
- travel
|
||||
- wellness
|
||||
- editorial
|
||||
- food
|
||||
- fashion
|
||||
- content apps
|
||||
- creator apps
|
||||
- marketplace apps
|
||||
|
||||
Types of image usage:
|
||||
- onboarding hero visuals
|
||||
- profile imagery
|
||||
- product imagery
|
||||
- collection thumbnails
|
||||
- editorial crops
|
||||
- photo-led cards
|
||||
- cover blocks
|
||||
- media shelves
|
||||
- gallery strips
|
||||
- background images under text with fade treatments
|
||||
- softly masked image headers
|
||||
- atmospheric scene layers behind core content
|
||||
|
||||
Rules:
|
||||
- image usage should match the app category
|
||||
- repeated image modules should use controlled proportions
|
||||
- images should feel curated and consistent
|
||||
- the app should not rely on one single image if the flow clearly needs more
|
||||
- different screens can use different images, but they must still belong to one product world
|
||||
- if imagery is important, push it hard enough to feel intentional
|
||||
|
||||
Avoid:
|
||||
- random filler thumbnails
|
||||
- one pretty screen and then no imagery at all
|
||||
- inconsistent image proportions
|
||||
- collage chaos unless explicitly requested
|
||||
|
||||
---
|
||||
|
||||
## 27. FIXED MOBILE MEDIA FRAME RULE
|
||||
|
||||
When images are used, place them inside clear, controlled frames.
|
||||
|
||||
Prefer:
|
||||
- stable aspect ratios
|
||||
- consistent crop behavior
|
||||
- repeatable media modules
|
||||
- clear radius logic
|
||||
- clean framing
|
||||
|
||||
Examples:
|
||||
- onboarding hero in a bounded visual block
|
||||
- product cards with consistent proportions
|
||||
- editorial shelves with repeatable crops
|
||||
- profile/media headers with stable framing
|
||||
- image rows with controlled ratios
|
||||
|
||||
Avoid:
|
||||
- random image sizes
|
||||
- messy scaling
|
||||
- inconsistent crop systems
|
||||
- uncontrolled visual noise
|
||||
|
||||
The goal is strong media inside a believable mobile system.
|
||||
|
||||
---
|
||||
|
||||
## 28. TEXT RULE
|
||||
|
||||
Copy should be:
|
||||
- short
|
||||
- clean
|
||||
- product-appropriate
|
||||
- readable
|
||||
- useful for the screen
|
||||
|
||||
Use:
|
||||
- concise headlines
|
||||
- believable button labels
|
||||
- minimal supporting copy
|
||||
- screen titles that feel real
|
||||
|
||||
Avoid:
|
||||
- lorem ipsum overload
|
||||
- long paragraphs
|
||||
- fake inspirational filler
|
||||
- overloaded onboarding explanations
|
||||
- overly technical filler labels
|
||||
|
||||
For first screens and onboarding especially:
|
||||
- keep copy tight
|
||||
- reduce words rather than forcing more lines
|
||||
|
||||
---
|
||||
|
||||
## 29. TEXT SIZE AND READABILITY RULE
|
||||
|
||||
Text must never feel too small.
|
||||
|
||||
Strong rule:
|
||||
- if the text feels small, the design is not finished yet
|
||||
|
||||
Prioritize:
|
||||
- comfortably readable titles
|
||||
- clearly readable body copy
|
||||
- readable labels and buttons
|
||||
- enough contrast against the background
|
||||
- enough spacing around text blocks
|
||||
- strong hierarchy between headline, body, and small supporting text
|
||||
|
||||
Do not:
|
||||
- shrink text to fit too much UI
|
||||
- use tiny decorative labels
|
||||
- let body copy become hard to read
|
||||
- sacrifice legibility for style
|
||||
- place text on busy imagery without protection
|
||||
- compress too much information into one screen until the type becomes small
|
||||
|
||||
If a design choice makes text too small:
|
||||
- simplify the layout
|
||||
- reduce content
|
||||
- increase spacing
|
||||
- enlarge the text
|
||||
- split content into another screen if needed
|
||||
- regenerate the screen if necessary
|
||||
|
||||
Readable beats clever.
|
||||
Readable beats dense.
|
||||
Readable beats decorative small type.
|
||||
|
||||
---
|
||||
|
||||
## 30. TYPOGRAPHY RULE
|
||||
|
||||
Typography is a primary design tool.
|
||||
|
||||
Always ensure:
|
||||
- strong title/body/label contrast
|
||||
- readable mobile scale
|
||||
- clear section headers
|
||||
- short CTA copy
|
||||
- believable type rhythm across screens
|
||||
- good line count control
|
||||
|
||||
Do not:
|
||||
- make everything the same weight
|
||||
- use too many font moods
|
||||
- create awkward line wrapping
|
||||
- use oversized headline drama on every screen
|
||||
- let body text become tiny or decorative
|
||||
|
||||
For premium apps:
|
||||
- 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:
|
||||
|
||||
1. Does this feel like a real mobile app, not a website in a phone?
|
||||
2. Are safe areas respected visually?
|
||||
3. Is the first screen clean enough?
|
||||
4. Is the copy short enough?
|
||||
5. Is the type readable?
|
||||
6. Are there enough screens for the requested flow?
|
||||
7. Were too few screens generated out of laziness?
|
||||
8. If a detail was unclear, was a new detail render created?
|
||||
9. Is the app free of obvious mobile AI tells?
|
||||
10. Is the layout free of box-in-box clutter?
|
||||
11. Are image moments purposeful and consistent?
|
||||
12. Does the flow feel coherent?
|
||||
13. Do screens vary enough without breaking the design system?
|
||||
14. Does the product feel premium and app-native?
|
||||
15. Is there enough creative imagery, texture, or atmosphere for the concept?
|
||||
16. If images sit behind text, is readability protected with clean fades or masks?
|
||||
17. Are decorative assets clean and restrained?
|
||||
18. Does the visual system feel more art-directed than generic AI mobile output?
|
||||
19. Is the color palette clean and controlled?
|
||||
20. Does the design feel non-generic?
|
||||
21. Is the design clean without being boringly oversimplified?
|
||||
22. Do all screens clearly belong to the same app?
|
||||
23. Is the flow logical from screen to screen?
|
||||
24. Is the phone mockup framing clean and evenly padded on all sides?
|
||||
25. Is the text comfortably readable and not too small?
|
||||
26. Does the iconography feel intentional rather than generic library-default?
|
||||
27. 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:
|
||||
1. infer app category
|
||||
2. infer platform mode
|
||||
3. infer number of screens
|
||||
4. choose a strong visual direction
|
||||
5. choose an image art direction bias
|
||||
6. choose a texture / surface treatment
|
||||
7. choose tasteful decorative assets
|
||||
8. choose a clean palette logic
|
||||
9. lock an internal design bible for consistency
|
||||
10. generate the required screen images
|
||||
11. generate more screens if needed for a believable flow
|
||||
12. generate extra detail renders if needed
|
||||
13. keep the first screen especially clean
|
||||
14. avoid website-like layouts
|
||||
15. avoid nested-card clutter
|
||||
16. enforce strong and creative image usage where appropriate
|
||||
17. use texture, fades, masks, and background imagery when they improve the result
|
||||
18. keep spacing generous and readable
|
||||
19. keep text comfortably legible
|
||||
20. avoid generic palettes and generic composition
|
||||
21. avoid generic icon-library-looking iconography
|
||||
22. present screens inside a clean phone mockup by default
|
||||
23. keep the phone border/mockup subtle and premium
|
||||
24. keep focus on the app content, not on showing off the device
|
||||
25. maintain strong consistency across the whole image set
|
||||
26. keep device mockups clean, balanced, and evenly spaced
|
||||
27. refine weak screens instead of accepting them
|
||||
28. 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.
|
||||
Reference in New Issue
Block a user