mobile-design-kit

mobile-design-kit

A Claude Code plugin for designing mobile app screens end-to-end on iOS (Apple HIG) and Android (Material 3):

1. make-mobile-design — generate production-quality HTML mockups using a reusable component library and platform-aware design tokens.
2. ios-icon-gen — export icons (SF Symbols or 275k+ Iconify icons) as Xcode .imageset PNG bundles.

Showcase — iOS

Five iOS screens, five brand aesthetics — generated with /make-mobile-design, each grounded in a real brand entry from VoltAgent/awesome-design-md.

• Productivity — productivity-today.html · Linear-style cycle view, near-black canvas, mono accents
• Music — music-now-playing.html · Spotify-style now-playing with glass tab bar
• Food — food-recipe.html · Editorial recipe detail with serif display & cream surface
• Wellness — wellness-breathe.html · Soft-warm breathing timer with serif italic display
• Mail (Edit Mode) — mail-edit-mode.html · iOS Mail multi-select with contextual bottom toolbar (component 27)

Showcase — Android (Material 3)

Native Material 3 / MD3 Expressive — Pixel 8 frame (412×915), Roboto Flex, MD3 type scale, surface roles, and the canonical bottom-nav pill indicator.

• Home (Photos) — android-home.html · Medium top app bar, filter chips, elevated/filled cards, extended FAB, MD3 bottom navigation with pill indicator
• Settings — android-settings.html · Center-aligned top app bar with back, profile card, grouped lists with MD3 switches
• Fitness (Today) — android-fitness.html · Activity-rings card (3 SVG arcs), 2×2 tonal stat-tile grid, workout list with rounded tonal icons, extended FAB
• Mail (Inbox) — android-mail.html · MD3 search bar with leading menu + trailing avatar, filter chips, two-line mail rows with star toggle, Compose FAB, badge on bottom-nav
• Music (Now Playing) — android-music.html · Center-aligned top app bar with overline, gradient album art, MD3 slider, transport row with prominent play button, up-next list

Showcase — Tablet

Same skill, same components — bigger canvas. Tablet templates scaffold a landscape device frame (iPad Pro 11" 1194×834 / Pixel Tablet 1280×800 dp) and add layout wrappers (.split-view, .sidebar-ipad, .list-detail, .nav-rail) on top of the existing component library. Set --orientation portrait to flip.

iPad (Apple HIG)

• Mail (Inbox) — ipad-mail-landscape.html · Three-column split view: mailboxes sidebar → inbox list → message detail. Built with components/ios/13-tablet-layouts.md wrappers and existing iOS list/nav components.

Android tablet (Material 3 Expanded)

• Settings (Display) — android-tablet-settings-landscape.html · MD3 expanded-class layout: navigation rail (80dp), top app bar, list-detail panes (360dp list / flex detail) with two-tone surface-container surfaces. Built with components/android/10-tablet-layouts.md wrappers.

Open the HTML files directly to feel the scroll/hover behavior. Each example also includes a floating Copy to Figma action — see below.

Copy to Figma

Every example screen ships with a one-click Copy to Figma button in the corner. Click it, switch to Figma, and paste — the screen lands as fully editable vector layers.

• No screenshots, no re-tracing, no exported asset bundles.
• Designers pick up a coded mockup and keep iterating in their native tool.
• Engineers hand off work without annotating static images.
• Design reviews happen on real, editable artifacts.

To regenerate the PNGs (per-screen + showcase strips):

cd examples && npm install && node capture.mjs

capture.mjs writes one PNG per .html, then runs build_strips.py to recompose the iOS and Android strip images used in the README. The strip script requires Pillow (python3 -m pip install Pillow).

Layout