superconnect
AI自动生成Figma设计稿与代码库的映射文件
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：superconnect。 它的用途是：AI自动生成Figma设计稿与代码库的映射文件 完整的 Skill 内容见：https://321skill.com/skills/superconnect/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“请帮我为当前Angular组件库生成Figma Code Connect映射文件。”，它会自动扫描你的Figma设计文件，分析组件库结构，并调用AI模型生成对应的.figma.ts映射文件，最后指导你使用Figma CLI发布这些映射，从而将设计与代码高效连接起来。
介绍
Superconnect是一款AI驱动的代码生成工具，旨在解决Figma Code Connect手动映射耗时且对Angular支持不佳的痛点。它通过扫描Figma设计文件和分析React或Angular组件仓库，自动生成对应的.figma.tsx或.figma.ts映射文件，极大简化了设计与代码的同步流程。
使用前需配置Node.js环境、Figma访问令牌及AI服务商API密钥，并通过superconnect init创建配置文件。运行superconnect命令即可自动完成所有组件的映射文件生成，最后使用Figma官方CLI工具发布回Figma文件。
该工具特别适合需要将Figma设计系统与代码组件库进行高效、准确连接的前端团队，尤其是使用Angular框架的团队。对于React项目，它也能提供比官方交互式工具更自动化的批量处理能力。
建议在首次使用时仔细阅读环境配置要求，确保拥有Figma企业版账户及文件写入权限。在CI/CD流水线中可使用--yes参数进行非交互式运行。注意生成的文件仍需人工审查以确保映射准确性。
核心特点
与Figma官方交互式工具相比，Superconnect支持Angular/HTML组件的一键式全自动映射，而官方工具仅支持React；此外，它允许用户自由选择Claude或OpenAI等AI模型进行代码生成，提供了更大的灵活性。
注意事项
需要Figma企业版账户及文件编辑权限，且生成的文件仍需人工审查以确保映射准确性。
常见问题
Superconnect支持哪些前端框架？
主要支持React和Angular，能自动生成对应的.figma.tsx或.figma.ts映射文件。
运行Superconnect需要哪些前置条件？
需要Node.js >= 22.0.0、Figma个人访问令牌（具备相应读写权限）、一个AI服务商（如Anthropic或OpenAI）的API密钥，以及已安装Figma Code Connect CLI。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/superconnect/raw/index.md 读取 superconnect 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/superconnect/raw/index.md（查看排版版本）