efecto-graphic-design

What this skill does

# Efecto — Graphic Design Guide

Design graphic assets — presentations, pitch decks, event posters, email headers, blog images, OG cards, business cards, resumes, menus, infographics, invitations, newsletters, and documents — using the Efecto design tool.

---

## Setup

This skill requires the **Efecto MCP server**. Check if it's available by looking for tools like `create_session`, `add_section`, or `get_document` in your tool list.

**If Efecto tools are NOT available, install the MCP server:**

### Claude Code
```bash
claude mcp add efecto -- npx -y @efectoapp/mcp
```

### Cursor
Add to `.cursor/mcp.json`:
```json
{
  "mcpServers": {
    "efecto": {
      "command": "npx",
      "args": ["-y", "@efectoapp/mcp"]
    }
  }
}
```

### Windsurf / VS Code / Other MCP Clients
```json
{
  "mcpServers": {
    "efecto": {
      "command": "npx",
      "args": ["-y", "@efectoapp/mcp"]
    }
  }
}
```

Once installed, you'll have access to 68 MCP tools, including image search and native animation authoring. The MCP server connects your agent to the Efecto design canvas at [efecto.app](https://efecto.app).

### How It Works

1. Your agent creates an Efecto session via MCP (`create_session`)
2. You open the returned 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

---

## Using Efecto Tools — Quick Reference

### Session Workflow

Every design starts with a session:

```
create_session  label: "Pitch Deck"
```
Returns `{ sessionId, documentId, designUrl }`. Tell the user to open the URL, then call `wait_for_connection` (blocks until paired). If the user already has an Efecto URL with `?session=...`, call `attach_session` with that URL instead of creating a duplicate session. Never call `create_session` twice to "reconnect" — a paired session refuses overwrite without `force: true`. Use `session_status` to inspect routing (`{ all: true }` for the full session list).

### Building Designs

The primary workflow is: **create artboard → add sections with JSX → refine with updates**.

```
# 1. Create an artboard
create_artboard  name: "Slide 1"  width: 1920  height: 1080  backgroundColor: "#1a1a1a"  className: "flex flex-col"

# 2. Add content with JSX (most efficient way to build)
add_section  parentId: "<artboard-id>"  jsx: '<section className="flex flex-col items-center justify-center gap-6 p-24 w-full h-full">
  <h1 className="text-7xl font-extrabold text-white text-center">Your Title Here</h1>
  <p className="text-2xl text-gray-400">Subtitle text</p>
</section>'

# 3. Read current state to get node IDs
get_document

# 4. Fine-tune with batch updates
batch_update  updates: [
  { nodeId: "abc", className: "text-8xl font-black text-white" },
  { nodeId: "def", textContent: "New text" }
]
```

### All 68 Tools

| Category | Tools |
|----------|-------|
| **Session** | `create_session`, `attach_session`, `wait_for_connection`, `session_status`, `close_session` |
| **Reading** | `get_document`, `get_selection`, `get_node_tree`, `list_artboards`, `find_nodes` |
| **Creating** | `create_artboard`, `add_section`, `add_node` |
| **Modifying** | `update_node`, `update_class`, `update_artboard` (accepts `speakerNotes` for slides and `timelineDuration` for animation), `batch_update`, `replace_section` |
| **Animation** | `list_animation_presets`, `apply_animation_plan`, `clear_animations` |
| **Organizing** | `move_node`, `duplicate_node`, `duplicate_artboard`, `group_nodes`, `ungroup_node`, `reorder_node` |
| **Selection** | `select_nodes`, `deselect_all`, `set_visibility`, `delete_nodes`, `delete_artboard` |
| **Alignment** | `align_nodes`, `distribute_nodes` |
| **Fill & Export** | `set_fill`, `export_image` |
| **Viewport** | `zoom_to_artboard`, `zoom_to_fit`, `set_viewport`, `move_artboard` |
| **Document** | `rename_document`, `new_document` |
| **History** | `undo`, `redo` |
| **Theme** | `get_theme`, `set_theme`, `set_theme_mode`, `reset_theme` |
| **Quality** | `audit_design`, `repair_design` |

**Scoped reads (large docs).** `get_document` returns the whole tree by default — on multi-artboard docs that can blow past tool-result token caps. Prefer scoped modes: `outline: true` (one-line summary per top-level child), `artboardId: "..."` (single artboard), `maxDepth: N` (cap descent; 0 = artboard header only, 1 = top-level children). Response includes an approx-token count so you can decide whether to widen. Drill into a subtree with `get_node_tree` after.

**Routing inspection.** `session_status` returns the legacy single-session shape by default (sessionId, paired, browserConnected, knownSessions). Pass `{ all: true }` for the list shape — every session in this MCP process with isActive/paired flags. If this MCP process restarted, `attach_session` with the current browser URL makes that session active again.

### JSX Format for `add_section`

Write standard HTML tags with Tailwind `className`. The tag determines the node type:

```
<div>/<section>/<nav>  → frame       <img>     → image
<h1>-<h6>/<p>/<span>   → text        <button>  → button
<a>                    → link        <svg>     → icon
<input>                → input       <video>   → video
```

Icons: `<svg icon="arrow-right" className="w-5 h-5 text-gray-600" />`

### Critical Gotchas

- **Artboard `className` must include `flex flex-col`** — without it, children overlap at (0,0)
- **Artboard `backgroundColor` is a property, NOT a className** — use `backgroundColor: "#1a1a1a"`, not `className: "bg-gray-900"`
- **Never use arbitrary hex in className** — `bg-[#f9f9f9]` silently fails. Use named colors (`bg-gray-50`) or inline `style`
- **Use `grow` instead of `flex-1`** — `flex-1` doesn't work in Efecto
- **Buttons ignore children** — use a flex container with `<span>` + `<svg>` instead
- **Always add `w-full`** on direct children of artboards

---

## Images — Use Real Photos, Not Placeholders

Use `search_images` to find free, high-quality stock photos from Lummi. **No session required** — call it anytime.

```
search_images
  query: "conference stage audience"
  orientation: "horizontal"
  luminance: "dark"
  limit: 4
```

Then apply images to your designs:

- **Image node**: `add_node` with `type: "image"`, `src: "<url>"`, `alt: "..."`, `className: "w-full h-[400px] object-cover rounded-2xl"`
- **Background fill**: `set_fill` with `fill: { type: "image", url: "<url>", size: "cover" }`
- **In JSX**: `<img src="<url>" alt="..." className="w-full h-[400px] object-cover rounded-2xl" />`

**Tips for graphic design**: Match `orientation` to your artboard (vertical for posters/stories, horizontal for banners/presentations, square for social cards). Use `luminance: "dark"` for dark-themed designs. Search before designing — build layouts around real images, not empty gray boxes.

---

## Shader Nodes & Visual Effects

Add visual effects to graphic designs with shader nodes. Use `add_node` with `type: "shader"`.

### Generative Backgrounds

Create eye-catching backgrounds without images:

```
add_node
  parentId: "<artboard-id>"
  type: "shader"
  shaderType: "meshGradient"
  className: "w-full h-full"
```

**Shader types**: `meshGradient` (organic blending), `dotGrid` (tech/data), `voronoi` (organic cells), `liquidMetal` (premium), `chrome` (reflective), `pulsar` (energy), `blackHole` (dramatic), `glass` (frosted), `spiral` (playful), `particles` (atmospheric), `fireworks` (celebration).

### Apply Effects to Images

Process photos with ASCII, dither, halftone, glitch, or art effects:

```
search_images  query: "portrait"  orientation: "vertical"  limit: 1
add_node
  parentId: "<artboard-id>"
  type: "shader"
  inputType: "image"
  mediaInput: { mediaUrl: "<url>", mediaType: "image", objectFit: "cover" }
  effectId: "halftone-mono"
  effectEnabled: true
  className: "w-full h-full"
```

**Effect categories**: ASCII (`ascii-standard`, `ascii-dense`, `ascii-minimal`, `ascii-blocks`), Dither (`dither-floyd-stei