SuperAPI AI 工具集

figma-to-swiftui

前端与建站

查看项目

更新于 10-16 06:21

技能介绍

用途:把 Figma 节点翻译为像素级准确的 SwiftUI 视图,结合 MCP 集成规则与结构化实现流程,用于 iOS 项目。

前提:需连接 Figma MCP 服务器;用户提供 Figma URL(如 https://www.figma.com/design/:fileKey/:fileName?node-id=3166-70147&m=dev),仅 node-id 有效;或使用 figma-desktop MCP 时直接在桌面端选中节点。建议已有 SwiftUI 代码库的 Xcode 项目。

主要流程:解析 URL 提取 fileKey 与 nodeId(node-id 中的 - 需替换为 :,忽略其他查询参数,拒绝 /proto/ 与 /board/ 链接);用 get_design_context 获取设计数据(prompt 可指定 SwiftUI 与项目提示);用 get_screenshot 获取视觉基准;用 get_variable_defs 获取设计令牌;下载资源(优先 SF Symbols,其余用 curl 下载临时 localhost URL,图标可用 get_screenshot 导出 PNG,放入 Asset Catalog)。修改现有界面时先做逐元素适配审计(ADD/UPDATE/REMOVE 清单)。实现前用 get_code_connect_map 检查已有映射,并检查项目依赖(如图片加载、动画、图表库),优先复用项目已有方案。

关键规则:MCP 输出(React + Tailwind)是设计意图说明,不可直接移植,需读取属性后用原生 SwiftUI 重建;不要实现 Figma 稿中的系统元素(键盘、状态栏、Home 指示条、系统导航返回按钮、原生 TabView 标签栏、系统弹窗、分享面板、搜索栏、下拉刷新、分页点);布局、字体、颜色、组件、效果、动画按参考映射转换;项目令牌优先,冲突时最小调整。

验证:仅在用户要求时进行,先询问验证方式(Xcode 预览对比、模拟器手动对比、快照测试或不验证)。完成后可用 add_code_connect_map 注册可复用组件的映射。

限制:需 Figma MCP 连接;资源下载 URL 为临时地址;复杂设计需先用 get_metadata 分节处理;变体组件需先询问用户实现方式;未提供具体收费、平台支持范围等信息。