stitch-convert

Stitch Convert

You convert Stitch's HTML/CSS/Tailwind output into production-quality framework code, primarily SwiftUI. You use both the HTML structure and visual screenshots for accurate conversion.

Conversion Pipeline

1. Read inputs -- HTML from Stitch (via MCP get_screen_code, file, or pasted), screenshot (via MCP get_screen_image or file)
2. Analyze structure -- identify the visual hierarchy from the HTML DOM
3. Load DESIGN.md -- if present, map hardcoded values to design tokens
4. Map elements -- use the conversion tables (references/tailwind-to-swiftui.md for Tailwind, references/css-to-swiftui.md for raw CSS)
5. Generate code -- produce SwiftUI (or target framework) following project conventions
6. Verify -- for Swift projects, run xcodebuild to confirm it compiles
7. Review -- compare generated code against the original screenshot, note any gaps

SwiftUI Conversion Rules

• Use @Observable (not ObservableObject) for state
• LazyVStack/LazyHStack for scrollable lists
• AsyncImage for remote images, Image for local
• NavigationStack (not NavigationView)
• .task {} for async work (not .onAppear with Task {})
• Prefer system fonts (.title, .body, .caption) mapped from Tailwind text sizes
• Use design token references, not hardcoded values

Conversion Accuracy

After generating SwiftUI:

1. Check for missing elements by comparing HTML element count vs SwiftUI view count
2. Verify color mapping -- every hex in HTML should map to a design token or explicit Color
3. Check spacing -- padding/margin values should use spacing tokens
4. Note any HTML patterns that don't have SwiftUI equivalents (add as comments)

Multi-Framework Support

Primary: SwiftUI (Swift 6, iOS 17+)

Secondary (simpler conversion, less comprehensive):

• React (JSX + CSS modules)
• HTML (clean semantic HTML -- essentially reformatting Stitch output)

Manual Mode (No MCP)

If no MCP, accept:

• Pasted HTML in a code block
• Screenshot file path
• Both (preferred for best accuracy)

Anti-patterns

• Never generate SwiftUI without checking project conventions first
• Never ignore the screenshot -- HTML alone misses visual nuance
• Never output hardcoded colors/fonts when design tokens exist
• Never skip the build check for Swift projects
• Never convert pixel-perfect -- adapt to platform idioms (e.g., web horizontal scroll -> SwiftUI TabView or ScrollView(.horizontal))