USP

Delivers designer-quality SwiftUI interfaces by strictly adhering to 6 Anti-AI Slop Iron Rules. Features a Design Direction Advisor, Brand Asset Protocol, and 5-Dimension Review, ensuring unique, brand-aligned, and visually consistent UI o…

Use cases

• 01Designing new SwiftUI views or screens
• 02Improving existing UI quality and aesthetics
• 03Creating iOS app prototypes or mockups
• 04Integrating brand assets into SwiftUI applications
• 05Choosing a visual style or design direction

Detected files (1)

• SKILL.mdskill
  Show content (11227 bytes)

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

README

npx skills add wholiver/swiftui-design-skill -g -y

swiftui-design-skill/
├── SKILL.md                           ← Core definition (278 lines)
├── references/
│   ├── anti-ai-slop.md                ← Anti-AI Slop detailed rules (268 lines)
│   ├── layout-patterns.md             ← 9 layout patterns + copy-paste code (265 lines)
│   ├── typography-color.md            ← Typography hierarchy + color system (172 lines)
│   ├── design-review.md               ← 5-Dimension Review process (151 lines)
│   └── swift-extensions.md            ← Color/Font/Animation extensions (373 lines, essential)
└── templates/
    └── brand-spec.md                  ← Brand spec template (77 lines)