imagegen-frontend-mobile skill
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.
Is the imagegen-frontend-mobile skill safe?
Clean: nothing in its files matched our rules. We read 1 file in the folder on 2026-10-13.
No findings.
Install the imagegen-frontend-mobile skill
A skill is a folder. Copy it into your agent's skills folder and the agent loads it when the task matches its description.
git clone --depth 1 https://github.com/Leonxlnx/taste-skill.git /tmp/taste-skill mkdir -p ~/.claude/skills cp -r /tmp/taste-skill/skills/imagegen-frontend-mobile ~/.claude/skills/imagegen-frontend-mobile
In the Claude apps, zip the folder and upload it from the Skills settings. The folder on GitHub
The instructions your agent would load
SKILL.md as published, without the frontmatter. Read it on GitHub
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
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
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
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
(1 = rigid / standard, 10 = highly art-directed / varied)
- DESIGN_VARIANCE: 8
(1 = airy / calm, 10 = dense / packed)
- VISUAL_DENSITY: 3
(1 = safe utility UI, 10 = bold premium mobile statement)
- ART_DIRECTION: 9
(1 = generic phone UI, 10 = strongly app-native)
- PLATFORM_AWARENESS: 9
(1 = repeated screen templates, 10 = clearly differentiated screen rhythm)
- FLOW_VARIETY: 8
(1 = minimal screens, 10 = generate as many screens and detail views as needed)
- IMAGEGENERATIONEAGERNESS: 10
(1 = tight, 10 = spacious and breathable)
- SPACING_GENEROSITY: 9
(1 = loose vibe, 10 = highly readable, structured, and clean)
- CLARITY_DISCIPLINE: 10
(1 = minimal image involvement, 10 = strongly art-directed imagery and creative visual treatments)
- IMAGE_CREATIVITY: 9
(1 = perfectly flat, 10 = rich tactile/noisy/textured surfaces)
- TEXTURE_STRENGTH: 7
(1 = random or muddy color use, 10 = always clean, controlled, premium palette logic)
- COLORPALETTEDISCIPLINE: 10
(1 = acceptable to look standard, 10 = must feel distinct and specific)
- NON_GENERICITY: 10
(1 = forced minimalism only, 10 = allowed to be richer and more layered as long as it stays clean)
- COMPLEXITYWITHCONTROL: 8
(1 = loose screen relationship, 10 = one clear product system across all images)
- CONSISTENCY_STRENGTH: 10
(1 = random screen set, 10 = clearly logical app progression)
- FLOWLOGICDISCIPLINE: 10
(1 = sloppy device presentation, 10 = clean, even, premium device framing)
- MOCKUPFRAMEDISCIPLINE: 9
(1 = text may become decorative/small, 10 = text must stay clearly readable)
- TEXTREADABILITYPRIORITY: 10
(1 = device frame dominates, 10 = device frame supports the screen but content remains the hero)
- CONTENTFIRSTMOCKUP_BALANCE: 10
(1 = small text acceptable, 10 = text must never feel too small at normal viewing size)
- MINTEXTSIZE_DISCIPLINE: 10
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.
2. PLATFORM MODE RULE
Always decide the platform mode first.
Choose one:
- iOS-native premium
- Android-native premium
- cross-platform premium neutral
iOS-native premium
More skills from Leonxlnx/taste-skill
- AbrandkitPremium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups, art-directed imagery, and flexible grid layouts.
- Adesign-taste-frontendtasteskill 2.5.1, the anti-slop frontend skill. Builds professional company websites at the level of figma.com and x.ai: plain copy in a voice of its own, one system, one section per screen, equal edges, real photographs and real product UI (licensed stand-in photographs when the client has none; a product render only when the brief asks for 3D), a hero entrance and one or two dealt moments on every page, shader effects and scenes only on tech, gaming and software pages, quiet micro-interactions, and a checker and finish gate that enforce it in a real browser. Use this whenever you build, design, redesign, restyle, polish or review a landing page, company, product, shop, cafe, hotel, studio, SaaS, AI, developer-tool or game site, as static HTML/CSS or inside an existing React, Next.js, Vue, Svelte, Astro or Tailwind project, or when the user says a page looks generic, templated or "AI-made".
- Adesign-taste-frontend-v1The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2), which is a new skill. Use this v1 install name only if you need exact backward compatibility.
- Adesign-taste-frontend-v2-experimentalOld v2 (experimental) of taste-skill, the single-file dial-driven version, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2). Use this install name only if you need the earlier behavior. Anti-slop frontend rules for landing pages, portfolios, and redesigns, with real design systems when applicable, audit-first redesigns and a strict pre-flight check.
- Afull-output-enforcementOverrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.
- Agpt-tasteElite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing.
- Ahigh-end-visual-designTeaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic.
- Aimage-to-codeElite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero clean, spacious, readable, and visible on a small laptop.
- Aimagegen-frontend-webElite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not always left-text / right-image), background-image freedom, varied CTAs, varied hero scales (giant / mid / mini minimalist), narrative concept spine, second-read moments, and a single consistent palette across all images. Optimized for landing pages, marketing sites, and product comps that developers or coding models can accurately recreate.
- Aindustrial-brutalist-uiRaw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints.
- Aminimalist-uiClean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.
- Aredesign-existing-projectsUpgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.