docs
Getting started with Efecto

Getting Started

Set up Efecto with Claude Code

Get an AI agent designing pages for you in 5 minutes. No coding experience needed.

What You Need

  • Node.js — runs the tools behind the scenes
  • Claude Code — the AI agent that designs for you
  • Efecto MCP — gives Claude the design tools

Don't worry if you don't have these yet — we'll install each one below.

Setup

1

Open Terminal

Terminal is a text-based interface that comes built into your Mac. It's how you'll run the install commands below.

Press Cmd + Space to open Spotlight, type Terminal, and hit Enter.

Terminal might look intimidating, but you'll only need to paste a few commands. We'll tell you exactly what to type.

2

Install Node.js

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

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

Install Claude Code

Claude Code is the AI agent that will design pages for you. Paste this into Terminal:

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

Verify it worked:

bash
claude --version

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

4

Install Efecto MCP

This gives Claude the design tools it needs. Paste this into Terminal:

bash
npx @efectoapp/mcp install

You'll see a success message when it's done.

5

Run Claude Code

Open Claude Code with this command:

bash
claude --dangerously-skip-permissions

The --dangerously-skip-permissions flag lets Claude work without stopping to ask permission on every step, so it can build your design in one go.

This skips all permission prompts — great for Efecto, but use it with care for other tasks since Claude will be able to read and write files on your machine without asking.

6

Make your first design

Type a prompt describing what you want. Make sure to mention "in Efecto" — that's how Claude knows to use the design tool.

text
Design a landing page for a coffee shop in Efecto

Claude will open Efecto in your browser and build the page in real-time.

That's it! You can now ask Claude to design anything — landing pages, app screens, dashboards, portfolios, and more. Just remember to say "in Efecto".

Troubleshooting

"command not found: node" or "command not found: npx"

Node.js isn't installed or Terminal needs a restart. Install Node.js from Step 2, then close and reopen Terminal.

"command not found: claude"

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

Permission errors

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

Next Steps