mcpField
M
mobile-app

mobile-app

github.com/nexu-ioDesign & UI9.3k39 installsUpdated 2w ago
Repository

About mobile-app

A design skill for a single-screen mobile app layout shown inside an iPhone 15 Pro frame. It specifies the status bar, app header, main content, bottom tabs, Dynamic Island, and safe-area spacing.

Key features

  1. 01iPhone 15 Pro frame
  2. 02Status bar and app header
  3. 03Feed, list, detail, or form layout
  4. 04Four-to-five-item bottom tab bar
  5. 05Dynamic Island and safe-area spacing

Use cases

  1. 01Designing a single-screen mobile app
  2. 02Creating an iPhone 15 Pro mockup

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/nexu-io/html-anything --skill mobile-app

After installing, type/mobile-appin Claude Code to confirm it loaded.

Bundled filesexample.html

Details

From the project README

【模板: iPhone 单屏 App】 【意图】一个屏幕的 mobile app 设计, 放在像素级 iPhone 15 Pro frame 里。 【布局】

  • Status bar (时间 + 电池 + 信号)
  • App header (标题 / 头像 / 搜索)
  • Main content (一个清晰的 archetype: feed / list / detail / form)
  • Bottom tab bar (4-5 tab) 【设计细节】
  • 真实的 dynamic island; safe-area 留白

Comments

Markdown supported