Skip to content

README.md

Latest commit

 

History

History
100 lines (71 loc) · 3.02 KB

README.md

File metadata and controls

100 lines (71 loc) · 3.02 KB

Efecto — AI Design Skills + MCP Tools

Design with AI agents using Efecto — a real-time visual design tool where humans and robots design together.

Works with Claude Code, Cursor, Windsurf, GitHub Copilot, Codex, Gemini CLI, and any MCP-compatible agent.

Install

npx skills add pablostanley/efecto-plugin

This installs 3 design skills (knowledge) + 46 MCP tools (actions). Your AI agent gets both the taste and the tools.

Other install methods

Claude Code Plugin

claude plugin add efecto

Cursor

Install with one click or add to .cursor/mcp.json:

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

OpenAI Codex

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

Windsurf / Copilot / Gemini / Any MCP Client

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

What's Included

46 MCP Tools

Create sessions, build artboards, add layouts with JSX + Tailwind CSS, modify nodes, export images, manage themes, and more. Full programmatic control of the Efecto design canvas.

3 Design Skills

Skills teach your AI agent how to design well — not just how to call tools. Without skills, your agent can create artboards and add sections. With skills, it knows typography scales, platform-specific sizing, layout patterns, and visual hierarchy.

Skill What it teaches
Web Design Landing pages, dashboards, marketing sites, pricing pages, app UIs. Layout patterns, component structure, responsive design, Tailwind best practices.
Social Media Instagram carousels, YouTube thumbnails, TikTok covers, Twitter/X images, LinkedIn slides, Pinterest pins. Platform-specific sizing, bold typography, scroll-stopping design.
Graphic Design Pitch decks, event posters, business cards, resumes, menus, infographics, invitations, newsletters, email headers, OG images, certificates, documents.

How It Works

  1. Your AI agent creates an Efecto session via MCP
  2. You open the 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

Usage

Just ask your AI to design something:

  • "Design a landing page for my startup"
  • "Create an Instagram carousel about design tips"
  • "Build a pricing page with dark mode"
  • "Make a pitch deck for our Series A"
  • "Design a business card for my agency"
  • "Create a YouTube thumbnail for my video"

Links