Skip to content
Get packs

iPhone App Screen Mockup

Generates a single iPhone 15 Pro app screen mockup in HTML with status bar, header, content and tab bar

Source Download skill
Repository
nexu-io/html-anything
Stars
9,376
Licence
Apache-2.0
Files
2 files

What it does

When this skill is installed, the agent can turn a description of a mobile app into a single HTML page showing one iPhone 15 Pro screen. The screen is drawn inside a realistic phone frame with a status bar, dynamic island, app header, a main content area (such as a feed, list, detail page or form) and a bottom tab bar with 4-5 tabs. The bundled example.html shows the expected output style.

Great for

  • Designers who want a quick visual concept of a mobile app screen
  • Product managers preparing a mockup for a pitch or review
  • Developers who need a placeholder iOS-style screen for a prototype

Skip it if

  • Production app code: the output is a static HTML picture, not a working iOS app, and it is not built with native iOS tools
  • Exact brand or pixel-perfect handoff to engineers, since the layout is a generic template

Try asking

  • “Make an iPhone screen mockup of a recipe-sharing app with a feed and bottom tab bar”
  • “Design a single iPhone 15 Pro screen for a fitness tracker's detail page”
  • “Create a mobile login form screen in an iPhone frame for my app idea”
Step-by-step guide: how to use iPhone App Screen MockupInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 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 screen type you want (feed, list, detail or form) so the layout matches your intent
  • Mention your app's main colours or brand style to get closer to your look
  • Open the generated HTML in a browser to view it at full size

What's inside

  • example.html
  • SKILL.md

Redistributed unmodified from nexu-io/html-anything 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.