Stitch → SwiftUI (Native iOS)

You are a Swift/SwiftUI engineer. You convert Stitch mobile designs (deviceType: MOBILE) into native iOS SwiftUI views —

.swift

When to use this skill

Use this skill when:

• The user wants native iOS output from a Stitch design
• The user mentions "SwiftUI", "Xcode", "iOS", "native iOS app"
• The design was generated with

  deviceType: MOBILE

Note: This skill targets iOS 16+ with SwiftUI. For cross-platform (iOS + Android), use

stitch-react-native-components

Prerequisites

• Stitch design with

  deviceType: MOBILE

• Xcode 15+ on macOS
• Swift 5.9+

Step 1: Retrieve the design

1. list_tools

   → find Stitch MCP prefix

2. [prefix]:get_screen

   → fetch metadata
3. Download HTML:

   bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/source.html"

4. Check

   screenshot.downloadUrl

   — confirm mobile layout before converting

Only convert MOBILE designs. Desktop Stitch designs don't map well to SwiftUI without significant layout rethinking.

Step 2: Xcode project structure

MyApp/
├── MyApp.swift              ← @main entry point
├── ContentView.swift        ← Root view (TabView or NavigationStack)
├── Theme/
│   ├── ThemeTokens.swift    ← Design token constants
│   └── Color+App.swift      ← Color extension with semantic names
├── Views/
│   ├── [ScreenName]View.swift   ← One file per Stitch screen
│   └── Components/
│       └── [Name]View.swift     ← Reusable component views
├── Models/
│   └── MockData.swift       ← Static preview data
└── Assets.xcassets/
    └── Colors/              ← Color assets for light/dark mode

Step 3: The HTML/CSS → SwiftUI layout mapping

This is the core translation. Apply these rules to every element in the Stitch HTML:

Layout containers

display:flex; flex-direction:column

VStack(alignment: .leading, spacing: 16)

display:flex; flex-direction:row

HStack(alignment: .center, spacing: 12)

display:flex; justify-content:space-between

HStack { Spacer() }

position:absolute

ZStack

display:grid

LazyVGrid(columns: [GridItem(.flexible()), GridItem(.flexible())], spacing: 16)

overflow-y: scroll

ScrollView(.vertical, showsIndicators: false)

List

ForEach

ScrollView + LazyVStack

position:fixed

TabView

VStack

Spacer()

Spacing mapping

SwiftUI uses points (1pt ≈ 1dp on non-retina, 2px on Retina @2x):

// Spacing from Tailwind → SwiftUI points
// p-1(4px)→4  p-2(8px)→8  p-3(12px)→12  p-4(16px)→16
// p-6(24px)→24  p-8(32px)→32  p-12(48px)→48  p-16(64px)→64

Geometry mapping

// Tailwind rounded- → SwiftUI cornerRadius
// rounded-sm → .cornerRadius(4)
// rounded-md → .cornerRadius(8)
// rounded-lg → .cornerRadius(12)
// rounded-xl → .cornerRadius(16)
// rounded-full → .clipShape(Capsule())  or .cornerRadius(9999)

Content elements

<p>

<span>

Text("content")

<h1>

Text("title").font(.largeTitle).fontWeight(.bold)

<h2>

Text("title").font(.title2).fontWeight(.semibold)

<h3>

Text("title").font(.headline)

<p>

Text("body").font(.body)

<small>

Text("caption").font(.caption).foregroundStyle(.secondary)

<img>

AsyncImage(url: URL(string: "..."))

Image("name")

<button>

Button("Label") { action() }.buttonStyle(.borderedProminent)

<button>

Button("Label") { action() }.buttonStyle(.bordered)

<button>

Button("Label") { action() }.buttonStyle(.plain)

<input type="text">

TextField("Placeholder", text: $binding)

<input type="password">

SecureField("Password", text: $binding)

<select>

Picker("Label", selection: $binding) { ForEach(...) }

<toggle>

Toggle("Label", isOn: $binding)

Button { action() } label: { Image(systemName: "xmark") }

Navigation patterns

TabView

tabItem { Label("Home", systemImage: "house") }

NavigationStack { ... NavigationLink(destination: ...) }

.sheet(isPresented: $showModal) { ModalView() }

.fullScreenCover(isPresented: $show) { FullView() }

NavigationStack

.confirmationDialog("Title", isPresented: $show) { ... }

Step 4: Design tokens in SwiftUI

Color extension (semantic tokens)

// Theme/Color+App.swift

import SwiftUI

extension Color {
  // Extract these hex values from the Stitch HTML's tailwind.config

  // Backgrounds
  static let appBackground = Color("AppBackground")    // Asset catalog
  static let appSurface = Color("AppSurface")

  // Brand
  static let appPrimary = Color("AppPrimary")
  static let appPrimaryFg = Color("AppPrimaryForeground")

  // Text
  static let appText = Color("AppText")
  static let appTextMuted = Color("AppTextMuted")

  // Borders
  static let appBorder = Color("AppBorder")
}

Color asset catalog (light + dark)

Create named Color Sets in

Assets.xcassets/Colors/

For each color (e.g.,

AppPrimary

• Any Appearance:

  #6366F1

  (the light mode value)
• Dark Appearance:

  #818CF8

  (lighter shade for dark bg)

Alternatively, define programmatically (no asset catalog needed):

// Theme/ThemeTokens.swift

import SwiftUI

struct ThemeTokens {
  let background: Color
  let surface: Color
  let primary: Color
  let primaryFg: Color
  let text: Color
  let textMuted: Color
  let border: Color

  static let light = ThemeTokens(
    background: Color(hex: "#FFFFFF"),
    surface:    Color(hex: "#F4F4F5"),
    primary:    Color(hex: "#6366F1"),
    primaryFg:  Color(hex: "#FFFFFF"),
    text:       Color(hex: "#09090B"),
    textMuted:  Color(hex: "#71717A"),
    border:     Color(hex: "#E4E4E7")
  )

  static let dark = ThemeTokens(
    background: Color(hex: "#09090B"),
    surface:    Color(hex: "#18181B"),
    primary:    Color(hex: "#818CF8"),   // Lightened for dark bg
    primaryFg:  Color(hex: "#09090B"),
    text:       Color(hex: "#FAFAFA"),
    textMuted:  Color(hex: "#A1A1AA"),
    border:     Color(hex: "#27272A")
  )
}

// Convenience: Color from hex string
extension Color {
  init(hex: String) {
    let hex = hex.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
    var int: UInt64 = 0
    Scanner(string: hex).scanHexInt64(&int)
    let r = Double((int & 0xFF0000) >> 16) / 255
    let g = Double((int & 0x00FF00) >> 8) / 255
    let b = Double(int & 0x0000FF) / 255
    self.init(red: r, green: g, blue: b)
  }
}

Environment-based theme access

// Anywhere in a view — automatic dark mode
@Environment(\.colorScheme) var colorScheme

var theme: ThemeTokens {
  colorScheme == .dark ? .dark : .light
}

// Usage
Text("Hello")
  .foregroundStyle(theme.text)
  .background(theme.surface)

Step 5: Component template

// Views/Components/StitchComponentView.swift

import SwiftUI

/// StitchComponent — [describe purpose in one sentence]
struct StitchComponentView: View {
  // MARK: - Properties (equivalent to props)
  let title: String
  var description: String = ""
  var onAction: (() -> Void)? = nil

  // MARK: - Environment
  @Environment(\.colorScheme) private var colorScheme

  private var theme: ThemeTokens {
    colorScheme == .dark ? .dark : .light
  }

  // MARK: - State
  @State private var isPressed = false

  // MARK: - Body
  var body: some View {
    VStack(alignment: .leading, spacing: 8) {
      Text(title)
        .font(.headline)
        .foregroundStyle(theme.text)

      if !description.isEmpty {
        Text(description)
          .font(.subheadline)
          .foregroundStyle(theme.textMuted)
      }

      if let action = onAction {
        Button("Action", action: action)
          .buttonStyle(.borderedProminent)
          .tint(theme.primary)
      }
    }
    .padding(16)
    .frame(maxWidth: .infinity, alignment: .leading)
    .background(theme.surface)
    .clipShape(RoundedRectangle(cornerRadius: 12))
    .overlay(
      RoundedRectangle(cornerRadius: 12)
        .stroke(theme.border, lineWidth: 1)
    )
    // Minimum touch target — 44pt Apple HIG requirement
    .frame(minHeight: 44)
  }
}

// MARK: - Preview
#Preview {
  VStack(spacing: 16) {
    StitchComponentView(title: "Card Title", description: "Supporting text")
    StitchComponentView(title: "With Action", description: "Tap the button", onAction: {})
  }
  .padding()
}

Step 6: Main app entry point

// MyApp.swift
import SwiftUI

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup {
      ContentView()
    }
  }
}

// ContentView.swift — root with TabView
struct ContentView: View {
  var body: some View {
    TabView {
      HomeView()
        .tabItem {
          Label("Home", systemImage: "house")
        }
      ProfileView()
        .tabItem {
          Label("Profile", systemImage: "person")
        }
    }
  }
}

Step 7: Accessibility in SwiftUI

SwiftUI handles much of this automatically, but always verify:

// Image accessibility
Image("hero-photo")
  .accessibilityLabel("Team collaborating in a modern office")

// Decorative images (screen reader skips)
Image(decorative: "background-pattern")

// Buttons — label is automatic if using Text inside
Button("Sign In") { ... }  // VoiceOver reads "Sign In, button"

// Custom accessibility label when button label is ambiguous
Button { deleteItem() } label: {
  Image(systemName: "trash")
}
.accessibilityLabel("Delete item")

// Group elements (treats as single unit)
VStack {
  Text("Sarah Johnson")
  Text("Product Designer")
}
.accessibilityElement(children: .combine)

// Dynamic type support — always use semantic fonts
Text("Headline")
  .font(.headline)   // ✅ Scales with user's text size
  // NOT .font(.system(size: 17, weight: .semibold))  // ❌ Fixed size

Step 8: SwiftUI animations

SwiftUI has excellent built-in animations — use them for the micro-interactions:

// Button press spring
Button(action: primaryAction) {
  Text("Get Started")
    .padding(.horizontal, 24)
    .padding(.vertical, 14)
    .background(theme.primary)
    .foregroundStyle(theme.primaryFg)
    .clipShape(Capsule())
    .scaleEffect(isPressed ? 0.96 : 1.0)
    .animation(.spring(response: 0.2, dampingFraction: 0.6), value: isPressed)
}
.simultaneousGesture(
  DragGesture(minimumDistance: 0)
    .onChanged { _ in isPressed = true }
    .onEnded { _ in isPressed = false }
)

// Card appear transition
VStack { /* card content */ }
  .transition(.move(edge: .bottom).combined(with: .opacity))

// Respect reduced motion
@Environment(\.accessibilityReduceMotion) var reduceMotion

var animation: Animation {
  reduceMotion ? .none : .spring(response: 0.3, dampingFraction: 0.7)
}

Execution steps

1. Verify the Stitch design uses

   deviceType: MOBILE

2. Create Xcode project — File → New → App, SwiftUI interface, Swift language
3. Data layer — create

   Models/MockData.swift

   from static content in the design
4. Theme — create

   Theme/ThemeTokens.swift

   with extracted hex values, and

   Color+App.swift

5. Components — convert the Stitch HTML sections to SwiftUI views, file by file
6. Navigation — wire up

   TabView

   (tab bar) or

   NavigationStack

   (stack)
7. Build and run — in Xcode, Cmd+R. Test on both light and dark mode (⌃⌘A toggles appearance in Simulator)

Troubleshooting

.frame(maxWidth: .infinity)

ScrollView

.lineLimit(nil)

.fixedSize(horizontal: false, vertical: true)

AsyncImage

.tabItem { }

@Environment(\.dismiss) var dismiss

dismiss()

#Preview

References

• resources/component-template.swift

  — Boilerplate SwiftUI view

• resources/layout-mapping.md

  — Full HTML/CSS → SwiftUI reference

• resources/architecture-checklist.md

  — Pre-ship checklist

• scripts/fetch-stitch.sh

  — Reliable GCS HTML downloader