# efecto-graphic-design

Enables AI agents to build graphic layouts, pitch decks, and social banners via the Efecto canvas. Generates designs through JSX and live browser sync.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 795 installs · ★ 23
- Author: pablostanley
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/pablostanley/efecto-plugin/tree/HEAD/skills/graphic-design/SKILL.md
- Updated: 2026-08-08
- HTML: https://affpapa.org/en/nevibecode/skills/efecto-graphic-design

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add pablostanley/efecto-plugin --skill efecto-graphic-design -a claude-code
```
```bash
npx skills add pablostanley/efecto-plugin --skill graphic-design -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/graphic-design/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/graphic-design/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add pablostanley/efecto-plugin --skill graphic-design -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/graphic-design/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add pablostanley/efecto-plugin --skill graphic-design -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/graphic-design/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install pablostanley/efecto-plugin graphic-design
```

2. **Manually: put the files in place**
- File: `.github/skills/graphic-design/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add pablostanley/efecto-plugin --skill graphic-design -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/pablostanley/efecto-plugin --path skills/graphic-design
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/graphic-design/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add pablostanley/efecto-plugin --skill graphic-design -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/pablostanley/efecto-plugin/tree/HEAD/skills/graphic-design/SKILL.md

## When to use it
- 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
- 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

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [grill-me](https://affpapa.org/en/nevibecode/skills/grill-me.md) — skill · 1424476 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [grilling](https://affpapa.org/en/nevibecode/skills/grilling.md) — skill · 979543 installs
- [codebase-design](https://affpapa.org/en/nevibecode/skills/codebase-design.md) — skill · 850344 installs

From the same set: [pablostanley/efecto-plugin](https://affpapa.org/en/nevibecode/by/pablostanley/efecto-plugin.md) — 2 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md