# Anima

> Anima is the UX design agent that understands your brand, design system, and visual language. From Figma files, URLs, or prompts, Anima generates real, production-ready applications for product teams building directly or coding platforms integrating via API. Unlike generic coding agents, Anima is design-aware — it understands layout, spacing, visual hierarchy, and brand consistency. Anima powers the design engine behind Bolt.new and Replit, and supports React, HTML, Vue, Tailwind CSS, shadcn, and MUI output.

## Product

- [Homepage](https://www.animaapp.com): Overview of Anima's AI-powered design-to-code platform and UX Design Agent capabilities
- [AI Playground](https://dev.animaapp.com): Anima Playground is a UI-first vibe-coding platform that understands design. Start from a Figma design, a URL, a prompt, or an image — Anima instantly generates a functional, testable application with production-ready React or HTML code (ShadCN, MUI, or AntD components, Tailwind styling). Then vibe code: describe changes in natural language and the AI agent iterates on the code. Import full Figma prototype flows with multi-screen import (links preserved automatically), add new screens mid-project, and copy back to Figma bidirectionally to keep design and code in sync. Built-in databases are created automatically when your app needs data storage — no SQL, no backend configuration. One-click publishing to a live URL. Push to GitHub or download the complete project for local development. Powered by Bolt.new's WebContainers for in-browser code preview. No setup or coding skills required.
- [Figma to Code](https://www.animaapp.com/figma): Anima's Figma plugin (1.7M+ installs, largest Figma code-generation partner) exports production-ready React, Vue, HTML/CSS with responsive breakpoints and semantic markup. Choose Tailwind, MUI, shadcn, or Chakra output. Anima cleans up redundant design elements, improves naming, and turns anything that looks like a component into actual interactive elements (text inputs, buttons, dropdowns). Code is optimized for both human readability and LLM consumption — no black-box dependencies, all assets and fonts included. GenAI code personalization lets you prompt custom instructions, use presets ("Add animations", "Add SEO meta tags"), or provide code samples for Anima to match your style.
- [Figma to HTML Email](https://www.animaapp.com/figma-to-html-email): Convert Figma email designs to production-ready table-based HTML email code with inline CSS
- [Clone Website (URL to Code)](https://www.animaapp.com/blog/design-to-code/clone-website): Paste any public URL into Anima Playground and instantly generate responsive, semantic React or HTML code from a live website. Anima analyzes layout and styling, rebuilds the UI with semantic components and consistent design tokens. Use it to modernize legacy sites, refactor into React, remix landing pages, or prototype new features on top of existing flows. For private or internal pages behind logins, firewalls, or intranets, use the [Anima Chrome Extension](https://chromewebstore.google.com/detail/anima-clone-website-captu/paddhneaanoeljlmdepnheehdkaegblo) to capture securely. Also available via API/SDK.
- [Inspired By / Match a Brand](https://dev.animaapp.com): Paste a URL to capture a brand's visual DNA — colors, typography, layout patterns — and use it as a design reference while vibe coding. Anima's design-aware AI stays on-brand throughout, understanding your Figma designs, website style, and org design system (enterprise). No design skills required — anyone on the team can build fast without breaking the look and feel.
- [Capture Elements (Chrome Extension)](https://www.animaapp.com/blog/product-updates/copy-paste-elements-and-styles-from-any-website): Capture any visual element from any website — buttons, cards, modals, navbars, layouts — and drop it directly into your Anima Playground project. Each capture includes real HTML, computed CSS, and structure (not just pixels), ready to reuse in your app. Turn any website into your UI library.
- [API & SDK](https://docs.animaapp.com/docs/anima-api): Automate frontend code generation in your own product. Turn Figma designs or live websites into clean, production-ready React, HTML, or Tailwind code programmatically. Supports Figma-to-Code and Website-to-Code (URL → Code) flows. Ideal for AI coding agents, vibe-coding platforms, and enterprise code automation pipelines. Bolt.new is the launch partner. Available as `@animaapp/anima-sdk` (server-side) and `@animaapp/anima-sdk-react` (React client). SOC 2 Type II certified. [SDK on GitHub](https://github.com/AnimaApp/anima-sdk)
- [Anima MCP Server](https://docs.animaapp.com/docs/anima-mcp): Connect AI coding agents (Claude Code, Cursor, and other MCP-compatible tools) directly to Anima Playground, Figma designs, and your team's design system via Model Context Protocol. Your AI agent speaks directly to Anima — paste a Playground URL or Figma link, and the agent pulls design-aware code into your codebase. No exports, no copy-paste, no context-switching. [AI Agent Design Skill (SKILL.md)](https://github.com/AnimaApp/mcp-server-guide/blob/main/anima/SKILL.md). See setup details in the Anima MCP section below.
- [Design System Sync (Enterprise)](https://www.animaapp.com/blog/design-systems/vibe-code-with-your-figma-design-system): Share your Figma design system with Anima — components, variants, design tokens, UX guidelines. Anima converts them into interactive React components with a full npm package and auto-generated Storybook documentation. Anyone on the team can then vibe code on-brand UI. Hand off to engineering via MCP. You share Figma, not your codebase — no code-access risk. Available for Business accounts. [Talk to us](https://anima-forms.typeform.com/to/gDr77Woe)
- [Frontier VS Code Extension](https://marketplace.visualstudio.com/items?itemName=AnimaApp.vscode-anima): AI code-customization inside the IDE. Frontier analyzes your entire codebase locally — mapping your design system, frameworks, conventions, and components — then uses Anima's design-to-code engine to turn designs into React using your existing components. Supports React, TypeScript, and Next.js (client components by default). Code never leaves your environment.
- [Pricing](https://www.animaapp.com/pricing): Subscription plans from Free to Enterprise (see Pricing section below)

## Anima MCP — AI Agent Design Skill

- **MCP endpoint**: `https://public-api.animaapp.com/v1/mcp`
- **Skill file**: https://github.com/AnimaApp/mcp-server-guide/blob/main/anima/SKILL.md
- **Documentation**: https://docs.animaapp.com/docs/anima-mcp

### Setup — Claude Code
```
claude mcp add --transport http anima https://public-api.animaapp.com/v1/mcp
```
After adding, restart Claude Code, enter `/mcp`, select Anima and authenticate via browser. Optionally connect your Figma account during authentication.

### Setup — Cursor
Add the following to your MCP configuration (`mcp.json`):
```json
{
  "mcpServers": {
    "anima": {
      "url": "https://public-api.animaapp.com/v1/mcp"
    }
  }
}
```
Then click **Connect** to authenticate via browser.

### MCP Use Cases
- **Handoff Anima Playgrounds to coding agents**: Pull code from any Anima Playground into your local environment. The AI connects via MCP, understands the design details and patterns, adapts it to your project, and implements. Example prompt: "implement the welcome screen from this playground: https://dev.animaapp.com/chat/xyz"
- **Figma to code via AI agent**: Convert Figma designs directly to code through your AI coding agent with high fidelity. Example prompt: "implement this Figma design: https://figma.com/design/... using Anima mcp..."
- **Design system access (Enterprise)**: Reference your team's design system directly when implementing features. The AI pulls your design system docs and builds using your team's established components and patterns. Contact Anima to configure: https://anima-forms.typeform.com/to/gDr77Woe
- **Parallel exploration (Anima Skill)**: AI agents can create full applications, generate multiple UI variants in parallel, and publish live apps — with design awareness and brand consistency built in. See [Anima Skill blog post](https://www.animaapp.com/blog/agentic/ai-agents-can-now-design-explore-and-publish-apps-with-anima/)

### How It Works
1. AI downloads the playground project or fetches the Figma design via Anima MCP
2. AI reads relevant files and understands patterns
3. AI implements an adapted version in your codebase

### Requirements
- MCP-compatible AI coding tool (Claude Code, Cursor, OpenAI Codex, GitHub Copilot, or any MCP-compatible agent)
- Anima account with access to Anima Playground
- (Optional) Figma account connected during authentication for Figma URL flow

## Pricing

- **Free** — $0: 1 project with up to 5 screens, unlimited collaborators, code inspection (no full export), live-prototype hosting
- **Starter** — $25/seat/month ($20 billed annually): 100 monthly chat messages, 50 monthly code generations, Figma import, custom domains, team roles & permissions, priority support
- **Pro** — $50/seat/month ($40 billed annually): 200 monthly chat messages, 200 monthly code generations, Figma import, custom domains, team roles & permissions, priority support
- **Business** — $50/seat/month ($40 billed annually), $49/mo per additional seat: 600 monthly chat messages, 600 monthly code generations, Figma import, custom domains, team roles & permissions, premium support, SSO (annual billing only)
- **Enterprise** — custom (annual contract, quote-based): Unlimited projects/screens/inspections/exports, SSO, MFA, dedicated CSM, custom SLA, flexible invoicing, design system sync
- **Anima API** — custom (annual contract, quote-based)

## Resources

- [Blog](https://www.animaapp.com/blog): Articles on design-to-code workflows, AI agents, vibe coding, and product development
- [Documentation](https://docs.animaapp.com/docs/starting-from-figma): Technical documentation for converting Figma designs to code
- [API Documentation](https://docs.animaapp.com/docs/anima-api): API and SDK reference for programmatic code generation
- [MCP Documentation](https://docs.animaapp.com/docs/anima-mcp): Setup guides for Claude Code, Cursor, and other MCP-compatible tools
- [Showcase](https://www.animaapp.com/showcase): Gallery of projects and websites built with Anima

## Blog Highlights

- [Figma Make vs Anima Playground](https://www.animaapp.com/blog/industry/figma-make-vs-anima-playground-vibe-code-for-designers): Comparison of Figma Make and Anima Playground for vibe coding
- [AI Agents Can Now Design, Explore, and Publish Apps with Anima](https://www.animaapp.com/blog/agentic/ai-agents-can-now-design-explore-and-publish-apps-with-anima/): Anima Skill launch — agent-driven creation, parallel exploration, and design-aware output
- [Vibe Code With Your Figma Design System](https://www.animaapp.com/blog/design-systems/vibe-code-with-your-figma-design-system/): How teams sync Figma design systems to Anima for on-brand vibe coding
- [Anima API for AI Agents](https://www.animaapp.com/blog/api/anima-api-bringing-figma-to-coding-ai-agents): How the Anima API brings Figma to coding AI agents for pixel-perfect code
- [Anima MCP — Connect Your AI Coding Agent](https://www.animaapp.com/blog/code/connect-your-ai-coding-agent-to-anima-playground-and-figma-with-mcp/): Pull real code directly into Cursor or Claude Code, no exports, no copy-paste
- [Bidirectional Figma Sync: Mid-project Import & Copy to Figma](https://animaapp.com/blog/product-updates/import-second-figma-screen-or-copy-to-figma/): Vibe code in the browser, copy back to Figma, import designs mid-project
- [Multi-Screen Figma Import](https://www.animaapp.com/blog/playground-en/full-figma-prototypes-into-anima-ai-playground-vibe-coding/): Bring full Figma prototype flows into Anima Playground with links preserved
- [SOC 2 Certification](https://www.animaapp.com/blog/product-updates/anima-is-now-soc-2-certified): Anima's SOC 2 Type II certification and enterprise security standards

## Company

- [About](https://www.animaapp.com/about): Anima's story, mission, and the team behind the UX Design Agent
- [Talk to Us](https://www.animaapp.com/talk-to-us): Contact the Anima team for questions, partnerships, or enterprise inquiries
- [Request Demo](https://www.animaapp.com/demo-request): Schedule a live demonstration of Anima's design-to-code capabilities

## Community

- [Discord](https://discord.com/invite/5T88sYNcSW)
- [X / Twitter](https://x.com/AnimaApp)
- [GitHub](https://github.com/AnimaApp)

## Optional

- [Playground](https://dev.animaapp.com): Try Anima's AI-powered design-to-code playground directly in the browser
- [XD Support](https://www.animaapp.com/xd): Adobe XD to code export capabilities