From ios-dev
AI-powered SwiftUI generation - screenshot to code, design to SwiftUI
npx claudepluginhub willsigmon/sigstack --plugin ios-devThis skill is limited to using the following tools:
Generate SwiftUI code from designs, screenshots, and descriptions.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Guides MCP server integration in Claude Code plugins via .mcp.json or plugin.json configs for stdio, SSE, HTTP types, enabling external services as tools.
Generate SwiftUI code from designs, screenshots, and descriptions.
Here's a screenshot of a login screen I like.
Create SwiftUI code that matches this design.
Use my existing ColorPalette and Typography styles.
Make it work with my AuthViewModel.
Look at this screenshot of my app.
What SwiftUI components would best recreate this?
Consider:
- Layout hierarchy
- Spacing patterns
- Color usage
- Typography
Analyze this screenshot and extract:
1. Color palette (as SwiftUI Color extensions)
2. Typography styles (as ViewModifiers)
3. Spacing values (as constants)
4. Component patterns
// Prompt: "Card with image on left, title + subtitle on right,
// rounded corners, subtle shadow"
struct ContentCard: View {
let image: Image
let title: String
let subtitle: String
var body: some View {
HStack(spacing: 16) {
image
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 80, height: 80)
.clipShape(RoundedRectangle(cornerRadius: 12))
VStack(alignment: .leading, spacing: 4) {
Text(title)
.font(.headline)
Text(subtitle)
.font(.subheadline)
.foregroundStyle(.secondary)
}
Spacer()
}
.padding()
.background(.background)
.clipShape(RoundedRectangle(cornerRadius: 16))
.shadow(color: .black.opacity(0.1), radius: 8, y: 4)
}
}
// Prompt: "Grid that's 2 columns on iPhone, 3 on iPad"
struct AdaptiveGrid<Content: View>: View {
@Environment(\.horizontalSizeClass) var sizeClass
let content: () -> Content
var columns: [GridItem] {
let count = sizeClass == .compact ? 2 : 3
return Array(repeating: GridItem(.flexible(), spacing: 16), count: count)
}
var body: some View {
LazyVGrid(columns: columns, spacing: 16) {
content()
}
}
}
Using the Stitch design at project/screen/123:
Generate SwiftUI code following my codebase patterns.
Use existing:
- Theme.swift for colors
- Typography.swift for fonts
- Components/ for reusable views
My codebase uses:
- @Observable for state
- NavigationStack (not NavigationView)
- ViewModifiers for reusable styling
- Preview macros
Generate code that fits these patterns.
This generated view is too large.
Extract reusable components:
1. HeaderView
2. ContentSection
3. ActionButton
Keep them in the same file as private views.
Add accessibility to this generated code:
- VoiceOver labels
- Dynamic Type support
- Reduce Motion support
- Semantic grouping
1. Generate initial code from screenshot
2. Preview in Xcode
3. Screenshot the preview
4. Send back: "This doesn't match. The spacing is off."
5. Get refined code
6. Repeat until perfect
Before generating, check Apple docs for:
- Latest SwiftUI APIs for this component type
- Platform availability
- Preferred patterns
#Preview {
ContentCard(
image: Image("sample"),
title: "Sample Title",
subtitle: "Sample subtitle text"
)
.padding()
}
Use when: Converting designs to code, iterating on UI, learning SwiftUI patterns