Mobile High-Fidelity App Prototype Generator

Problem

Product managers or front-end engineers often need a quick mobile app prototype that shows visual direction, page hierarchy, and key interactions. Static mockups struggle to demonstrate login, tab switching, and modals, while generic front-end templates may leave placeholders, emoji icons, horizontal scrollbars, and hard-to-maintain code. Before reviews, usability tests, or development kickoff, teams need a mobile prototype that can be opened directly and modified later.

How It Works

The skill follows a ROSES-style workflow: confirm the app name, English directory name, and visual tone, then move through planning, design, development, and delivery. It produces an index.html phone-shell container plus login.html, home.html, discover.html, and profile.html; pages switch via iframe, with index.html as the outer shell and shared/ holding common styles and scripts. It uses Tailwind CSS for layout, FontAwesome for icons, and adds interactions such as ripple animation, hover states, page transitions, and modals. The process emphasizes real images, behavior/structure separation, addEventListener bindings, and final checks for styling, layout, image reachability, icon hygiene, and author attribution.

Boundaries

It is intended for iOS-style high-fidelity front-end prototypes and demos, not production systems: login and other interactions are simulated, without backend, authentication, performance, or security hardening. Confirm the theme, image licensing, and target directory before use; for external demos, also replace author attribution, QR codes, and brand assets.