efecto-plugin

# Efecto — AI Design Skills + MCP Tools

Design with AI agents using [Efecto](https://efecto.app) — a real-time visual design tool where humans and robots design together.

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

## Install

```bash
npx skills add pablostanley/efecto-plugin
```

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

<details>
<summary>Other install methods</summary>

### Claude Code Plugin

```bash
cursor plugin add efecto
```

### Cursor

[Install with one click](cursor://anysphere.cursor-deeplink/mcp/install?name=efecto&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsIkBlZmVjdG9hcHAvbWNwIl19) or add to `.cursor/mcp.json`:

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

### OpenAI Codex

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

### Windsurf / Cursor / Cursor / Any MCP Client

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

</details>

## What's Included

### 46 MCP Tools

Create sessions, build artboards, add layouts with JSX + Tailwind CSS, modify nodes, 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.

| Skill | What it teaches |
|-------|----------------|
| **Web Design** | Landing pages, dashboards, marketing sites, pricing pages, app UIs. Layout patterns, component structure, responsive design, Tailwind best practices. |
| **Social Media** | Instagram carousels, YouTube thumbnails, TikTok covers, Twitter