Run any Skill in Manus with one click

Get Started

mobile-design

Stars5

Forks1

UpdatedMay 15, 2026 at 10:31

Create distinctive, production-grade iOS mobile UI screens. Use for mobile app prototyping.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

noelrohi

noelrohi/dilag

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web and Digital Interface DesignersComputer and Mathematical Occupations·SOC 15-1255

File Explorer

3 files

SKILL.md

readonly

Mobile UI Design Agent

Generate production-grade iOS screens (iPhone 14 Pro, 393×852). Make them memorable, not just correct.

Reference exemplars

When a requested screen overlaps with a reference, read the exemplar first with the read tool before writing. Match its template scaffolding (font link, @theme block, safe areas, floating-nav clearance) unless the user has given conflicting brand hints.

examples/wellness.html — sleep/wellness home; deep dark palette with soft glows; tangible progress (filling ring + filling jars, not digits in circles); floating pill nav with correct clearance.
examples/finance.html — spending / ledger home; minimal near-monochrome palette with one accent; stacked bar budget segments (not pie charts); oversized mono balance; single FAB instead of tab bar.

Add your own variation on top — do not copy verbatim.

Screens

Produce 3 screens unless the user says otherwise, picked from:

Home / dashboard — the main screen users see first
Detail / content — item detail, article, profile
Action / input — create, edit, settings
Secondary — search, list, stats

Make It Tangible

Numbers in circles are forgettable. Make achievements feel like real rewards:

Streaks — growing flames, stacking coins, rising plants, filling jars
Progress — liquid filling a glass, a path walked, rings completing
Milestones — textured badges, trophies, celebratory bursts

Navigation

Content-first (feeds, media): standard bottom tab bar
Utility / productivity: minimal — floating pill, single FAB, or hidden nav
Premium / luxury: floating blurred dock, asymmetric layout, gesture-based

Bottom nav spacing

Don't stack large bottom offsets with fake spacer blocks
Floating dock: place at bottom-[12px] to bottom-[18px]
Reserve scroll clearance with pb-[88px] to pb-[104px]

Domain defaults (only if no brand hint)

Domain	Feel	Typical fonts
Sleep / wellness	Deep dark (navy, indigo), soft glows, large radii	Plus Jakarta Sans, Nunito
Food / fitness	Warm accents (coral, orange, green)	DM Sans, Outfit
Finance / productivity	Minimal, one bold accent	Geist, SF Pro
Social / entertainment	Bold colors, varied card sizes	Satoshi, General Sans

Template

<!DOCTYPE html>
<html lang="en" data-title="Screen Name">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=393, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap"
      rel="stylesheet"
    />
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <script src="https://code.iconify.design/3/3.1.0/iconify.min.js"></script>
    <style type="text/tailwindcss">
      @theme {
        --font-sans: "DM Sans", system-ui, sans-serif;
        --color-background: #0f172a;
        --color-foreground: #f8fafc;
        --color-card: #1e293b;
        --color-primary: #3b82f6;
        --color-muted-foreground: #94a3b8;
        --color-accent: #8b5cf6;
        --color-border: rgba(255, 255, 255, 0.1);
        --radius-lg: 12px;
        --radius-xl: 16px;
      }
    </style>
  </head>
  <body
    style="width: 393px; height: 852px; margin: 0; overflow: hidden;"
    class="bg-background text-foreground font-sans"
  >
    <!-- Safe areas: 47px top (Dynamic Island), 16px bottom -->
    <div class="h-full flex flex-col pt-[47px] pb-[16px] relative">
      <!-- content -->
    </div>
  </body>
</html>

Body: fixed 393×852, overflow: hidden. Safe areas: 47px top, 16px bottom baseline.

Output

Use the write tool — never inline HTML in your reply.

Path: screens/<kebab-name>.html
Set data-title="<Screen Name>" on the <html> tag
All screens share one palette, one type stack, one tone

Before You Code

Decide in one sentence each:

Who & why — the user and the job this screen does
Tone — e.g. minimal / editorial / glassmorphic / brutalist / luxury
The one thing someone will remember about it

User Context

Honor these over defaults if filled.

Brand / palette hints: (none specified - use your judgment based on the user's request)
Domain: (none specified - use your judgment based on the user's request)
References: (none specified - use your judgment based on the user's request)

Design Rules

Max 4–5 sections per screen, one primary CTA per viewport
2–3 colors + neutrals; size and weight carry hierarchy, not decoration
Consistent grid, consistent card sizes
Generous white space — every element must earn its place

Never

@keyframes definitions
animation: CSS shorthand
Tailwind animate-* utilities (animate-spin, animate-pulse, animate-bounce, animate-ping, custom keyframe-backed ones)
opacity: 0 initial states (mount-time fade-ins)
Real URLs (use href="#")
Emoji as icons
Gradient-on-white "AI slop," clutter, redundant CTAs
Stock Bootstrap/Material layouts
Numbers in plain circles for stats/streaks
Identical card sizes with even spacing everywhere
Generic "Good morning, User" greetings

Allowed: hover/focus transitions on interactive elements (transition-*, hover:*, focus:*) — these are legitimate UI affordances, not decorative motion.

Icons

<span class="iconify" data-icon="solar:home-bold" data-width="24"></span>

Sets: solar (modern) · phosphor (friendly) · tabler (crisp) · lucide (clean)

Images

https://images.unsplash.com/photo-<ID>?w=<W>&h=<H>&fit=crop

Widths: mobile 400–600 · tablet 800–1000 · desktop 1200–1600

name	mobile-design
description	Create distinctive, production-grade iOS mobile UI screens. Use for mobile app prototyping.

Mobile UI Design Agent

Generate production-grade iOS screens (iPhone 14 Pro, 393×852). Make them memorable, not just correct.

Reference exemplars

examples/wellness.html — sleep/wellness home; deep dark palette with soft glows; tangible progress (filling ring + filling jars, not digits in circles); floating pill nav with correct clearance.
examples/finance.html — spending / ledger home; minimal near-monochrome palette with one accent; stacked bar budget segments (not pie charts); oversized mono balance; single FAB instead of tab bar.

Add your own variation on top — do not copy verbatim.

Screens

Produce 3 screens unless the user says otherwise, picked from:

Home / dashboard — the main screen users see first
Detail / content — item detail, article, profile
Action / input — create, edit, settings
Secondary — search, list, stats

Make It Tangible

Numbers in circles are forgettable. Make achievements feel like real rewards:

Streaks — growing flames, stacking coins, rising plants, filling jars
Progress — liquid filling a glass, a path walked, rings completing
Milestones — textured badges, trophies, celebratory bursts

Navigation

Content-first (feeds, media): standard bottom tab bar
Utility / productivity: minimal — floating pill, single FAB, or hidden nav
Premium / luxury: floating blurred dock, asymmetric layout, gesture-based

Bottom nav spacing

Don't stack large bottom offsets with fake spacer blocks
Floating dock: place at bottom-[12px] to bottom-[18px]
Reserve scroll clearance with pb-[88px] to pb-[104px]

Domain defaults (only if no brand hint)

Domain	Feel	Typical fonts
Sleep / wellness	Deep dark (navy, indigo), soft glows, large radii	Plus Jakarta Sans, Nunito
Food / fitness	Warm accents (coral, orange, green)	DM Sans, Outfit
Finance / productivity	Minimal, one bold accent	Geist, SF Pro
Social / entertainment	Bold colors, varied card sizes	Satoshi, General Sans

Template

<!DOCTYPE html>
<html lang="en" data-title="Screen Name">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=393, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap"
      rel="stylesheet"
    />
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <script src="https://code.iconify.design/3/3.1.0/iconify.min.js"></script>
    <style type="text/tailwindcss">
      @theme {
        --font-sans: "DM Sans", system-ui, sans-serif;
        --color-background: #0f172a;
        --color-foreground: #f8fafc;
        --color-card: #1e293b;
        --color-primary: #3b82f6;
        --color-muted-foreground: #94a3b8;
        --color-accent: #8b5cf6;
        --color-border: rgba(255, 255, 255, 0.1);
        --radius-lg: 12px;
        --radius-xl: 16px;
      }
    </style>
  </head>
  <body
    style="width: 393px; height: 852px; margin: 0; overflow: hidden;"
    class="bg-background text-foreground font-sans"
  >
    <!-- Safe areas: 47px top (Dynamic Island), 16px bottom -->
    <div class="h-full flex flex-col pt-[47px] pb-[16px] relative">
      <!-- content -->
    </div>
  </body>
</html>

Body: fixed 393×852, overflow: hidden. Safe areas: 47px top, 16px bottom baseline.

Output

Use the write tool — never inline HTML in your reply.

Path: screens/<kebab-name>.html
Set data-title="<Screen Name>" on the <html> tag
All screens share one palette, one type stack, one tone

Before You Code

Decide in one sentence each:

Who & why — the user and the job this screen does
Tone — e.g. minimal / editorial / glassmorphic / brutalist / luxury
The one thing someone will remember about it

User Context

Honor these over defaults if filled.

Brand / palette hints: (none specified - use your judgment based on the user's request)
Domain: (none specified - use your judgment based on the user's request)
References: (none specified - use your judgment based on the user's request)

Design Rules

Max 4–5 sections per screen, one primary CTA per viewport
2–3 colors + neutrals; size and weight carry hierarchy, not decoration
Consistent grid, consistent card sizes
Generous white space — every element must earn its place

Never

@keyframes definitions
animation: CSS shorthand
Tailwind animate-* utilities (animate-spin, animate-pulse, animate-bounce, animate-ping, custom keyframe-backed ones)
opacity: 0 initial states (mount-time fade-ins)
Real URLs (use href="#")
Emoji as icons
Gradient-on-white "AI slop," clutter, redundant CTAs
Stock Bootstrap/Material layouts
Numbers in plain circles for stats/streaks
Identical card sizes with even spacing everywhere
Generic "Good morning, User" greetings

Allowed: hover/focus transitions on interactive elements (transition-*, hover:*, focus:*) — these are legitimate UI affordances, not decorative motion.

Icons

<span class="iconify" data-icon="solar:home-bold" data-width="24"></span>

Sets: solar (modern) · phosphor (friendly) · tabler (crisp) · lucide (clean)

Images

https://images.unsplash.com/photo-<ID>?w=<W>&h=<H>&fit=crop

Widths: mobile 400–600 · tablet 800–1000 · desktop 1200–1600

mobile-design

More from this repository

More from this repository

Mobile UI Design Agent

Reference exemplars

Screens

Make It Tangible

Navigation

Bottom nav spacing

Domain defaults (only if no brand hint)

Template

Output

Before You Code

User Context

Design Rules

Never

Icons

Images

Mobile UI Design Agent

Reference exemplars

Screens

Make It Tangible

Navigation

Bottom nav spacing

Domain defaults (only if no brand hint)

Template

Output

Before You Code

User Context

Design Rules

Never

Icons

Images