swiftui-design-skill

name	swiftui-design-skill
description	SwiftUI frontend visual design skill. Creates beautiful, distinctive iOS/macOS interfaces that avoid generic AI slop patterns. Covers design direction, layout systems, typography, color, spacing, brand integration, and design review. Use when designing new SwiftUI views, reviewing UI quality, creating iOS prototypes, choosing visual styles, improving app aesthetics, or when the UI looks generic or AI-generated.
license	MIT
metadata	{"author":"wholiver","version":"1.0.0"}

SwiftUI Design Skill

TL;DR: Design SwiftUI apps that look intentionally crafted, not AI-generated. Follow the 6 Anti-Slop Rules, use the Design Direction workflow when requirements are vague, and always pass the 5-Dimension Review before shipping.

When to Use

• Designing new SwiftUI views or screens from scratch
• Reviewing or improving existing UI quality
• Creating iOS app prototypes or mockups
• Choosing a visual style or design direction
• Integrating brand assets into SwiftUI
• When someone says "the UI looks generic" or "make it look better"
• When building a new feature that needs visual design

When NOT to Use

• Pure backend / API work with no UI
• Fixing SwiftUI compilation errors (use swiftui-expert-skill instead)
• Performance optimization of existing views (use swiftui-expert-skill)
• Accessibility compliance only (use swiftui-expert-skill's accessibility topic)

Prerequisites

• Xcode 16+ with iOS 18+ / macOS 15+ SDK
• SwiftUI framework (not UIKit unless explicitly requested)
• Familiarity with SwiftUI view hierarchy and modifiers

---

Core Design Philosophy

These 6 principles guide every design decision. They are distilled from real-world design practice and anti-patterns observed in AI-generated UI.

Principle 1: Start From Context, Never Blank

Before designing any screen, ask:

• Is there an existing design system, UI kit, or Figma file?
• Is there an existing codebase with established visual language?
• Are there brand guidelines or a style guide?

If no context exists, create a brand-spec.md first (see Brand Asset Protocol below).

Principle 2: Junior Designer Mode — Hypothesize Early, Iterate Fast

Don't wait for the "perfect" design. Show hypotheses with placeholders early:

• Gray boxes for images are better than bad AI-generated SVGs
• System fonts with good spacing > custom fonts with bad spacing
• A rough but honest layout > a polished but generic one

Principle 3: Offer Variations, Not Finals

Always present 2-3 distinct design directions, not one "final answer." Each variation should:

• Represent a different design philosophy (e.g., editorial, functional, expressive)
• Have a clear rationale for why it works
• Be visually distinct — not just color swaps

Principle 4: Placeholder > Bad Implementation

If you cannot source a real asset (icon, image, illustration):

• Use a clean gray placeholder with clear labeling
• Never use AI-generated SVG clipart
• Never use emoji as icon substitutes in production UI
• For icons, prefer SF Symbols (Apple's built-in icon library)

Principle 5: System First, Don't Fill

Every element must earn its place. Before adding any UI element, ask:

• Does this serve the user's goal?
• Can this be combined with something else?
• What happens if I remove it?

Whitespace is a feature, not emptiness.

Principle 6: Anti-AI-Slop

These patterns are banned in production UI. See references/anti-ai-slop.md for detailed rules.

Banned visual patterns:

• ❌ Purple-to-blue gradient backgrounds
• ❌ Emoji as functional icons
• ❌ Rounded cards with left-border accent color
• ❌ Generic "hero section" with centered text over gradient
• ❌ Inter/Roboto as display fonts on Apple platforms
• ❌ Neon-on-dark "cyber" aesthetic (#0D1117 base)
• ❌ Symmetric 3-column feature grids
• ❌ AI-drawn SVG illustrations or CSS silhouettes

What to do instead:

• ✅ Single warm accent color on neutral background
• ✅ SF Symbols for icons, or custom icon set
• ✅ Serif display font (e.g., New York, Georgia) for headings
• ✅ Restrained info density — let content breathe
• ✅ One signature detail at 120% effort per screen
• ✅ Real photography or clean placeholders

---

Brand Asset Protocol

When building UI for a specific brand, follow this 5-step hard flow:

1. Ask — Request brand guidelines, logo files, color palette, typography
2. Search — If not provided, search the web for "[brand name] brand guidelines"
3. Download — Get actual asset files (PNG/SVG logos, font files)
4. Verify — Confirm colors match official sources (check hex values)
5. Write brand-spec.md — Document: primary/secondary colors, fonts, logo usage rules, spacing tokens

Quality threshold: 5 real brand colors, 10 verified design tokens, 2 font families, 8pt spacing grid.

If no brand exists, create a brand-spec.md with:

• 1 primary accent color (warm, not purple-blue gradient)
• 1 neutral palette (grays with warm undertone)
• 1 display font + 1 body font (SF Pro default is fine)
• 8pt spacing grid

---

Design Direction Workflow

When requirements are vague or the user asks "what style should we use?", follow this workflow:

Phase 1: Understand Context (5 min)

1. Ask: What is the app? Who is the user? What platform (iOS/macOS/watchOS)?
2. Ask: Any reference apps or websites they admire?
3. Check: Existing design system or brand assets?

Phase 2: Recommend 3 Directions

Present 3 distinct design philosophies from different schools:

School	Example Directions
Information	Clean data-first, chart-heavy, Bloomberg-style
Editorial	Magazine layout, serif typography, generous whitespace
Expressive	Bold color, asymmetric layout, motion-forward
Functional	Dense utility, monospace accents, minimal decoration
Warm Minimal	Soft neutrals, rounded shapes, subtle texture

Phase 3: Present Visual Anchors

For each direction, describe:

• Color palette (3-5 colors with hex values)
• Typography pairing (display + body)
• Layout density (comfortable / compact / spacious)
• Signature detail (one standout element per screen)

Phase 4: Let User Choose

Present options clearly. After choice, lock in the design system.

---

SwiftUI Design Workflow

Step 1: Define the Design System (Before Coding)

Create or confirm these design tokens:

// Requires: references/swift-extensions.md (Color(hex:) extension)
// DesignTokens.swift
enum DesignTokens {
    // Colors
    static let accent = Color(hex: "E85D3A")      // Warm coral
    static let background = Color(hex: "FAFAF8")   // Warm white
    static let textPrimary = Color(hex: "1A1A1A")   // Near-black
    static let textSecondary = Color(hex: "6B6B6B") // Muted gray
    
    // Typography
    static let displayFont = "New York"  // Serif for headings
    static let bodyFont = "SF Pro"       // System default
    
    // Spacing (8pt grid)
    static let spaceXS: CGFloat = 4
    static let spaceS: CGFloat = 8
    static let spaceM: CGFloat = 16
    static let spaceL: CGFloat = 24
    static let spaceXL: CGFloat = 32
    static let spaceXXL: CGFloat = 48
    
    // Corner radius
    static let radiusS: CGFloat = 8
    static let radiusM: CGFloat = 12
    static let radiusL: CGFloat = 16
}

Step 2: Build the Layout Hierarchy

Follow the layout patterns in references/layout-patterns.md:

• Start with the primary content container
• Use VStack for vertical flow, HStack for horizontal
• Use LazyVGrid / LazyHGrid for grid layouts
• Use ScrollView with .scrollTargetBehavior(.paging) for paged content
• Avoid GeometryReader — prefer containerRelativeFrame (iOS 17+)

Step 3: Apply Typography Hierarchy

Follow references/typography-color.md:

• Display (screen titles): Serif font, 28-34pt, bold
• Heading (section titles): Sans-serif, 20-24pt, semibold
• Body (content text): Sans-serif, 15-17pt, regular
• Caption (labels, metadata): Sans-serif, 12-13pt, secondary color

Step 4: Add the Signature Detail

Each screen should have ONE element that goes 120% — a custom animation, a unique layout choice, a distinctive color moment. This is what makes the design memorable.

Examples:

• A custom pull-to-refresh with brand-colored animation
• A card that expands with a spring animation on tap
• A header that uses the brand's display font at an oversized scale
• A subtle parallax effect on scroll

Step 5: Review Against Checklist

Before shipping, run the 5-Dimension Review (see references/design-review.md).

---

Common Mistakes to Avoid

Mistake	Fix
Using UIColor or NSColor	Use Color (SwiftUI native)
UIScreen.main.bounds for sizing	Use containerRelativeFrame or geometry-based modifiers
Default blue tint everywhere	Define a custom accent color in design tokens
No spacing system (random padding values)	Use 8pt grid: 4, 8, 16, 24, 32, 48
Emoji as icons	Use SF Symbols or custom icon assets
Purple-blue gradient background	Use solid warm neutrals
All content in one giant VStack	Break into semantic sections with clear hierarchy
No visual hierarchy (everything same size)	Use 3+ type scales (display, heading, body, caption)
Ignoring dark mode	Define semantic colors that adapt to appearance
Generic "Welcome!" hero section	Show actual content immediately

---

Quick Reference: Topic Router

Topic	Reference File
Anti-AI-Slop Rules (detail)	references/anti-ai-slop.md
Layout Patterns & Grids	references/layout-patterns.md
Typography & Color Systems	references/typography-color.md
5-Dimension Design Review	references/design-review.md
Swift Extensions (required)	references/swift-extensions.md
Brand Spec Template	templates/brand-spec.md

---

Validation Checklist

Before considering any SwiftUI design complete, verify:

• Design tokens defined (colors, fonts, spacing)
• No banned AI-slop patterns present
• Typography has clear hierarchy (3+ scales)
• Spacing follows 8pt grid
• Dark mode colors defined and tested
• One signature detail per screen
• SF Symbols used for icons (not emoji)
• Minimum 44×44pt tap targets
• No GeometryReader or UIScreen.main.bounds
• 5-Dimension Review score ≥ 7/10 on all dimensions