design-android

<objective> Produces Android mockups and developer handoff specs: mapping design tokens to the Material 3 Expressive type scale (baseline plus the parallel Emphasized set), the full color-role system (45 roles, including the surface-container ramp and dynamic color), elevation tokens, the shape scale, window size classes, and FAB tiers. The deliverable is a device-framed HTML mockup at the target window size class plus a Compose-ready handoff spec (colors, typography, shapes, spacing, states, tonal elevation). This skill never writes Jetpack Compose code — implementation is left to an Android developer. </objective> ## Design Android — Mockup and Handoff, Not Code ### When After `design-system` tokens exist. This skill never writes Jetpack Compose — it produces a static HTML mockup at exact device dimensions plus a spec an Android developer implements. ### Input - `design-system.md` — OKLCH palette, typography direction, motion personality. - The screen/flow to mock up and the target window size class. ### Steps 1. **Map tokens to Material 3 type roles.** `references/type-scale.md` gives the 15-role baseline scale (displayLarge 57/64sp … labelSmall 11/16sp, Roboto). Material 3 Expressive adds a parallel **15-role Emphasized set** on top (30 roles total) for stronger visual rhythm — use baseline by default, reach for Emphasized when the tone from `design-method` calls for it. Source: m3.material.io/styles/typography/type-scale-tokens. 2. **Map tokens to Mater...