efecto-graphic-design — Claude Code skill: what it does & setup
Enables AI agents to build graphic layouts, pitch decks, and social banners via the Efecto canvas. Generates designs through JSX and live browser sync.
npx skills add pablostanley/efecto-plugin --skill efecto-graphic-design -a claude-code
npx skills add pablostanley/efecto-plugin --skill graphic-design -a claude-codeWhat efecto-graphic-design does
The skill pairs an agent with the efecto.app editor via an MCP server. Once a design session starts, the model returns a workspace URL for the browser and begins issuing rendering instructions. The workflow relies on creating artboards, injecting JSX sections styled with Tailwind classes, and refining properties through batch calls.
Efecto exposes 68 tools spanning node inspection, animations, alignment, and layout repairs. The engine requires specific syntax details. For instance, artboards need flex flex-col in their class list or child elements collapse onto position (0,0). Hex colors like bg-[#f9f9f9] fail silently, so named utility classes or inline styles are mandatory.
Without @efectoapp/mcp running locally, the skill cannot execute commands. Inspecting large multi-board canvases will exhaust context tokens unless scoped flags such as outline: true or maxDepth restrict tree retrieval.
What it helps with
- Build pitch decks and presentation slides using JSX markup
- Generate Open Graph preview images and blog banners
- Design print-ready event posters, menus, or resumes
- Sync agent edits directly into an interactive browser canvas
Example prompts for the agent
- Create a dark pitch deck title slide with a bold heading and subtitle
- Design an Open Graph card measuring 1200x630 with centered branding
- Generate a two-column company business card with contact details
How to install efecto-graphic-design
1Skills CLI (Vercel)
npx skills add pablostanley/efecto-plugin --skill efecto-graphic-design -a claude-codenpx skills add pablostanley/efecto-plugin --skill graphic-design -a claude-code2Manually: put the files in place
~/.claude/skills/graphic-design/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/graphic-design/
1Skills CLI (Vercel)
npx skills add pablostanley/efecto-plugin --skill graphic-design -a codex2Manually: put the files in place
.agents/skills/graphic-design/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add pablostanley/efecto-plugin --skill graphic-design -a cursor2Manually: put the files in place
.cursor/skills/graphic-design/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install pablostanley/efecto-plugin graphic-design2Manually: put the files in place
.github/skills/graphic-design/SKILL.md1Skills CLI (Vercel)
npx skills add pablostanley/efecto-plugin --skill graphic-design -a gemini-cli2Platform CLI
gemini skills install https://github.com/pablostanley/efecto-plugin --path skills/graphic-designManually: put the files in place
.devin/skills/graphic-design/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add pablostanley/efecto-plugin --skill graphic-design -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about efecto-graphic-design
How do I install efecto-graphic-design in Claude Code?
Run npx skills add pablostanley/efecto-plugin --skill efecto-graphic-design -a claude-code. Next, configure the MCP connection with claude mcp add efecto -- npx -y @efectoapp/mcp.
What does the efecto-graphic-design skill do?
It equips the agent with structural rules to operate Efecto through 68 MCP tools. The model handles artboards, styles JSX elements, and inspects designs live.
What causes elements to overlap at position (0,0)?
Artboards require flex flex-col in their className property. Missing layout properties force Efecto to reset child element coordinates to the root offset.
