docs

Integrations

Install Efecto Skills

One command to give your AI agent 46 design tools and 3 design skills. Works with Claude Code, Cursor, Windsurf, Copilot, Gemini CLI, and any MCP-compatible agent.

Install

npx skills add pablostanley/efecto-plugin

This installs 3 design skills and auto-configures the Efecto MCP server. Requires Node.js.

What You Get

46 Design Tools (MCP)

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

Web Design

Landing pages, dashboards, marketing sites, pricing pages, app UIs. Teaches your agent layout patterns, component structure, and responsive design.

Social Media

Instagram carousels, YouTube thumbnails, TikTok covers, LinkedIn slides, Pinterest pins. Platform-specific sizing, typography rules, and best practices.

Graphic Design

Pitch decks, event posters, business cards, resumes, menus, email headers, OG images, infographics, invitations, newsletters.

What Are Skills?

Skills are reusable knowledge documents that teach AI agents how to do specific tasks well. They're like plugins for your AI — procedural knowledge that makes agents more effective.

Without skills, your agent gets the tools (create artboard, add section, etc.) but doesn't know design best practices. With skills, it knows proper typography scales, platform-specific sizing rules, section patterns, and visual hierarchy — so designs look professional out of the box.

Skills are powered by the open-source skills.sh ecosystem.

Try It

After installing, ask your AI agent:

Design a landing page for my SaaS product in Efecto
Create an Instagram carousel about design tips in Efecto
Make a pitch deck for my startup in Efecto

Skills vs MCP vs Plugin — what's the difference?

  • Skills (npx skills add) — Design knowledge + MCP tools. Works with any agent. Best for most users.
  • MCP config — Tools only, no design knowledge. For manual JSON config in specific editors. Setup guide
  • Claude Code Plugin — Deepest integration for Claude Code. Plugin guide

Reference