83.3K+Download
Skip to the usage guide
imagegen-frontend-mobileby Leonxlnx

ImageGen Frontend Mobile Skill.

A Claude Code and Codex skill for mobile app design: high-fidelity mobile screen concepts and flows via image generation.

  • Mobile Apps
  • Image
Download OpenDesignView usage guide
Leonxlnx/taste-skill · skills/imagegen-frontend-mobile/SKILL.mdSKILL.md
--- 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 … --- ## 1. ACTIVE BASELINE CONFIGURATION ## 2. PLATFORM MODE RULE ## 3. MANDATORY SCREEN-FIRST RULE ## 4. GENERATE ENOUGH SCREENS RULE ## 5. DO NOT CROP OLD IMAGES RULE ## 6. APP DESIGN BIBLE RULE
Front matter and section headings read from the upstream file on 2026-09-14 · 40,285 characters in full

01 What it does

What the imagegen-frontend-mobile Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

This skill generates premium mobile app screen images for iOS, Android, and cross-platform products, covering onboarding flows, dashboards, profile screens, auth flows, ecommerce, fintech, health, productivity, and social apps. It prioritizes clean hierarchy, readable text, strong multi-screen consistency, controlled color palettes, non-generic creative direction, textured surfaces, image-led composition, and custom iconography.

Screens appear inside subtle premium iPhone or similar phone mockups with visible frames by default. The skill generates images only—no code, no implementation, no image-to-code conversion. It uses configuration values like DESIGN_VARIANCE: 8, ART_DIRECTION: 9, TEXT_READABILITY_PRIORITY: 10, and CONSISTENCY_STRENGTH: 10 to actively counter generic AI mobile output patterns including fake fintech dashboards, tiny unreadable text, generic purple-blue palettes, and inconsistent screen sets.

What it produces

  • One or more mobile screen images inside clean phone mockups with visible device borders, where the main focus stays on the app content itself
  • Optionally extra detail views or fresh standalone screen images when a detail is unclear, generated specifically rather than cropped from larger images
See the example prompt ↗

How It Works

  1. 01
    Select Platform Mode First

    Choose iOS-native premium, Android-native premium, or cross-platform premium neutral to establish navigation patterns, safe-area handling, and chrome behavior before generating any screens.

  2. 02
    Lock Internal Design Bible

    When generating multiple images for the same app, establish and maintain consistent platform mode, device frame style, palette logic, typography mood, spacing system, corner radius, icon style, and navigation model across all screens.

  3. 03
    Choose Visual Direction System

    Select one theme paradigm, typography character, structure bias, image art direction bias, texture treatment, palette logic, exactly 4 signature components, exactly 2 decorative assets, and exactly 2 motion-implied languages to avoid repetitive output.

  4. 04
    Generate Fresh Detail Renders When Needed

    When a screen or detail needs dedicated view, generate a fresh standalone screen image rather than cropping from a previously generated larger image to preserve spacing, proportions, and typography.

  5. 05
    Run Quality Verification

    Before finalizing, verify 27 checks including whether it feels like a real mobile app not a website, safe areas are respected, first screen is clean, type is readable, enough screens generated, flow is coherent, and mockup framing is clean.

02 Find your fit

When to Use the imagegen-frontend-mobile Skill

Use the imagegen-frontend-mobile skill in Claude Code or Codex when the job is mobile app design of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • iOS, Android, and cross-platform mobile products that need premium, app-native screen concepts with clean hierarchy and strong multi-screen consistency

Know the Boundaries

  • 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

What to Provide

  • NeedsImage generation service — named in the SKILL.md as required.

03 Inside the skill

Rules the imagegen-frontend-mobile Skill Gives Claude Code and Codex

5 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

  1. Image Generation Only

    Do not switch into coding mode, describe code, or build SwiftUI, React Native, Flutter, or HTML. Generate mobile screen images and screen-flow images only.

  2. Text Readability Priority

    TEXT_READABILITY_PRIORITY: 10 means text must never feel too small at normal viewing size. If text feels small, the design is not finished yet.

  3. Screen Count Discipline

    IMAGE_GENERATION_EAGERNESS: 10 means do not be lazy with screen count. If more screens would make the flow better, generate more screens.

  4. Default Phone Mockup Presence

    By default, present the mobile UI inside a clean phone mockup with a visible device border or frame.

  5. Color Palette Discipline

    COLOR_PALETTE_DISCIPLINE: 10 requires always clean, controlled, premium palette logic.

04 Put it to work

Install imagegen-frontend-mobile in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add imagegen-frontend-mobile to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal
npx skills add https://github.com/Leonxlnx/taste-skill --skill imagegen-frontend-mobile

Generic skills CLI form for skills/imagegen-frontend-mobile/SKILL.md; the repository may document its own path.

Give the Skill a First Mobile App Design Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt
Design a 5-screen onboarding flow for a premium fitness tracking app targeting iOS users. Include a welcome screen with hero imagery, permissions requests for health data and notifications, personalized goal-setting with activity level selection, and a first dashboard view showing progress rings and weekly activity. Use calm wellness aesthetics with controlled green and slate palette, generous breathing room, and motivating lifestyle photography with fade-to-transparent treatments behind headlines.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

  • Does this feel like a real mobile app, not a website in a phone? Are safe areas respected visually?
  • 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 phone mockup framing clean and evenly padded on all sides? Is the text comfortably readable and not too small?

In OpenDesign imagegen-frontend-mobile is bundled: Plugins → Skills, pick it in the top bar.

Download OpenDesignRead the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author
Leonxlnx
Repository
github.com/Leonxlnx/taste-skill Branch main
Skill file
skills/imagegen-frontend-mobile/SKILL.md Content checksum recorded at verification; commit ccbc156
License
MIT From LICENSE.
Repository stars
86,946 GitHub snapshot taken 2026-09-14 for the whole Leonxlnx/taste-skill repository, which contains 11 skills in this catalog. Not a rating or usage count for imagegen-frontend-mobile.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

  1. CORE DIRECTIVE: PREMIUM MOBILE APP IMAGE DIRECTIONEstablishes role as elite mobile product design art director generating premium app-native screen images, not generic mockups
  2. ACTIVE BASELINE CONFIGURATIONSets 19 configuration values including DESIGN_VARIANCE: 8, ART_DIRECTION: 9, TEXT_READABILITY_PRIORITY: 10, CONSISTENCY_STRENGTH: 10
  3. PLATFORM MODE RULEChoose iOS-native premium, Android-native premium, or cross-platform premium neutral first and stay coherent
  4. MANDATORY SCREEN-FIRST RULEGenerate screen images or screen sets directly as main deliverable, do not answer with only text
  5. GENERATE ENOUGH SCREENS RULEDo not be lazy with screen count, generate as many screens as requested or needed for believable flow
  6. DO NOT CROP OLD IMAGES RULEGenerate fresh standalone screen images for details rather than cropping from previously generated larger images
  7. APP DESIGN BIBLE RULELock consistent platform, palette, typography, spacing, icons, texture across all screens in same app set
  8. MULTI-SCREEN CONSISTENCY RULEKeep brand mood, type hierarchy, palette, navigation, component family, surface treatment consistent across all screens
  9. LOGICAL FLOW RULEScreen order must make sense as believable user journey, not random unrelated screens
  10. DEFAULT MOCKUP PRESENCE RULEBy default present UI inside clean phone mockup with visible device border, only remove if explicitly requested
  11. DEVICE MOCKUP FRAME RULEUse one coherent device style, keep scale consistent, center mockup, balance outer spacing, keep frame visible and clean
  12. STYLE VARIATION ENGINEChoose theme paradigm, typography character, structure bias, image art direction, texture, palette logic, 4 signature components, 2 decorative assets to avoid repetitive output
The Skill's Own 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.”

Front-matter description from SKILL.md. The full file is about 40,285 characters. Read the full file on GitHub.

ImageGen Frontend Mobile

Run imagegen-frontend-mobile on a Real Mobile App Design Task.

The imagegen-frontend-mobile skill ships inside OpenDesign. Download the app, pick the skill in Plugins → Skills, paste the prompt above, and read the plan before the result.

Download OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/Leonxlnx/taste-skill --skill imagegen-frontend-mobile