Efecto Design Tool

AI-native design tool. Tell your AI agent what to design and watch it build layouts, pages, and graphics in your browser — in real-time.

Install

Installs 3 design skills + MCP tools. Works with Claude Code, Cursor, Windsurf, Copilot, and more.

Terminal

npx skills add pablostanley/efecto-plugin

Tools without design skills. For manual MCP config.

MCP config

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

Deepest integration for Claude Code users.

Claude Code

/plugin marketplace add pablostanley/efecto-plugin
/plugin install efecto@efecto

Run inside Claude Code's chat, not in Terminal.

Create artboards for desktop, tablet, and mobile
Flexbox auto-layout — rows, columns, gap, padding, wrap, and fill/hug child sizing
Add complex layouts with headers, grids, cards, and more
Modify text, images, buttons, and any node in real-time
Align, distribute, group, and reorder elements
Export designs as PNG, JPEG, WebP, or SVG
Open in v0 — export designs as React + Tailwind and continue editing in v0.app
Drag between artboards — move nodes across artboards with automatic coordinate conversion
Build with agent teams — multiple AI agents collaborating in parallel with personalities and memory
Built-in web search — agents research during design using Claude's native search
Brand kit — AI-powered brand systems with colors, typography, components, and compliance auditing
Shaders — 11 generative WebGL backgrounds (mesh gradient, voronoi, particles, and more)
Sound design — musical progressions, Kaoss pad color picker tones, and contextual UI sounds
No API key required — sessions are free