Anima

Anima是什么？

Anima是一款把产品设计转换为前端代码并构建Web应用的AI平台。用户可以从Figma设计、文字提示、截图、现有网站或代码仓库开始，生成可运行、可编辑和可导出的应用。

它早期以Figma转React、Vue和HTML工具为主，目前已扩展到Anima Playground与Agent Grid。新定位涵盖AI应用生成、实时预览、Git仓库、托管发布、数据库、设计系统和编码代理协作。

主要功能

1. Figma转代码

用户可以粘贴Figma画框链接，或使用Anima Figma插件导入设计。插件可捕获变量、设计令牌、组件信息和自动布局，通常比仅通过Figma API导入更完整。

• 从单个画框、组件或多屏流程生成代码。
• 将Auto Layout转换为响应式布局。
• 识别颜色、字体、间距和复用组件。
• 支持导入Figma变量与设计令牌。
• 在浏览器或Figma Dev Mode中查看和导出。

设计结构会直接影响代码质量。使用自动布局、规范命名、组件化和一致断点，通常比大量绝对定位更容易得到可维护结果。

2. 文字生成Web应用

在Anima Playground中，用户可以描述产品目标、受众和核心功能，让AI生成可运行网页或应用。后续可继续通过聊天修改内容、布局、组件和交互。

提示词应重点说明产品意图和信息结构，而不是只堆砌像素与颜色。复杂应用最好分模块生成并逐步测试。

3. 网站与图片转代码

Anima支持输入公开网页地址或图片生成前端实现。网站转代码可输出HTML或React，适合原型、迁移评估和内部重构起点。

复制公开网站的技术能力不代表拥有页面内容、商标、图片或设计版权。不得未经授权克隆他人网站并冒充、钓鱼或商业发布。

4. React、Vue与HTML输出

Figma工作流支持React、Vue和HTML，并提供JavaScript、TypeScript及多种样式选项。可选CSS、Tailwind、Styled Components、CSS Modules、SASS和SCSS等方式。

• React组件与JavaScript或TypeScript。
• Vue前端代码。
• 独立HTML和CSS，不强制绑定框架。
• MUI、Ant Design、Shadcn等组件库选项。
• 响应式页面与多断点输出。

不同入口支持的组合并不完全相同。网站转代码当前限制比Figma转换更多，生成前应查看实际设置项。

5. Playground预览与编辑

Playground提供Preview、Code、Database和Flow等区域。用户可以运行应用、查看或编辑代码、管理数据与用户，并检查页面之间的导航。

每次AI操作都会产生可编辑代码，开发者仍可直接修改。生成应用应经过依赖、无障碍、性能和安全测试再投入生产。

6. 数据库、用户与后端能力

Anima可为应用加入数据库和用户认证，并在Playground中管理数据。它适合快速构建带状态的原型或内部工具。

涉及登录、权限和敏感数据时，必须测试访问控制、会话、数据隔离和删除机制。AI自动搭建的后端不能跳过安全评审。

7. 托管、发布与自定义域名

用户可以把项目部署到Anima提供的地址，也可在付费计划中连接自定义域名。分享Playground链接与公开发布是不同操作，发布会让应用面向互联网开放。

上线前应确认环境变量、密钥、数据库和测试数据没有暴露。自定义域名还需正确配置DNS和HTTPS。

8. Agent Grid与Git工作流

Agent Grid是Anima为AI代理提供的应用创建、托管、发布和共享环境。每个Artifact都是团队工作区中的真实Git仓库，代理可以克隆、提交和推送修改。

• 从提示、网站或Figma创建应用。
• 导入已有代码或创建空仓库。
• 通过Git继续编辑和维护Artifact。
• 生成多个变体并比较。
• 发布或撤下公开应用。

代理创建和复制操作可能不是幂等的，超时后应先检查工作区列表再重试。发布属于外部状态变更，需要明确授权。

9. Anima MCP与CLI

官方MCP可连接Claude Code、Codex、Cursor、VS Code和其他兼容客户端，让编码代理直接访问Figma、Playground和团队设计系统。没有MCP客户端时也可使用Anima CLI。

连接需要Anima账户并在浏览器中完成认证，Figma能力还需授权相应文件。MCP生成同样会计入代码生成额度。

10. API与后端SDK

Anima API和后端SDK可将Figma或公开网站转换为前端代码，适合嵌入自动化、AI代理和开发者产品。SDK支持设置框架、语言、样式和UI组件库。

API访问需要联系官方，公开定价页没有列出统一接口单价。后端密钥不得放在浏览器代码中。

11. 自带模型与BYOK

用户可连接ChatGPT订阅、OpenAI API密钥或Anthropic API密钥，让Playground聊天使用自己的模型额度。启用后，聊天消息不消耗Anima AI信用点。

网站克隆、设计转代码、图片转代码、托管、发布和团队能力仍可能需要Anima付费计划或用量。模型提供商的订阅与API费用也需单独计算。

适合哪些用户？

• 需要把Figma设计快速转为前端代码的设计师。
• 处理设计交付和组件实现的前端开发者。
• 希望从文字构建可运行原型的产品团队。
• 使用Claude Code、Codex或Cursor的编码代理用户。
• 需要在应用中嵌入设计转代码能力的平台。
• 管理企业设计系统、权限和合规的组织。

如何从Figma生成代码？

1. 整理Figma组件、Auto Layout、变量和断点。
2. 复制画框链接，或安装Anima Figma插件。
3. 登录Playground并连接相应Figma账户。
4. 选择React、Vue或HTML以及语言和样式方案。
5. 导入单屏或通过原型链接导入多屏流程。
6. 在预览中检查布局、字体、交互和响应式效果。
7. 直接编辑代码或继续用提示词修正。
8. 导出到代码库，运行测试后再合并和发布。

价格与计划

截至2026年8月26日，官方当前列出Free、Starter、Pro、Business和Enterprise层级，并支持月付或年付。定价页的动态套餐卡未在公开抓取结果中完整显示，因此下表只写可实时核实的额度和企业起价。

一次代码生成包括Figma插件导出、Playground设计导入、网站克隆、提示生成或MCP生成。以上核验于2026年8月26日，具体个人与团队价格、席位、托管和超额规则应以官方实时结算页为准。

取消与付款

官方说明订阅可以随时更改或取消，取消后可使用到当前计费周期结束。升级时通常只支付本周期剩余时间的差额。

付款支持信用卡、Apple Pay和Google Pay，企业客户还可使用电汇或发票。购买前应确认税费、自动续订日期和年付承诺。

代码版权与开源边界

Anima条款称平台生成代码与Apache 2.0或MIT兼容，并不附带依赖性版权许可要求。该表述不消除输入设计、图片、字体、商标和第三方组件本身的权利限制。

Anima核心平台、代码生成引擎和托管服务是商业产品。官方GitHub公开MCP指南、SDK和部分示例，但这些仓库开放不代表整个Anima平台开源。

安全与使用注意事项

• 只授权代理访问完成任务所需的Figma文件和仓库。
• 不要把API密钥粘贴进聊天、截图或前端代码。
• 发布前检查依赖漏洞、输入验证和访问控制。
• 克隆网站必须获得内容与设计使用许可。
• 生成代码应通过视觉、响应式、无障碍和性能测试。
• 团队应对Git提交、发布和删除操作保留审计。

产品优势

• 覆盖Figma、提示、图片、网站和代码多种入口。
• 输出React、Vue和HTML等可编辑前端代码。
• 把预览、数据库、Git和发布整合到同一流程。
• 提供MCP、CLI、API和后端SDK。
• 支持自带ChatGPT订阅或模型API密钥。

产品局限

• 生成代码仍需开发者清理和测试。
• 不同入口支持的框架和样式选项不完全一致。
• 免费版生成与多屏流程额度较低。
• 公开定价页动态内容不易完整核验。
• 核心平台不是开源自部署产品。

常见问题

Anima可以把Figma转成什么代码？

Figma工作流支持React、Vue和HTML，并可选择JavaScript、TypeScript、Tailwind及多种CSS方案，实际选项取决于入口和框架。

可以从文字直接生成应用吗？

可以。Anima Playground支持从提示词创建可运行Web应用，并继续用聊天、代码编辑和Git流程迭代。

免费版有多少生成额度？

官方当前说明Free包含5次代码生成，并提供每日5条Playground聊天及5次Figma导入或网站克隆。

Anima支持Codex和Cursor吗？

支持。官方MCP指南列出Codex、Claude Code、Cursor和VS Code等客户端，用户需要Anima账户并完成认证。

自带API密钥后所有功能都免费吗？

不是。BYOK可让聊天使用自有模型额度，但网站克隆、设计转代码、托管、发布和团队能力仍可能收费。

Anima是开源工具吗？

核心平台不是开源产品。官方公开了MCP指南、SDK和部分项目，但不能把商业代码生成和托管服务标记为开源。