SuperAPI AI 工具集

figma-swiftui

设计与创作

查看项目

更新于 10-15 21:41

技能介绍

用途:在 Figma 设计与 SwiftUI 代码之间做双向翻译。用户提到 Swift、SwiftUI、iOS、iPhone 或 iPad 时触发。本文件是路由,具体指引在下方引用文档中。

方向选择:设计→代码,当用户想从 Figma 文件/画板生成 iOS 项目中的 SwiftUI 时,加载 references/design-to-code.md;代码→设计,当用户想把 SwiftUI 视图/界面/令牌推送到 Figma 时,加载 references/code-to-design.md。若请求含糊(同时出现 Figma URL 和 .swift 文件且无明确动词),先询问方向再加载引用。

共享上下文(两个方向通用):get_design_context 是 Figma 的读取工具,传入 clientLanguages: "swift" 和 clientFrameworks: "swiftui",使响应以 Swift 框架呈现。URL 转工具参数:figma.com/design/:fileKey/:fileName?node-id=:nodeId 使用 fileKey,nodeId 中的 - 替换为 :;对于 figma.com/design/:fileKey/branch/:branchKey/:fileName,使用 branchKey 作为 fileKey。get_design_context 输出中的 React+Tailwind 只是结构参考,不是字面源码,它近似视觉;不要将 position: absolute、像素画板或 mix-blend-mode 堆叠直译进 SwiftUI 或 Figma,两个方向都以截图为事实来源。iOS HIG 语义颜色是令牌而非十六进制,如 var(--backgrounds/primary, …)、var(--labels/secondary, …)、var(--separators/non-opaque, …) 分别映射到 SwiftUI 的 Color(.systemBackground)、Color.secondary、Color(.separator),以及 Figma 语义集合中的变量,保留映射、丢弃字面 RGBA。SF Symbols 两个方向都按名称往返,绝不按码点:设计→代码时 get_design_context 会把 Figma 的 SF Symbol 字形替换回 <SFSymbol>{Image(systemName: "...")}</SFSymbol> 包装,名称原样使用;代码→设计时在 use_figma 内调用 figma.util.getSfSymbolCharacter(name) 将符号名转为对应字符,不要手工查码点。识别底层 iOS 模式而非字面节点/视图名:大标题+返回箭头+尾部操作=NavigationStack 外壳;底部图标+标签行=TabView;重复等高行带首尾装饰=List,应匹配系统模式而非用基础元素重建。代码→设计使用 use_figma API,任何 use_figma 调用前必须先加载 figma-use;若构建完整屏幕,还需加载 figma-generate-design;若构建组件或设计系统,还需加载 figma-generate-library。

引用文档:references/design-to-code.md 用于将 Figma 设计/画板翻译为 SwiftUI;references/code-to-design.md 用于将 SwiftUI 视图/界面/令牌推送到 Figma。

限制:资料未提供具体安装命令、收费、价格、平台支持范围或效果保证,暂未提供。