The magic of this image lies not in its aesthetics, but in the fact that it teaches two windows that rarely share a frame—the design canvas and the code editor—how to finally live side-by-side.
The Invisible Wall That Has Stood for a Decade
There is an invisible wall between design and development.
This wall isn’t built of differences in tech stacks or tool incompatibility; it stems from a much older problem: Information Entropy. When a designer draws a button in Figma, it is a perfect visual intention in that moment. But as that button travels through the “handoff” wormhole and arrives before the developer, it has transformed into a “specification” that requires guessing, reconstruction, and compromise.
Data doesn’t lie. According to industry research, 83% of designers admit that “design-development deviation” is the norm, with 26% stating it happens on “every single project.” Even more painful is that 66% of teams spend 25%-50% of their time dealing with “low delivery efficiency.” Translated into real money? Some estimate that a medium-sized Pod (one designer + five engineers) loses approximately $298,000 in productivity value annually due to handoff issues—roughly enough to hire another full-time employee just to clean up the mess left by the handoff.
So, Zeplin arrived, Abstract arrived, and Figma Dev Mode arrived. Generation after generation of tools rushed in, trying to make this wall “better looking,” “more transparent,” or “thinner.”
But the wall remains.
What Pencil.dev wants to do is not to apply another coat of paint to the wall, but to ask a more fundamental question: Why must this wall exist in the first place?
The Moment Design Files Enter Git
Pencil.dev’s core philosophy can be summed up in one sentence: Design files shouldn’t be attachments; they should be first-class citizens of the code repository.
In traditional workflows, design drafts live in Figma’s cloud, while code lives in GitHub/GitLab repos. The two sides govern themselves separately, establishing fragile connections through “handoff meetings,” “spec docs,” and “countless screenshots in Slack.” If the design changes, development doesn’t know; if the code changes, design doesn’t know—synchronization relies on shouting across the room.
Pencil overthrows all of this. Its design file is a completely open format stored directly in your code repository. Yes, just like your .js, .css, and .json files, it can be tracked by Git, Branched, Merged, and Code Reviewed.
What does this mean?
It means that when a designer adjusts the corner radius of a button on the canvas, this change generates a Git commit that appears in the PR for the developer to review. Conversely, if a developer adjusts component styles in the code, the designer can trace this change in the version history.
Design and code are finally speaking the same language.
Even better is the Figma compatibility—you can copy and paste designs directly from Figma, migrating vectors, text, and styles without missing a beat. This isn’t about revolutionizing against Figma, but acknowledging reality: most teams’ design assets are already sedimented in Figma. Pencil chooses to be a bridge, not to build another island.
MCP: Letting AI Truly “See” Your Design
If “Design as Code” is Pencil’s philosophical stance, then MCP (Model Context Protocol) is its technological backbone.
MCP is an open protocol launched by Anthropic in 2024, aimed at allowing AI applications to access external tools, databases, and services in a standardized way. In plain English: It installs a “USB port” on AI, allowing it to plug and play with various external capabilities.
Most design tools integrate AI by providing “read-only” interfaces—AI can see your design but can only stare at it, unable to write back. Pencil is different. Its MCP implementation is bi-directional read-write: AI Agents can not only read elements on the canvas but also directly manipulate the canvas—creating layers, adjusting layouts, and modifying styles.
The MCP architecture ensures AI is no longer a “bystander,” but a “collaborator” that can read and write both design and code simultaneously.
This is actually mind-blowing when you think about it.
Imagine this: You say to Claude in Cursor, “Add a Google OAuth button to this login page, placed below the password field.” Claude can not only generate the code but also draw that button on the Pencil canvas at the same time. One prompt, executed in two places. The synchronization of design and code shifts from “manual transport” to “AI auto-completion.”
Going a step further, because of MCP’s openness, you can connect the Pencil canvas with databases, APIs, or even Playwright (automated testing tools). If you want to use real data in the design…
