# Pen.dev: an agentic canvas that syncs design and code

Canonical: https://mudpie.ai/companies/pendev/
Breadcrumb: [Home](https://mudpie.ai/) / [Companies](https://mudpie.ai/companies/) / [Pen.dev: an agentic canvas that syncs design and code](https://mudpie.ai/companies/pendev/)
Author: Ali Abouelatta (https://mudpie.ai/authors/ali-abouelatta/)
Published: 2026-09-20
Updated: 2026-09-20
Research type: Company profile
Method: Public-source research. Official Speedrun and company pages checked September 20, 2026. Product claims are attributed to their sources.

Pen.dev connects visual design work to code through an agentic canvas, model integrations and design-file synchronization.

## What it does

The company homepage says users can import parts of an app, use models including Claude and ChatGPT, and connect through MCP, WebMCP or CLI. Documentation describes .pen files and syncing design with code. Pricing says the product is currently free.

## Buyer and task

Designers and frontend teams that want to move between visual composition and code without restarting from a blank file.

## Workflow boundaries

The pricing page says the product is currently free, while the public pages do not establish export fidelity or editor performance. No claim is made about replacing a design system or a production code review.

## What I would ask

Ask how a team reviews generated code, resolves conflicting edits, and keeps design tokens stable across a multi-person project.

## Why it fits

Pen.dev is trying to collapse the handoff between visual design and implementation. The homepage describes an agentic canvas that can import parts of an app, bring in models such as Claude and ChatGPT, open pages in a built-in browser, import HTML or Figma material, and connect agents through MCP, WebMCP or CLI. It also names a WebGL pipeline, shared component sets, variables, export to HTML/CSS and a design file format. The documentation frames `.pen` files as the bridge between design and code inside a development environment.

That gives a frontend team a concrete workflow to test: import a real screen, ask an agent to make a bounded change, refine it on the canvas, sync the design artifact with the codebase and export the result. The product is most interesting where a static mockup loses contact with the implementation. It is less clear from public material how code review, token ownership and merge conflicts work when several people or agents touch the same project.

The pricing page says pen.dev is currently free and may introduce paid features later. That is a dated access observation, not a promise. A buyer should keep a small production component as the test case and verify visual fidelity, generated-code quality and what the service stores before moving a design system into it.

## Quick facts

| Field | Sourced detail |
| --- | --- |
| Buyer | Designers and frontend teams |
| Inputs | App parts, HTML, Figma material, browser pages and model prompts |
| Agent paths | MCP, WebMCP, CLI and on-canvas agents |
| Pricing | Currently free on the checked pricing page; future plans not specified |

## Sources checked

[official Speedrun profile](https://speedrun.a16z.com/companies/pendev) · [company homepage](https://www.pen.dev/) · [source page](https://www.pen.dev/pricing) · [source page](https://docs.pen.dev/)

Sources checked — September 20, 2026.


## Author disclosure

I cofound Lazyweb and publish Mudpie. This is an owner-written publication, not an independent testing organization. Research notes distinguish observations, sourced reporting and editorial judgment.