Pencil MCP

IDE-native vector design canvas with a built-in MCP server — Claude can read, edit, and export .pen files directly in your editor.

TRUSTED · Official by Pencil

DevTools Productivity

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

// Install the 'Pencil' extension from the Cursor extensions panel.
// The MCP server is auto-registered when Pencil is running.
// Confirm via Cursor Settings -> Tools & MCP -> 'pencil' should appear in the list.

Paste into your client's MCP configuration file.

// Try it now

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

! 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

Setup

Easy Setup

API key or simple config

Pricing

Free tier

Free to download and use the editor. Pricing tiers are not publicly listed at the time of writing — verify on pencil.dev before recommending to enterprise users.

Token usage

Moderate usage

// About

Plain English

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.

// Works With

claude-code Cursor VS Code

#design#canvas#vector#design-to-code#figma-alternative

// Also Consider

Figma MCP Trusted

If you already have brand assets in Figma and want to read them or generate code from existing frames

→

// Related Servers

Git MCP

Official Git MCP server — read repository history, diffs, blame, and status through AI without leaving your conversation.

devtools

View →

Puppeteer MCP

Official Puppeteer browser automation server — let AI control a real browser for scraping, screenshots, and UI testing.

web

View →

Featured

GitHub MCP

Official GitHub MCP server — manage repos, issues, PRs, and code search directly from your AI assistant.

devtools

15.0k View →