skills.rest
az9713
az9713COMMUNITY
Explore all skills by this author →
GitHub

mobile-app

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
One-click install
npx skills add https://github.com/az9713/open-design-tutorial --skill mobile-app-az9713
Or copy as Structured Prompt for Agent▼
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.

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
nexu-ionexu-io
8.2k

prototype-web

Create interactive HTML prototypes from modular templates for product flows.

Official
Intermediate
tunneleventunneleven

c4flow:design

Generate design systems and UI mockups for specified features.

Community
Basic
CellCogCellCog
6

proto-cog

Translate design briefs into interactive HTML prototypes with working navigation and states.

Official
Advanced