skills.rest
PiercingXX
PiercingXXCOMMUNITY
Explore all skills by this author →
GitHub

mobile-app

Generate pixel-accurate iPhone 15 Pro framed HTML mockups from DESIGN.md tokens.

1|Updated Jul 9, 2026
Search Tags:#design system#artifact generation#mobile ui#typography tokens#iphone frame#archetype layout#html mockup
One-click install
npx skills add https://github.com/PiercingXX/xx-stack --skill mobile-app-piercingxx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-app
Source: https://github.com/PiercingXX/xx-stack/tree/main/packs/design/runtime/skills/design/mobile-app
Command: npx skills add https://github.com/PiercingXX/xx-stack --skill mobile-app-piercingxx

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

It removes the guesswork and inconsistency of designing mobile UI mockups by producing a pixel-accurate iPhone 15 Pro framed screen that matches the active design system.

Core Features & Use Cases

  • Device-accurate screen rendering: Creates a single mobile-app screen inside a real-feeling iPhone 15 Pro frame using the provided seed so the frame, Dynamic Island, status bar, and home indicator stay correct.
  • Archetype-driven layout selection: Selects exactly one of six screen archetypes (Feed, Detail, Onboarding, Profile, Checkout, Focus) to avoid fake-looking spliced flows.
  • Design-token alignment: Maps the active DESIGN.md tokens into the template’s root variables so typography, spacing, and components match the design system.
  • Artifact emission for review: Outputs an HTML artifact suitable for downstream review and embedding.

Quick Start

Ask the skill: “Create a mobile app mockup for an iOS feed screen of ‘Dev updates’ using the active design system 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 pixel-accurate mobile UI mockup for an iOS app?▼

Yes, you can create checkout mobile UI mockups by selecting the Checkout archetype from the references. It applies your design system typography and spacing tokens to generate a pixel-accurate HTML screen inside an iPhone 15 Pro frame.

What screen layouts are available for HTML mockup generation?▼

Available HTML mockup layouts include Feed, Detail, Onboarding, Profile, Checkout, and Focus screen archetypes. Each archetype provides a distinct layout structure to ensure the mobile UI matches standard application patterns.

How do I apply design system typography tokens to a mobile app screen?▼

To align the mobile UI mockup with your design system, copy the seed template, map your DESIGN.md typography and spacing tokens to the template's root variables, and select an archetype layout from the references file to generate the HTML artifact.

Can I use this skill to mock up Android app screens or is it limited to iOS?▼

The skill generates mobile app screen mockups for both iOS and Android briefs, but renders the final HTML artifact inside an iPhone 15 Pro frame. This ensures device-accurate rendering of the status bar and home indicator for your UI design.

Does mobile mockup generation require copying seed assets or template files?▼

Yes, you must copy the seed assets and template.html before generating the mobile UI mockup. This provides the correct iPhone 15 Pro frame structure and allows the skill to map your design tokens to the template's root variables.

What is the best way to create a single focus screen for a mobile app design?▼

Use the Focus archetype layout reference to generate a single-hero mobile UI screen. This approach avoids fake-looking spliced flows by rendering one pixel-accurate screen inside an iPhone 15 Pro frame using your active design tokens.

Related Skills

Explore More Design & Creative Skills→
maleksaadi0109maleksaadi0109

design-md

Analyze Stitch projects to generate a semantic DESIGN.md design system file.

Community
Advanced
rittmananalyticsrittmananalytics
8

looker-dashboard-mockup

Generate self-contained HTML Looker dashboard mockups with Chart.js.

Official
Intermediate
kubonykubony
10

gcp-vm-create

Provision Google Cloud Platform virtual machines with firewall configuration.

Community
Advanced
pipixia-labspipixia-labs
38

mobile-app

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

Official
Intermediate