IOS UI Craft skill

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:

Anti-Pattern	Why It's Bad	Instead
Boring solid backgrounds	No depth or atmosphere	Gradients, subtle textures, or layered colors
System fonts everywhere	No typographic intention	Intentional hierarchy, consider display fonts
Cookie-cutter tab bars	No personality	Custom styling, meaningful icons
Purple/indigo gradients	Quintessential AI slop	Find a distinctive, contextual palette
Flat, lifeless interactions	No delight	Haptics, spring animations, feedback
Glass on everything	Defeats the purpose	Glass only for controls/navigation layer
Ignoring content layer	Glass where it doesn't belong	Glass frames content, never obscures
Generic card layouts	White rectangles with shadows	Context-specific, purposeful containers
Emojis as design elements	Lazy, unprofessional	SF Symbols, custom assets
Evenly distributed colors	Timid, uncommitted	Dominant color with sharp accents

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

Principle	Description
Hierarchy	Controls float above content. Glass frames, never obscures. Content is king.
Harmony	Software design aligns with hardware. Concentric corners. Fluid gestures.
Consistency	Adapt fluidly across iPhone, iPad, Mac. Same identity, contextual expression.

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

Use Case	Options
Display	SF Pro Display, New York, custom serif
Body	SF Pro Text (system), custom sans
Technical	SF Mono, custom monospace
Editorial	New York, custom serif with character

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