---
title: "pen-editor"
description: "Read and edit a live Pen Editor design document from any Agent Plugins compatible client: inspect structure, layout, variables and screenshots for design-to-code, or create and modify designs with the batch_design DSL."
canonical: https://agentpluginsdirectory.com/plugins/pen-editor
last-updated: 2026-09-22
---

# pen-editor
Read and edit a live Pen Editor design document from any Agent Plugins compatible client: inspect structure, layout, variables and screenshots for design-to-code, or create and modify designs with the batch_design DSL.
- Slug: pen-editor
- Publisher: Pen Editor
- Repository: https://github.com/dan-rozhkov/pen-editor-plugin
- Manifest: plugin.json
- Version: 0.1.0
- License: MIT
- Category (editorial): design-frontend
- Skills: 3 (pen-editor-design, pen-editor-dev-mode, pen-editor-setup)
- MCP servers: 1 (pen-editor)
- Stars: 0
- Repository created: 2026-08-08
- Repository last pushed: 2026-09-16
- Publisher type: User
- Listing: https://agentpluginsdirectory.com/plugins/pen-editor
- Schema: https://agent-plugins.org/schemas/1.0.0/plugin.schema.json

## What pen-editor does, in the publisher's words

Pen Editor packaged as an Agent Plugins 1.0.0 plugin, installable in any client that supports the specification (VS Code, Cursor, and others).

Installing it gives the agent:

- the pen-editor MCP server: read and edit a live Pen Editor document: structure, computed layout, design variables, screenshots, and the batch_design DSL for creating and modifying designs;
- three skills the client picks up on its own, no prompt wiring needed: pen-editor-design (build or edit a design), pen-editor-dev-mode (implement an existing design as code), and pen-editor-setup (diagnose a broken connection).

This plugin's proxy talks to either of two MCP servers, both named pen-editor, both discovered the same way (see "How the proxy finds the backend" in the setup skill), but with different tool behavior. See "Desktop app vs. backend: what differs" below.

From the project README, punctuation lightly normalized. Full text: https://raw.githubusercontent.com/dan-rozhkov/pen-editor-plugin/HEAD/README.md

## Skills

- pen-editor-design: Creates or modifies a design in Pen Editor over MCP, reads editor state, variables, and structure first, then applies changes with the batch_design mini-script DSL, and verifies the result visually. Use whenever asked to build, edit, restyle, or add to a Pen Editor canvas or document.
- pen-editor-dev-mode: Implements an existing Pen Editor design as frontend code, a read-only MCP workflow that reads structure, computed layout, tokens, and a screenshot to translate the node tree into matching markup/CSS. Use when asked to build or implement a component or screen FROM a Pen Editor design; never to edi…
- pen-editor-setup: Diagnoses and fixes a broken or unconfigured Pen Editor MCP connection, and covers first-time plugin setup, maps error strings (401, 503, connection refused, no tab connected, timeout) to their exact fix. Use when Pen Editor tool calls fail or error, or when installing/configuring this plugin.

Descriptions come from the frontmatter of each SKILL.md, punctuation lightly normalized.

## MCP servers

- pen-editor: transport: stdio; command: node ${PLUGIN_ROOT}/bin/pen-editor-mcp.mjs; env: PEN_EDITOR_PLUGIN_DATA

Read from the plugin's own mcp.json. Environment variable names only, never values.