ios-ui-craft

Files (1)

• SKILL.md

SKILL.md (first lines)

# 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:

```swift
// 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.

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

// Accent with purpose
.tint(.accentColor)
```

From Prisma-Labs-Dev/apple-skills, MIT.

More from Prisma-Labs-Dev/apple-skills