AI导哈

SwiftUI组件树生成器

一个从Figma设计中提取并优化生成SwiftUI组件树的服务，大幅减少AI生成代码时的上下文噪音。

  • by WTPieh
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 WTPieh/SigmaMCP

使用说明

figma swift mcp

获取Figma设计并返回结果的MCP服务器 精简、SwiftUI优化的组件树 --去除所有原始JSON噪声，这样你的AI助手只会看到生成习惯性SwiftUI代码所需的内容。

为什么？

标准的Figma MCP返回大量的React/Tailwind代码（约45K+个字符），污染了AI的上下文窗口，并产生了更差的SwiftUI输出。此服务器：

  1. 直接调用Figma REST API
  2. 解析服务器端的原始节点树
  3. 返回一个压缩的组件树（约3K个字符），其中包含：
    • 组件层次结构和类型
    • 布局属性（间距、填充、半径）
    • SF符号映射
    • 设计符号（颜色、排版、间距）
    • SwiftUI类型提示（GlassButton、Toggle、Sheet等）

约93%的上下文减少。 AI永远看不到原始数据。

工具

工具 说明
get_swift_tree 获取节点→ 返回细长的SwiftUI组件树
get_design_tokens 获取设计标记（颜色、间距、类型）
get_screenshot_url 获取渲染的PNG URL以供视觉参考

设置

1.生成Figma令牌

首选 Figma→ 设置→ 账户→ 个人访问令牌 并创建令牌。

2.安装

git clone <this-repo>
cd figma-swift-mcp
npm install
npm run build

3.配置克劳德桌面

添加到您的Claude桌面配置(~/Library/Application Support/Claude/claude_desktop_config.json):

{
  "mcpServers": {
    "figma-swift": {
      "command": "node",
      "args": ["/absolute/path/to/figma-swift-mcp/build/index.js"],
      "env": {
        "FIGMA_TOKEN": "your-figma-personal-access-token"
      }
    }
  }
}

4.重新启动克劳德桌面

这 figma-swift 工具现在应该出现在您的MCP工具列表中。

用法

在克劳德身上，你可以说：

“在Figma.com/design/Wi3zPekZ6ecpQTqLgcq4Xi/HornScore？节点id=2217:48104获取Figma设计并生成SwiftUI”

克劳德将：

  1. 呼叫 get_swift_tree 带有文件密钥和节点ID
  2. 接收细长组件树（不是原始Figma数据）
  3. 使用本机API生成干净的SwiftUI代码

输出示例

{
  "screen": "Create Post - Visibility",
  "nodeId": "2217:48104",
  "width": 440,
  "height": 956,
  "components": [
    {
      "name": "Top Toolbar",
      "type": "Toolbar",
      "children": [
        { "name": "Back", "type": "GlassButton", "icon": "chevron.left" },
        { "name": "Title", "type": "Text", "content": "Create Post" },
        { "name": "Help", "type": "GlassButton", "icon": "questionmark" }
      ]
    },
    {
      "name": "Photo Container",
      "type": "Container",
      "cornerRadius": 22,
      "aspectRatio": "408:368"
    }
  ],
  "tokens": {
    "Brand/Primary": "#be845d",
    "Backgrounds (Grouped)/Primary": "#f2f2f7"
  }
}

克劳德代码技能

这 figma-to-swiftui/ 文件夹包含Claude Code技能。要安装它，请压缩文件夹并将其添加到Claude Code中：

zip -r figma-to-swiftui.zip figma-to-swiftui/

然后添加 .zip 将文件作为Claude Code中的一项技能。

测试

使用MCP检查器进行本地测试：

npm run inspector

延伸

解析器在 src/figma-parser.ts 手柄：

  • 组件类型检测 --将Figma图层名称映射到SwiftUI类型
  • SF符号映射 --将Unicode SF符号字符转换为命名符号
  • 噪声过滤 --跳过模糊、遮罩、阴影和装饰层
  • 树木压扁 --折叠单个子包装节点

要添加新的组件类型或改进映射，请编辑 detectComponentType() 和 SF_SYMBOL_MAP 在 figma-parser.ts.

相关 MCP