mobile-app

Name: mobile-app
Availability: InStock
Author: az9713

Render mobile UI mockups inside a pixel-accurate iPhone frame.

Updated May 2, 2026

Search Tags:#archetypes #design-system #ui-mockup #mobile-app #design-prototype #seed-template #iphone-frame

Ready to run

npx skills add https://github.com/az9713/open-design-tutorial --skill mobile-app-az9713

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: mobile-app
Source: https://github.com/az9713/open-design-tutorial/tree/main/skills/mobile-app
Command: npx skills add https://github.com/az9713/open-design-tutorial --skill mobile-app-az9713

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Render mobile UI mockups inside a pixel-accurate iPhone frame to speed up design validation.

Core Features & Use Cases

Seed-driven scaffolding: copy assets/template.html to index.html, replace design tokens with your design system, and paste a chosen archetype from references/layouts.md.
Real-device framing: preserves Dynamic Island, status bar, and home indicator for authentic previews.
Archetype library: 6 screen archetypes (Feed, Detail, Onboarding, Profile, Checkout, Focus) to cover common mobile interfaces.

Quick Start

Copy assets/template.html to index.html, replace the six :root tokens with your design system, and paste one archetype from references/layouts.md into the main content.

Frequently Asked Questions about mobile-app

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

FAQPage Schema

How do I prototype mobile UI mockups inside an iPhone frame?▼

You can prototype mobile UI mockups by copying the seed template HTML, replacing the design tokens with your design system, and pasting a chosen archetype from the layouts reference to generate an exportable HTML artifact.

What mobile UI archetypes are available for design validation?▼

The available mobile UI archetypes include Feed, Detail, Onboarding, Profile, Checkout, and Focus, covering common mobile interfaces for design reviews, client demos, and portfolio previews.

Can I use my own design system tokens with the mobile UI template?▼

Yes, you can integrate your design system by replacing the six root CSS variables in the template HTML with your active design tokens before pasting the layout archetype.

What is the best way to create authentic mobile app previews for client demos?▼

The best way to create authentic app previews is rendering UI mockups inside a pixel-accurate iPhone frame that preserves the Dynamic Island, status bar, and home indicator for realistic validation.

Do I need any external dependencies to generate mobile UI prototypes?▼

No external dependencies are required; you only need the seed template, the layouts archetypes reference, and your active design tokens to generate exportable HTML artifacts.

How does the seed template scaffolding work for mobile app design?▼

Seed-driven scaffolding works by copying the template HTML to a new index file, applying your design tokens, and inserting layout archetypes to accelerate mobile design validation.