Efecto — Social Media Design Guide

Setup

create_session

add_section

get_document

Claude Code

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

Cursor

.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"]
    }
  }
}

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

create_session  label: "Instagram Carousel"

{ sessionId, designUrl }

session_status

browserConnected: true

Building Social Media Designs

# 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" }
]

All 46 Tools

create_session

wait_for_connection

session_status

close_session

get_document

get_selection

get_node_tree

list_artboards

find_nodes

create_artboard

add_section

add_node

update_node

update_class

update_artboard

batch_update

replace_section

move_node

duplicate_node

duplicate_artboard

group_nodes

ungroup_node

reorder_node

select_nodes

deselect_all

set_visibility

delete_nodes

delete_artboard

align_nodes

distribute_nodes

set_fill

export_image

zoom_to_artboard

zoom_to_fit

set_viewport

move_artboard

rename_document

new_document

undo

redo

get_theme

set_theme

set_theme_mode

reset_theme

audit_design

repair_design

JSX Format for

add_section

className

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

<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: "#111827"

  , 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
• For carousels: use

  duplicate_artboard

  to create slides, then

  batch_update

  to change content per slide

Images — Use Real Photos, Not Placeholders

search_images

search_images
  query: "team celebration"
  orientation: "square"
  luminance: "bright"
  limit: 4

• Image node:

  add_node

  with

  type: "image"

  ,

  src: "<url>"

  ,

  alt: "..."

  ,

  className: "w-full h-full object-cover"

• Background fill:

  set_fill

  with

  fill: { type: "image", url: "<url>", size: "cover" }

• In JSX:

  <img src="<url>" alt="..." className="w-full h-full object-cover" />

orientation

square

vertical

horizontal

luminance: "dark"

Shader Nodes & Visual Effects

add_node

type: "shader"

Generative Backgrounds

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

meshGradient

liquidMetal

chrome

pulsar

particles

fireworks

Apply Effects to Photos

search_images  query: "team photo"  orientation: "square"  limit: 1
add_node
  parentId: "<artboard-id>"
  type: "shader"
  inputType: "image"
  mediaInput: { mediaUrl: "<url>", mediaType: "image", objectFit: "cover" }
  effectId: "ascii-standard"
  effectEnabled: true
  className: "w-full h-full"

ascii-standard

dither-atkinson

halftone-mono

glitch-vhs

art-kuwahara

glitch-digital

Post-Processes

postProcesses: [
  { type: "grain", enabled: true, settings: { intensity: 0.3 } },
  { type: "scanlines", enabled: true, settings: { intensity: 0.2 } }
]

Mindset: Think Poster, Not Website

• Type big. The canvas is 1080px wide but renders at ~375px on a phone screen. A

  text-base

  paragraph that's perfectly legible on a website becomes unreadable squished into an Instagram card. Default to

  text-xl

  or

  text-2xl

  where you'd normally use

  text-base

  .
• Write less. If a slide has more than 2-3 short lines, it has too much text. Cut ruthlessly. One idea per slide.
• Think like a billboard. Would you put a paragraph on a highway billboard? No. Same energy.

Typography for Social Media

text-7xl

text-8xl

font-extrabold

font-black

text-4xl

text-5xl

font-bold

font-extrabold

text-2xl

text-3xl

font-medium

font-normal

text-lg

text-xl

font-semibold

text-lg

text-base

text-xl

text-2xl

text-4xl

text-5xl

Copywriting: Gen-Z Designer Energy

• Max 6-8 words per headline. "Ship faster. Break nothing." not "Our platform helps engineering teams ship code faster while maintaining quality."
• One idea per slide. If you need a comma, you probably need two slides.
• Kill filler words. No "that", "just", "really", "very", "in order to", "leverage", "utilize".
• Use sentence fragments. "Built different." "Zero to launch." "Your next big thing." Complete sentences are optional.
• Active voice, present tense. "Build" not "Building". "Ship" not "Shipping".
• No paragraphs. If text wraps more than 2 lines on a social media slide, rewrite shorter.
• CTAs are 2-3 words. "Follow for more" / "Save this" / "Link in bio" / "Try it free"

"Our comprehensive platform provides teams with everything they need to design, build, and deploy modern web applications efficiently."

"Design. Build. Ship."

Instagram

Artboard Sizes

Carousel Best Practices

1. Slide 1 = the hook. Bold headline, eye-catching, minimal text. This is the thumbnail in someone's feed — it decides if they stop scrolling.
2. Consistent design system. Same background, type styles, and layout across all slides. Only the content changes.
3. One point per slide. Not three. Not two. One.
4. Number your points. Big, bold numbers (01, 02, 03) anchor each slide and create a sense of progression.
5. Last slide = CTA. "Follow for more" / "Save this for later" / "Link in bio".
6. Swipe cue on slide 1. Arrow, dots, or "Swipe ->" so people know there's more.
7. High contrast only. Subtle color differences get crushed by JPEG compression and small screens.

Carousel Template

// Slide 1 — Hook (bold, minimal, scroll-stopping)
<section className="flex flex-col items-center justify-center gap-8 p-16 bg-gray-900 w-full h-full">
  <h1 className="text-7xl font-extrabold text-white text-center leading-none tracking-tight">Stop designing like it's 2020</h1>
  <p className="text-xl text-gray-400 font-medium">Swipe for 5 rules -></p>
</section>

// Slide 2-N — Content (one idea, big number, short text)
<section className="flex flex-col justify-center gap-8 p-16 bg-gray-900 w-full h-full">
  <span className="text-8xl font-black text-blue-400">01</span>
  <h2 className="text-4xl font-bold text-white leading-snug">White space is not wasted space</h2>
  <p className="text-2xl text-gray-400 leading-relaxed">Let your design breathe. Cramped layouts feel amateur.</p>
</section>

// Last Slide — CTA (simple, direct)
<section className="flex flex-col items-center justify-center gap-6 p-16 bg-gray-900 w-full h-full">
  <h2 className="text-5xl font-extrabold text-white text-center">Found this useful?</h2>
  <p className="text-3xl text-blue-400 font-bold text-center">Save it. Share it.</p>
  <p className="text-xl text-gray-500 font-medium">@yourbrand</p>
</section>

Story Template

<section className="flex flex-col items-center justify-center gap-10 px-12 py-24 bg-gray-900 w-full h-full">
  <span className="text-xl font-semibold text-blue-400 uppercase tracking-widest">New drop</span>
  <h1 className="text-5xl font-extrabold text-white text-center leading-tight">Your bold statement here</h1>
  <p className="text-2xl text-gray-400 text-center leading-relaxed max-w-[900px]">One short sentence of context.</p>
  <button className="px-10 py-5 text-xl font-bold text-gray-900 bg-white rounded-2xl">See more</button>
</section>

YouTube

Artboard Sizes

Thumbnail Best Practices

1. Face + emotion wins. If applicable, a human face with an exaggerated expression outperforms everything. Use large image fills for photos.
2. Max 3-5 words. The title does the explaining — the thumbnail does the selling. "DON'T DO THIS" beats "5 Common Mistakes Developers Make When Deploying".
3. Massive text.

   text-6xl

   to

   text-8xl

   font-black

   . If you can't read it at 200px wide, it's too small.
4. High contrast outlines. Text needs to pop against any background. Use contrasting colors or add a dark container behind light text.
5. Split composition. Left half = text/graphic, right half = face/subject. Or vice versa. Don't center everything.
6. 2-3 colors max. Thumbnails with too many colors look chaotic at small sizes. Pick one bold accent color.
7. No thin fonts. Everything

   font-bold

   or heavier. Thin type disappears.

Thumbnail Template

<section className="flex items-center gap-8 p-12 bg-blue-600 w-full h-full">
  <div className="flex flex-col gap-4 grow">
    <h1 className="text-7xl font-black text-white leading-none uppercase">Stop doing this</h1>
    <p className="text-3xl font-bold text-blue-200">5 design mistakes</p>
  </div>
  <div className="w-[400px] h-[400px] bg-blue-800 rounded-3xl"></div>
</section>

Channel Banner Template

// Safe area is center 1546x423 — keep all important content there
<section className="flex flex-col items-center justify-center gap-4 p-16 bg-gray-900 w-full h-full">
  <h1 className="text-6xl font-extrabold text-white tracking-tight">Your Channel Name</h1>
  <p className="text-2xl text-gray-400 font-medium">Design tips every week</p>
</section>

TikTok

Artboard Sizes

TikTok Tips

• Vertical-first — everything is 9:16
• Safe zones matter. Bottom 20% is covered by captions/UI. Top 15% has the username/follow button. Keep key content in the center 65%.
• Even bolder than Instagram — TikTok moves faster
• Text must be readable over video frames — use solid color blocks or dark overlays behind text

• text-5xl

  to

  text-7xl

  for headlines, nothing below

  text-xl

TikTok Cover Template

<section className="flex flex-col items-center justify-center gap-8 px-12 py-48 bg-gray-900 w-full h-full">
  <span className="px-6 py-2 text-lg font-bold text-white bg-red-500 rounded-full uppercase">Part 3</span>
  <h1 className="text-5xl font-extrabold text-white text-center leading-tight">The trick nobody talks about</h1>
  <p className="text-2xl text-gray-400 text-center">Watch till the end</p>
</section>

Pinterest

Artboard Sizes

Pinterest Tips

• Pinterest is a search engine, not a feed. Pins are discovered through keywords, not followers.
• Tall pins win. 2:3 ratio takes more screen space in the masonry grid. Long pins (1000x2100) for infographics or step-by-step content.
• Text overlay is essential. Pinterest users scan thumbnails to decide what to click. If your pin is just a photo, it gets scrolled past.
• Keep text in the top 60% — the bottom gets cropped in grid view.
• Warm, bright colors outperform dark designs on Pinterest (opposite of Instagram/YouTube).
• Include a clear CTA: "Read more", "Get the free guide", "Shop now".

Pin Template

<section className="flex flex-col items-center justify-between gap-8 px-12 py-16 bg-amber-50 w-full h-full">
  <div className="flex flex-col items-center gap-6">
    <span className="text-lg font-bold text-amber-700 uppercase tracking-widest">Free Guide</span>
    <h1 className="text-5xl font-extrabold text-gray-900 text-center leading-tight">10 Design Rules Every Beginner Needs</h1>
    <p className="text-2xl text-gray-600 text-center">Save this pin for later</p>
  </div>
  <div className="w-full h-[500px] bg-amber-100 rounded-3xl"></div>
  <p className="text-xl font-semibold text-amber-700">yourdomain.com</p>
</section>

Facebook

Artboard Sizes

Facebook Tips

• Facebook compresses images aggressively — use solid colors over subtle gradients
• Link preview images (1200x630) are the most common format — they appear when sharing URLs
• Cover photos get cropped differently on mobile vs desktop. Keep critical content in the center 820x312 safe zone.
• Text-heavy images get penalized in ad delivery — keep text under 20% of the image area for ads
• Wider aspect ratios (1200x630) for feed, vertical (1080x1920) for Stories

Post Template

<section className="flex items-center gap-12 p-16 bg-white w-full h-full">
  <div className="flex flex-col gap-4 grow">
    <span className="text-xl font-semibold text-blue-600 uppercase tracking-wide">Announcement</span>
    <h1 className="text-5xl font-extrabold text-gray-900 leading-tight">We just launched something big</h1>
    <p className="text-2xl text-gray-500">Link in comments</p>
  </div>
  <div className="w-[350px] h-[350px] bg-blue-100 rounded-3xl"></div>
</section>

Twitter / X

Artboard Sizes

Twitter Tips

• Even more aggressive than Instagram — the timeline is dense and fast
• Headlines:

  text-5xl

  to

  text-7xl

  font-extrabold

• Body:

  text-2xl

  to

  text-3xl

  max
• Aim for one sentence visible at a glance
• Works well with high contrast and bold color blocks
• Thread graphics: use a consistent template across all images with a numbering system (1/7, 2/7, etc.)

Tweet Image Template

<section className="flex flex-col items-center justify-center gap-6 p-16 bg-gray-900 w-full h-full">
  <h1 className="text-6xl font-extrabold text-white text-center leading-tight">Hot take incoming</h1>
  <p className="text-2xl text-gray-400 text-center">Your bold opinion in one sentence.</p>
  <p className="text-xl text-blue-400 font-semibold">@yourhandle</p>
</section>

LinkedIn

Artboard Sizes

LinkedIn Tips

• Slightly more polished than Instagram, but same type-size rules apply
• Carousel slides: numbered insights, one per slide
• Include name/logo on every slide for brand recognition
• Professional does not equal boring — still use bold type and strong contrast
• LinkedIn carousels are uploaded as PDFs — each artboard becomes a page

LinkedIn Carousel Template

// Cover slide
<section className="flex flex-col items-center justify-center gap-8 p-16 bg-white w-full h-full border-2 border-gray-100">
  <span className="text-xl font-semibold text-blue-600">Your Name | Topic</span>
  <h1 className="text-5xl font-extrabold text-gray-900 text-center leading-tight">7 lessons from building a design system</h1>
  <p className="text-2xl text-gray-500 text-center">A thread. Slide -></p>
</section>

// Content slide
<section className="flex flex-col justify-center gap-8 p-16 bg-white w-full h-full border-2 border-gray-100">
  <span className="text-7xl font-black text-blue-600">01</span>
  <h2 className="text-4xl font-bold text-gray-900 leading-snug">Start with your constraints, not your aspirations</h2>
  <p className="text-2xl text-gray-500 leading-relaxed">A design system for 3 engineers looks nothing like one for 300.</p>
  <p className="text-lg text-gray-400 font-medium">Your Name</p>
</section>

General Design Rules

Layout

• Center-align most content (social is not web's default left-align)
• Generous padding:

  p-12

  to

  p-16

  minimum — don't crowd the edges
• Vertically center:

  justify-center

  on slides — content should sit in the middle, not hang from the top

• w-full h-full

  on top-level sections to fill the artboard completely

Color & Contrast

• Minimum 4.5:1 contrast ratio — feed images get JPEG-compressed, low contrast disappears
• Solid backgrounds beat gradients for text readability
• Dark mode designs (white on dark) tend to pop more in feeds
• Avoid pastel-on-pastel — it looks washed out at thumbnail size

Multi-Slide Consistency

• Same background color on every slide
• Same headline position (same y-position across slides)
• Same font sizes for the same role (all headlines match, all body text matches)
• Brand element (@handle or logo) in the same spot on every slide

Platform Quick Reference