Home / All Skills / Content & Media Creation / imagegen-frontend-mobile
English (EN)简体中文 (ZH)日本語 (JA)
Content & Media Creation · leonxlnx/taste-skill

imagegen-frontend-mobile

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.

L1 Basic · Source registration onlyV1 Commit-PinnedDual-pass Audit
Author leonxlnxGitHub leonxlnx/taste-skill ↗Stars 87309License MIT（仓库根 LICENSE，Copyright (c) 2026 Leonxlnx；GitHub API spdx_id=MIT）Commit ccbc15639c
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

Strictly establish boundaries first: this skill generates images only, explicitly prohibiting switching to coding mode or writing implementation instructions in three places—the key distinction from the web version in the same repo, preventing mobile reference visuals from drifting into code.

skills/imagegen-frontend-mobile/SKILL.md
Do not switch into coding mode.
The exact same prohibition appears across §CORE DIRECTIVE at the top, the end of the §36 RESPONSE BEHAVIOR pipeline, and §38 FINAL GOAL (the latter two phrasing it as 'Do not write implementation instructions.' / 'It should not write code.'), forming a triple-reiterated, high-compliance architecture.

The platform mode must be decided upfront (choose one: iOS-native / Android-native / cross-platform), each dictating corresponding component and navigation conventions to avoid mismatched hybrid abominations.

skills/imagegen-frontend-mobile/SKILL.md
Always decide the platform mode first.
§2 defines preferences across all three modes: safe-area and restrained chrome for iOS; component cadence and app bar/sheet logic for Android; universal mobile navigation for cross-platform—requiring consistent execution throughout once selected.

Screen quantity discipline: the number of screens is strictly determined by the request—only more is permitted, never fewer; ambiguous or 'concept' requests default to full screen sets, strictly prohibiting cutting count for convenience.

skills/imagegen-frontend-mobile/SKILL.md
Do not be lazy with screen count.
§4 establishes exact mapping (1→1, 3→3, 7→7, onboarding flow→multi-screen, auth flow→split login/register/recovery screens), enforcing the tradeoff: multiple clear screens are always preferred over a single cramped board of tiny text.

Crop-and-reuse is strictly prohibited: detail views must be generated anew individually rather than cropped from an existing larger composition.

skills/imagegen-frontend-mobile/SKILL.md
generate a fresh standalone screen image
The rationale is detailed in §5: cropping breaks spacing, proportions, and typography ('rely on cutouts if they distort spacing, proportions, or typography'), making small text unreadable. This intentionally raises generation costs as a deliberate quality tradeoff.

Multi-screen consistency is locked down via an internal 'design bible': pinning down over ten attributes beforehand, including platform mode, device frames, palette logic, type scale, spacing, corner radii, icon style, texture intensity, and navigation model.

skills/imagegen-frontend-mobile/SKILL.md
Do not let screen 3, 4, or 5 drift into a different app.
§6 lists the 16 core attributes that the bible must lock in; §7 separates 'variables' (composition, feature emphasis, image placement, rhythm) from 'invariants' (product identity, design system, mockup quality), turning consistency from an abstract adjective into a concrete attribute matrix.

Flow logic is strictly enforced: multi-screen sets must depict a credible user journey, requiring self-questioning before generation ('Why does Screen 2 follow Screen 1? What action leads to the next?').

skills/imagegen-frontend-mobile/SKILL.md
Do not generate random unrelated screens.
§8 establishes standard progression patterns (onboarding → auth → home, cart → checkout → confirmation, etc.) and requires UI state persistence across screens, preventing 'a gallery of pretty but unrelated shots'.

Device mockups are mandatory by default with strict framing specs: uniform device styling, identical scaling, balanced padding on all sides, no edge-clipping, soft shadows, and content strictly prioritized over the device.

skills/imagegen-frontend-mobile/SKILL.md
keep top, bottom, left, and right canvas margins visually even
§9/§10 define explicit exceptions (when the user explicitly asks for raw screen art or when the concept suits frameless presentation), while mandating equal margins and controlled negative space even in such cases.

Anti-AI-default mobile symptoms are explicitly called out: fake financial charts, glassmorphism abuse, zero-safe-area edge bleeds, websites trapped inside a phone, unreadably tiny text, cloned onboarding steps, screens drifting across design systems, and mockups that overpower the content.

skills/imagegen-frontend-mobile/SKILL.md
- generic developer-tool icon sets
The opening §CORE DIRECTIVE lists over twenty failure defaults at once; 20 of the subsequent 38 sections systematically remediate these exact symptoms (clean hero sections, safe areas, navigation, type sizes, iconography, tactile textures, etc.).

Explicitly permits 'not always minimalist': richer layers, tactile textures, and image-led compositions are welcomed as long as visual clarity is preserved—breaking the dogmatic idea that 'white space = premium'.

skills/imagegen-frontend-mobile/SKILL.md
It should actively allow:
The concluding checklist outlines permitted elements (bolder imagery, background textures, subtle grain, gradient scrims behind text, decorative SVG-like accents, expressive palettes) alongside banned elements (random bright accents, muddy palettes, tiny text, generic Lucide-style default icons, template look, drifting multi-screen sets, sloppy mockups).

Introduces regeneration discipline and a 27-point quality checklist, explicitly treating 'mediocre first drafts' as an unacceptable output.

skills/imagegen-frontend-mobile/SKILL.md
Do not settle for the first mediocre render.
§34 outlines 20 triggers demanding a complete regeneration (text too small, ambiguous spacing, fake navigation, website-like feel, overcrowded UI, duplicated onboarding screens, uneven mockup framing, etc.); §35 closes the loop with 27 evaluation checks ('Does this feel like a real mobile app, not a website in a phone?').

2Core Capabilities

01Three-way platform mode selection with respective component and navigation conventions (iOS / Android / Cross-platform)
02Screen quantity discipline defaulting to full cohesive sets (including expanded requirements for onboarding, auth, and conceptual requests)
03Prohibition of crop-and-reuse: detail views must be regenerated from scratch to preserve legibility
04Internal design bible + multi-screen consistency system (explicit variable/invariant separation)
05Plausible user journey orchestration (cross-screen causality and persistent UI state)
06Default mobile device mockup specifications (consistent styling/scale, uniform padding, no edge-clipping, soft shadows, content-first priority)
07Mobile-native layout discipline: safe areas / status bar / home indicator, anti-nested-cards, single-focus hero screens, strict navigation hierarchy
08Legibility-first hierarchy and regeneration loops (strict minimum type scales, text-over-image scrims, mandatory retries for failed screens)

4Recommended Governance & Evidence

Suggested Controls for Safe Operation
For Agent Runtime
Can be auto-loaded
For Administrators
Register source and version
Evidence & Triggers (File Paths & Excerpts)
  • SKILL.md: Pure prompt directives and rule specifications, without script execution or external impact
Audit Notes: Pure prompt-based instruction skill: involves zero script execution, no external network requests, no credential reading, no local filesystem writes, and no external dependencies; all execution occurs strictly within the host environment's image generation channel. It is intrinsically designed for risk reduction—three explicit prohibitions against switching into coding mode guarantee it will not overstep into modifying user code. Considerations primarily involve operational cost and asset utilization: omitting explicit screen counts triggers multi-screen generation by default (potentially generating far more images than anticipated), and generated app interface concepts intended for commercial deployment should be vetted against existing products for unintentional visual resemblance.

5Second-Pass Verification

  • [ok] 『generates images only / does not write code』是否有正文支撑 — 正文三处复述：§CORE DIRECTIVE 'This skill generates images only.' + 'Do not switch into coding mode.'；§36 'Do not write implementation instructions.'；§38 'It should not write code.'。声明与正文一致，甚至比 README 更强。
  • [ok] 外部依赖与网络调用为空 — 全文无 URL、无端点、无包名、无安装命令、无图片源；对比 gpt-taste/taste-skill-v1 会写 picsum.photos，本文件确实零外链。与 imagegen-frontend-web 结论一致。
  • [ok] 档位数值读取是否被我误引（含尾随空格陷阱） — §1 配置行如 '- DESIGN_VARIANCE: 8 '（行尾双空格，markdown 换行）——引文取 '- DESIGN_VARIANCE: 8' 子串，已用脚本逐条校验通过，非凭记忆。
  • [discrepancy] 与 imagegen-frontend-web 的口径差异 — mobile 版正文有显式『禁编码模式』禁令，web 版正文没有（web 仅把可编码当质量标准）。同一仓库两个姊妹 skill 对同类边界措辞不一致；推测因 mobile 更易被误当成可实现 UI 规格。不影响本 skill 结论，但跨 skill 混用时会表现出不同的越界倾向，已记录。
  • [ok] 是否与 brandkit/web 的职责重叠 — §CORE DIRECTIVE 明列 out of scope：websites、landing pages、desktop dashboards、image-to-code、frontend implementation、code generation；llms.txt 亦分工为 mobile screens vs website comps vs brand boards，三者无重叠。
  • [ok] 是否有隐藏脚本、混淆内容或载荷 — 纯 markdown；grep exec/subprocess/bash/python/npm install/base64 等零命中；代码块内容均为 UI 描述性清单，无可执行片段。
  • [ok] 元数据（license / stars / last_push / 路径 / commit） — gh api：MIT、87309 stars、pushed_at 2026-08-24T15:23:56Z；git ls-files 确认 skills/imagegen-frontend-mobile/SKILL.md；HEAD == origin/main == ccbc15639c97057cbfcf32ecebc38ef716e4bb37。

6Verdict & Scenarios

  • Rigid boundaries: explicitly forbids entering coding mode across three distinct sections, flatly refusing to turn app visual mockups into code tasks (specifying six out-of-scope boundaries).
  • Disciplined volume and UX flow: screen counts only increase never decrease, and screens must maintain causal continuity, eliminating 'single-shot compromises' and 'disconnected pretty pictures'.
  • Consistency anchored in a design bible attribute matrix rather than vague adjectives, keeping multi-screen sets cohesive across 5+ screens as a single unified product.
  • Codifies mobile-specific ergonomic realities: safe areas, status bars, home indicators, 44px touch targets, balanced frame margins, minimum legible font sizes, and gradient scrims over imagery.
  • Reflexive quality assurance: 20 mandatory regeneration triggers + 27 self-audit checks that explicitly reject mediocre first drafts; zero external runtime dependencies, fully functional offline.
    • Best for: Early visual exploration for mobile products: concept mockups for iOS/Android/cross-platform apps, onboarding and auth user flows, and multi-screen pitch decks for investors; indie developers and design teams requiring legible, cohesive, review-ready app interface visuals; visual-first prep before handing designs off to engineering implementations (React Native / SwiftUI / Flutter); users working through image channels like ChatGPT Images who need to suppress default failure modes such as 'single-screen minimal effort' or 'overbearing mockup frames'.
    Not for: Web pages and landing pages (use imagegen-frontend-web); brand identity and logo systems (use brandkit); functional desktop dashboards and multi-step desktop product UI specifications; tasks requiring production SwiftUI/RN/Flutter code output (this skill strictly refuses to enter coding mode); cost-sensitive single-token workflows looking for a quick rough vibe check; formal design deliverables requiring pixel-exact repeatability and design token handoff (text-to-image randomness cannot be deterministically locked, and the skill does not output token/spec files).
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload imagegen-frontend-mobile.tar.gz
    sha256: da0e5342b7f8896a…
    Option B · Copy Guide for Agent
    install.json
    Agents automatically download and verify mirrors from this JSON guide.
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit ccbc15639c.