Most AI UI workflows jump from a prompt to one polished-looking answer. Mobile Design OS makes choice part of the design process: it frames the product, creates three like-for-like visual directions, waits for your selection, then carries the chosen direction into flows, screens, states, design rules, prototypes, and implementation handoff.

Install Mobile Design OS

npx skills add Xinvtech/mobile-design-os --skill '*'

Then start with a product idea:

Use $mobile-design-os to design an app for recording coffee flavors and brewing parameters.
Show me three distinct visual directions first. Continue with the core screens after I choose one.

The command installs the complete system. You only need to invoke the $mobile-design-os flagship entry point; it routes the work to the installed specialist skills when needed.

See what it can make

Explore the live showcase at xinvtech.github.io/mobile-design-os.

How it works

  1. Describe the product — start with one sentence, reference images, an existing brief, or an old interface.
  2. Compare three directions — see the same product content and flow expressed through three distinct visual systems.
  3. Choose, then continue — lock the direction you prefer before expanding it into screens, interaction states, prototypes, and handoff artifacts.

What continues after the first screen

  • Product framing with users, context, goals, MVP boundaries, and trust decisions.
  • Reference-led visual exploration instead of an ungrounded style lottery.
  • Core flows, empty states, failures, recovery paths, and platform behavior.
  • Reusable color, typography, token, component, and interaction rules.
  • Clickable prototype, design review, and optional Flutter-oriented developer handoff.

Why believe it

  • 12 composable skills cover the path from product brief to design review and code handoff.
  • 57 regression tests check metadata, structured artifacts, validators, package integrity, prototype behavior, and cross-stage consistency.
  • Four public case studies show different product categories and visual personalities.
  • Evidence stays honest: generated screenshots do not claim device, accessibility, persistence, or production proof that has not been run.
  • MIT licensed and fully inspectable.

Install options

Choose skills and an installation target interactively:

npx skills add Xinvtech/mobile-design-os

Install only an individual specialist when you do not need the end-to-end workflow, for example:

npx skills add Xinvtech/mobile-design-os --skill analyze-mobile-ui

Included skills

Skill Purpose
mobile-design-os Main entry point that selects the appropriate design workflow
mobile-reference-research Research and compare real products, guidelines, and references
analyze-mobile-ui Extract Design DNA from screenshots and first-party evidence
mobile-product-brief Turn a product idea into a clear product brief
mobile-ux-architect Define objects, flows, screens, and recovery paths
mobile-wireframe Establish hierarchy, content pressure, and low-fidelity structure
mobile-ui-design Generate three visual directions and expand the selected one
mobile-design-system Create reusable design tokens and component rules
mobile-prototype Build critical flows and a clickable browser prototype
mobile-platform-guidelines Review iOS, Android, and device behavior
mobile-design-review Critique the design and document risks and improvements
mobile-design-to-code Produce developer handoff, with Flutter as the default target

Example projects

These are design and workflow examples, not screenshots of released applications.

Validate the repository

python3 -m pip install -r requirements.txt
python3 -m unittest discover -s tests -q

For detailed engineering notes, see the Distribution Guide and Release Readiness.

Public preview boundary

Mobile Design OS is ready to use as an open public preview. Its repository tests pass, but independent blind-run evidence, physical-device validation, accessibility testing, and production-app proof are still being expanded. Treat generated UI and handoff artifacts as design work to review—not as evidence that an application has shipped or passed device testing.

Showcase website

cd website
npm install
npm run dev

The production build is generated with npm run build.

License

Mobile Design OS is open source under the MIT License.

Designed and maintained by Xinvtech.