Docs
Start typing to search…
  1. Introduction

Anima AI Agent Design Skill

📘

Give your AI coding agent design awareness, brand consistency, and the ability to turn ideas into live apps.

The Anima design skill teaches AI agents how to use Anima's MCP tools to turn ideas into live applications. Instead of just connecting to Anima (that's what MCP does), the skill gives your agent a step-by-step playbook for designing, building, and publishing.

Think of it this way: MCP is the kitchen tools. The skill is the recipe.

Path A: Create and publish

Build complete apps from scratch. No local codebase needed. Anima handles the design, code, database, and hosting. You go from idea to live URL in minutes.

The key superpower: your agent can create multiple variants in parallel. Three different prompts, three different visual directions, all generating at the same time. Pick the one you like, then open the playground URL on desktop or mobile to keep refining.

Three starting points

Prompt to code (p2c)

Describe what you want in plain language. Anima designs and generates a complete app with brand-aware visuals. The most flexible path, best for new ideas and creative exploration.

"SaaS analytics dashboard for a B2B product team. Clean, minimal feel. Sidebar navigation, KPI cards for key metrics, a usage trend chart, and a recent activity feed."

Link to code (l2c)

Give Anima a website URL. It clones the full site into an editable playground. Best for recreating existing sites or using them as a starting point.

Figma to playground (f2c)

Share a Figma URL. Anima implements the design into a full, working playground you can preview and iterate on. Best when a Figma design already exists and needs to become functional.

Explore mode

Not sure exactly what you want? The agent generates 3 different interpretations of your idea in parallel, each with a different visual direction. All 3 build simultaneously, so total wait time is roughly the same as building one.

You say: "Build me a SaaS dashboard"

The agent generates:

  1. A clean, minimal version with lots of whitespace. Professional but approachable.
  2. A dark theme with bold accents and high information density. Feels like a mission control center.
  3. A Linear-inspired monochrome design with one accent color. Quiet and focused.

All three are live and shareable within about 10 minutes.

After building

The agent can publish your app to a live URL like winter-sun-2691.dev.animaapp.io.

Path B: Integrate into your codebase

Pull design elements from Figma or an Anima Playground into your existing project. Use this when you already have a codebase and want to add components or pages from a design.

Two starting points

Figma to code (codegen)

Share a Figma URL and the agent generates production-ready code files adapted to your stack. It detects your tech stack automatically (React, Tailwind, TypeScript, MUI, shadcn, etc.) and generates code that matches your conventions.

What you get back:

  • Generated code files matched to your framework and styling
  • Design tokens, assets, and visual snapshots
  • Implementation guidelines the agent follows for pixel-perfect accuracy

Download from playground

Already built something in Anima Playground? The agent downloads the project code and adapts it to fit your existing project's patterns, components, and design tokens.

Prompting tips

The skill teaches agents to write good prompts for Anima, but you can help by describing what you want and who it's for rather than how to build it.

Works well:

"Recipe sharing app for home cooks. Warm, inviting feel. Users can upload photos, browse by cuisine, and save favorites."

Less effective:

"Create a React app with a grid layout, 3 columns, #f5f5f5 background, 16px padding, border-radius 8px on the cards."

Anima makes better design decisions when you describe the mood, audience, and purpose. Specific CSS values and component-level instructions override Anima's design intelligence and produce more generic results.

What to include: purpose, audience, mood/style, key features, content tone.

What to leave out: code snippets, hex colors, pixel values, font sizes, component library names. The skill handles technical parameters separately.

Setup

The skill requires the Anima MCP server. If you already have Anima MCP connected, installing the skill adds the execution playbook on top of it.

Where to get the skill

OpenClaw: Tell your agent to install the Anima Design Agent skill from ClawHub. That's it.

Other agents: The skill file is on GitHub: github.com/AnimaApp/mcp-server-guide

Claude Code, Cursor, and other editors

These use browser-based authentication. No API key needed.

  1. Add the Anima MCP server to your editor (setup instructions)
  2. When prompted, authenticate in the browser with your Anima account
  3. (Optional) Connect your Figma account during authentication to enable Figma flows

The skill works automatically once MCP is connected.

Headless environments (OpenClaw, Slackbots / X bots etc)

These use an API key instead of browser login.

  1. Go to dev.animaapp.com and open Settings
  2. Navigate to API Keys
  3. Click Generate API Key, copy it, and store it securely
  4. Set it as an environment variable (e.g., ANIMA_API_TOKEN)
  5. Ask your agent to pass it as a Bearer token in the Authorization header

Learn more about Anima MCP setup →

Related


Updated 4 days ago