pablostanley/efecto-plugin/graphic-design

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

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

Cursor

Add to .cursor/mcp.json:

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

Windsurf / VS Code / Other MCP Clients

{
  "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.

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 name="Title Slide" className="flex flex-col items-center justify-center gap-6 p-24 w-full h-full">
  <h1 name="Presentation Title" className="text-7xl font-extrabold text-white text-center">Your Title Here</h1>
  <p name="Presentation Subtitle" 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

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

Required Structure and Quality Gate

• Name meaningful layers. Give every section, layout group, card, text block, control, image, and icon a concise semantic name attribute (for example, <section name="Title Slide">, <div name="Metric Group">, <h1 name="Presentation Title">). Never ship generic names such as Frame, Text, or Icon; unnamed purely decorative leaves are the only exception.
• Declare nested layout. Every frame with two or more children must explicitly include flex or grid in className, including nested wrappers. Add the matching direction, alignment, gap, and wrapping classes; do not rely on implicit block flow.
• Meet WCAG AA contrast. Normal text must reach 4.5:1 and large text 3:1. Evaluate text against its effective rendered background: use its own background when present, otherwise walk through ancestor frames to the artboard, including opacity/alpha compositing. Resolve semantic theme tokens in the active mode before judging contrast.
• Audit until clean. After building or editing, call audit_design. Fix every contrast-ratio, implicit-block-container, and generic-layer-name finding with batch_update or replace_section, then call audit_design again. If you use repair_design, inspect its changes and re-audit. Do not declare completion until all three finding types are zero, and use get_document to confirm meaningful layers retain semantic names.

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-steinberg, dither-atkinson), Halftone (halftone-mono, halftone-cmyk), Glitch (glitch-vhs, glitch-digital), Art (art-kuwahara, art-crosshatch, art-lineart, art-engraving, art-stipple).

Post-Processes

Stack additional effects: grain, vignette, bloom, scanlines, noise, pixelate, sepia, color-tint.

add_node
  parentId: "<id>"
  type: "shader"
  shaderType: "meshGradient"
  postProcesses: [
    { type: "grain", enabled: true, settings: { intensity: 0.3 } },
    { type: "vignette", enabled: true, settings: { intensity: 0.5 } }
  ]
  className: "w-full h-full"

Best for: Presentation backgrounds, poster visuals, event graphics, blog hero images, OG cards with distinctive visual treatments.

Native Animation

Graphic assets can use native Efecto layer animations when the user asks for motion, slides, reels, or presentation playback. Do not use Tailwind animate-*, transition-*, or duration-* classes.

Workflow: inspect the target, call list_animation_presets, then apply a compact plan with apply_animation_plan. Animate hierarchy first: background or hero visual, headline, supporting detail, CTA or event details, then secondary ornaments. Use update_artboard with timelineDuration when the motion needs a deliberate ending.

Good defaults: 0.35-0.6s for hero/title motion, 0.18-0.35s for smaller details, 0.04-0.12s stagger, ease-out entrances, ease-in exits. For title text, use appearBy: "word" or "line"; reserve "char" for kinetic poster moments. For poster, slide, and frame reveals, prefer explicit mask presets (mask-in, fade-mask-in, slide-mask-in, scale-mask-in) and set maskStyle, maskDirection, or maskOrigin when the reveal shape matters.

Mindset: Design for the Context

Every graphic has a context that dictates the rules:

• Presentation slides are projected or screen-shared — big text, simple layouts, one idea per slide
• Event posters are scanned quickly — bold headline, essential details (date, place, CTA), strong visual identity
• Email headers are 600px wide and compete with dozens of other emails — punchy, branded, action-oriented
• Blog hero images set the tone for an article — atmospheric, typographic, or illustrative
• OG/share cards are the first impression of a link — they need to work at thumbnail size AND full size

The common thread: less is more. Every element must earn its place.