What types of screens can I create with this skill?

You can create screens for various app types using six predefined archetypes: Feed, Detail, Onboarding, Profile, Checkout, and Focus.

Do I need design skills to use this skill?

While some familiarity with design principles is helpful, the skill is designed to simplify the mockup process, making it accessible even for those with limited design experience.

Can I customize the templates provided?

Yes, you can replace the design tokens in the template with your own design system's tokens to match your branding.

Is this skill suitable for creating multi-screen app flows?

No, this skill is focused on generating a single screen mockup. For multi-screen flows, consider using additional tools or skills.

How do I ensure my mockup meets design standards?

Follow the self-review checklist provided in the skill to verify that your mockup adheres to key design principles before finalizing.

Mobile App Mockup

Name: Mobile App Mockup
Availability: InStock
Author: nexu-io

Free

Create pixel-perfect mobile app screens in an iPhone frame.

by nexu-io84.9k stars on nexu-io/open-design

13 views

Updated Aug 10, 2026

Get this skill

Free · Opens the source repo

What Mobile App Mockup does

The Mobile App Mockup skill allows designers and developers to produce a single mobile app screen mockup framed within an accurately rendered iPhone 15 Pro device. This skill is particularly useful for those who need to visualize app interfaces in a realistic context, enhancing presentations or design reviews. By leveraging an existing template and predefined screen archetypes, users can quickly generate mockups without the need for extensive design work.

To get started, users must first familiarize themselves with the provided assets/template.html, which contains the necessary HTML and SVG elements to create a realistic device frame. The skill includes a set of six screen archetypes detailed in references/layouts.md, allowing users to select the most appropriate layout for their specific needs. This structured approach ensures that the resulting mockup adheres to best practices in mobile design, focusing on clarity and usability.

Once the template is copied and the design tokens are mapped, users can choose an archetype that fits their app’s purpose—be it a feed, detail view, onboarding screen, or others. The skill emphasizes the importance of delivering a single, focused screen that effectively communicates the app's functionality, making it an excellent tool for designers looking to streamline their workflow.

Finally, the skill includes a self-review checklist in references/checklist.md, ensuring that all key design elements are in place before finalizing the mockup. This thorough process not only saves time but also enhances the quality of the output, making it a valuable addition to any designer's toolkit.

When to use it

Use this skill when you need to create a quick, realistic mockup of a mobile app screen for presentations or design iterations.

When not to use it

This skill may not be suitable for complex app flows or multi-screen designs, as it focuses on single screen outputs only.

What you can build with it

Creating a Quick Mockup for Client Presentation

Use the Mobile App Mockup skill to generate a polished screen mockup to present to clients, showcasing the app's intended design.

Prototyping for User Testing

Rapidly create a mobile screen mockup to test user interactions and gather feedback before full development begins.

Design Iteration for App Features

Easily iterate on app features by producing mockups of different screens based on user feedback or design changes.

How to install Mobile App Mockup

View source

1. Install with the skills CLI

npx skills add nexu-io/open-design/mobile-app --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by nexu-io

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.html end-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.md so you know which 6 archetypes exist.
Read the active DESIGN.md — map its tokens to the six :root variables 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.

Step 2 — Pick exactly one archetype

Brief language	Use
feed, inbox, timeline, list, messages, notifications	A — Feed
article, post, item, recipe, song, product, song detail	B — Detail
sign-up, welcome, intro, walkthrough, tour	C — Onboarding
profile, account, user page, someone's bio	D — Profile
checkout, payment, order, form, settings step	E — Checkout
timer, map, dashboard widget, single big number	F — Focus / hero card

A mobile screen does one job. If the brief seems to combine two, ship one screen and offer the other as a follow-up.

Step 3 — Paste and fill

Copy the archetype block from layouts.md into <main class="content">, replacing the placeholder card. Fill bracketed text with real, specific copy from the brief. Drop the <nav class="tabbar"> block entirely for archetypes that don't show one (B, C, E).

Step 4 — Self-check

Run through references/checklist.md. Pay extra attention to:

Frame still has the Dynamic Island, status bar SVGs, and home indicator
Tap targets ≥ 44px
One accent, used ≤ 2× on the screen
Display headings still use var(--font-display) (serif)

Step 5 — Emit the artifact

<artifact identifier="mobile-slug" type="text/html" title="Mobile — Screen Name">
<!doctype html>
<html>...</html>
</artifact>

One sentence before describing what's there. Stop after </artifact>.

Hard rules

The phone is real. Dynamic Island gap, SVG status icons, home indicator. The seed protects all three — don't rewrite the frame.
Single screen, single job. No multi-tab tours, no spliced flows.
Accent budget = 2. One active tab + one primary action is the default.
Numerics in mono via .num class.
Display in serif via var(--font-display).
No external images — use .ph-img placeholders.

Frequently asked questions about Mobile App Mockup

Similar skills

Penpot UI/UX Design

Create professional UI/UX designs in Penpot with ease.

UX Theming

Streamline your VS Code theming process with best practices.

Wireframe

Create low-fidelity UI wireframes in SVG format.

Waitlist Page

Create a clean, focused pre-launch landing page.

Hallmark

Design skill for creating unique, structured UIs.

UI Styling

Create beautiful, accessible user interfaces effortlessly.