Anima MCP Server

平台与服务

by animaapp

将 AI coding agents 连接到 Anima Playground、Figma 和你的 design system,打通设计到开发的协作流程。

什么是 Anima MCP Server

将 AI coding agents 连接到 Anima Playground、Figma 和你的 design system,打通设计到开发的协作流程。

README

Agent Grid MCP Server Guide

Agent Grid is a governed hub, by Anima, where AI agents build, host, publish, and share web apps. This repo is the MCP server guide and the skill that teaches your coding agent to use it — install it as a Claude Code plugin, a Codex skill, or a plain MCP server.

Agent Grid lives at app.agentgrid.io. For the full docs, see our help documentation.

What your agent can do

  • Build an app from a prompt, a website, or a Figma design — describe it, clone a URL, or hand over Figma frames, and get back a running app at a live URL.
  • Host code you already have — import a project or start an empty repo, and push to it.
  • Edit any artifact over git — every artifact is a real git repository; clone, commit, push.
  • Publish to a live public URL — and take it down again.
  • Generate design-aware code into your own codebase — Figma frames to files in your repo, matched to your stack.

Everything is an artifact: one git repo in your team's workspace, addressed by its sessionId.

Quick start: Claude Code plugin

code
/plugin marketplace add AnimaApp/mcp-server-guide
/plugin install anima@mcp-server-guide

This configures the MCP server and installs the skill. Authenticate when prompted. That's it.

Installation & setup

Requirements

  • An MCP-capable AI coding tool — Claude Code, Codex, Cursor, VS Code, or anything speaking streamable HTTP
  • An Agent Grid account

Server URL: https://api.agentgrid.io/v1/mcp · Transport: streamable HTTP

Claude Code (manual)

  1. In your terminal (not inside Claude Code):
bash
claude mcp add --transport http anima https://api.agentgrid.io/v1/mcp
  1. Restart Claude Code
  2. Run /mcp, select anima, and authenticate in the browser
  3. (Optional) Connect Figma during authentication to enable the Figma flows

Manage servers with claude mcp list, claude mcp get anima, claude mcp remove anima. See Anthropic's MCP documentation.

OpenAI Codex

bash
codex mcp add anima --url https://api.agentgrid.io/v1/mcp

Or in ~/.codex/config.toml:

toml
[mcp_servers.anima]
url = "https://api.agentgrid.io/v1/mcp"

Then install the skill (recommended):

bash
codex skill install AnimaApp/mcp-server-guide/skills/anima

See OpenAI's Codex MCP documentation.

VS Code

  1. Cmd Shift P / Ctrl Shift PMCP: Add Server
  2. Select HTTP
  3. URL: https://api.agentgrid.io/v1/mcp
  4. Server ID: anima
  5. Choose global or workspace scope
json
{
  "servers": {
    "anima": {
      "type": "http",
      "url": "https://api.agentgrid.io/v1/mcp"
    }
  }
}

[!NOTE] MCP in VS Code requires GitHub Copilot. See VS Code's documentation.

Cursor

Cursor > Settings > Cursor Settings > MCP > + Add new global MCP server:

json
{
  "mcpServers": {
    "anima": {
      "url": "https://api.agentgrid.io/v1/mcp"
    }
  }
}

Click Connect to authenticate. See Cursor's documentation.

Any other client

json
{
  "mcpServers": {
    "anima": {
      "url": "https://api.agentgrid.io/v1/mcp"
    }
  }
}

No MCP? Use the CLI

The Anima CLI runs the same tools from a shell — no MCP server to configure:

bash
npx @animaapp/cli@latest login
npx @animaapp/cli@latest create -t p2c -p "SaaS dashboard with sidebar and analytics"

Prompting your agent

Build something new

"Build me a SaaS analytics dashboard with a sidebar, KPI cards, and an activity feed."

Your agent creates an artifact, waits for the build, and hands back a live preview URL. Ask for variants and it can generate several in parallel to compare.

Clone a site or implement a Figma design as a live app

"Clone stripe.com/payments into an app." "Turn this Figma frame into a working site: https://figma.com/design/..."

Edit an existing artifact

"The header on https://app.agentgrid.io/artifacts/xyz is broken on mobile — fix it."

The agent clones the artifact's git repo, fixes it, and pushes. Content changes always go through git.

Implement a Figma design in your own codebase

"Implement this Figma design in my project: https://figma.com/design/..."

The agent generates code matched to your stack and uses the returned design snapshots as visual reference.

Publish

"Publish it."

Publishing makes an app public to the world — it isn't needed just to share, since the artifact URL is already viewable.

Design system access (Enterprise)

"Implement a login form following our design system, using this Figma URL: ..."

Design system setup is done with our team. Contact us to get it configured.

Best practices

Describe intent, not CSS. Agent Grid is design-aware; hex values and pixel dimensions in a prompt override that and produce generic results. Say what it's for, who it's for, and the 3–5 features that matter.

Be specific when implementing. "Implement the login form using our existing Button and Input components from src/components/ui" beats "implement this design".

Break down large designs. Header first, then the card grid, then the footer. Focused requests are more accurate.

Troubleshooting

Common issues — async generation, create-type validation, git token expiry, publish semantics — are covered in the skill's troubleshooting reference.

MCP not recognized: confirm the server is configured in your tool and that authentication completed. Authentication issues: remove and re-add the server, clear cookies, restart your client.

What's in this repo

PathPurpose
skills/anima/SKILL.mdThe skill your agent reads
skills/anima/references/Tool reference, setup, git workflow, examples, troubleshooting
.claude-plugin/Claude Code plugin and marketplace manifests
.mcp.jsonMCP server the plugin installs
server.jsonMCP Registry entry
anima/SKILL.mdMirror of the skill, kept in sync by CI

Additional resources

常见问题

Anima MCP Server 是什么?

将 AI coding agents 连接到 Anima Playground、Figma 和你的 design system,打通设计到开发的协作流程。

相关 Skills

MCP构建

by anthropics

Universal
热门

聚焦高质量 MCP Server 开发,覆盖协议研究、工具设计、错误处理与传输选型,适合用 FastMCP 或 MCP SDK 对接外部 API、封装服务能力。

想让 LLM 稳定调用外部 API,就用 MCP构建:从 Python 到 Node 都有成熟指引,帮你更快做出高质量 MCP 服务器。

平台与服务
未扫描171.4k

Slack动图

by anthropics

Universal
热门

面向Slack的动图制作Skill,内置emoji/消息GIF的尺寸、帧率和色彩约束、校验与优化流程,适合把创意或上传图片快速做成可直接发送的Slack动画。

帮你快速做出适配 Slack 的动图,内置约束规则和校验工具,少踩上传与播放坑,做表情包和演示都更省心。

平台与服务
未扫描171.4k

接口测试套件

by alirezarezvani

Universal
热门

扫描 Next.js、Express、FastAPI、Django REST 的 API 路由,自动生成覆盖鉴权、参数校验、错误码、分页、上传与限流场景的 Vitest 或 Pytest 测试套件。

帮你把API与集成测试自动化跑顺,减少回归漏测;能力全面,尤其适合复杂接口场景的QA团队。

平台与服务
未扫描24.9k

相关 MCP Server

Slack 消息

编辑精选

by Anthropic

热门

Slack 是让 AI 助手直接读写你的 Slack 频道和消息的 MCP 服务器。

这个服务器解决了团队协作中需要 AI 实时获取 Slack 信息的痛点,特别适合开发团队让 Claude 帮忙汇总频道讨论或发送通知。不过,它目前只是参考实现,文档有限,不建议在生产环境直接使用——更适合开发者学习 MCP 如何集成第三方服务。

平台与服务
89.7k

by netdata

热门

io.github.netdata/mcp-server 是让 AI 助手实时监控服务器指标和日志的 MCP 服务器。

这个工具解决了运维人员需要手动检查系统状态的痛点,最适合 DevOps 团队让 Claude 自动分析性能数据。不过,它依赖 NetData 的现有部署,如果你没用过这个监控平台,得先花时间配置。

平台与服务
80.0k

by d4vinci

热门

Scrapling MCP Server 是专为现代网页设计的智能爬虫工具,支持绕过 Cloudflare 等反爬机制。

这个工具解决了爬取动态网页和反爬网站时的头疼问题,特别适合需要批量采集电商价格或新闻数据的开发者。不过,它依赖外部浏览器引擎,资源消耗较大,不适合轻量级任务。

平台与服务
72.9k

评论