pen-dev19.8 KB
View saved version →
---
name: pen-dev
description: Create and edit visual designs — websites, app screens, dashboards, slides, marketing materials — in .pen files with the pen.dev editor shown in this conversation. Use when the user asks to open pen.dev, create or change a design or a .pen file, or refers to something selected in the pen.dev editor.
---
# Working in the pen.dev editor
When the pen.dev dashboard in Codex's sidebar started this conversation, call
`open_editor` now, before reading anything else. Its message is "Open home.pen
in pen.dev" with the file attached as a `file://` link, so pass the link's
absolute path, or "Start a new design in pen.dev", so leave out `filePath`.
Then continue with the rest of this file.
- If a pen.dev editor is already open in this conversation, work in it:
`get_app_state` shows its file. Only call `open_editor` for another file, or
when no editor is open.
- Start a new design with `open_editor` without `filePath`. It creates a draft
in pen.dev's own documents, and the result tells you its path.
- Pass an absolute `filePath` only to open an existing `.pen` file, or when the
user asks for the design somewhere specific, such as in their project. A file
that doesn't exist yet is created on the first save.
- Pass the path of the open design as `filePath` to `execute`. Changes appear
in the open editor right away and the editor saves them to the file.
- The editor must stay open while you work. If a tool reports that no editor
is open, call `open_editor` again with the same `filePath`.
- The first call after the editor opens can take a few seconds while it
connects. If a tool reports that the editor didn't answer, call
`get_app_state` once more before opening another editor: another editor on
the same file opens a new tab, and the user then has two.
- When the user selects nodes in the editor, their ids and names are attached
to the conversation. Treat "this", "the selected frame" and similar as those
nodes. If nothing is attached, call `get_app_state`, which lists the current
selection.
- Use the tools from the `pen-dev` server. If the pen.dev desktop app's
`pencil` server is also connected, its tools work on the desktop app, not on
the editor in this conversation, so only use them when the user asks for the
desktop app.
- The reference files linked below are next to this file. Read them from disk
before your first `execute`; opening the editor doesn't need them.
- The `browser` tool and browser nodes aren't available here. Skip the
whiteboard workflow and lay out research and plans as regular frames and
text instead.
# pen.dev
pen.dev is an infinite canvas design tool with nested object hierarchy.
## Quick reference
| Topic | When to use | Reference |
| --- | --- | --- |
| `.pen schema` | Learn the .pen schema that is used to represent. Required to read. | [pen-schema.md](./pen-schema.md) |
| `execute` | Learn how to use the `execute` MCP tool to generating designs on the canvas. Required to read. | [execute.md](./execute.md) |
| `generate` | Using the `Generate` function: AI and stock images, SVG artwork, and transforming an image already in the document. | [generate.md](./generate.md) |
| `components` | Learn how to use components and instances in .pen files. | [components.md](./guide/components.md) |
| `scripts-and-shaders` | Learn how to use scripts and shaders on the pen.dev canvas. | [scripts-and-shaders.md](./scripts-and-shaders.md) |
| `whiteboard` | Required for research, comparisons, evaluation, and planning on the canvas, including meeting briefs and synthesis of selected sources. | [whiteboard.md](./whiteboard.md) |
| `competitive-research` | Research and compare products or competitors on the canvas. | [competitive-research.md](./competitive-research.md) |
| `recruiting-profiles` | Research and compare candidates' professional profiles on the canvas. | [recruiting-profiles.md](./recruiting-profiles.md) |
| `sitemap` | Discover and map an existing webs
Preview of the first 4,000 characters. Read full instructions →
Referenced files: 22 — file references are metadata, not package contents.
