
Bridges design handoff and implementation by connecting your AI coding agent to Anima Playground projects, Figma designs, and team design systems. Exposes operations to download Anima playgrounds (reading project files and patterns), convert Figma designs to code with high fidelity, and pull design system documentation for enterprises. Uses streamable HTTP transport and handles authentication through your Anima account, with optional Figma connection. Reach for this when you're implementing UI from prototypes or design files and want your agent to understand both the design artifacts and your team's component patterns. Works across Claude Code, Cursor, VS Code with Copilot, and other MCP clients that support HTTP transport.
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.
Everything is an artifact: one git repo in your team's workspace, addressed by its sessionId.
/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.
Server URL: https://api.agentgrid.io/v1/mcp · Transport: streamable HTTP
claude mcp add --transport http anima https://api.agentgrid.io/v1/mcp
/mcp, select anima, and authenticate in the browserManage servers with claude mcp list, claude mcp get anima, claude mcp remove anima. See Anthropic's MCP documentation.
codex mcp add anima --url https://api.agentgrid.io/v1/mcp
Or in ~/.codex/config.toml:
[mcp_servers.anima]
url = "https://api.agentgrid.io/v1/mcp"
Then install the skill (recommended):
codex skill install AnimaApp/mcp-server-guide/skills/anima
See OpenAI's Codex MCP documentation.
Cmd Shift P / Ctrl Shift P → MCP: Add Serverhttps://api.agentgrid.io/v1/mcpanima{
"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 > Settings > Cursor Settings > MCP > + Add new global MCP server:
{
"mcpServers": {
"anima": {
"url": "https://api.agentgrid.io/v1/mcp"
}
}
}
Click Connect to authenticate. See Cursor's documentation.
{
"mcpServers": {
"anima": {
"url": "https://api.agentgrid.io/v1/mcp"
}
}
}
The Anima CLI runs the same tools from a shell — no MCP server to configure:
npx @animaapp/cli@latest login
npx @animaapp/cli@latest create -t p2c -p "SaaS dashboard with sidebar and analytics"
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.
"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.
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.
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.
| Path | Purpose |
|---|---|
skills/anima/SKILL.md | The skill your agent reads |
skills/anima/references/ | Tool reference, setup, git workflow, examples, troubleshooting |
.claude-plugin/ | Claude Code plugin and marketplace manifests |
.mcp.json | MCP server the plugin installs |
server.json | MCP Registry entry |
anima/SKILL.md | Mirror of the skill, kept in sync by CI |