claudedesign-to-swiftui
Turn a Claude-generated HTML design prototype (a URL from api.anthropic.com/v1/design/h/... or a local .tar.gz) into a SwiftUI View file written directly into your active Xcode workspace — built, previewed, and visually diff'd against the prototype until it matches.
One prototype in, one self-contained .swift file out.
What it does, end to end
- Fetches the design (URL or tarball), unpacks it, and serves it locally over
http://127.0.0.1:<port> (Claude designs commonly use ES modules and fetch(), which fail under file://).
- Renders the prototype in Chrome at iPhone 15 Pro size (390×844) and screenshots it.
- Reads the HTML + every linked CSS file, and inventories assets (inline SVGs, Google Fonts,
<img> tags).
- Translates the DOM and styles to SwiftUI using bundled reference mappings (layout, typography, styling, component patterns, plus three asset handlers: SVG → SF Symbol or
Path, Google Fonts → SF system equivalents, <img> → Assets.xcassets import or AsyncImage) and two worked examples.
- Writes the generated file into your open Xcode workspace (via Apple's Xcode 26.3 MCP).
- Builds the project and patches any errors from the navigator diagnostics.
- Renders the SwiftUI preview and visually diffs it against the prototype screenshot, iterating until they match.
Output is a single .swift file: one View struct + a #Preview + (if used) a fileprivate Color(hex:) extension and one fileprivate struct FooIcon: View per custom SVG icon. No external packages, no multi-screen navigation, no JS interactivity — visual layout fidelity only.
Requirements
| |
|---|
| Claude Code | latest |
| Xcode | 26.3 or later |
| Xcode setting | Settings → Intelligence → Xcode Tools = ON |
| Xcode state | target project/workspace open when you run the command |
MCP: xcode-tools | bundled in this plugin's .mcp.json (ships with Xcode 26.3+ as xcrun mcpbridge) |
MCP: claude-in-chrome | user-installed — used to render and screenshot the HTML prototype |
If either MCP is missing, the skill degrades gracefully: it'll emit the .swift file via the standard Write tool and ask you to preview/diff manually.
Install
/plugin marketplace add heyadam/claudedesign-to-swiftui
/plugin install claudedesign-to-swiftui@claudedesign-to-swiftui
Verify the install
/plugin list
You should see claudedesign-to-swiftui listed and the /convert command available.
Usage
/convert <design-url-or-tarball-path>
Examples:
/convert https://api.anthropic.com/v1/design/h/abc123?open_file=index.html
/convert ~/Downloads/my-prototype.tar.gz
Running /convert with no argument will prompt you for a URL or path.
Design URLs are short-lived / one-shot. If yours 404s, generate a fresh one from Claude and retry.
What happens next
- The skill prints the resolved entry HTML, renders it in Chrome, and shows you the screenshot.
- It picks a meaningful filename (e.g.
OnboardingView.swift) based on the prototype's purpose. If your workspace has multiple groups it'll ask which to write into.
- It builds, fixes any errors, renders the preview, and compares. You'll see a concrete discrepancy list (layout, sizing, colors, typography) each iteration.
- After three iterations without convergence, it stops and hands you the remaining diff.
What's inside the plugin
