Codex OpenPencil plugin
Codex plugin for OpenPencil: design screens in a conversation on an interactive canvas, edit selected elements, save .op files
- 150 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- Setup downloads engine binaries and starts a local editor in a managed process
- The agent writes and changes .op files on disk
Install
- Works in
Manual install
Install and set up https://github.com/ZSeven-W/codex-openpencil following its INSTALL.md: check Node.js 22 and Git, run npm run setup from a persistent directory, open an editable canvas and create the first design. Before generating images tell the user about possible quota use.
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Setup downloads engine binaries and starts a local editor in a managed process
- The agent writes and changes .op files on disk
This is third-party code. Review the repository files before installing.
What it does
Codex OpenPencil connects Codex to the local Rust OpenPencil engine. The result is a real vector document with editable layers, text, shapes and layout. You describe a dashboard, mobile screen or landing page, and Codex creates and refines native design nodes, inspects layout and renders previews before saving. The canvas opens through the canvas_open_browser tool: it starts a separate managed editor and returns an address for the Codex built-in browser. With the mouse you can select layers, pan and zoom, edit text, draw shapes and undo, while Codex tools work on the same document. Select an element and describe the change in chat: Codex reads canvas_selection, gets page and node IDs and edits only that subtree. Installation is one request to the agent following INSTALL.md. The setup script downloads the Rust engine, WASM, CanvasKit, fonts and templates for your OS and CPU, verifies archive hashes, then checks a real edit, save and reopen. Files save in the portable .op format, and each chat owns a separate canvas and recovery draft. By default Codex makes new images through built-in generation, which may use quota, and the phrase "use stock images only" turns generation off.
Who it is for. Designers and developers who describe interfaces in Codex and want to refine the result on a real editable canvas.
Good fit when
- A single-page dashboard or mobile screen must be built from a description
- A selected button or card has to be recolored and its heading enlarged
- A saved `.op` file must be reopened and edited later
- The interface needs images and you want to save generation quota with a stock-images-only request
Not a fit when
- Work happens in another agent: the plugin is built for the Codex client with plugin support
- You need a complex illustration or a Figma file: the project works with its own `.op` format
- Node.js 22 and Git are missing on the machine: installation relies on them
Example request
Open an interactive OpenPencil canvas for this conversation and create a single-page dashboard for a small design studioLimitations
Node.js 22 or newer, Git and a recent local Codex client with plugin support are required. Engine builds exist for macOS (Apple Silicon and Intel), Windows (ARM64 and x64) and Linux (ARM64 and x64): Windows needs the Microsoft Visual C++ v14 Redistributable and Linux needs glibc, fontconfig and FreeType. A newly installed plugin may need reconnecting or a new chat. Built-in image generation uses Codex quota, and the agent reports possible use before generating.
How to disable. Remove the local marketplace and the openpencil@zseven-openpencil plugin in the Codex client, then the repository clone folder. Saved `.op` files stay wherever you wrote them.
FAQ
How do I install the plugin?
Ask Codex to install the repository following its INSTALL.md and open a canvas. Manually: git clone, then npm run setup in the cloned folder. Keep the checkout in a persistent location, because setup registers it as a local marketplace.
Do I need an API key or a GitHub account?
No. Installing the plugin needs no GitHub account, API key, Rust compiler or separate OpenPencil desktop app. The engine downloads on demand and hashes are verified.
How do I edit a selected element?
Select a card or heading on the canvas and describe the change in the Codex chat. The agent reads canvas_selection, verifies the current selection and confines the edit to that subtree. There is no second prompt box inside the canvas.
Where is the design stored?
In portable `.op` files. Each chat owns a separate canvas and recovery draft, opening an existing file copies it into the session, and saving is guarded by source conflict checks.
How do I turn off image generation?
Say "use stock images only". Codex then takes images from stock search for the whole task. Generation is on by default and may use Codex quota.
Discussion
No questions or reviews yet.
Related
PluginsOpenPencil's MCP server: agents inspect designs, edit layers and export assets, including .fig files, without Figma.
A skill that makes Codex reskin itself: from one image it generates a theme and applies it to the Codex app on Windows and macOS.
An open-source Claude Design alternative that builds prototypes, decks, dashboards and video through your local agents
OpenDesigner builds one design system for a project and checks every screen against its rules in Claude Code, Codex and Cursor
An open design canvas where Claude Code, Codex, ChatGPT and Cursor draw layouts through MCP together with people
HTML design for Claude Code and Codex: presentations, landing pages, prototypes, animations and design systems. Playwright and ffmpeg are needed
README in short
The README opens with one-request installation, requirements and a build table for six OS and CPU combinations, then explains the features (canvas, mouse editing, select and refine, automatic engine setup, files and recovery, themes) and shows how to open the canvas and edit a selection. Examples, ecosystem and validation follow.