Translate Figma designs into SwiftUI code, or bring SwiftUI views, screens, and design tokens into Figma. The guidance preserves iOS interface patterns, semantic colors, and SF Symbols names across both directions.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
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', 'mirror my Swift code in a Figma file', or whenever a Figma URL appears alongside `.swift` files / an `.xcodeproj`. Routes to a direction-specific reference doc; loads alongside `figma-use` for the code → design path.
설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
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 |
아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
Search the private research library in Acme Research and summarize relevant material. Include each returned document's title and source URL so readers can identify the sources and check the material behind the summary.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Capture product screenshots for landing pages, newsletters, social posts, and presentations by operating the real app. Check page structure, image pixels, and visual appearance, then retake images with overlapping text, clipping, or other visible defects.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Find the right official documentation before answering technical questions. It identifies the library and version, retrieves focused references and examples, and explains relevant APIs while separating documented behavior from inference.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Implement or upgrade code using the project's exact dependency versions and matching Context7 documentation. Check available APIs, make the smallest compatible change, run package checks, and identify behavior that still needs verification in a running application.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Create an OpenCode plugin for iPolloWork with custom tools and hooks, which run code at specific events. The skill builds the TypeScript file and adds it to the configuration so it can load after a session restart.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Launch a standalone Chrome browser in a Daytona sandbox and control it through CDP, a browser debugging connection. Use it to complete sign-in, OAuth authorization, and web administration flows, then verify the visible results.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.