Efecto — AI Design Skills + MCP Tools

Design with AI agents using Efecto — a real-time visual design tool where humans and robots design together.

Works with Claude Code, Cursor, Windsurf, GitHub Copilot, Codex, Gemini CLI, and any MCP-compatible agent.

Install

npx skills add pablostanley/efecto-plugin

This installs 3 design skills (knowledge) + 68 MCP tools (actions). Your AI agent gets both the taste and the tools.

claude plugin add efecto

{
  "mcpServers": {
    "efecto": {
      "command": "npx",
      "args": ["-y", "@efectoapp/mcp"]
    }
  }
}

codex mcp add efecto -- npx -y @efectoapp/mcp

{
  "mcpServers": {
    "efecto": {
      "command": "npx",
      "args": ["-y", "@efectoapp/mcp"]
    }
  }
}

What's Included

68 MCP Tools

Create sessions, build artboards, add layouts with JSX + Tailwind CSS, modify nodes, animate layers, export images, manage themes, and more. Full programmatic control of the Efecto design canvas.

3 Design Skills

Skills teach your AI agent how to design well — not just how to call tools. Without skills, your agent can create artboards and add sections. With skills, it knows typography scales, platform-specific sizing, layout patterns, and visual hierarchy.

How It Works

1. Your AI agent creates an Efecto session via MCP, or reattaches to an existing session URL
2. You open the design URL in your browser
3. The agent pushes design commands — you see every change live
4. Iterate with natural language until the design is perfect

Usage

Just ask your AI to design something:

• "Design a landing page for my startup"
• "Create an Instagram carousel about design tips"
• "Build a pricing page with dark mode"
• "Make a pitch deck for our Series A"
• "Design a business card for my agency"
• "Create a YouTube thumbnail for my video"
• "Animate this artboard with a clean staggered entrance"

Links

• Efecto App
• Documentation
• Skills Guide
• All 68 Tools
• MCP Package