It’s not about drawing a design draft; it’s about “manipulating” a product that is about to be born.
A Murder Plot Against “Handoff”
Design Handoff, a seemingly routine step in the product development process, is actually a black hole that swallows efficiency.
To put it bluntly, the whole thing is quite absurd. Designers engage in pixel-perfect tweaking in Figma, adjusting shadows, corner radii, and spacing, only to export a pretty PDF or a shared link to throw at the developers. And then? The developers have to use code to “redraw” everything from scratch based on these “reference materials.” How should animations work? How do states switch? The interaction logic that simply cannot be realized in Figma relies on text annotations and meetings—or, quite often, on guesswork.
A 2024 survey from Telerik reveals some stinging data: Only 26% of respondents are truly satisfied with how the design is presented in the final product. Even more interesting is that when asked about the challenges of design-development collaboration, 36% of developers thought “everything is going well, no challenges,” while only 10% of designers agreed with that statement.
This isn’t a tool problem; it is a problem with “translation” itself. Standing between vector graphics and HTML/CSS are two completely different paradigms of thinking and languages of expression.
Pencil.dev aims to completely eliminate the role of this “translator.”
Letting Design Files Live in the Git Repository
Pencil’s core philosophy can be summed up in one phrase: Design as Code.
This isn’t just a marketing slogan. Its design files—an open JSON format called .pen—live directly inside your code repository. You heard that right; it’s a neighbor to your src folder and your package.json.
What does this mean?
It means you can run git branch on your design to open a “bold redesign” branch; you can git merge to fuse the work of Designer A and Designer B; and you can git revert to rollback with one click when a certain “innovation” turns out to be a disaster. For the first time, design enjoys the same version control treatment as code.
For any designer who has ever maintained a file named “Homepage-V3-Final-Revised-Final-DoNotChange”, this is simply salvation.
The essence of MCP is giving AI a “universal USB-C” interface. Pencil is one of the most radical attempts at using this interface.
The True Ambition Hidden in “Bi-directional Read/Write”
To understand Pencil, you must understand something called MCP (Model Context Protocol).
This is an open standard launched by Anthropic, which you can think of as the “USB-C interface” of the AI world. It allows AI models like Claude to connect to various data sources, tools, and workflows in a standardized way. There are already many tools integrated with MCP, such as allowing Claude to read your Figma files, connect to your database, or operate your Slack.
But Pencil says that just being able to “read” is not enough.
What it offers is full bi-directional read/write capability. AI can not only see what is on your design canvas but can also perform “surgery” directly on it—creating layers, modifying styles, and generating components. You can type “help me draw a login page” in the Cursor chat box, and an interface containing input fields, buttons, and layout will appear on the canvas, just one tab away from your code window.
How big is the scope for imagination here? You could connect Playwright (browser automation testing tool) to let AI automatically adjust the UI based on test screenshots; you could connect your database to let chart components consume real data directly; you could even connect other Agents to let them collaborate on completing a complex design task.
There is a sentence on the official website that puts it very bluntly: “You are in charge!”
The logic behind this is: In the AI era, the boundary between “design drafts” and “products” is evaporating. What Pencil wants to create is not a better drawing tool, but a collaborative command center for products.
Figma’s Friend or Foe?
Having discussed this far, an unavoidable question surfaces: What about Figma?
Pencil clearly understands the sensitivity of this issue. So, they made a very smart decision—do not oppose, but bridge.
You can copy and paste design elements directly from Figma into Pencil; vector graphics, text, and styles remain intact. In other words, Figma remains your “sketchpad” for divergent exploration and unconstrained imagination, while Pencil is your “production floor” where design is “landed” into the codebase and connected to the AI workflow.
This positioning is very pragmatic.
