heyadam/claudedesign-to-swiftui

README preview

# 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

1. **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://`).
2. **Renders** the prototype in Chrome at iPhone 15 Pro size (390×844) and screenshots it.
3. **Reads** the HTML + every linked CSS file, and inventories assets (inline SVGs, Google Fonts, `<img>` tags).
4. **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.
5. **Writes** the generated file into your open Xcode workspace (via Apple's Xcode 26.3 MCP).
6. **Builds** the project and patches any errors from the navigator diagnostics.
7. **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

View full repository on GitHub →