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.
安装前可以查看交给 AI 代理的指令内容。
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 |
还没有评价。欢迎分享你的使用感受。
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
Review charts, diagrams, and dashboards for accessibility, including color contrast, keyboard access, and text alternatives. Get specific guidance for preserving key findings in screen readers, static exports, and reduced-motion views.
中文简介正在准备中。当前显示英语简介。
Give a photo collection a consistent look using Adobe tools to adjust color, tone, presets, and optional crops. Review a before-and-after sample before processing the full set, then receive links to the edited images.
中文简介正在准备中。当前显示英语简介。
Visualize a logo, sketch, or design on products such as mugs, shirts, and business cards. Review a pilot image, generate a visually consistent set, and collect the results on a shareable Firefly Board.
中文简介正在准备中。当前显示英语简介。
Prepare images and videos for social platforms using Adobe tools. Create image crops that keep the subject in view, expand backgrounds when available, preview a full-set sample, and resize videos while preserving their aspect ratio.
中文简介正在准备中。当前显示英语简介。
Create flyers, social posts, business cards, and other visuals from Adobe Express templates. Choose a template, customize its text and background color, and receive a design link, with additional editing and export options depending on the available tools.
中文简介正在准备中。当前显示英语简介。
Turn an uploaded video into three highlight edits with Adobe Quick Cut. Choose a target length and style, then compare versions that feature different moments and download the ones you prefer.
中文简介正在准备中。当前显示英语简介。