OpenPencil: An Open-Source, AI-Native Alternative to Figma

OpenPencil is an open-source design tool built from the ground up for AI. Instead of dragging boxes for hours, you open Claude Code and type what you want — OpenPencil runs an MCP server in the background and places, styles, and arranges components on your canvas live.

The Pitch

Traditional design tools (Figma, Sketch) are built for humans dragging rectangles. OpenPencil flips that:

MCP server running in the background exposes the canvas to any MCP-compatible AI agent
Claude Code as the primary interface — type design instructions, watch the UI build
Live canvas updates — components appear and restyle in real time as the agent works
Gallery of professional style guides — pick a design system and the AI conforms to it

Example Prompt

From the video:

"Generate a rover management dashboard using the editorial style guide."

You type that into Claude Code. OpenPencil's MCP server receives structured instructions, places the right components on the canvas, pulls the editorial style guide's tokens (colors, type, spacing), and styles everything consistently. The designer's role shifts from placing rectangles to directing at the brief level.

Why This Pattern Is Interesting

There are a lot of AI UI tools now — v0, Lovable, Bolt, Stitch — but most of them generate code or screenshots. OpenPencil keeps the artifact as a design canvas: editable, composable, style-guide-bound. That's closer to how designers actually work. You can still grab a component and adjust it manually. You just don't have to start from zero.

The MCP angle matters too. Anything that speaks MCP — Claude Code, Gemini CLI, custom agents — can drive the canvas. OpenPencil isn't betting on a single AI model; it's making the canvas programmable.

Open Source

OpenPencil is open source, which is the other big differentiator. Figma is a proprietary SaaS you rent. OpenPencil is a codebase you can self-host, fork, and extend with your own style guides or MCP tools. For teams that want AI design tooling without vendor lock-in, that matters.

Key Takeaways

OpenPencil is an open-source, AI-native design tool positioned as an alternative to Figma
It runs an MCP server so any compatible agent (Claude Code, etc.) can drive the canvas in real time
Ships with a gallery of professional style guides for consistent output
Shifts the designer's role from placing rectangles to directing at the brief level
Open source means no vendor lock-in, forkable, self-hostable

Resources

OpenPencil on GitHub — Open-source AI-native design tool
Model Context Protocol (MCP) — The agent protocol OpenPencil exposes
Claude Code — The primary driver shown in the video