THE ESSENTIAL
OpenPencil is a free, open-source design editor that can open Figma files and connect AI agents to editable design data through MCP. For designers exploring AI-assisted development, that creates a useful workflow: bring in a design, let an agent inspect its structure, and review the implementation together. AI usage still follows your chosen provider or agent account.
Why this caught my attention
While building my portfolio, I spent time explaining spacing, image crops, mobile navigation, and the relationship between different elements. Screenshots helped me communicate what I wanted, but I also wanted the agent to understand how the design was structured.
That is what interests me about OpenPencil.
It offers a way to bring existing Figma work into an editor that an AI agent can inspect and modify. As a designer, I see potential in being able to discuss both the appearance of a screen and the layers behind it.
Bring your Figma work with you
You can start with an existing design rather than recreating everything.
One option is to export a local .fig copy from Figma and open it in OpenPencil. This is useful when you want to work with a broader document.
For a smaller task, select a frame or design in Figma, press Ctrl + C, switch to OpenPencil, and press Ctrl + V. On a Mac, use Command instead of Ctrl. Use a normal design selection rather than Copy as PNG so you transfer editable design data.
OpenPencil documents support Figma-compatible clipboard data in both directions. However, copying a frame creates a separate copy; it does not establish automatic synchronization with the original Figma file.
I would start with one representative screen and compare it before bringing over an entire project.
What MCP adds to the workflow
MCP stands for Model Context Protocol. In this workflow, it connects the agent to tools for working with the design document.
With the appropriate access, the agent can inspect pages, find nodes, read properties, and work with components or variables. It can also make changes, such as adjusting spacing, updating text, or changing a fill.
That gives a request like “inspect the spacing in this card” a concrete target in the document.
For design-to-code work, I would ask the agent to inspect the relevant frame first, explain its structure, and identify reusable pieces before starting the implementation. Access to node data can reduce guesswork, but the final result still needs visual review and responsive testing.
Connect the agent you already use
OpenPencil's desktop app supports coding-agent integrations including Codex, Claude Code, and Gemini CLI. The documented route uses a locally installed agent, its required adapter where applicable, and OpenPencil's MCP server.
In the desktop app, open Settings, then AI & agents, and choose Run guided setup. Select your coding agent and follow the installation and connection checks. Sign in through the agent's own command-line tool.
This is more specific than simply linking an account on a website. The integrated local-agent workflow needs the desktop app because a browser cannot launch those programs on your computer.
You can also connect a compatible external MCP client to OpenPencil's server. The exact configuration depends on the client and the version you are using, so follow the current documentation rather than assuming every connection works the same way.
Free editor, separate AI usage
The editor is free and open source under the MIT license. That does not include unlimited AI usage.
For the desktop coding-agent route, usage follows the account and limits of the agent you connect. For built-in chat using an API provider, you supply the relevant credentials and usage follows that provider's billing arrangement. A separate API model may also be needed for features such as visual review when using a coding agent as the design agent.
The practical point is to understand which connection is handling a task and where its usage is charged.
Start with a focused design-to-code task
My suggested first task would be one card, navigation bar, or hero section with clear boundaries.
Ask the agent to inspect the selected frame and describe its layout, typography, colors, and reusable elements. Then ask it to implement that section in your project's existing stack, using the design values and assets where available.
A useful prompt would be:
Inspect the selected frame through OpenPencil MCP. Explain its layout and identify reusable components before coding. Implement it using the existing project conventions, preserve the design's typography and spacing, and flag anything you cannot reproduce confidently. Keep the design unchanged unless I request an edit.
Once the section is running, compare it with the reference. Check text wrapping, image crops, alignment, keyboard behavior, and smaller screens. Feed those observations back into the next iteration.
If you also want the agent to edit the canvas, make that a separate, explicit request so you can review the design change before continuing.
Check compatibility before replacing your source
OpenPencil's documentation notes that complex Figma documents can lose visual fidelity when saved and reopened in Figma. Text, colors, and component content may differ.
Keep the original file, save an OpenPencil copy separately, and inspect any exported result before replacing your source. Native .fig support is useful, but it is not a promise that every Figma feature will round-trip perfectly.
Where I see the value
What interests me most is having another way to connect design decisions with implementation.
I can keep Figma in my workflow, bring a focused design into OpenPencil, and give an agent more context about the work I want to build. The quality still depends on the design, the instructions, the implementation, and the review.
For designers exploring AI-assisted coding, this is a workflow worth testing on a small project and evaluating against your own needs.
