Skill · AI & Development

Mobile App UI Designer

Design native mobile apps with thumb-zone ergonomics and platform-specific patterns for iOS and Android. Install in 30 seconds.

Category: AI & Development
Deliverable: 1 .skill bundle
Outputs: —
Last updated: 13 Jun 2026

$9.99 One-time · lifetime updates

Get it on Agensi

Works in Claude Pro, Team, and Enterprise
Lifetime access to updates
Refundable for 30 days via the marketplace

Or get a free skill every month. Subscribers get one curated skill, free, every 1st. Pick yours →

StrategistKit Affiliate. Purchase happens on the marketplace, which handles payment, delivery and refunds.

Overview

What Mobile App UI Designer does.

The skill turns Claude into a mobile product designer who starts from the hand, not the screen. It enforces thumb-zone reachability mapping, separates iOS Human Interface Guidelines from Material Design 3 conventions where they genuinely diverge, and produces platform-specific architectural specs covering navigation structure, gesture affordances, permission-ask timing, and the often-skipped edge states: empty lists, loading skeletons, and offline fallbacks. You supply your platform, app type, and target screens; the skill handles the ergonomic and convention layer.

A typical session: a solo founder building a React Native fitness tracking app asks for help designing a workout logging flow for both iOS and Android. The skill first asks four scoping questions — stack, goal, constraints, and intended audience for the output — then works through thumb-zone mapping for the primary log action, flags where Android should use a bottom sheet while iOS should use a modal card, and drafts the permission choreography for location access before the first workout begins.

Sample output excerpt — Cross-Platform Divergence Call, Workout Start Screen: iOS — primary CTA sits at bottom center (44 pt hit target, safe area inset respected), accessed via modal sheet triggered from tab bar. Android — FAB anchored bottom-right per Material 3 spec; sheet uses predictive back gesture. Both — 'Allow location' permission request deferred until user taps 'Start outdoor run', not on first launch. Component mapping: SwiftUI Sheet vs. Jetpack Compose ModalBottomSheet.

Who it's for

Product designers and developers who are shipping a mobile app and need to avoid the common failure of mixing web patterns with touch interfaces — particularly useful for solo builders, small cross-functional teams, and frontend engineers who own design decisions without a dedicated mobile design lead.

How it works

Three steps. About two minutes.

Install

Add the .skill file to your Claude app. ~10 seconds.

Run it on your work

Invoke the skill and paste in your material.

Apply the output

Review, keep what works, and use it.

In depth

Why a Claude skill beats a prompt template.

A copy-paste prompt runs one static pass and stops. A skill is a bundled program — instructions, examples, and a workflow Claude runs as a unit: it asks for the right input, applies the same pattern every time, and returns the structured outputs above.

FAQ

Common questions.

What do I need to provide to get useful output?

At minimum: the target platform (iOS, Android, or both), the framework you are building in (SwiftUI, Flutter, React Native, etc.), the app category or core user task, and the specific screens or flows you want to address. The skill will ask four scoping questions before starting; you can also answer them upfront to skip the back-and-forth.

What formats does the output come in?

Output adapts to what you need: a structured spec document for developer handoff, a component checklist per platform, a quick annotated screen layout, or a prioritised list of divergence calls between iOS and Android. Specify your preferred format in the scoping step or the skill defaults to the most practical format for your stated goal.

Does it generate actual design files or code?

No. The skill produces architectural specs, annotated layout descriptions, component mappings, and decision rationale — text and structured data you carry into Figma, Xcode, or your codebase. It is a design-thinking and specification layer, not a visual renderer.

Can it work with a cross-platform codebase where iOS and Android share most UI?

Yes. The skill explicitly flags the subset of screens and interactions where platform conventions require divergence, so you can share the majority of your component tree while overriding only what native users will notice. It maps those divergence points to React Native or Flutter-specific implementation patterns.

Is this skill useful if I already have a partial design and just want a review?

Yes. Frame your goal in the scoping step as an audit rather than a new design, share your current screen descriptions or component list, and the skill will return findings against HIG and Material Design 3 standards with prioritised recommendations rather than starting from scratch.