Mobile App UI/UX Design Skill for Claude Code

To create engaging mobile experiences, move beyond functional feedback to emotional design:

• Peak-End Rule: Design the experience so that users remember the most intense moment (the 'peak') and the final impression (the 'end').
• Emotional Feedback Loops: Prioritize emotional feedback over purely functional feedback to build user connection.
• Spotify Strategic Patterns:
  • The Trojan Horse: Hide complexity to reduce cognitive load.
  • The Vanity Mirror: Enable identity-based sharing.
  • The Comfort Trap: Use consistency as a competitive moat.

When designing the UI layer, adhere to these specific constraints to ensure professional polish:

• Typography: Use one font family, a maximum of 4 sizes, and 2 weights. Use opacity to establish hierarchy.
• Color System (60/30/10 Rule): Use 60% neutral colors, 30% complementary colors, and 10% accent colors.
• Spacing (8-Point Grid): Ensure all spacing and layout dimensions are divisible by 8 or 4.
• Shadows: Use soft shadows that are visually matched to the background colors.
• Layout: Place primary actions within the Thumb Zone (the bottom 1/3 of the screen).

Typography Rules

• Use one font family (maximum of two).
• Limit to 4 font sizes and 2 font weights.
• Use monospace variants for large numbers (prices, stats, metrics).
• Keep text containers under 600px wide.
• Create hierarchy using size, weight, and opacity rather than just bolding.

Color System (60/30/10 Rule)

• 60% Neutral Base: White, light gray, or dark background.
• 30% Complementary Color: Black text or dark elements.
• 10% Brand/Accent Color: Used for CTAs, key indicators, and icons.
• Text Hierarchy: Use opacity variations of the neutral color (100% for headings, 80% for body, 60-70% for secondary text).
• Secondary Elements: Use the accent color at 5% opacity for secondary buttons and subtle card highlights.
• Shadows: Match shadow colors to the background using a tinted hue; avoid pure gray/black on colored backgrounds.

Instead of providing only functional feedback (e.g., a green check), provide emotional feedback to increase engagement.

• Correct Answer: Use encouragement, cheers, or character reactions.
• Mistake: Use gentle corrections with personality instead of a harsh red 'X'.
• Milestone: Provide celebrations that feel proportional to the achievement.
• Progress: Use momentum visualization like streaks, levels, or completion bars with motion.

Use these three mental models to build competitive advantages in product design:

1. The Trojan Horse (Simplicity): Hide complex technology behind familiar UI patterns. Users should interact with experiences that feel natural rather than interacting with algorithms.
2. The Vanity Mirror (Identity): Make sharing about the user's identity, not the app. Create personal insights that allow users to express who they are (e.g., "You're a night owl" vs "You completed 25 tasks").
3. The Comfort Trap (Consistency): Use consistent interaction logic to create predictable patterns. This builds habits and increases switching costs for competitors.

The skill follows specific design laws to ensure professional, polished mobile interfaces:

• 60/30/10 Color Rule: Use 60% neutral colors, 30% complementary colors, and 10% accent colors.
• 8-Point Grid System: Ensure all spacing values are divisible by 8 or 4.
• Peak-End Rule: Focus on the user's peak moment and the ending of an interaction.
• Thumb Zone: Place primary actions within the bottom 1/3 of the screen.
• F-Pattern: Design for natural reading and scanning orders.
• Typography Hierarchy: Limit to a maximum of 4 sizes and 2 weights.

All spacing values must be divisible by 8 or 4 (e.g., 8, 12, 16, 24, 32, 48, 64, 80, 96).

Spacing Guidelines:

• Relationship-based spacing: Place related elements closer together and unrelated elements further apart.
• Multiplier rule: If related text elements are 16px apart, the gap to the next group should be 2× (32px).
• Section vertical padding: Minimum 80-96px (160px for major sections on larger screens).
• Card internal padding: 24-32px baseline.
• Scaling: Larger text requires larger spacing.

Use this framework to move from initial concept to a polished mobile interface:

1. Understand Context: Define the user, their primary action, and relevant industry conventions.
2. Structure (UX Lens): Map out user flows, MVP elements, and layout patterns like the F-pattern or the Thumb Zone.
3. Visual Design (UI Lens): Apply visual systems including typography, the 60/30/10 color rule, and the 8-point grid.
4. Design for Emotion: Apply the Peak-End Rule to ensure users remember the most intense moment and the final impression.
5. Polish & Details: Add micro-interactions, state changes, and accessibility refinements.

The skill is designed for Claude Code and automatically triggers when you request mobile-related design or implementation tasks. You can use it to:

• Design mobile app screens or mockups.
• Build mobile UI components.
• Improve existing mobile app designs.
• Create onboarding flows or mobile navigation.
• Build interfaces using React Native, Flutter, or SwiftUI.

Example Prompts

• "Design a fitness app home screen"
• "Create a banking app dashboard"
• "Build a meditation app interface"
• "Design a crypto wallet transaction screen"
• "Create an onboarding flow for a health app"