SuperAPI AI 工具集

anima-hello-world

前端与建站

查看项目

更新于 10-15 22:42

技能介绍

用途:演示如何用后端专用的 @animaapp/anima-sdk,从单个已确认的 Figma 节点生成可审查的 React 或 HTML 代码,适合测试设计转代码、了解 Anima 输出格式。

前提:完成 anima-install-auth 配置;准备含至少一个 frame/component 的 Figma 文件;知道 file key 与 node ID。

主要能力:调用 anima.generateCode,传入 fileKey、figmaToken、nodesId 与 settings,返回以相对文件名为键的 files 记录(含 content 与 isBinary)。支持 language(typescript、javascript,默认 typescript)、framework(react、html,必填)、styling(plain_css、tailwind、inline_styles,必填)、uiLibrary(mui、antd、radix、shadcn、clean_react、custom_design_system,vanilla React 可省略)。

使用方式:将生成文件写入 ./generated,写入前校验路径是否位于输出目录内,二进制文件单独处理,使用 flag: 'wx' 避免覆盖;随后运行格式化与类型检查(如 npm run format -- --check generated、npm run typecheck),审查后再复制进项目。

限制与注意:凭据须保留在服务端,不得打印 token、源设计或生成源码;生成文件视为不可信输出,不要执行生成的 package 脚本,不要直接合入主分支。常见错误包括 file key 错误、node ID 错误、节点无可渲染内容、复杂嵌套 auto-layout 导致输出异常。

资料未提供具体收费、价格、平台支持范围与效果数据。