figma swift mcp
获取Figma设计并返回结果的MCP服务器 精简、SwiftUI优化的组件树 --去除所有原始JSON噪声，这样你的AI助手只会看到生成习惯性SwiftUI代码所需的内容。
为什么？
标准的Figma MCP返回大量的React/Tailwind代码（约45K+个字符），污染了AI的上下文窗口，并产生了更差的SwiftUI输出。此服务器：
- 直接调用Figma REST API
- 解析服务器端的原始节点树
- 返回一个压缩的组件树（约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
cd figma-swift-mcp
npm install
npm run build3.配置克劳德桌面
添加到您的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”
克劳德将：
- 呼叫
get_swift_tree带有文件密钥和节点ID - 接收细长组件树（不是原始Figma数据）
- 使用本机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.