From swift-ui-prototyper
Generate SwiftUI prototypes with stub data for PRD documentation
How this skill is triggered — by the user, by Claude, or both
Slash command
/swift-ui-prototyper:prototype-generatorThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generate SwiftUI prototypes with automatic stub data for multiple UI states (mini-Storybook).
Generate SwiftUI prototypes with automatic stub data for multiple UI states (mini-Storybook).
Activate this skill when the user:
Parse the user's description to identify:
Check if swift-ui-prototype/ folder exists in the current project:
{project}/
├── swift-ui-prototype/
│ ├── swift-ui-prototype.xcodeproj/ # iOS/iPadOS project for XcodeBuildMCP
│ ├── App.swift
│ ├── ContentView.swift
│ ├── Views/
│ └── Stubs/
└── docs/
└── mockups/
If not, create the minimal structure:
swift-ui-prototype/ folderswift-ui-prototype.xcodeproj targeting iOS 17.0+ (iPad support)App.swift with @main (cross-platform compatible)ContentView.swift with navigation to prototypesViews/ and Stubs/ directoriesNote: Uses iOS/iPadOS target for XcodeBuildMCP automation. iPad Pro 13" simulator provides desktop-like 1024x1366 pt canvas.
Create stub file in Stubs/{ModelName}Stubs.swift:
import Foundation
struct {ModelName}: Identifiable {
let id: String
// ... properties based on user description
}
enum {ModelName}Stubs {
// Empty state
static let empty: [{ModelName}] = []
// Single item state
static let single: [{ModelName}] = [
// One realistic example
]
// Typical state (3-5 items)
static let typical: [{ModelName}] = [
// Multiple realistic examples
]
// Error/edge case state
static let withErrors: [{ModelName}] = [
// Examples showing error states
]
}
Important stub guidelines:
Create View file in Views/{ViewName}.swift:
import SwiftUI
struct {ViewName}: View {
let data: [{ModelName}]
// ... other properties
var body: some View {
// Implementation based on user description
}
}
// MARK: - Previews (Mini-Storybook)
#Preview("Empty") {
{ViewName}(data: {ModelName}Stubs.empty)
.frame(width: 900, height: 600)
}
#Preview("Single Item") {
{ViewName}(data: {ModelName}Stubs.single)
.frame(width: 900, height: 600)
}
#Preview("Typical") {
{ViewName}(data: {ModelName}Stubs.typical)
.frame(width: 900, height: 600)
}
#Preview("With Errors") {
{ViewName}(data: {ModelName}Stubs.withErrors)
.frame(width: 900, height: 600)
}
Add the new view to ContentView.swift navigation:
NavigationLink(value: "{ViewName}") {
Label("{Display Name}", systemImage: "{sf-symbol}")
}
cd {project}/swift-ui-prototype
swift build
If build fails, fix errors and rebuild.
Option A: XcodeBuildMCP with iPad Pro Simulator (Recommended)
The prototype uses iOS/iPadOS for automated screenshots via XcodeBuildMCP:
Set defaults (once per session):
session_set_defaults({
projectPath: "{project}/swift-ui-prototype/swift-ui-prototype.xcodeproj",
scheme: "swift-ui-prototype",
simulatorId: "iPad Pro 13-inch (M5)",
bundleId: "no.fagfilm.swift-ui-prototype"
})
Boot simulator: boot_sim()
Configure simulator for screenshots:
Build and run: build_run_sim()
Take high-resolution screenshot (requires post-processing):
# Take raw screenshot (portrait framebuffer)
xcrun simctl io booted screenshot /tmp/raw-screenshot.png --type png
Process screenshot (rotate and crop iPad chrome):
from PIL import Image
img = Image.open('/tmp/raw-screenshot.png')
# Rotation depends on simulator orientation:
# - Landscape Right (Rotate Right): use rotate(-90)
# - Landscape Left (Rotate Left): use rotate(90)
img_rotated = img.rotate(-90, expand=True)
# Crop: top 130px (status bar + camera), bottom 42px (home indicator)
width, height = img_rotated.size
cropped = img_rotated.crop((0, 130, width, height - 42))
# Save as JPEG
cropped.convert('RGB').save('docs/mockups/{view}-{state}.jpg', quality=90)
Alternative: Quick screenshots (lower resolution, no post-processing):
screenshot({ returnFormat: "path" })
cp {screenshot_path} docs/mockups/{view}-{state}.jpg
Resolution comparison:
iPad Pro 13" (1024x1366 pt) provides desktop-like layouts with sidebar navigation.
Option B: Manual (Fallback)
Instruct user:
swift-ui-prototype/swift-ui-prototype.xcodeproj in Xcodedocs/mockups/{view}-{state}.png### {ViewName}
| State | Preview |
|-------|---------|
| Empty |  |
| Typical |  |
| With Errors |  |
**Files created:**
- `swift-ui-prototype/Views/{ViewName}.swift`
- `swift-ui-prototype/Stubs/{ModelName}Stubs.swift`
**To generate screenshots:**
1. Open Package.swift in Xcode
2. Select preview → Right-click → Export Preview Image
3. Save to docs/mockups/
If a DesignSystem.swift file exists in the project (created via design-system-creator skill), use its constants instead of hardcoded values:
// WITHOUT design system (system defaults)
Text("Title")
.foregroundStyle(.primary)
.background(Color(uiColor: .systemBackground))
// WITH design system (custom styling)
Text("Title")
.foregroundStyle(DesignSystem.Colors.textPrimary)
.background(DesignSystem.Colors.backgroundPrimary)
Check for design system:
swift-ui-prototype/DesignSystem.swiftBenefits of design systems:
#Preview macro (not deprecated PreviewProvider)NavigationSplitView for sidebar layouts (works identically on iPadOS and macOS)#if os(macOS)
.windowStyle(.hiddenTitleBar)
#endif
User: /prototype Delivery screen with encoding queue showing progress bars
Assistant:
EncodingJob model with progress, status, filenameEncodingJobStubs with states: empty, active encoding, mixed progress, all completeDeliveryView with queue list and progress indicatorsFor real-time preview in Claude Cowork's embedded browser, set up the preview server:
Copy preview server to the prototype folder:
cp {plugin}/scripts/preview-server.js {project}/swift-ui-prototype/
Create .claude/launch.json in the prototype folder:
{
"version": "0.0.1",
"autoVerify": true,
"configurations": [
{
"name": "SwiftUI Preview",
"runtimeExecutable": "node",
"runtimeArgs": ["preview-server.js"],
"port": 3000
}
]
}
Ensure simulator is booted before starting the preview server.
launch.json.swift files in Views/ and Stubs/| Endpoint | Description |
|---|---|
/ | HTML preview page |
/screenshot.png | Latest screenshot |
/api/status | Build status JSON |
/api/rebuild | Trigger manual rebuild |
{project}/
├── swift-ui-prototype/
│ ├── .claude/
│ │ └── launch.json # Cowork server config
│ ├── preview-server.js # Live preview server
│ ├── swift-ui-prototype.xcodeproj/
│ ├── Views/
│ ├── Stubs/
│ └── docs/mockups/
│ └── preview-latest.png # Auto-updated screenshot
└── docs/
└── mockups/
npx claudepluginhub kjetilge/kjetil-claude-marketplace --plugin swift-ui-prototyperConverts Claude HTML/CSS prototypes (via design URL or .tar.gz) to single self-contained SwiftUI View files in active Xcode workspaces. Generates code, builds, previews, and visually diffs for layout fidelity.
Converts Stitch mobile designs to native iOS SwiftUI views with VStack/HStack/ZStack layout mapping, dark mode color assets, NavigationStack/TabView routing, and Xcode project structure.
Generates production-grade SwiftUI code for Apple Design Award-quality iOS interfaces—screens, components, redesigns—with bold aesthetics and screenshot-driven iteration.