Skip to content
Get packs

Mobile App Screen Mockup

Design a single mobile app screen shown inside a realistic iPhone 15 Pro frame

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
5 files

What it does

When installed, the agent builds one phone-app screen as a standalone HTML page. It starts from a ready-made template that already draws an iPhone 15 Pro frame (Dynamic Island, status bar, home indicator, tab bar), picks one of six common screen layouts such as a feed, detail page, onboarding, profile, checkout, or single-metric focus card, and fills it with copy from your brief using a design system's colours and fonts. It also runs a self-check against a written checklist before delivering the file.

Great for

  • Designers who want a quick, realistic phone mockup to share or review
  • Developers prototyping a mobile screen before building it in code
  • Product teams exploring one screen concept from a written brief

Skip it if

  • Full multi-screen app flows or clickable prototypes, since the skill explicitly limits output to one screen with one job
  • Production iOS or Android code, because it outputs HTML mockups rather than native app code
  • Work that needs real external images, as the skill forbids them and uses placeholders instead

Try asking

  • “Make a mobile app screen for a recipe detail page with a save button”
  • “Create an iOS onboarding screen with a welcome message and sign-up button”
  • “Design a phone screen showing a banking account profile”
Step-by-step guide: how to use Mobile App Screen MockupInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 5 original files, the Apache-2.0 licence and an attribution note.

    mobile-app.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip mobile-app.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip mobile-app.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name the single job of the screen clearly in your brief, such as 'checkout' or 'feed', so the right layout is chosen
  • Provide a DESIGN.md or colour and font choices so the template tokens match your brand
  • Ask for one screen at a time; request follow-up screens separately

What's inside

  • assets/template.html
  • example.html
  • references/checklist.md
  • references/layouts.md
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.