# Efecto — AI Design Tool (MCP Server)

> MCP server for AI design. Give any AI agent 68 tools to create web pages, social media graphics, presentations, and more — directly in the browser.

- Type: MCP server (Model Context Protocol) + AI design skills
- Package: @efectoapp/mcp
- Install: npx skills add pablostanley/efecto-plugin
- Tools: 68 design tools (artboards, layouts, styling, export)
- Skills: 3 design skills (web design, social media, graphic design)
- Works with: Claude Code, Cursor, Windsurf, GitHub Copilot, Gemini CLI, Codex CLI, Kiro, any MCP client
- Free: No API key, no account required

## Quick install

Skills + MCP (recommended — works with any agent):
```
npx skills add pablostanley/efecto-plugin
```

MCP config only (manual setup):
```json
{ "mcpServers": { "efecto": { "command": "npx", "args": ["-y", "@efectoapp/mcp"] } } }
```

Claude Code plugin (deepest Claude integration):
```
/plugin marketplace add pablostanley/efecto-plugin
/plugin install efecto@efecto
```

## Design Tool docs

- [Overview](https://efecto.app/docs): AI-native design tool powered by MCP
- [Quick Start](https://efecto.app/docs/getting-started): Install from scratch — no experience needed
- [Skills](https://efecto.app/docs/skills): Install Efecto skills + MCP with one command — works with any AI agent
- [MCP Overview](https://efecto.app/docs/mcp): Add Efecto to any AI tool via MCP
- [Claude Code](https://efecto.app/docs/claude-code): Plugin with MCP tools + design skills
- [Cursor](https://efecto.app/docs/cursor): One-click install or manual MCP config
- [OpenAI Codex](https://efecto.app/docs/codex): Add with one command
- [Windsurf](https://efecto.app/docs/windsurf): Add via Windsurf MCP settings
- [GitHub Copilot](https://efecto.app/docs/copilot): Add to VS Code with Copilot
- [Gemini CLI](https://efecto.app/docs/gemini): Add to Gemini CLI config
- [Troubleshooting](https://efecto.app/docs/troubleshooting): Fix common connection and setup issues
- [Layout System](https://efecto.app/docs/layout): Flexbox auto-layout — rows, columns, gap, padding, wrap, and child sizing
- [Code Panel](https://efecto.app/docs/code-panel): Edit className and inline style with autocomplete, conflict warnings, and color swatches
- [Agent Teams](https://efecto.app/docs/agent-teams): Multi-agent design collaboration — 16 roles, personalities, emotions, memory, and swarm orchestration
- [Brand System](https://efecto.app/docs/brand-kit): AI-powered brand systems — colors, typography, components, and compliance
- [All Tools](https://efecto.app/docs/tools): All 68 MCP tools with parameters and examples
- [REST API](https://efecto.app/docs/api): Sessions, tool execution, media, publishing, sharing

## FX docs (secondary product)

- [Overview](https://efecto.app/docs/fx): Visual effects engine for posters
- [Quickstart](https://efecto.app/docs/fx/quickstart): Get up and running quickly
- [FX MCP](https://efecto.app/docs/fx/mcp): FX poster skill and recipes
- [Overview](https://efecto.app/docs/fx/api): FX API endpoints overview
- [Discovery](https://efecto.app/docs/fx/api/discovery): List available effects and settings
- [State](https://efecto.app/docs/fx/api/state): Encode and decode poster state
- [Render](https://efecto.app/docs/fx/api/render): Generate images from state
- [Text Animations](https://efecto.app/docs/fx/api/text-animations): Animated text effects
- [Overview](https://efecto.app/docs/fx/effects): All visual effect categories
- [ASCII Standard](https://efecto.app/docs/fx/effects/ascii/standard): Classic ASCII character rendering
- [ASCII Dense](https://efecto.app/docs/fx/effects/ascii/dense): High-density ASCII with tight spacing
- [ASCII Minimal](https://efecto.app/docs/fx/effects/ascii/minimal): Clean minimal ASCII effect
- [ASCII Blocks](https://efecto.app/docs/fx/effects/ascii/blocks): Block character ASCII art
- [ASCII Braille](https://efecto.app/docs/fx/effects/ascii/braille): Braille pattern ASCII rendering
- [ASCII Technical](https://efecto.app/docs/fx/effects/ascii/technical): Technical/schematic ASCII style
- [ASCII Matrix](https://efecto.app/docs/fx/effects/ascii/matrix): Matrix-style rain effect
- [ASCII Hatching](https://efecto.app/docs/fx/effects/ascii/hatching): Cross-hatching ASCII patterns
- [Dither Floyd-Steinberg](https://efecto.app/docs/fx/effects/dither/floyd-steinberg): Classic error-diffusion dithering
- [Dither Atkinson](https://efecto.app/docs/fx/effects/dither/atkinson): Apple Macintosh-style dithering
- [Dither Stucki](https://efecto.app/docs/fx/effects/dither/stucki): High-quality Stucki dithering
- [Dither Sierra](https://efecto.app/docs/fx/effects/dither/sierra): Sierra error-diffusion dithering
- [Dither Sierra Lite](https://efecto.app/docs/fx/effects/dither/sierra-lite): Lightweight Sierra variant
- [Dither Two-Row Sierra](https://efecto.app/docs/fx/effects/dither/two-row-sierra): Two-row Sierra dithering algorithm
- [Dither Jarvis-Judice-Ninke](https://efecto.app/docs/fx/effects/dither/jarvis-judice-ninke): Jarvis-Judice-Ninke error diffusion
- [Dither Burkes](https://efecto.app/docs/fx/effects/dither/burkes): Burkes dithering algorithm
- [Halftone Mono](https://efecto.app/docs/fx/effects/halftone/mono): Monochrome halftone dot pattern
- [Halftone CMYK](https://efecto.app/docs/fx/effects/halftone/cmyk): Full-color CMYK halftone
- [Glitch VHS](https://efecto.app/docs/fx/effects/glitch/vhs): VHS tape distortion effect
- [Glitch Digital](https://efecto.app/docs/fx/effects/glitch/digital): Digital data corruption effect
- [Glitch Weird](https://efecto.app/docs/fx/effects/glitch/weird): Experimental glitch distortion
- [Glitch Chromatic](https://efecto.app/docs/fx/effects/glitch/chromatic): RGB channel shift effect
- [Art Kuwahara](https://efecto.app/docs/fx/effects/art/kuwahara): Oil painting style filter
- [Art Crosshatch](https://efecto.app/docs/fx/effects/art/crosshatch): Pen crosshatch drawing effect
- [Art Line Art](https://efecto.app/docs/fx/effects/art/lineart): Clean line art rendering
- [Art Engraving](https://efecto.app/docs/fx/effects/art/engraving): Wood/metal engraving style
- [Art Stipple](https://efecto.app/docs/fx/effects/art/stipple): Dot stippling illustration style
- [Overview](https://efecto.app/docs/fx/layers): Layer compositing system
- [Text](https://efecto.app/docs/fx/layers/text): Text layers with fonts and styling
- [Image](https://efecto.app/docs/fx/layers/image): Image layers from URL or upload
- [Video](https://efecto.app/docs/fx/layers/video): Video layers with playback
- [3D](https://efecto.app/docs/fx/layers/3d): 3D model layers (GLTF/GLB)
- [Background](https://efecto.app/docs/fx/layers/background): Background layer with color and gradients
- [Group](https://efecto.app/docs/fx/layers/group): Group layers for organization
- [Shapes](https://efecto.app/docs/fx/layers/shapes): Shape layers (rectangle, circle, etc.)
- [Overview](https://efecto.app/docs/fx/postprocess): Post-process effects
- [Scanlines](https://efecto.app/docs/fx/postprocess/scanlines): CRT scanline overlay
- [Vignette](https://efecto.app/docs/fx/postprocess/vignette): Dark edge vignette
- [Grain](https://efecto.app/docs/fx/postprocess/grain): Film grain texture
- [Bloom](https://efecto.app/docs/fx/postprocess/bloom): Glow/bloom light effect
- [Pixelate](https://efecto.app/docs/fx/postprocess/pixelate): Pixel mosaic effect
- [Chromatic Aberration](https://efecto.app/docs/fx/postprocess/chromatic-aberration): Lens chromatic aberration
- [Brightness/Contrast](https://efecto.app/docs/fx/postprocess/brightness-contrast): Adjust brightness and contrast
- [Color Tint](https://efecto.app/docs/fx/postprocess/color-tint): Apply a color tint overlay
- [Curvature](https://efecto.app/docs/fx/postprocess/curvature): CRT screen curvature
- [Dot Screen](https://efecto.app/docs/fx/postprocess/dot-screen): Dot screen pattern overlay
- [Grid](https://efecto.app/docs/fx/postprocess/grid): Grid pattern overlay
- [Jitter](https://efecto.app/docs/fx/postprocess/jitter): Pixel jitter displacement
- [Light Beams](https://efecto.app/docs/fx/postprocess/light-beams): Volumetric light beam rays
- [Motion Blur](https://efecto.app/docs/fx/postprocess/motion-blur): Directional motion blur
- [Noise](https://efecto.app/docs/fx/postprocess/noise): Random noise overlay
- [Palette](https://efecto.app/docs/fx/postprocess/palette): Color palette quantization
- [RGB Glitch](https://efecto.app/docs/fx/postprocess/rgb-glitch): RGB channel glitch effect
- [Sepia](https://efecto.app/docs/fx/postprocess/sepia): Sepia tone vintage filter
- [Wave](https://efecto.app/docs/fx/postprocess/wave): Wave distortion effect

## Machine-readable endpoints

- Docs index (JSON): https://efecto.app/docs/index.json
- Page data (JSON): https://efecto.app/docs/page-data/<slug>
  - Example: https://efecto.app/docs/page-data/docs/mcp
  - Returns: summary, recipes, minimal request/response, common errors
- OpenAPI spec: https://efecto.app/api/v1/design/openapi.json
- Sitemap: https://efecto.app/sitemap.xml

## What agents can create

- Web pages: landing pages, dashboards, pricing tables, responsive layouts
- Social media: Instagram carousels, YouTube thumbnails, TikTok covers, LinkedIn posts
- Presentations: pitch decks, keynote slides, conference talks
- Graphics: event posters, email headers, OG images, blog heroes

## Key tools for agents

- create_session → start a session, returns a browser URL
- attach_session → resume an existing Efecto URL with ?session=
- wait_for_connection → wait for the browser to connect
- create_artboard → create artboards (Desktop: 1440x900, Mobile: 375x812)
- add_section → add JSX/Tailwind layouts (most efficient for complex UI)
- update_node → update text, styles, attributes
- set_fill → set background colors, gradients, images
- set_theme → apply color themes (presets: default, zinc, slate, rose, blue, green, violet, orange)
- export_image → export as PNG, JPEG, WebP, or SVG
- audit_design → check typography, contrast, spacing, AI slop

## Workflow

1. create_session → opens browser, or attach_session → resumes an existing URL
2. wait_for_connection → confirms browser is ready
3. create_artboard → set up canvas
4. add_section (with JSX + Tailwind) → build the layout
5. update_node / batch_update → refine details
6. export_image → save the result