skills.rest
xiaoweidotnet
xiaoweidotnetCOMMUNITY
Explore all skills by this author →
GitHub

mobile-app-mockup

Generates interactive iPhone 15 Pro mockups from product requirement documents using Tailwind CSS and FontAwesome.

22|4|Updated Feb 18, 2026
Search Tags:#html#prototyping#ux design#ui design#mobile app#mockup
One-click install
npx skills add https://github.com/xiaoweidotnet/suifeng-skills --skill mobile-app-mockup
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-app-mockup
Source: https://github.com/xiaoweidotnet/suifeng-skills/tree/main/skills/mobile-app-mockup
Command: npx skills add https://github.com/xiaoweidotnet/suifeng-skills --skill mobile-app-mockup

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and templates (resource) components.

What problem does it solve?

This skill bridges the gap between abstract product requirements and visual reality by automating the creation of high-fidelity, interactive mobile app prototypes.

Core Features & Use Cases

  • Full Pipeline Generation: Automates the entire process from UX analysis and interface planning to UI design and HTML implementation.
  • iOS Fidelity: Produces iPhone 15 Pro-framed prototypes using iOS design language, SF fonts, and standard interaction patterns.
  • Use Case: When you have a PRD or a rough app idea, use this skill to instantly generate a set of linked HTML pages that visualize the user flow, navigation, and visual style for stakeholder review.

Quick Start

Generate a high-fidelity mobile app prototype for the provided travel diary app requirements using the mobile-app-mockup skill.

Frequently Asked Questions about mobile-app-mockup

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a mobile app prototype from a PRD?▼

To generate a mobile app prototype from a PRD, you input your product requirement document and feature descriptions. The skill then executes a multi-stage pipeline including UX analysis and UI design to output interactive HTML screens within an iPhone 15 Pro frame.

What is the best way to visualize user flow for stakeholder review?▼

Visualizing user flow for stakeholder review is best achieved by generating high-fidelity, interactive HTML prototypes. This approach provides a realistic visualization of navigation and visual style directly from your app requirements without manual coding.

Can I create iOS-compliant mobile mockups using Tailwind CSS?▼

Yes, you can create iOS-compliant mobile mockups using Tailwind CSS. The generated prototypes utilize Tailwind CSS for responsive layout and FontAwesome for asset integration, ensuring the output adheres to iOS design language and SF fonts within an iPhone 15 Pro frame.

Does mobile app prototyping require manual UI design steps?▼

Mobile app prototyping does not require manual UI design steps when automating the full pipeline. The process handles UX analysis, interface planning, and UI design automatically to produce interactive HTML pages from your rough app idea or requirement document.

How does automated interface planning work for mobile app mockups?▼

Automated interface planning for mobile app mockups works by analyzing your product requirements to map out navigation and screen layouts. It bridges abstract requirements and visual reality by structuring the user flow before generating the final HTML implementation.

Related Skills

Explore More Design & Creative Skills→
EnigmaWUEnigmaWU
1

facilitate-user-story-mapping

Guide users through creating User Story Maps via structured phases.

Community
Intermediate
nexu-ionexu-io
8.2k

prototype-web

Create interactive HTML prototypes from modular templates for product flows.

Official
Intermediate
apakouapakou

tailwind-chat-ui

Create mobile-first chat UI components with Tailwind CSS.

Community
Intermediate
idiotLeoLYJidiotLeoLYJ
113

vibe-prototype

Map Stitch-generated screens to interaction documentation and validate HTML prototypes.

Community
Advanced