codex-openpencil

One-prompt install and first design

Image generation is enabled by default. When a design needs new image assets, Codex uses its built-in image generation, which may consume your Codex image-generation quota. Say “use stock images only” to skip generation. Unavailable or failed generation falls back to stock search.

Give Codex this:

Install and set up https://github.com/ZSeven-W/codex-openpencil following its INSTALL.md, open an editable canvas, and create a single-page mobile task app.

INSTALL.md guides Codex through prerequisites, installation, runtime verification, opening the canvas, and completing the first design. Setup downloads the complete Rust editor, matching WASM, CanvasKit, fonts, and templates for your OS and CPU, then verifies a real native edit, save, and reopen before registering the plugin.

You need Node.js 22+, Git, and a recent local Codex client with plugin support. No GitHub account, API key, DSH, Rust compiler, separate OpenPencil desktop app, or npm dependency install is needed for this plugin's setup.

Prefer to install manually?

git clone https://github.com/ZSeven-W/codex-openpencil.git
cd codex-openpencil
npm run setup

Keep the checkout in a persistent location. Setup registers it as a local marketplace and installs openpencil@zseven-openpencil. A newly installed plugin may need reconnecting or a new chat to load its tools; the terminal canvas lets Codex complete the first design in the installation chat.

Setup also verifies the tools through Codex's actual plugin loader. It records your current Node executable privately, so a desktop PATH that differs from your terminal does not prevent startup. Use npm run host-check to diagnose plugin loading without opening a chat or editing a design.

See the full compatibility table and dependency guidance. Fresh installation and native edit/save/reopen checks passed on all six OS/CPU builds; validation records distinguish these checks from bare-OS provisioning and embedded host UI verification.

Why Codex OpenPencil

Codex OpenPencil connects Codex to the local Rust OpenPencil engine. The result is a real vector document with editable layers, text, shapes, and layout.

🎨 Prompt → Canvas

Describe a dashboard, mobile screen, or landing page. Codex creates and refines native design nodes, inspects layout, and renders previews before saving the result.

✏️ Interactive Editing

Select layers, pan and zoom, edit text, draw shapes, and undo changes. Mouse edits and Codex tools work on the same document in a managed Rust editor.

🎯 Select → Refine

Select one or more elements and describe the change. Captured page and node IDs keep the request attached to those elements and their descendants, even if you select something else later.

📦 Automatic Runtime Setup

The matching runtime downloads on demand for macOS, Windows, or Linux, on ARM64 or x64. Archive and payload hashes are verified before use; valid custom runtimes stay selected.

💾 Editable Files & Recovery

Save portable .op files and reopen them later. Each chat owns a separate canvas and recovery draft; source conflict checks and guarded Save As protect existing files.

🌗 Follows Your Workspace

The panel and editor follow the host's light/dark appearance without reloading the document. Phone designs use the Rust engine's standard status bar.

Design with Codex

1. Open a canvas

After installation and any required reconnect, ask:

Open an interactive OpenPencil canvas for this conversation. Create a single-page dashboard for a small design studio.

You can shorten OpenPencil to op / OP, for example “Use OP to design a single-page mobile task manager” or “Use op to edit the selected button”. Chinese prompts such as “用op设计一个单页 APP” work too.

You can also choose + → OpenPencil Canvas → 在 Codex 中打开 (Open in Codex) in the desktop app's right panel. The launcher sends an opening request to the current chat, and Codex opens the canvas in its built-in browser. It confirms the connection after the native editor is ready. If the host does not support this handoff, use 复制打开指令 (Copy opening instruction) and send it in the current chat.

canvas_open_browser starts a separate managed Rust editor and returns its URL for Codex's browser panel. Codex verifies the connection and follows the bundled openpencil-design workflow to create, inspect, preview, and save the design. Use another chat for another document; opening an existing .op file copies it into the session.

The sidebar offers Layers and Slides. Slide cards show live board previews; click a card to navigate to its board. Conversation stays in Codex, so the embedded editor hides its own Agent tab.

2. Select elements and describe a change

Select a card or heading on the canvas, then tell Codex:

Make the selected card dark green and enlarge its heading. Keep the other elements unchanged.

Select elements in the canvas, then describe your edit in the current Codex chat. Codex reads canvas_selection to resolve the active page and node IDs, and confines edits to those subtrees. No copying requests or element IDs is needed.

The canvas footer only shows the selected count and names. Selection context syncs to capable hosts without sending chat messages. Instructions, edit progress and results stay in Codex; there is no second prompt box inside the canvas. Codex verifies the current selection before editing, then inspects the preview and saved design.

Images and generation quota

New photos, illustrations and product imagery use Codex's built-in image_gen by default and may consume image-generation quota. Suitable existing or user-provided images are preserved. Say “不要生图”, “只搜图” or “use stock images only” to use stock search throughout the task.

Before generation, Codex sends a brief chat progress update with the intended assets and possible quota use, then continues without a separate per-call permission question. The host's own required approvals still apply. Unavailable or failed generation uses the native stock-search fallback, with the outcome reported. Uncertain generation calls are not blindly retried, and missing stock results are reported honestly. No generation toggle or provider setup is added to the canvas.

Generated assets are saved in your project and imported into individual editable image nodes. canvas_import_image embeds local PNG/JPEG/WebP bytes, verifies the current page/document version and preserves the node's layout. The workflow then inspects the native preview and verifies the saved .op. The bridge does not invoke image providers or manage your quota: the design skill guides Codex, while the host owns generation access and accounting.

3. Preview, save, and reopen

Check the layout, show me a preview, and save this design as an .op file in my project.

The design workflow checks native layout and the rendered PNG, then