mobile-app
Best for Design prototypesWorks with GitHubLow risk
⌘source
- author
@nexu-io- language
- TypeScript
★3.7kstars
455forks
Apr 29, 2026
✦overview.md
Key Features
- ·iPhone 15 Pro device frame
- ·6 screen archetypes (Feed, Detail, Onboarding, Profile, Checkout, Focus)
- ·Pixel-accurate HTML/SVG frame
- ·Step-by-step workflow with pre-flight instructions
- ·Self-review checklist for anti-fake-device
- ·Design system requirements (color, typography, layout, components)
Use Cases
- →Mock up a mobile app screen for a client pitch
- →Design an app UI prototype for user testing
- →Create a pixel-accurate app screen for a design review
Best for
- ✓Design prototypes
- ✓Mobile app mockups
- ✓UI designers
Not ideal for
- !Production-ready code
- !Interactive apps
- !Backend integration
FAQs
name
mobile-app
description
A mobile-app screen rendered inside a pixel-accurate iPhone 15 Pro frame
on the page. Built by copying the seed `assets/template.html` and pasting
one screen archetype from `references/layouts.md`. Use when the brief asks
for "mobile app", "iOS app", "Android app", "phone screen", or "app UI".
triggers:["mobile app","ios app","android app","phone screen","app ui","app mockup","移动端","手机 app"]
od:{"mode":"prototype","platform":"mobile","scenario":"design","preview":{"type":"html","entry":"index.html"},"design_system":{"requires":true,"sections":["color","typography","layout","components"]}}
Mobile App Skill
Produce a single mobile-app screen mockup, framed inside a real-feeling iPhone 15 Pro device.
Resource map
mobile-app/
├── SKILL.md ← you're reading this
├── assets/
│ └── template.html ← seed: device frame + screen primitives (READ FIRST)
└── references/
├── layouts.md ← 6 screen archetypes (Feed / Detail / Onboarding / Profile / Checkout / Focus)
└── checklist.md ← P0/P1/P2 self-review (anti-fake-device)
Workflow
Step 0 — Pre-flight
- Read
assets/template.htmlend-to-end through the<style>block. The Dynamic Island, status bar SVG icons, home indicator, side rails, and tab bar are all already drawn in HTML/SVG — do not re-implement them inline on each screen. - Read
references/layouts.mdso you know which 6 archetypes exist. - Read the active DESIGN.md — map its tokens to the six
:rootvariables in the seed.
Step 1 — Copy the seed
Copy assets/template.html to the project root as index.html. Replace the six :root variables with the active design system's tokens. Replace the page <title> and the caption above the device.
$install
1-click copynpx skills add nexu-io/open-design --skill mobile-appSafety assessment
★
Clarity score
How clear and easy to understand the SKILL.md instructions are, rated from 1 to 5.
4/ 5
very goodClear and well structured, with only minor parts that might need a second read.
◎
Actionability score
How directly an agent can act on the SKILL.md instructions, rated from 1 to 5.
4/ 5
highMostly actionable with clear steps; only a few small gaps remain.