Generate mobile product prototypes that follow structured enterprise mobile UI rules through reusable page patterns, component semantics, and interaction guidance. Use when Codex needs to create mobile UI mockups, wireframes, Figma prompts, or frontend code for list pages, detail pages, forms, cards, bottom action areas, tab-based views, and app-style operational workflows.
Generate mobile interfaces that feel structured, practical, and product-ready rather than generic or overly decorative.
Treat this skill as a mobile UI rules layer. Reproduce mobile page structure, component semantics, visual hierarchy, and interaction patterns through reusable guidance rather than any specific unpublished implementation.
Before generating a mobile prototype, first check whether the request contains enough information to support a strong mobile screen structure.
Important inputs include:
If several of these are missing, do not jump directly into screen generation. First switch to clarification mode.
When available, follow the intake behavior used by demo-intake-skill.
If that skill is not available, apply the same clarification behavior locally:
If the request is already sufficiently clear and the platform is mobile, proceed directly to generation.
Follow this sequence:
If requirements are incomplete, infer the most likely mobile pattern instead of blocking:
When the user wants the prototype to feel close to a mature mobile design system, organize the UI using these semantics:
Base*: foundational mobile UI patterns such as nav bars, form controls, cards, lists, tabs, drawers, and popupsBusiness*: domain-aware controls such as entity selectors, date ranges, category selectors, or structured filtersStandard*: reusable mobile sections such as search areas, action bars, card lists, state blocks, and fixed bottom actionsUse this mental model:
Base* for core page containers and primitive interactions.Business* for domain-aware inputs and workflows.Standard* for repeatable mobile page sections.Common mobile-feeling examples:
Prefer vertical flow, clear rhythm, and stable content blocks.
Common mobile page structures:
List page:
Detail page:
Form page:
Use calm, product-oriented mobile styling.
Avoid:
Use a restrained mobile palette.
Color usage rules:
Use compact and readable mobile typography.
Avoid:
Use compact-to-medium spacing suitable for mobile.
Shape rules:
Use a clear mobile action hierarchy.
Button hierarchy:
Button usage:
Button states:
Forms should feel natural on mobile.
Prefer:
Lists and cards are primary mobile patterns.
Mobile interactions should feel explicit and efficient.
Feedback:
Every meaningful mobile page should account for state:
Empty states should be useful and not overly decorative.
Match the user’s requested medium.
If generating a prototype or design brief:
If generating frontend code:
If generating Figma prompts:
Do not imply technical dependency on unpublished implementation details.
Focus on reproducing visible mobile design language, interaction conventions, and structural rules through generic components and clear interface guidance.
Use this structure when you need to restate the design intent inside the task:
Generate a mobile enterprise-style prototype with compact spacing, neutral surfaces, clear action hierarchy, grouped content sections, explicit loading and empty states, and practical app-like interactions.
Read mobile-page-patterns.md when the task needs concrete mobile page archetypes and prompt snippets. Read mobile-ui-spec.md when the task needs more explicit color, button, form, card, and interaction rules.