skills.rest
LucasOl1337
LucasOl1337COMMUNITY
Explore all skills by this author →
WebsiteGitHub

mobile-app

Generate mobile UI mockups inside an iPhone 15 Pro frame scaffold.

Updated Aug 23, 2026
Search Tags:#archetypes#prototype#layouts#mockup#mobile-app#device-frame
One-click install
npx skills add https://github.com/LucasOl1337/simple-ai --skill mobile-app-lucasol1337
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-app
Source: https://github.com/LucasOl1337/simple-ai/tree/main/DesignTemplates/embedded/open-design/skills/mobile-app
Command: npx skills add https://github.com/LucasOl1337/simple-ai --skill mobile-app-lucasol1337

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Mobile UI prototyping often requires assembling a believable device frame and layout scaffolds from scratch. This Skill provides a ready-to-use pixel-accurate iPhone 15 Pro frame scaffold and a library of archetypes to rapidly generate UI mockups that match briefs for mobile apps.

Core Features & Use Cases

  • Pixel-accurate device frame: dynamic island, status bar, and home indicator preserved by a seed HTML.
  • Archetype-driven mockups: choose from six archetypes in references/layouts.md (Feed/Detail/Onboarding/Profile/Checkout/Focus) and paste into index.html.
  • Seeded template workflow: use assets/template.html as the starting point, replace tokens, and paste content from a brief to produce a finished screen mockup.
  • Live preview-ready artifacts for stakeholder reviews and design critique.

Quick Start

Copy assets/template.html to the project root as index.html, then paste one archetype block from references/layouts.md into the main content and adjust copy to match the brief.

Frequently Asked Questions about mobile-app

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

FAQPage Schema
How do I mock up a mobile app screen inside a device frame?▼

To mock up a mobile app screen inside a device frame, copy the provided HTML template to your project root and paste a chosen layout archetype from the reference library into the main content area. This produces a pixel-accurate iPhone 15 Pro scaffold for your UI.

What layouts are available for mobile UI prototyping?▼

Available layouts for mobile UI prototyping include six archetypes: Feed, Detail, Onboarding, Profile, Checkout, and Focus. You select an archetype block and paste it into your HTML template to quickly establish a screen structure.

Can I use this to prototype iOS app UI for stakeholder reviews?▼

Yes, you can prototype iOS app UI for stakeholder reviews by generating live preview-ready HTML artifacts. The device frame preserves dynamic island, status bar, and home indicator details for accurate presentation.

Do I need any external design dependencies to create phone-screen mockups?▼

No external design dependencies are required to create phone-screen mockups. The workflow relies entirely on a seeded HTML template and markdown layout references to generate the starter scaffold.

What is the best way to start mobile screen prototyping for multiple app concepts?▼

The best way to start mobile screen prototyping for multiple app concepts is selecting from six layout archetypes. Pasting these blocks into the seed HTML template accelerates UI exploration across different phone-screen briefs.

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
TheTesseractAITheTesseractAI

mockup-sandbox

Create isolated React component previews via a Vite dev server.

Community
Intermediate
richardnguyen0715richardnguyen0715

sketch

Generate disposable HTML mockups with interactive elements for UI/UX comparison.

Community
Intermediate
Exia-thdExia-thd

ui-designer

Generate WCAG AA-compliant wireframes, design tokens, and component inventories for digital products.

Community
Advanced