Codex OpenPencil Skill 技能

技能简介

Codex OpenPencil 是一个 Codex 插件，把 Codex 接到本地的 Rust 引擎 OpenPencil 上，让你在对话里直接做出一份真正可编辑的矢量设计稿——不是一张生成图片，而是有图层、有文本框、有形状、能选中、能拖动的设计文档，保存成 .op 文件后随时打开继续改。你可以只说"用 op 设计一个单页移动任务 App"，Codex 就把画布开起来、创建原生设计节点、检查布局、渲染预览并保存。

核心能力

• 对话出稿：描述一个仪表盘、移动界面或落地页，Codex 创建并打磨原生设计节点，保存前会检查布局并渲染预览。
• 真交互编辑：在画布里选图层、缩放平移、改文字、画形状、撤销，鼠标操作与 Codex 工具作用在同一份文档上。
• 选中即精修：选中一个或多个元素再说需求，捕获的页面与节点 ID 会把这次修改锁定在所选元素及其子树上，即使你中途选了别的也不会串。
• 自动准备运行时：缺什么运行时自动下载 macOS / Windows / Linux（ARM64 与 x64）的对应版本，压缩包与载荷都先校验哈希再启用。
• 可编辑文件与恢复：保存为可移植的 .op 文件，每个会话有独立画布和恢复草稿，源文件被外部改动时会阻止覆盖，Save As 也会拒绝已存在的目标。
• 跟随宿主外观：面板与编辑器跟随 Codex 的明暗主题切换而不重载文档，手机稿使用 Rust 引擎的标准状态栏。
• 图像策略可控：默认用 Codex 内置 image_gen 生图（会消耗生图额度），说一句"不要生图""只搜图"或 use stock images only 就全程走素材搜索，生成不可用时诚实回报而非盲目重试。

安装配置

1. 准备环境：Node.js 22 以上、Git，以及一个支持插件的较新本地 Codex 客户端。无需 GitHub 账号、API Key、DSH、Rust 编译器，也不需要单独安装 OpenPencil 桌面端或预装 npm 依赖。
2. 一句话安装：把这段发给 Codex —— 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 装好这个插件、打开一个可编辑画布，并做一个单页移动任务 App）安装脚本会拉取完整 Rust 编辑器、匹配的 WASM、CanvasKit、字体与模板，并在真正保存、重开之前先验证一次原生编辑。
3. 手动安装：git clone https://github.com/ZSeven-W/codex-openpencil.git 后 cd 进去执行 npm run setup ，它会把仓库注册成本地 marketplace 并安装 openpencil@zseven-openpencil 插件。
4. 装完可能需要在插件管理里重连或新开一个会话；若怀疑插件没加载，用 npm run host-check 诊断，不影响当前文档。

使用步骤

1. 让 Codex 打开画布：说"Open an interactive OpenPencil canvas for this conversation. Create a single-page dashboard for a small design studio."（打开一个可交互的 OpenPencil 画布，并做一个设计工作室的单页仪表盘），也可以简写成"用 op 设计一个单页 APP"。
2. 描述要做的设计，Codex 会创建原生设计节点并渲染预览；侧栏的 Layers 与 Slides 可以切换图层与页面，幻灯片卡片带实时预览。
3. 需要微调时在画布里选中元素，再在对话里说"把选中的卡片改成深绿并放大标题，其他元素别动"，Codex 会读取 canvas_selection 锁定范围。
4. 检查与保存：说"检查布局、给我看看预览、把它保存成项目里的 .op 文件"，保存后会重新读回结果校验；画布上的 Save 按钮会先把浏览器端未提交的编辑刷进文件。
5. 继续使用：把 .op 文件拷到别的会话可以打开继续改；恢复草稿留在 ~/.codex-openpencil/sessions/ 。

适用场景

• 产品早期原型：把一句产品描述变成可点可改的界面稿，当天就能拿去评审。
• 移动与网页界面设计：仪表盘、落地页、任务类 App 都有一组现成的原生示例可参考。
• 团队设计评审：交付物是 .op 矢量文件而不是图片，可以直接在画布上标注意见。
• 资产与图稿统一管理：生成的图片被导入成独立可编辑的图片节点，仍跟随文档布局。
• 跨平台产出：同一份文档可在桌面端、浏览器面板与后续版本之间流转。

适用人群

产品经理、设计师、独立开发者，以及需要快速把想法变成可视稿的创业团队；也适合正在用 Codex 做前端、希望在代码之外有一条可视化设计路径的工程师。前提是愿意接受"设计由 AI 起草、由人挑错"的工作方式。

工作原理

插件把 Codex 与本地 Rust 引擎 OpenPencil 通过工具接口连起来：canvas_open_browser 启动一个受管编辑器并把它的地址返回给 Codex 的浏览器面板，Codex 确认连接后按内置的 openpencil-design 工作流创建、检查、预览并保存设计；canvas_selection 返回当前页面与节点 ID，把编辑限制在所选子树；canvas_import_image 校验当前页面与文档版本后嵌入本地 PNG/JPEG/WebP 字节。画布不自带第二个提示词框，指令、进度与结果都留在对话里；生图权限与额度仍归宿主所有，插件只是把"要不要生图"的策略翻译给 Codex。

官方链接

• GitHub：https://github.com/ZSeven-W/codex-openpencil
• 底层矢量引擎 OpenPencil：https://github.com/ZSeven-W/openpencil
• 安装说明：仓库内 INSTALL.md