For non-developers
What can Claude do with Pencil?
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.
Things you can ask Claude
Carousel From a Prompt
Generate a multi-slide social carousel on the canvas and export the slides as images.
Say to Claude
Design a 5-slide Instagram carousel about why MCP matters, brand color #FF4438, then export each slide as PNG Component Design to Code
Sketch a UI component on the canvas and have Claude emit matching React/Tailwind.
Say to Claude
Design a pricing card on the canvas, then generate it as a React + Tailwind component Edit Without Opening the Canvas
Modify an existing .pen file through natural language while staying in chat.
Say to Claude
In my hero.pen file, change the headline to 'Ship faster' and bump it to 64px When it helps
- ✓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
FAQ
Can Claude use Pencil?
Yes. With the Pencil MCP connector (an MCP server), Claude can work with Pencil directly in your conversation — IDE-native vector design canvas with a built-in MCP server — Claude can read, edit, and export .pen files directly in your editor.
Do I need to code to use Pencil with Claude?
No. You install the connector once (a short config or one command), then you just ask Claude in plain English. The example prompts on this page work as-is.
Is the Pencil MCP server free?
Pricing model: freemium. 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.
How do I add Pencil to Claude?
Open the Pencil connector page for copy-paste setup, or follow the per-client guide for Claude Desktop, Claude Code, Cursor, or ChatGPT.
Set up Pencil in Claude
Copy-paste config, setup steps — on the connector page.