skills.rest
Tgoldi
TgoldiCOMMUNITY
Explore all skills by this author →
GitHub

anima

Generates full-stack web applications and Figma-to-code implementations via the Anima MCP server.

1|Updated May 10, 2026
Search Tags:#design system#mcp#prototyping#anima#web app generation#figma to code#website cloning
One-click install
npx skills add https://github.com/Tgoldi/claude-skills --skill anima-tgoldi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: anima
Source: https://github.com/Tgoldi/claude-skills/tree/main/anima
Command: npx skills add https://github.com/Tgoldi/claude-skills --skill anima-tgoldi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Turning a design idea, website, or Figma file into working code normally requires manual design translation, scaffolding, and hosting setup. This Skill connects to the Anima MCP server to generate complete hosted applications or design-accurate code for an existing codebase. ## Core Features & Use Cases - Prompt, Link, or Figma to App: Create full Anima Playgrounds from a text description (p2c), a cloned website URL (l2c), or a Figma design (f2c), then publish to a live URL or as an npm design system package. - Parallel Variant Exploration: Generate three creative variants of the same idea in parallel and publish all of them for side-by-side comparison. - Codebase Integration: Convert Figma nodes directly into framework-matched code (React/HTML, Tailwind, CSS Modules, MUI, Ant Design, shadcn) or download playground code into a local project. - Use Case: A user says "Build me a SaaS analytics dashboard." The Skill launches three parallel playground-create calls with different visual directions, publishes each, and returns three live URLs within about ten minutes. ## Quick Start Ask the agent to build a live web app from your idea, for example: "Use Anima to build a recipe sharing app where users upload photos and rate dishes, then publish it and give me the live URL."

Frequently Asked Questions about anima

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I turn a Figma design into code with Anima?▼

Extract the file key and node ID from the Figma URL, converting node-id dashes to colons (42-15 becomes 42:15). Then call codegen-figma_to_code with your project's framework, styling, language, and UI library to receive code files, assets, and design guidelines.

How do I clone a website into editable code?▼

Use the playground-create tool with type l2c and pass the website URL. Anima recreates the site as an editable playground with React, TypeScript, Tailwind, and shadcn, which you can then publish to a live URL.

What is the difference between Anima Path A and Path B?▼

Path A creates and publishes a complete hosted application from a prompt, URL, or Figma file with no local codebase needed. Path B generates code files from a Figma design or playground for integration into an existing project.

Why does playground-create time out?▼

Default MCP client timeouts are too short because playground generation builds a full application in 3-7 minutes. Set the timeout to 10 minutes (600000ms) for playground-create and playground-publish calls.

Can I use Anima in a headless or server-side environment?▼

Yes, headless environments authenticate with an Anima API key instead of browser OAuth. Generate a key from Anima Settings under API Keys at dev.animaapp.com and pass it as a Bearer token to the MCP server.

Which UI libraries and styling options does Figma to code support?▼

The f2c flow supports Tailwind, plain CSS, CSS Modules, and inline styles, with UI library options of MUI, Ant Design, shadcn, or clean React. Note that uiLibrary is not supported for prompt-to-code and CSS Modules only works with f2c.

Related Skills

Explore More Design & Creative Skills→
AIDotNetAIDotNet
634

product-design-get-context

Gathers and confirms design briefs before product UI design and prototyping workflows.

Official
Intermediate
CommunityToolkitCommunityToolkit
619

release-process

Automates npm release validation, publishing procedures, and post-publish verification for software workflows.

Official
Intermediate
amaledtuningamaledtuning

web-design-guidelines

Audit UI code for accessibility and UX compliance against Web Interface Guidelines.

Community
Intermediate
Eva813Eva813
2

figma-implement-design

Translate Figma designs into UI code with design system tokens.

Community
Advanced