Getting Started

Set up Efecto with Claude Code

Get an AI agent designing pages, social media graphics, and presentations for you in 5 minutes. No coding experience needed.

Quick install for any AI agent

If you already have an AI agent set up (Claude Code, Cursor, Windsurf, Copilot, etc.), you can skip this guide and just run: npx skills add pablostanley/efecto-plugin. See the Skills install guide.

This guide below is for complete beginners starting from scratch with Claude Code. For Cursor, there's a one-click install. For other tools, see the MCP setup page.

Setup

Install Node.js

Node.js powers the tools behind the scenes. You only need to install it once.

Go to nodejs.org
Click Get Node.js
Open the downloaded file and follow the installer

Already have Node.js? Skip to the next step.

Install Claude Code

Claude Code is the AI agent that will design for you. Open Terminal (press Cmd + Space, type "Terminal", hit Enter) and paste this:

npm install -g @anthropic-ai/claude-code

On Windows? See the Claude Code docs for platform-specific setup.

Open Claude Code

Still in Terminal, type:

claude

A chat interface will appear right in your terminal — this is Claude Code. It looks like a messaging app, but inside your terminal.

First time? You'll need to sign in.

Claude Code will ask you to log in with your Anthropic account. Follow the prompts — it will open a browser window where you can sign in or create an account. You'll need a Claude Pro, Max, or Team plan (or an API key).

Install the Efecto plugin

Now you're inside Claude Code's chat. Type these two commands one at a time (wait for each one to finish before typing the next):

/plugin marketplace add pablostanley/efecto-plugin

/plugin install efecto@efecto

Where do I type these?

In the Claude Code chat — where you see the blinking cursor waiting for your input. These start with a /because they're special commands for Claude Code, not regular terminal commands. If you accidentally type them in the regular terminal, they won't work.

Restart and make your first design

Close Claude Code by pressing Ctrl+C, then start it again:

claude

Now type a prompt describing what you want:

Design a landing page for a coffee shop in Efecto

Claude will open Efecto in your browser and start building the page in real-time. You'll see it appear and update live as Claude works.

That's it! You can now ask Claude to design anything — landing pages, app screens, dashboards, social media graphics, and more.

What's Included

The Efecto plugin gives Claude two things: tools (actions it can perform, like creating an artboard) and skills (knowledge about design best practices, so it makes better decisions).

64 Design Tools

Create artboards, add layouts, update elements, style with colors and typography, export images, manage brand systems, search stock photos, and audit design quality

Web Design Skill

Teaches Claude how to build landing pages, dashboards, responsive layouts, and use the theme system

Social Media Skill

Teaches Claude the right sizes and templates for Instagram, YouTube, TikTok, Twitter/X, LinkedIn, and more

Graphic Design Skill

Teaches Claude how to create presentations, pitch decks, event posters, email headers, and OG images

Tips

Be specific: "Design a pricing page with 3 tiers" works better than "make a page"
Iterate: "Make the heading bigger" or "Change the background to dark"
Multiple artboards: "Create desktop and mobile versions" for responsive designs

Speed up the workflow (advanced)

By default, Claude asks permission before each action. To let it work uninterrupted, start it with claude --dangerously-skip-permissions. This disables all safety confirmations, so only use it for Efecto design sessions.

Troubleshooting

"command not found: node"

Node.js isn't installed. Go back to Step 1 and install it, then restart Terminal.

"command not found: claude"

Claude Code isn't installed. Go back to Step 2 and run the install command.

"/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.

Permission errors during install

Try adding sudo before the command: sudo npm install -g @anthropic-ai/claude-code

Claude doesn't know about Efecto

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

Next Steps

Learn more about the Claude Code plugin and design skills
Explore all 64 design tools available to your agent
Set up Agent Teams for multi-agent collaboration with personalities, memory, and parallel design
Create Brand Kits for AI-powered brand systems with colors, typography, and compliance
Set up Efecto with Cursor, Windsurf, or other AI tools