skills.rest
Maccio-huang
Maccio-huangCOMMUNITY
Explore all skills by this author →
GitHub

mobile-app

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
One-click install
npx skills add https://github.com/Maccio-huang/opendesign --skill mobile-app-maccio-huang
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
asnar00asnar00
1

iphone-screen-capture

Mirror a connected iPhone's screen on macOS via a Swift app.

Community
Advanced
campbellmcgregorcampbellmcgregor

design-assistant

Create UI/UX mockups, wireframes, and visual designs in React, HTML, or SVG.

Community
Basic
pipixia-labspipixia-labs
38

mobile-app

Generate mobile app screen mockups in a device frame from seed templates.

Official
Intermediate
Mohamed-ElkahefMohamed-Elkahef

sleek-design-mobile-apps

Generate mobile app UI screens from plain-language descriptions via Sleek REST API.

Community
Advanced