mobile-app-ui-design: Скилл дизайна мобильных приложений

--- name: mobile-app-ui-design description: Design high-quality mobile app UI/UX screens, flows, and components. Use this skill whenever the user asks to design a mobile app screen, create app mockups, build mobile UI components, improve an existing mobile app design, create onboarding flows, design mobile navigation, or requests any mobile-first interface work. Also trigger when the user mentions app design, mobile UI, mobile UX, screen design, app mockups, wireframes, or wants to build React Native / Flutter / SwiftUI style interfaces as visual prototypes. Even if the user just says "design an app" or "make this screen look better", use this skill. --- # Mobile App UI/UX Design Skill This skill guides the creation of professional, polished mobile app interfaces that follow proven design principles used by top-tier apps like Airbnb, Duolingo, Spotify, Revolut, and Phantom. ## Core Philosophy Great mobile UI isn't about flashiness — it's about intentionality. Every pixel, every spacing value, every color choice should serve the user. The goal is to create interfaces that feel smooth, personal, and alive — not just functional. Before designing anything, understand three things: 1. **What is the user trying to accomplish?** (reduce friction to that goal) 2. **How should this make the user feel?** (trust, delight, confidence, calm) 3. **What's the one thing they should notice first?** (visual hierarchy) ## Design Process Follow this sequence for any mobile screen: ### Step 1: Understand the Context - What type of app? (fitness, finance, social, productivity, health, crypto, etc.) - Who is the user? (new, returning, power user — adapt the experience) - What's the primary action on this screen? - What industry design conventions apply? (See `references/industry-conventions.md`) ### Step 2: Structure First (UX Lens) - Map the user flow: what screen comes before and after? - Identify the MVP elements — only what's essential for this screen - Place primary actions in the **thumb zone** (bottom 1/3 of screen) - Follow the **F-pattern** reading order for content layout - Reduce interaction cost: expose content directly instead of hiding behind taps - Turn empty states into opportunities with guidance, illustration, and a CTA - Choose the right input method: sliders/scroll wheels for one-time setup, text fields for repeated/precise entry ### Step 3: Apply Visual Design (UI Lens) Follow these rules in order: #### Typography - Use **one font family** (two max, with clear hierarchy purpose) - Maximum **4 font sizes** and **2 font weights** - Use monospace variants for large numbers (prices, stats, metrics) - Keep text containers under 600px wide for readability - Create hierarchy with size, weight, and opacity — not just bold everything #### Color System (60/30/10 Rule) - **60%** — neutral base (white, light gray, or dark background) - **30%** — complementary color (black text, dark elements) - **10%** — brand/accent color (CTAs, key indicators, icons) - Use **opacity variations** of the neutral color for text hierarchy: 100% for headings, 80% for body, 60-70% for secondary text - Use the accent color at 5% opacity for secondary buttons and subtle card highlights - Match shadow colors to the background (tint shadows, never pure gray/black on colored backgrounds) - Save strong colors (like red) for meaningful moments — overuse kills hierarchy #### Spacing (8-Point Grid System) - All spacing values must be divisible by **8 or 4** (8, 12, 16, 24, 32, 48, 64, 80, 96) - Use **relationship-based spacing**: related elements closer together, unrelated further apart - Multiplier rule: if related text elements are 16px apart, the gap to the next group should be 2× (32px) - Section vertical padding: at least 80-96px (160px for major sections on larger screens) - Card internal padding: 24-32px baseline - Larger text = larger spacing needed #### Shadows - Always use **soft shadows** — never harsh/distinct - Match shadow color to the background with a tinted hue - Use subtle white inner shadows on buttons to add dimension - Add faded drop shadows for depth without heaviness #### Visual Cues & Imagery - Use icons, emojis, illustrations, and images to make information digestible - User avatars/photos > initials > generic icons (for representing people) - Color-coded categories with soft solid backgrounds + clean isolated images - Keep visual style consistent across the entire app — no random stock photo mix - Use AI-generated or curated visuals with matching color palettes ### Step 4: Design for Emotion (Peak-End Rule) The user will remember two moments: the **peak** (most intense) and the **end** (last impression). - **Identify your peak moment**: completing a core task, hitting a milestone, finding what they want - **Design the peak**: micro-animations, celebratory feedback, sparkles, badges, encouraging copy - **Design the ending**: summary card, progress affirmation, gentle nudge to return - Add **emotional feedback loops**: success states should feel rewarding (bounce, glow, sparkle) - Celebrate small wins — success states don't need to be huge, but they should feel intentional - Use motion and animation as trust signals, especially in high-stakes domains (finance, crypto, health) ### Step 5: Polish & Details - Add subtle glow effects behind key elements (blur + opacity) - Use tiny white inner shadows on primary buttons - Add 5% opacity primary-color borders on secondary elements - Consider micro-animations for state changes - Ensure all tap targets are at least 44×44pt - Check contrast ratios for accessibility - Design error states, empty states, loading states, and success states ## Smart Patterns to Apply ### Personalization by User Stage - **New users**: simple welcome, guided setup, minimal options - **Returning users**: personalized content, routine-focused, progress indicators - **Power users**: advanced stats, optimization tools, dense information ### Smarter Search Never show a blank search screen. Include: - Recent searches - Popular/trending items - Personalized recommendations ### Order/Status Tracking - Open with a confident status message - Humanize with photos, names, quick-action buttons - Use visual timelines instead of text-based date lists ### Category Screens - Use color-coded cards with soft backgrounds and clean isolated images - Ensure visual consistency across all category items - Create rhythm in the layout for effortless scanning ### Selection Over Manual Input - Offer tappable selections for common options (job titles, preferences, etc.) - Include icons/emojis alongside options for personality - Provide an "Other" option with manual input as fallback ## Anti-Patterns to Avoid - Overusing flashy gradients and blur effects (unless you can truly pull it off) - More than 4 font sizes or 3 font weights - Random spacing values (use the 8-point grid!) - Hiding key content behind banners or extra taps - Placing CTAs outside the thumb zone - Generic empty states with no guidance - Using sliders for frequent/precise data entry - Making all information the same visual weight (no hierarchy) - Emphasizing labels over values (e.g., making "Sales" bigger than "591") - Pure gray/black shadows on colored backgrounds ## Implementation Notes When building these designs as React artifacts or HTML: - Use Tailwind CSS utility classes for spacing, colors, and typography - Import Lucide React for clean, consistent iconography - Use Recharts for any data visualization - Apply CSS transitions for micro-interactions and state changes - Use CSS variables for the color system - Mobile-first: design for 375px width (iPhone SE) as baseline - Use `rounded-2xl` or `rounded-3xl` for modern card aesthetics - Apply `backdrop-blur` for glassmorphism effects where appropriate For deeper guidance on industry-specific conventions and emotional design patterns, read `references/industry-conventions.md`.