从网页到浏览器插件：用 Enter Code 完成一次产品形态跃迁
2026 年 4 月 14 日，OPC 创造营第二课「多产品形态实战」开讲。讲师 Chris（Enter.pro Team AI 产品经理）延续第一课的长文制图产品，带领学员完成两件事：给网页端加上私人图库与 AI 生图能力，再基于新发布的 Enter Code 命令行工具，从零开发一款浏览器插件，实现网页与插件的数据互通。课程全程实操，适合已有一定 Vibe Coding 基础、想从静态网页走向更复杂产品形态的 OPC 从业者。
产品迭代：从私人图库到 AI 生图
Chris 首先复盘了第一课的产品——一个支持登录、选底图、编辑文字并下载的长文制图工具。他认为这个产品「太糙了」，并提出了迭代思路：让产品更多参与用户流程，同时增加功能以提高用户的数据沉淀和迁移成本。「只要数据够多，只要流程够适应，它的迁移成本就很高。」
基于这个思路，第一个需求是私人图库。Chris 强调，做这个需求不需要看代码，只要把需求讲清楚。他给出的提示词结构是：先交代背景（有底图但不够好看，用户有自己的图片），再描述具体功能（工作台里有私人图库板块、上传图片、文件类型和大小限制、搜索），最后说明图库要能在编辑器里被使用。
在 Enter 网页端开启 Plan 模式后，AI 会主动确认需求细节，比如检索方式、页面形态等。Chris 建议「不要贪心，多加」功能，让 AI 去跑。生成方案后直接 Build，过程中遇到不懂的概念（比如「桶」）可以直接问 Enter。
他顺便解释了存储与桶的关系：存储用来放媒体资源、图片、视频等非数据文件；桶相当于一个文件夹，会体现在 URL 路径中。演示中，上传图片后进入云存储的 save-images 桶，能看到刚上传的文件，验证存储成功。
第二个需求是 AI 生图。背景是用户找图麻烦，希望把 Seedance、HappyHorse 等模型能力集成到平台里。提示词同样包含背景、需求（图库生图功能）和原型确认。这次 Chris 没有开 Plan 模式，直接让 AI 跑。
这里涉及 Enter 的 AI All 功能——将市面上主流的生成模型统一接入，为产品用户提供生图、生视频、生音频能力。Chris 特别解释了 AI All 的 credits 为什么与构建 credits 分开：「用户用的时候我们不希望他没有 credits 而宕机了」，所以构建消耗和用户消耗是两套体系。
生成过程中，Chris 现场遇到了 bug，他借此强调了一个核心能力：「学会如何找到问题，然后跟 agent 说是一个很重要很重要的能力。」排查方法很简单：在浏览器右键检查，切到 Network 面板，点击生成按钮观察请求是否报错。最终功能跑通，生成的图片自动保存到图库，并在编辑器里可以直接使用。
为什么要做浏览器插件
网页端迭代完成后，Chris 抛出一个问题：过去用户看到一张好图，要保存到图库，流程是打开网页、找图、右键保存、下载到本地、再打开站点上传，非常长。而浏览器插件可以把后面四步全部省略——鼠标悬停在图片上，点击一个按钮，直接保存到图库。
他提醒不要小看这一步：「这种赛道越小，然后你做的还可以的话，其实很容易有流量的。」他举例说，团队另一款产品的类似插件在抖音上有几十万甚至上百万曝光。
在动手之前，Chris 先讲清楚了架构：用户通过网页端注册登录、创作内容，数据保存在云和数据库里；浏览器插件要做的，是让插件的登录账号与网页端一致，背后共用同一个云和同一个数据库。用户通过插件保存图片，数据进入数据库，再呈现在网页端。「理解这个架构，就理解了云在整个框架里面的位置。」
Enter Code：命令行里的 AI 开发环境
开发插件需要用到 Enter Code——这是 Enter 首次对外发布的命令行工具，目前只支持 Mac 和 Linux，Windows 版本预计下周上线。安装方式是在命令行执行一条安装指令，然后运行 enter 命令，会弹出登录页面，账号和 credits 与网页端通用。
Chris 介绍了几个最常用的命令行指令：
LS：查看当前目录下的文件和文件夹CD：进入特定目录clear：清空命令行PWD：查看当前完整路径
「懂以上那几个指令基本上够用了，剩下的就是 enter，你到了这个目录里面，你进入 enter，然后把所有东西跟它说，它会给你开干。」退出 Enter Code 用 Control + C。
他还演示了 models 指令切换模型，以及思考强度的选择（低、中、高）。help 指令可以查看所有可用指令，其中有一个 skip permissions 模式可以跳过所有权限确认，但 Chris 明确不建议开启：「如果你真的涉及到一些删除模型、删除的动作，很有可能 enter 一把就把你给删掉了。」
从 Hello World 到数据互通
开发流程的第一步是在 GitHub 新建一个仓库（建议选择 Private），复制仓库链接，回到 Enter Code 里让它 clone 到本地。如果系统没有装 Git，直接告诉 Enter 帮你装。
进入本地目录后，Enter Code 会推荐初始化命令。Chris 强调，技术栈的选择可以让 AI 提供完整对比，然后从中选最优，「让 AI 充分地帮你去做判断」。
接下来是生成基础插件。Chris 给出的提示词包含：插件形态（side panel，从右侧弹出）、功能要求（hello world、热更新）、插件名称。他建议开启 Plan 模式（Shift + Tab）让 AI 先做规划，因为「做大需求或从 0 到 1，或者你有一些不是很有把握的，我的建议都是你开 plan 了解清楚整个方案」。
生成完成后，在浏览器打开开发者模式，加载 dist 目录下的未打包插件。Chris 坦言，他每次用 Enter Code 开发插件，第一个 bug 基本都是同一个——插件无法打开。解决办法是截图报错信息，粘贴给 Enter Code 让它修复。他还演示了 npm run dev 启动本地开发服务，以及每次修改后需要在浏览器里刷新插件。
当插件终于弹出 Hello World 界面时，Chris 说这一步「非常非常重要」，他在课程文档里给这一步标了三颗星：「前面有多苦，你们都一定得到这一步。」
接下来是集成数据库。Chris 提前准备好了三个信息：安装信息、数据库链接、访问密钥。他把这些信息拼进提示词，要求 Enter Code 将插件的登录与 Enter Cloud 保持统一，并且不在插件里开放注册入口，用户必须到主站注册。跑通后，在插件里登录成功，说明「网站跟插件已经共用一套数据了」。
最后一步是实现在网页中悬停图片、点击保存到图库。这一步 Chris 现场遇到了通信问题，多次修复未果。他没有继续卡住，而是坦诚地说：「这个我们今天就不卡在这了，我到时候把它修复好，我再给大家发。」他展示了之前做好的版本：悬停图片出现保存按钮，点击后保存成功，刷新网页端图库就能看到新图片。
插件的分发与更多可能性
插件做好后，分发有两个渠道。第一个是把打包好的 zip 文件上传到云存储的 extension 桶里，然后在主站上透出下载链接。第二个是上架到浏览器插件商店——需要准备说明、类别、语言、物料，通过审核后用户就能在商店里搜到。Chris 分享了自己的经验：他之前做的一款插件峰值有 2000 用户，「现在还有用户在他电脑里面装着」。
关于 Enter Code 的用途，Chris 特别纠正了一个误解：「大家不要觉得 enter code 只是拿来写代码，不是的，真的完全不是。」他现场演示了让 Enter Code 写一篇关于产品国际化的博客——它会先浏览现有博客站点，理解风格，再结构化地输出文章。写 PPT、做数据分析、写年终汇报都是它的强项。
他还演示了远程控制功能：通过微信连接 Enter Code，在手机上发消息就能远程指挥电脑上的开发任务。「如果我在家里的电脑始终挂着这个 enter code，微信一直连上，那么其实你可以真的远程办公、远程工作。」
课程最后，Chris 列举了产品后续可以迭代的方向：编辑器更丝滑、支持多页多图布局、更多文件类型下载、底图搜索标签、使用情况统计、官网优化、团队管理，甚至接入 Agent 让用户一句话生成图片。「到最后你会发现你就变成了一个搞定设计，以前他们都是几十人做的，现在你有 enter code，你也能完成了。」
现场问答
用 Enter 怎么做 PPT？
先把逐字稿写好，这是最重要的部分。然后在 Enter 里 Remix 一个 PPT 模板，开启 Plan 模式，与 AI 多轮对话确认架构设计和细节，最后再 Build 和修细节。修细节时可以选中元素直接改文案，也可以继续对话让 AI 调整。
Enter 现在连接飞书了吗？
还没有。目前是通过 CLI 接入 skills，等接入飞书后就能自动做飞书文档。
PPT skills 会开源吗？
稍后会公布到 GitHub 仓库。其实不用等 skills，在 templates 里直接 Remix PPT 模板就可以用。
支持荷兰语吗？
目前正在拓展不同国家的语言支持，有需要可以接。
能用自己的大模型 API 吗？
目前还不能，后续会考虑支持用户自定义配置 model。
能开发微信插件吗？
可以，但具体情况需要进一步了解。
Plan 模式什么时候该开？
Plan 是强制让模型思考做规划。做大需求或从 0 到 1 开发时建议开启，小需求可以直接让 AI 跑。
能批量导出微信收藏的内容吗？
不能直接导出，但可以通过 Enter Code 开发插件，把微信群内容导出来喂给 AI 总结。
要点回顾
- 产品迭代的两个方向：更多参与用户流程、增加功能提高迁移成本
- 私人图库和 AI 生图都可以通过清晰的提示词让 Enter 自动实现，不需要看代码
- 浏览器插件与网页端共用同一个云和数据库，实现数据互通
- Enter Code 是命令行形式的 AI 开发环境，目前支持 Mac 和 Linux，账号与网页端通用
- 常用指令：
LS、CD、clear、PWD，退出用Control + C - 插件开发流程：GitHub 建仓库 → clone 到本地 → 初始化 → 生成基础插件 → 浏览器加载测试 → 集成数据库 → 实现具体功能
- 遇到 bug 的正确姿势：截图报错信息，粘贴给 Enter Code 让它修复
- 插件分发：打包 zip 上传到云存储，或上架浏览器插件商店
- Enter Code 不止能写代码，写博客、做 PPT、数据分析都是它的应用场景
直播回放约 121 分钟
播放器来自飞书妙记 · 在新窗口打开