efecto-social-media

Efecto — Social Media Design Guide

Design social media assets — Instagram, YouTube, TikTok, Twitter/X, LinkedIn, Pinterest, Facebook — using the Efecto design tool. Proper sizing, bold typography, and platform-specific best practices.

---

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 46 design tools plus a standalone image search tool. 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: "Instagram Carousel"

Returns { sessionId, designUrl }. Tell the user to open the URL, then poll session_status until browserConnected: true.

Building Social Media Designs

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

# 1. Create an artboard (Instagram post example)
create_artboard  name: "Slide 1"  width: 1080  height: 1080  backgroundColor: "#111827"  className: "flex flex-col"

# 2. Add content with JSX
add_section  parentId: "<artboard-id>"  jsx: '<section className="flex flex-col items-center justify-center gap-8 p-16 w-full h-full">
  <h1 className="text-7xl font-extrabold text-white text-center leading-none">Stop designing like it&apos;s 2020</h1>
  <p className="text-xl text-gray-400 font-medium">Swipe for 5 rules -></p>
</section>'

# 3. Duplicate artboard for carousel slides
duplicate_artboard  artboardId: "<artboard-id>"  newName: "Slide 2"

# 4. Read state and batch-update the duplicate
get_document
batch_update  updates: [
  { nodeId: "abc", textContent: "01" },
  { nodeId: "def", textContent: "White space is not wasted space" }
]