Codex-OpenPencil 快速上手篇
文章目录
本篇为 codex-openpencil 上手教程：用一个服装购物 APP，把安装、首页设计、选中修改、保存文件和转代码走一遍。
插件免费开源，提供可以平移、缩放、摆放多个画板的无限画布。Codex 负责理解要求和调用工具，OpenPencil 负责展示与编辑设计；你可以随时手动继续调整。
1. 一句话安装，并完成第一份设计
所需依赖 Node.js 22+ 和 Git 可让 Codex 协助检查和安装。对应系统的编辑器运行环境会自动下载，不需要另装独立 OpenPencil 桌面端，也不需要为这个插件配置 API Key。
插件免费，Codex 调用仍按你的账号额度使用。设计需要新图片时，默认使用 Codex 内置生图，可能消耗生图额度。 如果某次只想搜图，在指令末尾补上“不要生图，只搜图”即可。
把这句话发给 Codex：
按照 https://github.com/ZSeven-W/codex-openpencil 的 INSTALL.md 帮我安装并配置 OpenPencil，然后用 op 设计一个单页服装购物 APP 首页，在 Codex 内置浏览器中打开可编辑画布。
你可以把“服装购物 APP 首页”换成自己的需求。第一次建议先限定一页，方便确认风格，没问题再扩展其他界面。
Codex 会按安装指南检查依赖、下载运行环境，验证编辑、保存和重新打开，然后完成第一份设计。首次需要下载文件，等它执行完即可。安装时克隆的仓库目录请保留，后续加载插件和更新还会用到。
如果喜欢手动安装，也可以在终端运行：
git clone https://github.com/ZSeven-W/codex-openpencil.git cd codex-openpencil npm run setup
macOS、Windows、Linux 都提供 ARM64 和 x64 运行包，具体系统要求见 INSTALL.md。
2. 装好后，怎么打开画布
以后在已经加载插件的聊天里，直接说：
用 op 设计一个单页服装 APP
如果该会话已经做过设计，可以说：
重连 op
op、OP、OpenPencil 都可以用来指这个设计工具。想打开已有文件，也可以把 .op 文件路径交给 Codex，让它继续编辑。
桌面端还有一个入口：右侧面板的「＋ → OpenPencil Canvas → 在 Codex 中打开」。点击后，入口把打开请求交给当前聊天，由 Codex 在内置浏览器中打开画布；编辑器就绪后会显示“画布已连接”。如果入口提供的是“复制打开指令”，把指令发到当前聊天即可。
一个聊天对应一份画布文档。继续做同一个项目，就留在当前聊天；另做一份独立设计，可以新开聊天。
如果刚装完，当前聊天还没加载到插件工具，Codex 也可以按安装指南的终端入口先完成设计。之后重启 Codex 或新开聊天，再打开保存的 .op 文件接着做。
3. 先确认首页风格，再扩展后续页面
第一步首页出来后，如果有要求，可以接着提，举例：
继续完善刚才这一个首页。品牌叫 MŌDE 慕时，主打日常通勤女装。用暖白背景、深灰文字和少量砖红点缀，排版有服装杂志的感觉。包含手机系统状态栏、品牌与搜索入口、秋季主推大图、品类导航、精选商品和底部导航。先保持单页，完成后检查文字、间距和图片裁切，给我看预览。
这里说清了用途、风格、内容和范围。有参考截图、品牌色或自己的商品图，也可以一起提供。
标题、商品区、图片和底部导航都有各自的图层，可在左侧图层面板中查看和编辑；重新按提示词生成时，具体排版和素材可能不同。
首页满意后，再继续：
继续生成商品详情页
或者
沿用当前首页的字体、配色和组件风格，再做一个经典廓形风衣的商品详情页。包含商品图、价格、颜色、尺码、养护说明和加入购物袋入口。放在同一文档的另一个画板里，保留已有首页。
完成后会在无限画布出现第二个界面，可以直接缩放查看或选中，也可以通过“幻灯片”的画板缩略图切换查看。画布支持手动编辑文字、移动元素、平移缩放和撤销。
4. 选中元素，口喷修改
标题小了，就先选中标题，对 Codex 说：
把选中的标题放大一点，保持现有字体和颜色。检查换行和与下方图片的间距，只改这个标题，其他元素保持原样。
选中一张商品卡片，也可以这样说：
把选中卡片的图片区域加高一点，价格和商品名保持对齐，整体沿用当前品牌风格。修改范围限定在这张卡片内。
不需要复制元素 ID，也不用在画布里找另一个输入框。画布负责选中，当前 Codex 聊天负责接收要求。 底部会轻量显示选中数量和名称，方便确认目标。
Tip 1：改标题，就选标题；改整张卡片，就选卡片容器。点到了外层容器，可以双击深入子元素，或者从图层中选择。发要求前，记得确认选中元素。
Tip 2：按住 Shift 可以选中多个元素，如果觉得在画布中选中不方便，可以在左边栏图层列表找到元素并选中。
如果有特别简单的需求想手动改，选中后可以通过右侧属性面板来微调，功能较多，后面会专门出一期教程来介绍。
5. 图片生成 & 图片搜索
默认流程是：需要新图片时由 Codex 使用内置生图；合适的已有图片和你提供的素材继续沿用。生图前会在聊天中简短说明用途和可能的额度消耗。
如果这次不想使用生图，直接说：
这次不要生图，只搜图。找不到合适素材时告诉我，我来提供。
生图不可用或失败时，会尝试通过内置搜图引擎来兜底；搜图也找不到合适素材，就需要继续换图或自行提供。你也可以把本地商品图交给 Codex，明确哪张放在哪个区域。
大多设计稿比较依赖图片的搭配，强烈建议默认让 Codex 生图。
6. 保存设计，成为设计资产
满意以后，再给 Codex 一条交付要求：
检查当前设计的布局和渲染预览，把可编辑文件保存为当前项目里的 designs/mode-fashion.op，再导出首页的 mode-fashion-home.png。核对保存后的文件内容，确认文字、图片和图层完整，并告诉我文件路径。
.op 留给后续编辑，PNG 用来预览和分享。画布右上角也可以手动保存或另存为；把设计、图片和后续代码放在同一个项目里，会更方便管理。
下一次继续时，把保存的文件交给 Codex：
打开项目里的 designs/mode-fashion.op，继续修改首页，先保留其他画板。
7. 从设计稿还原代码
设计定稿后，就可以让 Codex 沿着当前设计出代码了，基本100%还原，所见即所得。
操作顺序是：选中完整画板 → 打开「代码」面板 → 选择框架 → 点击「生成」。面板支持 HTML、Vue、React、SwiftUI 等目标；已有项目时，优先选择项目正在使用的框架。
无论是否有前端开发经验，都能直接运行。
面板先提供基础代码，准确率较低。在当前内置浏览器画布的流程里，点击生成后，回到当前 Codex 聊天说一句 “继续转代码”，让它接着完成实现
可以直接复制这段：
继续转代码。按刚才代码面板提交的首页画板和框架，在当前工作区完成可运行页面。沿用设计里的图片和视觉风格，补齐品类筛选、加入购物袋和窄屏适配，运行项目并用浏览器检查。完成后把主源码回填代码面板，并告诉我完整项目目录、启动命令和检查结果。
完成后，代码面板会显示 “Codex 已回填 · 项目见对话”，可以复制或下载主源码；完整项目和配套文件在工作区里。
随后打开真实运行的页面，检查字体、图片、滚动和按钮交互。发布前的服装首页案例就检查了品类筛选、加入购物袋，以及刷新后保留购物袋内容。这类检查能把“设计看起来对”推进到“页面实际能用”。
转代码期间如果又修改了设计，重新生成一次请求，让实现跟上新的设计版本。登录、支付、真实商品数据等业务能力，再按项目需要继续接入。
8. 除了 APP，还可以拿来做什么
同一套画布，也可以用来做网页、后台看板、教程图、对比图、轮播卡片和演示文稿。
控制台实测案例
品牌落地页实测案例
不知道从哪里开始，可以拿自己的内容替换这些提示词：
数据看板：用 op 设计一个单页项目管理看板，包含关键指标、趋势图和项目列表。
教程图：用 op 把下面这段操作步骤做成一张竖版教程图，保留原文，突出操作顺序。
对比图：用 op 做一张左右对比图，按我提供的四个维度比较这两种方案。
轮播卡片：用 op 把下面这篇内容排成 5 张轮播卡片，保持统一字体、颜色和页码。
PPT：用 op 做一份 5 页的产品介绍演示文稿，先列出每页主题，再按同一套视觉风格设计。
提供真实内容会更有用：自己的数据、文案、截图和素材，都可以成为设计的起点。
9. 第一次使用，常见问题怎么处理
装好了，工具没出现。 先按安装结果重启 Codex 或新开聊天。仍不正常，把报错交给 Codex，让它在插件仓库里执行 npm run host-check 检查加载状态。
点加号后，先看到一个打开按钮。 点击“在 Codex 中打开”，等待当前聊天接续和编辑器就绪。出现复制指令时，把指令发回当前聊天。看到“画布已连接”再继续操作。
选中了，但改的范围不对。 看底部的名称，确认选中了标题、图片还是外层容器。重新选好以后，再说“只改选中元素，其他保持原样”。
更新后还是旧界面。 让 Codex 先检查安装仓库的本地改动，再按安装指南更新并重新执行 setup。之后重启 Codex，再打开保存的设计；只关闭画布标签不一定会重新加载插件。
项目地址：Codex OpenPencil
底层编辑器：OpenPencil · DSH 版本：DSH OpenPencil
教程按 2026 年 10 月 18 日的插件 v0.3.13 整理，安装和界面如有变化，以仓库说明为准。
现在就开始吧！欢迎晒设计稿、分享心得，也欢迎把遇到的问题带到 Issue 里 🤗
沿着这个主题继续读
从一篇文章，找到相关的教程、经验和阅读路径。
