mobile-app

Name: mobile-app
Availability: InStock
Author: maccio-huang

Generate HTML mobile app UI mockups inside an iPhone 15 Pro frame.

Updated May 11, 2026

Search Tags:#design system #prototype #UI design #iPhone #mobile app

Ready to run

npx skills add https://github.com/Maccio-huang/opendesign --skill mobile-app-maccio-huang

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: mobile-app
Source: https://github.com/Maccio-huang/opendesign/tree/main/skills/mobile-app
Command: npx skills add https://github.com/Maccio-huang/opendesign --skill mobile-app-maccio-huang

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires , and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides a rapid and accurate way to render mobile app UIs within a pixel-accurate iPhone frame, making it easier to visualize designs and UI elements.

Core Features & Use Cases

Prototype Rendering: Generate mobile app screen mockups in a real iPhone 15 Pro frame.
Design System Integration: Supports integration with active design systems, ensuring consistency.
Use Case: Designers can use this Skill to quickly create a mockup of a mobile app UI based on a provided brief, using pre-defined archetypes and design tokens.

Quick Start

To create a mobile app mockup, provide the name of the screen archetype and the active design system's tokens.

Frequently Asked Questions about mobile-app

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

FAQPage Schema

How do I generate a mobile app UI mockup within an iPhone frame?▼

To generate a mobile app UI mockup within an iPhone frame, provide the desired screen archetype and your active design system tokens. The tool then renders a pixel-accurate HTML-based visual mockup directly inside an iPhone 15 Pro frame.

What is pixel-accurate mobile app prototype rendering?▼

Pixel-accurate mobile app prototype rendering is the process of creating visual UI mockups scaled precisely to real device dimensions. This approach ensures your design elements match exact hardware specifications within an iPhone frame for accurate visualization.

Can I use my existing design system tokens to create a mobile app UI?▼

Yes, you can use your existing design system tokens to create a mobile app UI. The tool supports design system integration by accepting your specific tokens as input to ensure visual consistency across all generated prototype screens.

What do I need to render a mobile app screen mockup?▼

To render a mobile app screen mockup, you need to specify a screen archetype and provide design system tokens. The rendering engine utilizes a template and layout references to process your input into a visual output.

What is the best way to visualize a UI design for an iPhone?▼

The best way to visualize a UI design for an iPhone is using a dedicated rendering tool that outputs HTML mockups within a pixel-accurate device frame. This ensures your design fits the exact hardware dimensions of an iPhone 15 Pro.