Set it up
-
Turn on Pencil in your AI
In Claude: open Settings → Connectors and add Pencil. In ChatGPT: Settings → Apps & Connectors.
-
Add it to your app once
Copy the short config below into your app. It just tells your AI where to find Pencil.
-
Just ask
Tell it what you want in plain words — no special commands.
For example, say
“Open a new .pen file and design a single 1080x1350 Instagram slide with a bold hook headline, my brand color #FF5722, and a small logo placeholder bottom-right.”
Need the exact config? Show it +
Add to your client
# The Pencil MCP server is bundled with the Pencil app/extension.
# Install Pencil from https://www.pencil.dev (desktop app) or the
# 'Pencil' extension in VS Code / Cursor. The MCP server starts
# automatically whenever Pencil is open.
#
# To verify it is registered, run:
# /mcp
# inside Claude Code and look for 'pencil' in the server list.Paste into your client's MCP configuration file.
Ready-to-run prompts
If you ask, Pencil does it. Copy one, paste it into Claude, Codex or ChatGPT, done. No setup.
Pencil Generate a social carousel
If you ask
“Design a 5-slide Instagram carousel about why MCP matters, brand color #FF4438, then export each slide as PNG”
Then
Generate a multi-slide social carousel on the canvas and export the slides as images.
Pencil Turn a sketch into code
If you ask
“Design a pricing card on the canvas, then generate it as a React + Tailwind component”
Then
Sketch a UI component on the canvas and have Claude emit matching React/Tailwind.
Pencil Edit a design from chat
If you ask
“In my hero.pen file, change the headline to 'Ship faster' and bump it to 64px”
Then
Modify an existing .pen file through natural language while staying in chat.
Good to know
- · The MCP server only runs while Pencil is open — close the app and the tools disappear from Claude's tool list
- · .pen files are encrypted; do not try to read or grep them with shell tools, only via the MCP
- · Design exports to PNG/React/HTML are pixel-accurate to the canvas, but font rendering can drift if the chosen font isn't installed locally
- · Public pricing/limits are not documented — assume freemium with a paid tier before relying on it for client work
When to use
- ✓ You want to design without leaving Cursor or VS Code
- ✓ You want Claude to drive a real design canvas from chat, not just describe layouts
- ✓ You're generating social posts, carousels, or posters and want exportable assets
- ✓ You want design and code in the same repo, versioned together as .pen files
When not to use
- × Your team's designs already live in Figma and you just need to read them — use figma-mcp
- × You need mature multiplayer design collaboration; Pencil is younger than Figma
- × You can't keep the Pencil app open — the MCP server only runs while it is
- × You're locking in enterprise spend before public pricing is documented
About
Pencil is like Figma, but it lives inside your code editor. The big idea: instead of switching tabs to design something, you stay in Cursor / VS Code, and Claude can drive the canvas for you. Tell Claude 'design a 5-slide Instagram carousel about X' and it actually places the text, picks the layout, and exports the PNGs — without you opening Figma once.
Pencil is a vector design tool that runs inside your IDE (VS Code / Cursor) or as a desktop app. Designs live as `.pen` files alongside your code. The MCP server starts automatically whenever Pencil is open — no separate npm install — and exposes tools for reading the editor state, batch-designing nodes, exporting layers, and managing variables.
Pair it with Claude Code to drive a real design canvas from chat: describe a layout, ask Claude to render it, then iterate visually until it's right. Designs export to PNG, React, HTML, or Tailwind components.
Workflows That Use Pencil MCP
Works With
Also Consider
FAQ
What does Pencil MCP do? +
Pencil is like Figma, but it lives inside your code editor. The big idea: instead of switching tabs to design something, you stay in Cursor / VS Code, and Claude can drive the canvas for you. Tell Claude 'design a 5-slide Instagram carousel about X' and it actually places the text, picks the layout, and exports the PNGs — without you opening Figma once.
Do I need to know how to code? +
No. Turn it on in your AI's settings and ask in plain English — no terminal, no coding.
When should I use Pencil MCP? +
Reach for it when you need to: You want to design without leaving Cursor or VS Code; You want Claude to drive a real design canvas from chat, not just describe layouts; You're generating social posts, carousels, or posters and want exportable assets; You want design and code in the same repo, versioned together as .pen files.
When should I avoid Pencil MCP? +
Skip it when: Your team's designs already live in Figma and you just need to read them — use figma-mcp; You need mature multiplayer design collaboration; Pencil is younger than Figma; You can't keep the Pencil app open — the MCP server only runs while it is; You're locking in enterprise spend before public pricing is documented.
Is Pencil MCP free? +
Pencil MCP has a free tier.
How do I install Pencil MCP? +
In Claude Code, run: # The Pencil MCP server is bundled with the Pencil app/extension. # Install Pencil from https://www.pencil.dev (desktop app) or the # 'Pencil' extension in VS Code / Cursor. The MCP server starts # automatically whenever Pencil is open. # # To verify it is registered, run: # /mcp # inside Claude Code and look for 'pencil' in the server list.. Copy-paste configs for Claude Desktop, Cursor, and Windsurf are at the top of this page.
