OpenPencil review: not another screen generator

Generating a convincing screen is not the same as producing a design someone can maintain. OpenPencil hands you back the layers. The screenshot can retire from its unofficial role as a technical specification.

That is OpenPencil’s strongest proposition. It is less a “generate me a screen” tool than a bridge between design and code: a place where people and AI agents can work on the same editable layouts, components and design tokens.

As a Figma user, I found the editor familiar and navigated it quickly. My separate, agent-driven command-line test was more instructive. It cleared reported contrast findings but left a design-system decision unresolved.

The useful question, then, is not whether OpenPencil can put something on a canvas. It is whether the whole process—connecting an AI, explaining the task, reviewing its changes and turning the result into working software—takes less effort than the work it replaces.

This review covers OpenPencil at openpencil.dev, from the open-pencil/open-pencil project, not ZSeven-W’s separate tool with the same name. It combines my editor exploration, one cloud-based command-line test and public documentation checked on 10 November 2026. It is a first-impressions review, not a controlled benchmark.

Familiar is not identical

OpenPencil uses a vocabulary Figma users will recognise: canvas, layers, pages, frames, property panels, auto layout, components, variants and variables. It also opens and saves .fig files.¹

That familiarity matters. Moving to another editor is easier when “frame” still means frame and your existing habits remain useful.

But “Figma-like” is safer than “the same as Figma.” OpenPencil’s compatibility matrix still lists Figma-style prototype connections, triggers, transitions and Code Connect as unbuilt. Interactive component previews, however, shipped in v0.16.0. Its roadmap also identifies ongoing work on rendering fidelity and round trips with real-world files.^1,2

A landing page can feel familiar to build without proving that the editor can handle an entire product-design workflow.

Versions matter here. Released on 14 October 2026, v0.16.0 added interactive previews, Vue and React code views, guided AI setup and review controls. The v0.17 beta extends edit-review and recovery support to Claude Code and Codex.^2,3

Where the roadmap and release notes disagree about what has shipped, I have followed the version-specific release notes. Documentation, like design files, occasionally contains a layer nobody has updated.

MCP is not the intelligence

OpenPencil’s AI is sometimes described as “MCP integration.” That is only part of the picture. It supports direct model connections, coding agents and external AI tools.^4,5

MCP—the Model Context Protocol—provides a standard way for AI applications to access external tools and information. It does not determine how well a model reasons about them.⁶

Put simply: MCP can give an agent access to the canvas. It does not give the agent taste.

There are three main routes:

ACP, the Agent Client Protocol, handles communication with the coding agent. MCP exposes the canvas tools. They do different jobs.⁵

“The AI workflow needs refinement” is therefore a more useful criticism than “MCP needs refinement.” A disappointing result might come from missing context, setup trouble, a failed tool call, model judgement or inadequate review. They may all appear in the same chat panel, but they are not the same problem.

What I actually tried

I tested my own website design: a roughly 200 MB, six-page Figma file containing 5,516 layers, a cut-out portrait, custom serif typography and Bengali lettering.

I asked a Claude agent to run OpenPencil CLI v0.16.0 in a cloud workspace, then reviewed the exported images and reported outputs. This did not test a device-local or offline workflow.

Reading the file took about 3.6 seconds. Rendering the homepage as an image took about 18 seconds.

The render largely preserved the layout and imagery. The portrait, photos and illustrations came through. The typography did not.

The font report listed substitutions to Inter for Inria Serif, Instrument Serif, Inter Medium Italic and Noto Sans Bengali UI, and returned “Faithful: no.” The required fonts or faces were unavailable in the environment. Some headings clipped and stat labels overlapped, plausibly because of those substitutions.

The report was admirably direct. “Faithful: no” leaves little room for a stakeholder interpretation workshop.

The contrast check

One command checked the file in about four seconds and reported 1,338 findings:

• 41 classified as errors.
• No warnings.
• 1,297 informational findings.

The informational findings included 238 default-name findings and 236 findings for hardcoded colours that matched an existing variable but were not bound to it.

All 41 error-level findings concerned text contrast. These were automated flags, not confirmed accessibility failures. I did not validate each one manually, and a later beta changes how the checker measures contrast against the content painted underneath.³

Across the six-page file, the agent’s script changed 40 text layers to #555555 in about eight seconds of execution time. The agent explicitly excluded the oversized word “STRATEGIST” behind my portrait, which scored 1.31:1.

A repeat check reduced the reported contrast findings from 41 to one.

That demonstrates a useful correction workflow, not a complete accessibility audit. I intended STRATEGIST as a background treatment, but it also communicates my professional positioning. Whether it qualifies as purely decorative requires contextual judgement. A contrast score cannot settle the matter simply by producing two decimal places.

The maintenance question

The script cleared the findings, but used a literal grey rather than binding the text to a colour variable.

My file contained a text-colour variable. It came from an imported UI kit, however, so it was not obviously the right choice.

Should the agent have reused it, proposed an appropriate token or explained why neither option fit?

My instruction did not request reuse. This exposes a limit of the workflow I ran, not simply a fault in OpenPencil, which provides a lint fix for binding colours to matching variables.²

It also exposed something about my file. The variables came from imported kits rather than a clearly defined brand system, and much of the page used hardcoded greys.

An agent needs access to an identifiable design system—and enough context to know which parts are authoritative. A collection of imported variables is not automatically a source of truth. Sometimes it is just evidence of previous enthusiasm.

The designer’s real test

For a designer, the important test begins after the first result.

“Forty findings cleared” sounds impressive. The more useful question is what remained unresolved: which colour should those layers actually use?

A dependable assistant should preserve intentional decisions, reuse appropriate components, maintain style and variable relationships, and avoid turning a small revision into a clean-up exercise.

Judge it by the layer list, not just the screenshot.

OpenPencil documents tools for layout, components, variables, inspection and visual verification. That is meaningful functionality. It does not establish how reliably a particular model will use those tools in a particular file.⁴

The practical requirements are straightforward:

• Make the intended target explicit.
• Show what changed.
• Explain unfinished work.
• Provide a safe way back.

OpenPencil already offers change-review and recovery controls. The v0.16.0 release documents before-and-after images, JSX diffs, revert and restore; the v0.17 beta extends support to Claude Code and Codex.^2,3

My CLI test did not exercise those controls. Their usefulness in everyday canvas work remains something to assess, not something I can claim from this experiment.

The developer’s opportunity

Developers have a different reason to pay attention: the design document can be inspected and changed through code.

OpenPencil exposes operations through its editor engine, CLI, MCP tools and APIs. My test used that programmable route.⁷

The appeal is not another generated screen. It is a document whose actual properties can be inspected: colours, spacing, layer names, components and bindings.

A screenshot can show that two elements look aligned. Structured data can tell you whether they actually share a layout rule.

But design structure and application code remain different things.

OpenPencil’s design JSX creates canvas nodes, not browser DOM. Its documentation distinguishes that authoring format from web-oriented output. The Code tab can show Vue and React components, and supported Storybook framework exports can generate components using Reka UI or Radix UI.^2,8,9

Whether those components fit an existing application still requires engineering review. A reusable canvas component does not automatically become the right reusable code component.

The developer’s question is therefore:

Can this make design intent easier to inspect without making the codebase harder to maintain?

Setup is part of the product

OpenPencil makes provider and model choices visible. That flexibility is useful, but it also makes configuration part of the experience.

Local-first does not mean offline. With a remote model provider, prompts and the design context included in requests leave the editing environment. Local and company-hosted model servers are also options.⁴

Direct API-key use is billed by the provider; coding-agent routes have their own arrangements. Official builds also send an anonymous daily ping, which can be disabled in Privacy settings.¹⁰

For a team, these are governance decisions, not merely boxes to click on the way to the canvas.

The coding-agent route adds dependencies: an agent or adapter, authentication and a compatible MCP package. Version 0.16.0 introduced guided setup that installs dependencies, tests connections and proposes models.^2,5

I did not go through desktop onboarding myself, so I cannot pronounce it smooth or painful. The presence of installation instructions is not, on its own, evidence of either.

The browser version works with many providers, including Anthropic, but browser security restrictions and streaming-tool-call behaviour can still cause failures.¹¹

A broken chat response is not always failed design reasoning. Sometimes the request never reached the part of the system capable of having an opinion.

Figma is moving too

A fair comparison cannot treat Figma as an editor without an AI agent.

Figma’s agent works directly on layers, frames and components. It can use design-library context and handle bulk operations such as component swaps and typography changes. It also connects screens, sets transitions and builds branching prototype flows—an area OpenPencil’s compatibility matrix still lists as unbuilt.^12,13,14

Figma’s agent became generally available on 6 October 2026 and now consumes AI credits. Access depends on plan, seat type and eligibility.¹⁵

Selecting relevant libraries and referencing components, tokens and variables helps provide the intended context. The agent does not publish new assets to shared libraries on its own, and its output still requires review.¹³

Editing real layers with AI is no longer an unusual proposition.

OpenPencil’s distinction is the combination of open-source ownership, local-file workflows, provider choice and programmable access. The question is not which editor “has AI.” It is which arrangement gives a team the right balance of control, cost, integration effort and review.¹⁶

What dependable looks like

“Needs refinement” is useful criticism only if it names a standard someone can test.

Here is mine:

My test raised the reuse question without resolving it. The checker cleared, the text remained unbound, and the file provided no clear authority for the colour choice.

A useful team trial would pair a designer and developer on one small revision using real content and agreed components. Record setup, prompting, correction and implementation time.

Then request a second revision.

The second pass is more revealing because the assistant now has intentional work to preserve. Producing activity is easy. Producing less rework is the point.

Verdict: promising, with conditions

OpenPencil’s canvas felt familiar. Its programmable document access proved useful in my test. Its AI support extends beyond a single MCP integration.

The strongest idea is people and agents working on the same editable structure, in a file they can inspect and script.

My experiment also showed how an agent can clear a reported problem without resolving the design-system decision behind it. It covered one inspection-and-editing workflow, not every AI route, and it did not establish the production quality of exported code.

Designers need control over intent. Developers need clarity about structure and failure. Both need to know whether the assistant removes work or relocates it to a less convenient part of the afternoon.

The canvas may be familiar. The AI still has to earn its place in the workflow.

Evidence note

The reported timings and findings come from one test on my six-page website design file using OpenPencil CLI v0.16.0, run by a Claude agent in a Linux cloud workspace on 9 November 2026. I reviewed exported images and reported outputs. Required fonts were missing or substituted.

The edited file reopened in OpenPencil with the original page and node counts, but I had not checked it in Figma. This test therefore did not establish edited-file round-trip compatibility. I did not build or test an exported web page, so reduced development effort remains a question, not a finding.

Product documentation was checked on 10 November 2026. Timings describe individual command runs, not the complete setup, prompting and review process.

Source notes

1. OpenPencil, Roadmap and Figma compatibility matrix. Roadmap status may lag version-specific release notes.
2. OpenPencil, v0.16.0 release notes, 14 October 2026.
3. OpenPencil, v0.17.0-beta.1 release notes, 2 November 2026.
4. OpenPencil, AI Chat. Setup, providers, tool access and capabilities.
5. OpenPencil, Coding agents. Architecture, setup and troubleshooting.
6. Model Context Protocol, Architecture overview.
7. OpenPencil, Programmable. Automation architecture.
8. OpenPencil, JSX Renderer.
9. OpenPencil, CLI exporting.
10. OpenPencil, Privacy and usage stats. See note 4 for provider connections.
11. OpenPencil, BYOK provider and model compatibility.
12. Figma, The Figma agent is here. Launch article; its original beta terms should not be read as current billing terms.
13. Figma, AI design agent.
14. Figma, AI prototyping agent. Cited for capabilities, not the page’s original beta pricing language.
15. FourWeekMBA, Figma’s Design Agent Leaves Beta and Now Draws AI Credits, reporting on Figma’s release and credits documentation.
16. OpenPencil, Project repository.