efecto-plugin

mcp
Security Audit
Warn
Health Warn
  • No license — Repository has no license file
  • Description — Repository has a description
  • Active repo — Last push 0 days ago
  • Low visibility — Only 6 GitHub stars
Code Pass
  • Code scan — Scanned 7 files during light audit, no dangerous patterns found
Permissions Pass
  • Permissions — No dangerous permissions requested
Purpose
This tool provides an MCP server that connects AI coding assistants to the Efecto design platform. It enables agents to visually build and modify designs (like web pages, pitch decks, and social media graphics) in real-time using JSX and Tailwind CSS.

Security Assessment
Overall Risk: Medium. The tool operates by making outbound network requests to the Efecto API to create design sessions and push visual changes. The standard installation relies on running unscoped `npx` commands, which inherently execute remote shell scripts on your machine. The automated code scan of 7 files found no dangerous patterns, hardcoded secrets, or requests for overly broad local permissions. However, the language and full source tree remain unknown, and the `npx` execution model requires trusting the package maintainers.

Quality Assessment
The project is very new and currently has extremely low visibility with only 6 GitHub stars, indicating minimal community review or battle-testing. It was updated recently (pushed 0 days ago), showing active development. A significant concern for enterprise or open-source use is the complete lack of a license file in the repository, which means the terms of use, modification, and distribution are legally undefined.

Verdict
Use with caution. The codebase itself looks safe based on a light audit, but its low community adoption, missing legal licensing, and reliance on executing remote `npx` packages warrant waiting for broader community validation before adopting in sensitive environments.
SUMMARY

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

README.md

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

Reviews (0)

No results found