# Anima Docs | AI UX Design Agent | Design to code | Agents skill: https://github.com/AnimaApp/mcp-server-guide/blob/main/anima/SKILL.md Documentation

> Anima allows humans to generate UX designs with AI, based on their Figma, Brand, or live website. Designers, product managers, and everyone can vibe-code on-brand with Anima. For AI agents, Anima can generate high-end UX projects in a single shot, starting from: Prompt, Clone website, Figma link. The result is a live playground for your human to vibe-code, and you could also download it. Anima design skill for agents: https://raw.githubusercontent.com/AnimaApp/mcp-server-guide/refs/heads/main/anima/SKILL.md

## Guides
- [Welcome to Anima Docs](https://docs.animaapp.com/docs/sign-up-to-anima.md): Learn about Anima and how to get started
- [Getting Started](https://docs.animaapp.com/docs/getting-started.md): Welcome to Anima!  Let’s cover all the things you need to know to begin exploring the platform.
- [Starting from a prompt](https://docs.animaapp.com/docs/starting-from-a-prompt.md)
- [Starting from a URL](https://docs.animaapp.com/docs/starting-from-a-url.md): Turn any website into clean, editable frontend code.
- [Chrome Extension: Clone Private & Internal Pages](https://docs.animaapp.com/docs/chrome-extension-clone-private-internal-pages.md): Anima Chrome Extension lets you capture any page you’re logged into—internal tools, dashboards, or private sites—and import it directly into Anima Playground. From there, you can edit the UI, prompt changes, and export clean React or HTML code.
- [Starting from Figma](https://docs.animaapp.com/docs/starting-from-figma.md): Convert your Figma designs into responsive, production-ready code.
- [Import Multi-Screen Flows (Pro)](https://docs.animaapp.com/docs/advanced-feature-create-full-flows.md): Import multiple screens from Figma and build full user journeys in the Playground.
- [Features](https://docs.animaapp.com/docs/features.md): Explore the Anima Playground features that help you build, iterate, and ship faster.
- [Chat input and prompting](https://docs.animaapp.com/docs/chat-input-and-prompting.md): Build and modify your app using natural language and visual inputs.
- [Plan Mode ](https://docs.animaapp.com/docs/plane-mode.md)
- [Debug Mode](https://docs.animaapp.com/docs/debug-mode.md): Debug Mode gives the agent computer vision and an expanded toolset to inspect, diagnose, and fix issues when a prompt doesn't land the first time.
- [Import from Figma](https://docs.animaapp.com/docs/import-from-figma.md)
- [Code Tab](https://docs.animaapp.com/docs/code-tab.md)
- [Data & Users](https://docs.animaapp.com/docs/databases.md)
- [Database Management](https://docs.animaapp.com/docs/database.md)
- [App Users](https://docs.animaapp.com/docs/app-users.md)
- [Flow tab](https://docs.animaapp.com/docs/flow-tab.md): View screens and navigation flows in your app.
- [Preview](https://docs.animaapp.com/docs/preview.md)
- [Publish](https://docs.animaapp.com/docs/publish.md): Turn your project into a live website with one click.
- [Custom Domain](https://docs.animaapp.com/docs/playground-custom-domain.md): You can use your own domain DNS to deploy your Anima Playground.
- [Capture Elements](https://docs.animaapp.com/docs/capture-elements.md)
- [Copy to Figma](https://docs.animaapp.com/docs/copy-to-figma.md)
- [Version History](https://docs.animaapp.com/docs/version-history.md)
- [Fonts](https://docs.animaapp.com/docs/fonts.md)
- [Add Figma Design System](https://docs.animaapp.com/docs/add-figma-design-system.md): Bring your Figma design system into Anima so your whole team can vibe code on top of it
- [Project Visibility](https://docs.animaapp.com/docs/project-visibility.md)
- [Integrations](https://docs.animaapp.com/docs/integrations.md)
- [Github](https://docs.animaapp.com/docs/github.md)
- [Figma](https://docs.animaapp.com/docs/figma.md)
- [Team Management](https://docs.animaapp.com/docs/team-management.md)
- [Playground FAQ](https://docs.animaapp.com/docs/playground-faq.md)
- [Training data and privacy](https://docs.animaapp.com/docs/training-data-and-privacy.md): Learn about how Anima handles your data and privacy.
- [Buddy – Figma AI Design Agent](https://docs.animaapp.com/docs/buddy-figma-design-agent.md): Buddy is an AI-powered Figma plugin that lets you design directly on the canvas through a chat interface.
- [Figma](https://docs.animaapp.com/docs/run-anima-inside-figma.md)
- [Design Mode:  Inspect](https://docs.animaapp.com/docs/component-code-inspect.md): In Figma's design mode, Anima's plugin offers 2 different flows: **Full flows code** and **Component code inspect**. Both can convert your design to code, but each one has particular features according to what you want to achieve
- [Code settings](https://docs.animaapp.com/docs/1-code-settings.md)
- [Inspect code](https://docs.animaapp.com/docs/2-inspect-code-1.md)
- [Copy code](https://docs.animaapp.com/docs/3-copy-code-1.md)
- [Prompt in Playground](https://docs.animaapp.com/docs/4-open-in-playground-1.md)
- [Download code](https://docs.animaapp.com/docs/5-download-selection-1.md)
- [Breakpoints](https://docs.animaapp.com/docs/6-breakpoints-1.md): Connect multiple frames that represent different page layouts into the same page
- [AI Personalization](https://docs.animaapp.com/docs/7-ai-personalization-1.md): In early 2024, Anima announced GenAI code personalization - A whole new level of design to code workflow.
- [Dev Mode: Plugin](https://docs.animaapp.com/docs/dev-mode.md): Figma Dev Mode is a powerful feature designed to streamline the handoff process between designers and developers. It provides developers with direct access to design in a read-only mode, with inspect tools and **dedicated plugins for developers, such as Anima**.
- [Code settings](https://docs.animaapp.com/docs/1.md)
- [Inspect code](https://docs.animaapp.com/docs/2-inspect-code.md)
- [Copy code](https://docs.animaapp.com/docs/3-copy-code.md)
- [Prompt in playground](https://docs.animaapp.com/docs/4-open-in-playground.md): see what your code looks like and iterate on the changes.
- [Download selection](https://docs.animaapp.com/docs/5-download-selection.md)
- [Breakpoints](https://docs.animaapp.com/docs/6-breakpoints.md): Connect multiple frames that represent different page layouts into the same page
- [AI Personalization](https://docs.animaapp.com/docs/7-ai-personalization.md)
- [Dev Mode: Figma Panels](https://docs.animaapp.com/docs/figma-panels.md): Anima can also be accessed directly from within the Figma panels in Dev Mode, without the need to install the plugin. It has almost the same features, including copying the code, and available frameworks like React and Tailwind CSS
- [Design Mode: Websites & Prototypes](https://docs.animaapp.com/docs/1-full-flows-code.md): Optimal for generating fully interactive websites or prototypes with multiple screens
- [Responsiveness: Breakpoints](https://docs.animaapp.com/docs/1-responsive-pages.md): Connect multiple frames that represent different page layouts into the same page
- [Responsiveness: Auto-Layout](https://docs.animaapp.com/docs/2-responsiveness-auto-layout.md): Figma's native Auto-layout translates into dynamic, responsive layout when used with Anima
- [Entrance animation](https://docs.animaapp.com/docs/2-entrance-animation.md): Add style to your website by animating an element when visitors load the page or scroll past it!
- [Hover effects](https://docs.animaapp.com/docs/3-hover-effects.md): Adding hover effects to a web site is a great way to draw the attention of the users and make the website to be more engaging.  - <br />
- [Media element](https://docs.animaapp.com/docs/4-media-element.md): With this feature, you can add media to a selected layer. You can either do it with a URL (supported links: Youtube, Vimeo, Lottie and Giphy), or you can upload media files from your own computer.
- [Text input](https://docs.animaapp.com/docs/5-text-input.md): Create interactive text inputs, including a submit button that allow site visitors to enter real text into a contact form or newsletter subscription so you can receive results directly to your email address. Text fields include input validation for Text, Email, Password, or Numbers, and you can set any of these to be required fields.
- [Submit button](https://docs.animaapp.com/docs/6-submit-button.md): After creating your text inputs, you can also create a submit button to collect the data that your users have submitted. This is great for lead collection if you are building a landing page.
- [Embed code](https://docs.animaapp.com/docs/7-embed-code.md): With this feature, you can embed a Google Map, a chatbot, web tracking and analytic tools, or any custom code!
- [Preview](https://docs.animaapp.com/docs/8-preview.md): When you click **Preview**, Anima will create a private draft of your work that only you can see. This way you can check out and test different designs and how they work as code before sharing them with your team or exporting.
- [Sync](https://docs.animaapp.com/docs/10-sync.md)
- [Get code](https://docs.animaapp.com/docs/9-get-code.md): By clicking the "Get code" button, you will get the same result as if you clicked the [Sync](doc:10-sync) button, but you will be taken directly to Anima's web app where you will immediately see the "Download ZIP" button, which allows you to download your code to your computer.
- [Publish](https://docs.animaapp.com/docs/11-publish.md): With Anima you're able to publish a live website with the click of a button
- [Custom domain (Legacy Sync Flow)](https://docs.animaapp.com/docs/13-custom-domain.md): You can use your own domain with a website created on Figma using Anima.
- [Anima MCP](https://docs.animaapp.com/docs/anima-mcp.md)
- [Anima API](https://docs.animaapp.com/docs/anima-api.md): Anima’s API lets you expand your product offering by turning Figma designs or live websites into clean, production-ready code — ideal for automation, AI agents, and developer-facing features.
- [Anima AI Agent Design Skill](https://docs.animaapp.com/docs/anima-ai-agent-design-skill.md)
- [Tailwind CSS | Figma | VSCode](https://docs.animaapp.com/docs/tailwind-css.md): Generate code with Tailwind CSS
- [MUI (Material-UI) | Figma | VSCode](https://docs.animaapp.com/docs/mui-material-ui.md): Transform any Figma design into clean, functional MUI code
- [AntD (Ant Design) | Figma | VSCode](https://docs.animaapp.com/docs/antd-ant-design-anima-for-figma-frontier-in-vscode.md): Transform any Figma design into clean, functional AntD code
- [ShadCN | VSCode](https://docs.animaapp.com/docs/shadcn-frontier-in-vscode.md): Anima Frontier and ShadCN: Leveraging your design system to create new screens or higher-order components.
- [ShadCN | Figma](https://docs.animaapp.com/docs/shadcn-figma.md): Transform any Figma design into clean, functional shadcn code
- [Bootstrap | VSCode](https://docs.animaapp.com/docs/bootstrap-frontier-in-vscode.md): Anima Frontier and Bootstrap: Leveraging your design system to create new screens or higher-order components.
- [Chakra UI | VSCode](https://docs.animaapp.com/docs/chakra-ui-frontier-in-vscode.md): Anima Frontier and Chakra UI: Leveraging your design system to create new screens or higher-order components.
- [Getting Started](https://docs.animaapp.com/docs/getting-started-20.md)
- [Installation and Commands](https://docs.animaapp.com/docs/1-installation-and-commands.md)
- [Preferences Settings](https://docs.animaapp.com/docs/preferences-settings.md)
- [Code and Components Analysis](https://docs.animaapp.com/docs/code-and-components-analysis.md)
- [Component Matching](https://docs.animaapp.com/docs/component-matching-copy.md): Frontier's advanced component matching feature leverages intelligent algorithms to automatically identify correspondences between your Figma designs and existing code components. This capability enhances efficiency and maintains consistency across your projects.
- [Matching Override](https://docs.animaapp.com/docs/matching-override-copy.md): While Frontier's automatic matching is highly effective, there may be instances where you need to tailor the suggestions to better fit your project requirements or design nuances. Frontier provides an easy-to-use override feature that allows you to manually adjust the component matches.
- [Code Injection](https://docs.animaapp.com/docs/code-injection-copy.md): Frontier’s Code Injection feature allows you to seamlessly integrate generated components from Figma directly into your project. By automatically detecting missing components and generating the necessary files, this feature eliminates manual steps, making your workflow faster and more efficient.
- [Translate Figma Into Code](https://docs.animaapp.com/docs/translate-figma-into-code.md): This section explains how Frontier utilizes existing code components from your project to generate code from Figma designs, enhancing development efficiency and ensuring consistency.
- [Stay Up-to-date](https://docs.animaapp.com/docs/stay-up-to-date.md): Ensuring that you are using the most up-to-date version of the Frontier extension is crucial for accessing the latest features, improvements, and bug fixes. This practice enhances your development experience and ensures optimal performance.
- [FAQ](https://docs.animaapp.com/docs/faq.md): Frequently Asked Questions About Frontier by anima
- [Anima Webapp](https://docs.animaapp.com/docs/anima-webapp.md)
- [Teams](https://docs.animaapp.com/docs/1-anima-teams.md): Here you can manage your teams, add new team members and manage permissions
- [Projects](https://docs.animaapp.com/docs/2-anima-projects.md): Projects are used for prototypes and live websites, and are created after syncing your project to Anima
- [The new AI Playground](https://docs.animaapp.com/docs/3-playground.md): You can open your selected screen in Anima's AI Playground and from there you are able to preview both the generated code and the rendered website
- [Sharing](https://docs.animaapp.com/docs/4-sharing.md): By using the Share feature, you can publish a live website with either Anima's domain or a custom domain.