SuperAPI AI 工具集

anima-local-dev-loop

编程与开发

查看项目

更新于 10-15 22:42

技能介绍

用途:围绕一个已批准的 Figma 节点,建立可重复的设计到代码迭代循环,支持 React 或 HTML 输出设置,在本地预览并对比不同框架/样式预设的生成结果,仅在通过确定性代码与视觉检查后才接受结果。

主要能力:使用 @animaapp/anima-sdk 调用 generateCode,按预设(react-tailwind、react-shadcn、react-plain-css、html-plain-css)生成多套代码;将输出写入独立的 generated 目录;用 Vite 启动本地预览;保留每次运行的源版本与设置,便于重复对比。

使用方式:先准备暂存 Figma 文件、白名单节点 ID 和受限凭据(从被忽略的本地环境文件或开发密钥库加载),并准备一个不被生产应用导入的一次性输出目录。安装命令:mkdir anima-dev && cd anima-dev;npm init -y;npm install @animaapp/anima-sdk dotenv;npm install -D vite @vitejs/plugin-react typescript。脚本通过 process.env.ANIMA_TOKEN、FIGMA_FILE_KEY、FIGMA_TOKEN 读取凭据,按预设生成文件并做路径安全校验。开发脚本示例:"generate": "tsx scripts/generate-preview.ts","preview": "vite","dev": "npm run generate && npm run preview"。

适用场景:快速迭代 Figma 到代码的输出、比较不同框架输出、在本地查看组件效果。

限制:需要暂存 Figma 文件、白名单节点 ID 和受限凭据;生成结果在代码与视觉审查通过前不得被生产应用导入;遇到速率限制需在调用间加 2 秒延迟;每次运行输出可能因 Anima AI 变化而不同,需固定设置并使用一致节点 ID;二进制输出需单独处理;不得打印令牌、源设计、生成源码或私有网站截图。官方文本暂未提供。