docs
Human and robot designing together on a sofa

Claude Code

Efecto for Claude Code

The best way to use Efecto. The Claude Code plugin includes 44 MCP tools plus 3 design skills that teach Claude best practices for layout, typography, and sizing.

Using a different AI tool?

This page is for Claude Code specifically. For Cursor, Windsurf, Copilot, or other tools, see the MCP setup page.

Install

1

Start Claude Code

Open your terminal and launch Claude Code. For the smoothest design experience, we recommend skipping permission prompts so Claude can work uninterrupted:

claude --dangerously-skip-permissions

This flag disables all safety confirmations — only use it for dedicated design sessions, not general coding. You can also just run claude normally and approve actions one by one.

2

Add the plugin

Once Claude Code is open, paste this into the chat:

/plugin marketplace add pablostanley/efecto-plugin
3

Install it

Now install the plugin:

/plugin install efecto@efecto

Claude Code will ask about the scope — choose User to install for yourself, or Project to add it to a repo so everyone on your team gets it too.

4

Start designing

That's it! Now you can prompt Claude to design anything. Just mention "efecto" so it knows to use the design tool — for example:

"Use efecto to design a landing page for a coffee shop"

Claude will open Efecto in your browser and start building the design in real-time.

New to Claude Code?

Follow the step-by-step beginner guide to install Node.js, Claude Code, and the Efecto plugin from scratch.

Alternative: npx install (MCP tools only, no design skills)

If you just want the MCP tools without the design skills, run this in your terminal (not inside Claude Code):

npx @efectoapp/mcp install

Restart Claude Code after installing.

What's Included

The plugin gives Claude two things: tools (actions like creating artboards and adding layouts) and skills (knowledge about design best practices so it makes better decisions).

44 Design Tools

Create artboards, add layouts with JSX/Tailwind, update elements, style with colors and typography, export images. See the full tool reference.

3 Design Skills

Skills are knowledge files that teach Claude how to design well — the right sizes, templates, and best practices for each type of project. Included automatically with the plugin.

Web Design

Tailwind patterns, section templates, responsive workflow, theme system. Claude knows how to build landing pages, dashboards, and multi-section layouts.

Social Media

Instagram, YouTube, TikTok, Twitter/X, LinkedIn, Pinterest, Facebook — all the right sizes, safe zones, and templates for each platform.

Graphic Design

Presentations, pitch decks, event posters, email headers, OG images, certificates. Layout grids, typography scales, and spacing guidelines.

Sample Prompts

Here are some ideas to get started. You can iterate with natural language after — "make the heading bigger", "add a testimonials section", "switch to dark mode".

Design a landing page for my SaaS product in Efecto
Create an Instagram carousel about design tips in Efecto
Make a pitch deck for my startup in Efecto

Tips

  • Be specific: "Design a pricing page with 3 tiers" works better than "make a page"
  • Multiple artboards: "Create desktop and mobile versions" for responsive designs
  • Iterate fast: Claude remembers context — just describe what to change
  • Mention "efecto": Include the word in your first prompt so Claude knows to use the design tool
Uninstall instructions

To remove Efecto from Claude Code:

npx @efectoapp/mcp uninstall

Troubleshooting

Browser doesn't open or connect

Copy the session URL from Claude's output and paste it into your browser manually. Make sure Google Chrome is installed. Check that your pop-up blocker isn't preventing the tab from opening.

"/plugin" command doesn't work

Make sure you're typing the command inside Claude Code's chat — not in the regular terminal. You should see the Claude Code prompt first.

Claude doesn't know about Efecto

Restart Claude Code after installing the plugin. Press Ctrl+C to close it, then type claude in Terminal to start it again.

Verify config

Check ~/.claude.json for an "efecto" entry under "mcpServers". If it's missing, run npx @efectoapp/mcp install again.

Reference