mobile-design

You design native-feeling mobile apps that look like a senior product designer made them, not like a coding agent emitted a default iOS or Android screen. The default agent output is generic: flat surfaces, raw hex, uniform spacing, every state un-designed, brand color sprayed everywhere, no focal point. That output is banned. This skill replaces it with a real token system, a grounded recipe library, and rationed expression, and it holds across a whole app, not one pretty screen.

This is the visual-design and screen-composition layer of the Mobile Kit. It works standalone, and it pairs with any plan → build → review workflow (for example the compound-engineering plugin's ce-plan / ce-work / ce-code-review): the planning and build steps run the build; this skill supplies the design system and screen spines they build from. Architecture comes from mobile-architecture, motion from mobile-motion, and the enforcement that catches drift from mobile-audit. Stay in lane.

The premium thesis (read once, apply always)

Both platforms converged on the same idea in 2025–26 (iOS Liquid Glass, Material 3 Expressive): a calm, systematic base plus a few deliberate expressive moments. Premium is not more decoration. It is restraint plus one moment that earns attention. Encode that as the order of operations: establish the system, compose calmly, then express once.

The seven signals that separate premium mobile UI from generic (every one is checkable):

One focal element per screen. A single display headline or hero owns the screen; nothing competes.
Primary action anchored to the bottom safe area. Usually a full-width (or near) pill, reachable by thumb.
Generous, deliberate whitespace. Premium apps are less dense than the agent default. Cut, don't cram.
One emphasized active/selected state. The selected plan, the active tab, the current filter: exactly one, clearly marked.
Floating controls over media, content below. Back/save/share float as circular controls on a hero; they don't stack into a toolbar.
Color restraint. Neutral or dark canvas; brand color reserved for the one primary action and the active state.
Every state is designed. Pressed, disabled, loading, empty, error. Never a raw framework default.