IOS UI Craft

iOS UI Craft

Create distinctive, Apple Design Award-worthy iOS interfaces. This skill produces real, working SwiftUI code with exceptional attention to aesthetic details and creative choices that avoid generic AI-generated aesthetics.

The user provides iOS requirements: a screen, component, view, or interface to build. They may include context about the purpose, audience, or technical constraints.

Design Thinking

Before writing ANY code, understand the context and commit to a BOLD aesthetic direction:

1. Purpose: What problem does this interface solve? Who uses it?
2. Tone: Pick a direction: calm/serene, playful/energetic, premium/refined, utilitarian/focused, editorial/magazine, brutalist/raw, warm/organic, cold/technical. Commit fully.
3. Inspiration: Which Apple apps set the bar? (Weather, Health, Fitness, Notes, Apple TV, Journal)
4. Differentiation: What makes this UNFORGETTABLE? What's the one thing users will remember?
5. Glass Philosophy: Is glass framing content or would it compete with it?

CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work—the key is intentionality, not intensity.

Then implement working SwiftUI code that is:

• Production-grade and functional
• Visually striking and memorable
• Cohesive with a clear aesthetic point-of-view
• Meticulously refined in every detail

Anti-Patterns: What to Avoid

These are hallmarks of generic AI-generated iOS design. NEVER do these:

iOS Aesthetics Guidelines

Focus on:

• Typography: Create clear hierarchy. Display fonts for impact, proper weight progression. Don't default to system everywhere—make intentional choices. Consider SF Pro Display for headers, custom fonts for brand identity.
• Color & Theme: Commit to a cohesive aesthetic. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Dark mode often produces more distinctive results. Design dark first, then adapt to light.
• Motion: Spring/bouncy animations are the new default. Morph between states, don't swap. Add haptics to every meaningful interaction. Use .bouncy not .easeInOut.
• Spatial Composition: Intentional spacing (8pt grid). Breathing room where needed, density where appropriate. Concentric corners that match device hardware.
• Backgrounds & Depth: Create atmosphere. Gradients, subtle layers, radial glows. Never flat white unless that's a deliberate minimal choice.

The Three Principles

Required Reading

Before implementing, read the shared Liquid Glass reference for API patterns:

skills/ios-liquid-glass/ - Core Liquid Glass API, code patterns, navigation patterns, animation philosophy, haptics

This reference contains the technical implementation details. This skill provides the aesthetic vision; the reference provides the code patterns.

Typography That Speaks

Don't default to system fonts for everything. Create typographic hierarchy:

// Display fonts for headers
Text("Dashboard")
    .font(.largeTitle.bold())
    .foregroundStyle(.primary)

// Secondary information
Text("Last updated 5 min ago")
    .font(.subheadline)
    .foregroundStyle(.secondary)

// Consider custom fonts for brand identity
Text("Premium")
    .font(.custom("PlayfairDisplay-Bold", size: 32))

Font Recommendations

Color with Intention

Dominant + Accent

Don't distribute color evenly. Choose:

• One dominant that defines the brand/mood
• Sharp accents for actions and highlights
• Neutral base for content readability

Dark Mode First

Dark mode often produces more distinctive results. Design dark, then adapt to light.

// Semantic colors that adapt
.foregroundStyle(.primary)
.foregroundStyle(.secondary)
.background(.background)

// Accent with purpose
.tint(.accentColor)

Development Loop: Screenshot-Driven Iteration

Never submit UI work without visually verifying it. Use the screenshot script to iterate until the screen is both functional and beautiful.

# Screenshot simulator
xcrun simctl io booted screenshot /tmp/screenshot.png && sips --resampleHeightWidthMax 1800 /tmp/screenshot.png

The loop:

1. Implement your changes
2. Screenshot the simulator
3. Evaluate critically — is this share-worthy?
4. Iterate if not — fix and screenshot again

Keep iterating until:

• You'd proudly screenshot it to show a friend
• It could appear in an App Store feature
• It feels like it belongs on Apple's marketing materials

This is the quality bar: share-worthy, award-worthy.

Quality Checklist

Before considering UI complete:

• Committed to a clear aesthetic direction (not generic)
• Glass applied only to navigation layer (not content)
• Haptics on all meaningful interactions
• Spring/bouncy animations (not linear)
• SF Symbols (not emojis or random icons)
• Dark mode tested and polished
• Typography hierarchy clear and intentional
• Colors are purposeful, not default blue
• Morphing transitions where applicable
• Loading states animated
• Empty states designed
• Error states helpful and styled
• Accessibility settings respected
• Screenshot taken and visually verified
• Would I screenshot this to show someone? (If no, iterate)

The Mandate

Remember: Claude is capable of extraordinary creative work. Don't settle for "working." Push for memorable.

Every interface should have:

1. A point of view - A clear aesthetic direction
2. Intentional details - Nothing accidental
3. Emotional resonance - Users feel something
4. Technical excellence - Smooth, performant, accessible

The goal is an app worthy of an Apple Design Award—an app that feels genuinely designed, not generated.

Related Skills

• /ios-dev - Start here for any iOS task — coordinates guides, correctness checks, and API references
• /ios-design-consultant - For design questions before coding