skills.rest
nexu-io
nexu-ioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

mobile-app

Generate pixel-accurate iPhone 15 Pro mobile-app screen mockups from archetypes.

84.7k|9.9k|Updated Apr 28, 2026
Search Tags:#archetypes#prototype#ui-design#design-system#mockup#mobile-app#device-frame
One-click install
npx skills add https://github.com/nexu-io/open-design --skill mobile-app-nexu-io
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-app
Source: https://github.com/nexu-io/open-design/tree/main/skills/mobile-app
Command: npx skills add https://github.com/nexu-io/open-design --skill mobile-app-nexu-io

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Generates realistic, pixel-accurate mobile-app screen mockups inside a device frame, accelerating design validation and client previews.

Core Features & Use Cases

  • Pixel-accurate iPhone frame embedding for authentic mobile-screen mockups.
  • Seed-based workflow using assets/template.html and archetypes from references/layouts.md.
  • Real-copy insertion into predefined archetypes to match brief requirements.

Quick Start

Copy assets/template.html to index.html, replace tokens with your design system, and paste an archetype block 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 create pixel-perfect mobile-app mockups inside an iPhone frame?▼

Pixel-perfect mobile-app mockups are generated by copying the assets/template.html seed, injecting real copy into a selected archetype block from references/layouts.md, and preserving the iPhone 15 Pro device frame elements.

Can I use this to prototype iOS app interfaces with real copy?▼

Yes, prototyping iOS app interfaces involves selecting an archetype from references/layouts.md and injecting real copy into the assets/template.html seed to match brief requirements for mobile app screens.

What do I need to start generating mobile screen mockups?▼

Starting mobile screen mockup generation requires copying the assets/template.html seed and pasting a predefined archetype block from references/layouts.md into the main content area.

Does the mobile-app frame template preserve the Dynamic Island and status bar?▼

The mobile-app frame template preserves the Dynamic Island, status bar, and home indicator while rendering content inside the pixel-accurate iPhone 15 Pro device frame.

What is the best way to validate mobile UI design for client previews?▼

Validating mobile UI design for client previews is best achieved by generating realistic, pixel-accurate mobile-app screen mockups inside an iPhone 15 Pro device frame to accelerate design validation.

Can I apply this to Android phone screen mockups or is it iOS only?▼

While the template embeds an iPhone 15 Pro device frame, it can be applied to briefs mentioning Android app interfaces or phone screens by injecting real copy into the predefined archetype blocks.

Related Skills

Explore More Design & Creative Skills→
pipixia-labspipixia-labs
38

mobile-app

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

Official
Intermediate
mosif16mosif16
18

software-mobile

Guide iOS, Android, and cross-platform mobile app development patterns.

Community
Advanced
az9713az9713

mobile-app

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

Community
Intermediate
Clos01Clos01
3

mobile-app

Generate mobile app screen prototypes inside device frames from HTML templates.

Community
Advanced