Skip to content

pablostanley/efecto-plugin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

AI design skills + 46 MCP tools for Claude Code, Cursor, Windsurf, Copilot, and any AI agent. Install: npx skills add pablostanley/efecto-plugin

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors