Swiftui

Sizing

Alignment

Basic Elements

Icons

Styling

Text Styling

Components (ref)

Mandatory Workflow

1. Read the Design

mcp__pencil__get_editor_state() - Get current .pen file
mcp__pencil__batch_get({nodeIds: ["targetFrameId"], readDepth: 10}) - Full structure
mcp__pencil__get_variables() - Get design tokens/colors

2. Analyze Structure

• Identify reusable components (nodes with reusable: true)
• Map component hierarchy to View hierarchy
• Extract color/spacing variables for theme

3. Generate SwiftUI Code

Theme/Colors First

// Theme.swift
import SwiftUI

extension Color {
    static let theme = ColorTheme()
}

struct ColorTheme {
    let primary = Color(hex: "007AFF")
    let background = Color(hex: "F5F5F5")
    let textPrimary = Color(hex: "000000")
    // ... from .pen variables
}

Components as Views

// ButtonPrimary.swift (from reusable component)
struct ButtonPrimary: View {
    let title: String
    let action: () -> Void

    var body: some View {
        Button(action: action) {
            Text(title)
                .font(.system(size: 16, weight: .semibold))
                .foregroundColor(.white)
                .frame(maxWidth: .infinity)
                .padding(.vertical, 16)
                .background(Color.theme.primary)
                .clipShape(RoundedRectangle(cornerRadius: 12))
        }
    }
}

Screen as View

// LoginView.swift (from frame)
struct LoginView: View {
    @State private var email = ""
    @State private var password = ""

    var body: some View {
        VStack(spacing: 24) {
            // Header
            Text("Welcome Back")
                .font(.system(size: 28, weight: .bold))
                .foregroundColor(.theme.textPrimary)

            // Form fields
            VStack(spacing: 16) {
                TextField("Email", text: $email)
                    .textFieldStyle(.roundedBorder)

                SecureField("Password", text: $password)
                    .textFieldStyle(.roundedBorder)
            }

            // Button
            ButtonPrimary(title: "Sign In") {
                // Action
            }

            Spacer()
        }
        .padding(24)
        .background(Color.theme.background)
    }
}

4. Verify Visually

mcp__pencil__get_screenshot(nodeId) - Compare design to implementation

SF Symbols Mapping

Common Lucide/Feather → SF Symbols:

Color Hex Extension

Include this helper in your Swift project:

extension Color {
    init(hex: String) {
        let hex = hex.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
        var int: UInt64 = 0
        Scanner(string: hex).scanHexInt64(&int)
        let a, r, g, b: UInt64
        switch hex.count {
        case 3:
            (a, r, g, b) = (255, (int >> 8) * 17, (int >> 4 & 0xF) * 17, (int & 0xF) * 17)
        case 6:
            (a, r, g, b) = (255, int >> 16, int >> 8 & 0xFF, int & 0xFF)
        case 8:
            (a, r, g, b) = (int >> 24, int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF)
        default:
            (a, r, g, b) = (1, 1, 1, 0)
        }
        self.init(
            .sRGB,
            red: Double(r) / 255,
            green: Double(g) / 255,
            blue: Double(b) / 255,
            opacity: Double(a) / 255
        )
    }
}

Output Structure

Sources/
  Theme/
    ColorTheme.swift      # From .pen variables
    Typography.swift      # Font styles
  Components/
    ButtonPrimary.swift   # From reusable components
    InputField.swift
    Card.swift
  Views/
    LoginView.swift       # From frames/screens
    DashboardView.swift

Best Practices

1. Extract components first - Convert reusable nodes to View structs
2. Use SwiftUI idioms - Don't force web patterns into SwiftUI
3. Leverage @State/@Binding - For interactive components
4. Use native controls - Prefer TextField, Button over custom when possible
5. Test on device - Screenshots can't capture interaction feel
6. Consider dark mode - Map variables to support both themes

Limitations

• Complex SVG paths need manual conversion
• Animations are not captured in .pen
• Some gradient types may need adjustment
• Custom fonts need to be bundled separately