Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →SwiftUI ↔ Figma translation. Use whenever the user mentions Swift, SwiftUI, iOS, iPhone, or iPad — in EITHER direction — translating a Figma design into SwiftUI (design → code), or pushing SwiftUI views / screens / tokens back into a Figma file (code → design). Triggers on phrases like 'implement this Figma design in SwiftUI', 'build this screen in Swift', 'push this SwiftUI view to Figma', 'mirro
.claude/skills/kunanonj-cursor-plugin-figma-figma-swiftui/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-04 | ✗→✓ | ▲ Improved | 116% | 0% |
| case-05 | ✗→✓ | ▲ Improved | 38% | 0% |
| case-09 | ✗→✓ | ▲ Improved | -9% | 0% |
| case-13 | ✗→✓ | ▲ Improved | -38% | 0% |
| case-16 | ✗→✓ | ▲ Improved | 207% | 0% |
Translation between Figma designs and SwiftUI code, both directions. This file is a router — actual guidance lives in the references below.
| Direction | Trigger | Reference | |---|---|---| | Design → code | User wants SwiftUI in their iOS project from a Figma file/frame | references/design-to-code.md | | Code → design | User wants to push SwiftUI views / screens / tokens into a Figma file | references/code-to-design.md |
If the request is ambiguous — a Figma URL and .swift files both present, no verb makes it clear — ask the user which direction before loading a reference.
These points hold regardless of direction; the direction-specific references assume them.
get_design_context is the read tool for Figma. Pass clientLanguages: "swift" and clientFrameworks: "swiftui" so the response is framed as Swift. URL → tool args: figma.com/design/:fileKey/:fileName?node-id=:nodeId → use fileKey, replace - with : in nodeId. For figma.com/design/:fileKey/branch/:branchKey/:fileName, use branchKey as fileKey.get_design_context output is a structural reference, not a literal source. It approximates the visual. Never transliterate position: absolute / pixel frames / mix-blend-mode stacks into SwiftUI or into Figma — the screenshot is the source of truth in both directions.var(--backgrounds/primary, …), var(--labels/secondary, …), var(--separators/non-opaque, …) etc. map to Color(.systemBackground), Color.secondary, Color(.separator) in SwiftUI, and to variables in a semantic collection in Figma. Keep the mapping; drop the literal RGBA.get_design_context substitutes Figma's SF Symbol glyph runs back into <SFSymbol>{Image(systemName: "...")}</SFSymbol> wrappers in the response. Use those names verbatim. Code → design: call figma.util.getSfSymbolCharacter(name) inside use_figma to convert a symbol name to the matching character — never look up codepoints by hand.NavigationStack chrome; bottom row of icon+label pairs = TabView; repeating same-height rows with leading/trailing chrome = List. Match those system patterns rather than rebuilding them from primitives.use_figma is the API. Always load figma-use before any use_figma call. If the task involves building a full screen, also load figma-generate-design; if it involves building components or a design system, also load figma-generate-library.| Doc | When to load | |---|---| | references/design-to-code.md | Translating a Figma design / frame into SwiftUI | | references/code-to-design.md | Pushing SwiftUI views / screens / tokens into Figma |
| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-01 | fail→fail | 10,876 | 4,954 | -54% | 1 | 1 | 0% | 2,680 | 1,200 | -55% | 0 | 0 | — |
case-02 | fail→fail | 5,556 | 5,082 | -9% | 1 | 1 | 0% | 954 | 1,266 | +33% | 0 | 0 | — |
case-03 | fail→fail | 5,859 | 5,731 | -2% | 1 | 1 | 0% | 1,169 | 1,228 | +5% | 0 | 0 | — |
case-04 | fail→pass | 3,170 | 2,113 | -33% | 1 | 1 | 0% | 589 | 1,274 | +116% | 0 | 0 | — |
case-05 | fail→pass | 5,046 | 3,058 | -39% | 1 | 1 | 0% | 1,129 | 1,557 | +38% | 0 | 0 | — |
case-06 | pass→pass | 3,686 | 2,197 | -40% | 1 | 1 | 0% | 782 | 1,389 | +78% | 0 | 0 | — |
case-07 | pass→pass | 3,284 | 2,319 | -29% | 1 | 1 | 0% | 782 | 1,335 | +71% | 0 | 0 | — |
case-08 | pass→pass | 10,540 | 5,783 | -45% | 1 | 1 | 0% | 2,340 | 2,029 | -13% | 0 | 0 | — |
case-09 | fail→pass | 9,232 | 4,016 | -56% | 1 | 1 | 0% | 1,925 | 1,749 | -9% | 0 | 0 | — |
case-10 | pass→pass | 6,188 | 2,420 | -61% | 1 | 1 | 0% | 1,265 | 1,312 | +4% | 0 | 0 | — |
case-11 | pass→pass | 7,999 | 2,913 | -64% | 1 | 1 | 0% | 1,693 | 1,403 | -17% | 0 | 0 | — |
case-12 | pass→pass | 5,246 | 3,064 | -42% | 1 | 1 | 0% | 1,103 | 1,357 | +23% | 0 | 0 | — |
case-13 | fail→pass | 14,691 | 3,954 | -73% | 1 | 1 | 0% | 2,514 | 1,547 | -38% | 0 | 0 | — |
case-14 | pass→pass | 4,125 | 4,133 | +0% | 1 | 1 | 0% | 854 | 1,635 | +91% | 0 | 0 | — |
case-15 | pass→pass | 5,949 | 5,180 | -13% | 1 | 1 | 0% | 1,245 | 1,921 | +54% | 0 | 0 | — |
case-16 | fail→pass | 2,803 | 3,540 | +26% | 1 | 1 | 0% | 465 | 1,426 | +207% | 0 | 0 | — |
case-17 | fail→pass | 10,634 | 2,583 | -76% | 1 | 1 | 0% | 2,001 | 1,295 | -35% | 0 | 0 | — |
case-18 | fail→pass | 8,097 | 2,740 | -66% | 1 | 1 | 0% | 1,394 | 1,400 | +0% | 0 | 0 | — |
case-19 | fail→pass | 4,611 | 2,388 | -48% | 1 | 1 | 0% | 832 | 1,325 | +59% | 0 | 0 | — |
case-20 | pass→pass | 4,557 | 2,532 | -44% | 1 | 1 | 0% | 799 | 1,379 | +73% | 0 | 0 | — |
case-21 | pass→pass | 7,784 | 2,296 | -71% | 1 | 1 | 0% | 1,255 | 1,363 | +9% | 0 | 0 | — |
case-22 | pass→pass | 3,524 | 2,604 | -26% | 1 | 1 | 0% | 631 | 1,268 | +101% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted, and 19 counted toward the lift figure. The other 3 produced results that are not comparable between the two arms, so they are excluded from the headline rather than averaged into it. The headline lift of +36 percentage points is the difference between those two pass rates over the 19 comparable cases.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.