Getting it into your agent
This one installs as part of its plugin. Adding the marketplace and installing the plugin brings it with everything else the plugin ships.
/plugin marketplace add heyadam/claudedesign-to-swiftui/plugin install claudedesign-to-swiftuiWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/heyadam/claudedesign-to-swiftui/claude-design-to-swiftui)<a href="https://agentmods.dev/skills/heyadam/claudedesign-to-swiftui/claude-design-to-swiftui"><img src="https://agentmods.dev/badge/skills/heyadam/claudedesign-to-swiftui/claude-design-to-swiftui/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/heyadam/claudedesign-to-swiftui/claude-design-to-swiftui"><img src="https://agentmods.dev/badge/skills/heyadam/claudedesign-to-swiftui/claude-design-to-swiftui.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00126 | $0.03006 |
| Opus 5 | $0.00063 | $0.01503 |
| Sonnet 5 | $0.00025 | $0.00601 |
| Haiku 4.5 | $0.00013 | $0.00301 |
Grade A, and why
claude-design-to-swiftui scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 12d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 189 lines — stays where its author put it; the contents beside it link to each section on GitHub.
HTML prototype → SwiftUI View
This skill converts a Claude-generated HTML/CSS prototype (delivered as a design URL from api.anthropic.com/v1/design/h/..., or a local .tar.gz archive) into a single SwiftUI View file inside the user's active Xcode workspace.
The output is one self-contained .swift file: one View struct + a #Preview, plus inline Path-based icons and any imported image assets. No multi-screen navigation and no JS interactivity — visual layout fidelity only.
Required MCP servers
This skill calls into two MCP servers. If either is missing, stop and tell the user how to enable it.
xcode-tools(Apple's native Xcode MCP, ships with Xcode 26.3+ asxcrun mcpbridge). Bundled in this plugin's.mcp.json. The user must enable it once: Xcode → Settings (⌘,) → Intelligence → Xcode Tools → ON. Xcode must be running with the target project open.claude-in-chrome(user-installed). Used to render the HTML prototype for screenshotting.
Workflow
Follow these steps in order. Do not skip the build or visual-diff steps.
1. Fetch the design and start a local server
"${CLAUDE_PLUGIN_ROOT}/skills/claude-design-to-swiftui/scripts/fetch.sh" <design-url-or-tarball-path>
Accepts either a Claude design URL (https://api.anthropic.com/v1/design/h/<id>?open_file=<name>) or a local .tar.gz path. The script downloads (if needed), unpacks to a temp directory, starts a localhost-bound python3 -m http.server on a free port, and prints three lines on stdout:
- The URL to the entry HTML (e.g.
http://127.0.0.1:51234/index.html) - The server PID (capture for cleanup in step 8)
- The unpack directory (capture for cleanup in step 8)
Entry resolution: URL-decoded open_file= query param → index.html → first *.html. The local server is required because Claude designs commonly use ES modules / fetch() which fail under file:// origins.
Note: design URLs are one-shot/short-lived. Fetch immediately; if it 404s, ask the user for a fresh URL.
What ships with it
15 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- examples/01-landing-card/input.html 1.6 KB
- examples/01-landing-card/output.swift 3.0 KB
- examples/02-list-with-rows/input.html 2.2 KB
- examples/02-list-with-rows/output.swift 3.7 KB
- references/asset-catalog-import.md 4.8 KB
- references/component-patterns.md 4.4 KB
- references/font-mapping.md 7.1 KB
- references/layout-mapping.md 4.5 KB
- references/styling-mapping.md 4.0 KB
- references/svg-path-translation.md 6.1 KB
- references/svg-to-sfsymbol.md 4.9 KB
- references/swiftui-gotchas.md 4.9 KB
- references/typography-mapping.md 4.0 KB
- scripts/fetch.sh 2.9 KB runs code
- scripts/stop.sh 269 B runs code
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 12d ago First seen · 189 lines · 126 tokens per session scan A b08790c4cb98
claude-design-to-swiftui is a skill published in the GitHub repository heyadam/claudedesign-to-swiftui (92 stars, last pushed 4mo ago), licensed MIT. It adds 126 tokens to every session and 3,006 once invoked, about $0.0006 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
wear-compose-m3
Expert guidance for working with Wear OS Compose Material3. Use this skill when creating, updating, or migrating Wear OS projects. This includes the androidx.wear.compose.material3, androidx.wear.compose.foundation, and androidx.wear.compose.navigation3 libraries. Also working with core components such as AppScaffold…
kotlin-specialist
Provides idiomatic Kotlin implementation patterns including coroutine concurrency, Flow stream handling, multiplatform architecture, Compose UI construction, Ktor server setup, and type-safe DSL design. Use when building Kotlin applications requiring coroutines, multiplatform development, or Android with Compose.…
build-android-binary
Compile a PAM control's Android Kotlin module into the runtime-loadable DEX for a .ppmplugin. Creates a staged Gradle build with the pinned wrapper and react-android compile dependency, verifies manifest/module/package alignment and runtime-loading constraints, builds the release AAR, then runs d8 --min-api 24. Writes…
swiftui-dev
Use this skill for SwiftUI development, architecture, structure, performance, and Apple native app profiling. It combines.
android-navigation-3
Install and migrate to Jetpack Navigation 3. Use when implementing Navigation 3 patterns including NavDisplay, NavKey routes, deep links, multiple backstacks, scenes (dialogs, bottom sheets), or migrating from Navigation 2.
mobiai-kmp
Use when working on a Kotlin Multiplatform project — shared code, expect/actual declarations, platform-specific implementations, building and testing.