✏️课程slides：https://cc6407834bee4716b1243c1062f6ac8f.prod.enter.pro使用Enter.pro制作
课程slides：https://cc6407834bee4716b1243c1062f6ac8f.prod.enter.pro
使用Enter.pro制作
扫码报名https://waytoagi.feishu.cn/share/base/form/shrcnRlqCrgwBCKKT6AfmoLJKRd29%
扫码报名https://waytoagi.feishu.cn/share/base/form/shrcnRlqCrgwBCKKT6AfmoLJKRd
加入飞书群34%
加入飞书群
加入微信群37%
加入微信群
1 课程预览
上一节课给大家分享了我对 OPC 的一些粗浅的理解，也带着大家把把一款可能为你带来收入的产品搭了出来，今天我们顺着昨天的思路，继续打磨产品，要把产品做的更贴合实际用户的场景，说白了就是想尽办法留住用户：
1.更多地参与到用户流程中。
2.给用户增加更多的增量价值。
总的来说，就是让用户不会轻易离开，两个思路。
这节课我们会用到两个核心的功能：
1.EnterAI All：一键集成 Claude、OpenAI、Google 等各类模型厂商的模型，不需要单独申请 Key。
2.Enter Code：定位类似于 Claude Code、Codex 的 Agent 产品，适合用来做更多类型的产品，如插件。
在开始之前，需要大家提前安装好 Enter Code，安装非常简单：
1.复制安装指令（Enter Code 目前仅支持 Mac/Linux 安装，Windows 正在快马加鞭适配中）。
npm install -g @enter-pro/enter-code2.打开系统的命令行工具。
3.粘贴指令，按下回车，等待安装完成（下载可能需要耗点时间，所以我们提前下）。
ok，我们等个 1 分钟，让大家操作一下。
2 提出假设
刚刚我提到了，要加大用户留在产品的概率，我们的思路是融入流程或加新功能，那么在长文制图上我们有哪些可能的机会呢？
长文制图，拆解下，核心是「文」和「图」两个部分。
「文」，一般 Enter 实习生会提前写好，我们也会引入 AI 来做润色和调整。
「图」，底图怎么来？现在我们基本上都是用小红书默认提供的版式，不灵活也不能满足我们品牌透出的诉求。
所以我们是不是可以在「图」上做更多事情？
我首先想的是，用户的图期望从哪来？
1.自己手工做的，用 Figma 或 PS 等产品古法制作的图。
2.自己网上找的，在 Dribble、Pinterest、小红书或着其他平台上找的，然后保存下来。
3.用 AI 生成的，用豆包、即梦、Nano Banana 做的。
我们第一个版本里支持了平台提供的通用图片，那肯定是不够的，因此我们是不是可以做的更加强一些？
先不管需求到底有多少用户用得上，我们从逻辑推理上看是有机会的：
1.图库上开放私人图库，更定制化，这是用户个人资产的沉淀。
2.作图上开放 AI 生图，激发创意，降低作图成本，用户不用到处找模型，一站式完成。
3.用户找图然后上传的路径这么长，我们切入进去，让用户看到好看的网图一键保存，快捷高效。
对我们来说，先不要质疑，三个小需求我们一个个来。
3 实操：私人图库 🌟🌟🌟
1.打开我们尘封已久的 Enter 项目，回忆一下我们 24 小时前做过的产品。
50%
50%
2.跟以前一样，你不需要懂代码如何实现，你只需要清晰地表达你的想法，提示词我已经准备好了，一键复制。
# 背景
现在我们已经有一些底图了，但都不够好看，用户有自己的图片，所以我们要做一个用户个人的图片库。
# 需求
1. 工作台里需要有私人图库的板块。
2. 私人图库里支持用上传大小不超过 50MB 的图片，支持 png、jpg 以及一些常用的图片格式。
3. 私人图库里需要支持检索。
4. 编辑器里用户可以选择私人图库中的图片。
跟我对齐方案。3.在输入框里输入需求，选择你喜欢的模型，开启 Plan 模式，记住“让 Enter 在方案里画原型”。
4.没想到 Enter 一把生成了，也没有需要跟我对齐的问题，还是很丝滑的，并且只消耗了不到 40 credits。
**重播播放00:00
/
00:00
直播
00:00
进入全屏
画中画1080p
360p1080p原画1x
2x1.5x1x0.75x0.5x
点击按住可拖动视频20260413161015_rec_.mp420260413161015_rec_00:00
**重播播放00:00
/
00:00
直播
00:00
进入全屏
画中画1080p
360p1080p原画1x
2x1.5x1x0.75x0.5x
点击按住可拖动视频20260413161015_rec_.mp420260413161015_rec_00:00
🫡朋友们，不要犹豫，想到了就去做。
朋友们，不要犹豫，想到了就去做。
大家可以看到，过去当我们去思考一个需求该不该加的时候，我们会更多的考虑人力、开发成本，所以很多需求我们在做的时候犹犹豫豫，但现在不用想那么多，先做再说，先跑起来。
4 实操：AI 生图 🌟🌟🌟🌟🌟
私人图库生成好了，用户自己的图可以应用在编辑器里，接下来我们来做 AI 生图，让用户可以更快速的生成更多自己风格的底图。
1.想好需求，准备好 Prompt，一键复制。
# 背景
现在用户的图片都是自己找的，比较麻烦，我希望能够支持 AI 生成图片，这样用户就可以生成自己想要的底图，而不用在其他生图平台创作了。
# 需求2.开启 Plan mode（在做大需求时开启 Plan 模式是一个好的习惯），确认发送。
3.方案出来了，点击 Build Now，开始构建。
4.执行过程中 Enter 会提示开启 AI All。这个功能就是一键集成各类模型服务，比如 LLM、生图、生视频、生音频等等，你不需要到其他平台申请各种密钥，不用去适配各种接口格式，很快速就能用上顶尖的模型。
a.目前我们已经提供了 19 种主流模型，还在持续接入中，如果大家有想要的模型，可以在Enter 论坛中留言，如果有合适的供应商，我们会考虑优先接入的！
50%
50%
5.我们来看看 Enter 是不是一把就完成了，结果很不幸，报错了，我们来看看怎么处理。
**重播播放00:00
/
00:00
直播
00:00
进入全屏
画中画1080p
360p1080p原画1x
2x1.5x1x0.75x0.5x
点击按住可拖动视频20260413162908_rec_.mp420260413162908_rec_00:00
**重播播放00:00
/
00:00
直播
00:00
进入全屏
画中画1080p
360p1080p原画1x
2x1.5x1x0.75x0.5x
点击按住可拖动视频20260413162908_rec_.mp420260413162908_rec_00:00
6.这里大家需要需要学会如何查看错误原因，很简单。a.在网页右键，找到检查，打开 Devtools，在顶部找到 Network 板块。50%50%b.重新操作一次 AI 生图的功能，看到右侧面板里有红色报错，点开它，找到 Response，复制里面的内容。
a.在网页右键，找到检查，打开 Devtools，在顶部找到 Network 板块。
50%
50%
b.重新操作一次 AI 生图的功能，看到右侧面板里有红色报错，点开它，找到 Response，复制里面的内容。
c.错误内容跟 AI 请求的域名有关，我们来诊断一下。
{
"success": false,
"message": "error sending request for url (https://enterapi.app/code/api/v1/ai/images): client error (Connect): dns error: failed to lookup address information: Name or service not known: failed to lookup address information: Name or service not known",
"code": "internal_error"
}d.AI All 有属于自己的面板，点击预览顶部的 Preview 更多按钮，切换到 AI All。
e.随便找一个模型，点击更多按钮里的 Code Example，查看正确的域名地址。
50%
50%
f.发现确实不一样，Enter 此时不清楚是不是犯傻了（人类偶尔也会犯傻，对 Enter 宽容一些）。
7.准备提示词，关于错误的提示词，要尽可能给够说明，需要包括以下几个内容：a.在用什么功能的时候报错了。b.报错的错误原因是什么。c.有没有可以给 Enter 参考的信息。代码块JSON复制{"success":false,"message":"error sending request for url (https://enterapi.app/code/api/v1/ai/images): client error (Connect): dns error: failed to lookup address information: Name or service not known: failed to lookup address information: Name or service not known","code":"internal_error"}在点击 AI 生图后报错了。看起来是 ai 请求的域名不对，我需要你确认下域名是否正确，我看 AI All里的域名是 https://api.enter.pro/
a.在用什么功能的时候报错了。
b.报错的错误原因是什么。
c.有没有可以给 Enter 参考的信息。
{
"success": false,
"message": "error sending request for url (https://enterapi.app/code/api/v1/ai/images): client error (Connect): dns error: failed to lookup address information: Name or service not known: failed to lookup address information: Name or service not known",
"code": "internal_error"
}
在点击 AI 生图后报错了。
看起来是 ai 请求的域名不对，我需要你确认下域名是否正确，我看 AI All里的域名是 https://api.enter.pro/8.发送，并等待 Enter 部署。
9.验收效果，这次可以生成出来，但是又遇到了下一个问题，这个问题跟跨域有关。a.跨域：图片归属方只允许图片下载或在特定的域名里访问，咱违规了。
a.跨域：图片归属方只允许图片下载或在特定的域名里访问，咱违规了。
正在以画中画形式播放
**重播播放00:00
/
00:23
直播
00:00
进入全屏
画中画1080p
360p1080p原画1x
2x1.5x1x0.75x0.5x
点击按住可拖动视频20260413170123_rec_.mp420260413170123_rec_00:23
正在以画中画形式播放
**重播播放00:00
/
00:23
直播
00:00
进入全屏
画中画1080p
360p1080p原画1x
2x1.5x1x0.75x0.5x
点击按住可拖动视频20260413170123_rec_.mp420260413170123_rec_00:23
12.我们看看 Cloud 里有没有：a.点击 Preview Panel，切换到 Cloud 面板。b.点击 Storage，按着保存路径找到对应的文件。
a.点击 Preview Panel，切换到 Cloud 面板。
b.点击 Storage，按着保存路径找到对应的文件。
正在以画中画形式播放
**重播播放00:00
/
00:09
直播
00:00
进入全屏
画中画1080p
360p1080p原画1x
2x1.5x1x0.75x0.5x
点击按住可拖动视频20260413170308_rec_.mp420260413170308_rec_00:09
正在以画中画形式播放
**重播播放00:00
/
00:09
直播
00:00
进入全屏
画中画1080p
360p1080p原画1x
2x1.5x1x0.75x0.5x
点击按住可拖动视频20260413170308_rec_.mp420260413170308_rec_00:09
🫡我这次做课件时遇到了不同的错误，我一共试了 3 次，3 次的问题都不一样，大家在实际做的时候估计也会遇到类似的问题，但没关系，知道如何找到错误原因，如果让 Enter 修改就可以。
我这次做课件时遇到了不同的错误，我一共试了 3 次，3 次的问题都不一样，大家在实际做的时候估计也会遇到类似的问题，但没关系，知道如何找到错误原因，如果让 Enter 修改就可以。
5 实操：浏览器插件 🌟🌟🌟🌟🌟
这一节你可能会遇到很多的问题，但是不要怕（其实我也很怕哈哈），浏览器插件开发难度比网页难一点，其中最麻烦的是调试过程很繁琐，不过呢为了赚钱，这苦得吃。
需求
我们回顾一下需求：我们需要融入到用户的流程，用户会有自己找图的需求。
找图的流程大致是：
1.开始。
2.用户自然浏览各种网站。
3.找到合适的图片。
4.右键下载，保存到问题。
5.打开我们的站点，进入我的图库。
6.上传刚才的图片。
7.结束。
我们要优化这条链路，让用户省略掉 4、5、6 三个步骤，找到合适的图片直接保存到站点里。
而这里的“直接保存到站点”，就需要借助一个新的产品形态，浏览器插件。
工作流拆解
在开始做之前，我们需要盘一下现在都有什么，以及整个链路怎么串起来。
首先，我们有一个站点，用户主要的工作都在这个站点里，我们拆开看。
这个站点其实有两部分组成，前端页面，后端数据库。
1.前端页面用作展示数据，同时也是数据生产来源。
2.后端数据库是存储数据、管理数据的部分。
我们要重点利用的是后端数据库。
前端页面50%
后端数据库50%
其次，我们有一个浏览器插件，用户搜图找图保存图都通过这个插件，看起来也需要一个前端页面和后端数据库。
1.前端页面就是用户安装的插件。
2.后端数据库则需要跟站点的数据库打通，要保证同一个用户的数据保存到相同地方。
宏观上看，整条链路就会变成下面这张图所示。
🫡开始上难度了，大家不要怕，文档会非常清晰地记录每一个操作，直播过程我会走一遍流程，但更详细的每一步操作流程，都在下面。
开始上难度了，大家不要怕，文档会非常清晰地记录每一个操作，直播过程我会走一遍流程，但更详细的每一步操作流程，都在下面。
Step0：工具准备
由于 Enter 在背后默默地帮大家做了很多工作，让大家认为开发很简单（虽然确实也不难），但我们从浏览器开发转向本地开发，这种转变就需要我们额外准备一些工具或产品，具体包括：
1.用于代码版本管理的Github。
2.用于启用 Enter Code 的命令行工具。a.我们的系统里默认都会有命令行工具，搜索 Terminal 就能看到。b.不过系统预装的 Terminal 工具会比较裸，现在有很多更好用的工具，如 iTerm、Warp（我会用它来演示）。
a.我们的系统里默认都会有命令行工具，搜索 Terminal 就能看到。
b.不过系统预装的 Terminal 工具会比较裸，现在有很多更好用的工具，如 iTerm、Warp（我会用它来演示）。
大家自行准备一下，都不难的。
Step1：安装 Enter Code
我们先安装这次直播的主角 Enter Code。
1.打开命令行工具。
Mac 预装的命令行工具50%
我用的 Warp50%
2.在工具里粘贴以下指令。
npm install -g @enter-pro/enter-code3.回车，等待安装。
4.安装成功后，在工具里输入 enter，按下回车，当你看到 Enter 时，表示已经安装成功了。
5.Enter Code 安装后需要登录，会默认打开一个登录页面，获取当前浏览器里 Enter 账号的登录状态。
47%
53%
6.登录后选择你所在的 Workspace（工作区）即可，Enter Code 和 Enter 共用相同的账号和计费体系，很方便。
👊到这一步，Enter Code 已经安装完成了，我们 CTRL + C 退出 Enter Code，但不要退出命令行工具。
到这一步，Enter Code 已经安装完成了，我们 CTRL + C 退出 Enter Code，但不要退出命令行工具。
Step2：新建空白仓库
工具已经安装完成，我们开始准备放代码的地方，一切就准备就绪了。
1.打开 Github 登录你的账号，新建仓库，下面是我的配置。
# Repository name 仓库名称
opc-xhs-extension
# Description 仓库描述
小红书长文制图的浏览器插件，用户在网页中看到喜欢的底图可以自由地保存到站点的私人库里。
# Configuration 仓库配置
我基本上只关注“Choose visibility” 可见性
Public：所有人都能看到
Private：只有自己能看
2.配置完成后确认新建，等待新仓库出来。
3.复制 Quick setup 里 HTTPS 的链接，我们会在 Enter Code 里使用。
4.现在回到命令行工具，教大家一些简单的命令行指令，会下面几个就够了。
| 指令 | 说明 | 截图 |
| --- | --- | --- |
| ls | 查看当前目录下的所有文件 | |
| cd | 进入特定的目录路径 | |
| pwd | 当前所在的目录路径 | |
| clear | 清空当前命令行工具里已有的消息，让屏幕更干净。 | |
| enter | 进入 Enter Code，接下来要做的事情让 Enter Code 做吧。 | |
5.继续，我们找一个放 Github 代码仓库的目录，演示里由于我用的是 Mac，我就选了下面的路径。
cd /Users/chris/Documents/GitHub
# cd 进入特定的目录路径
# /Users/chris/Documents/GitHub 具体路径6.进入 Enter Code，选择工作区，让 Enter 将刚才创建的 Github 仓库克隆到本地。
# 在命令行工具中输入
enter# 进入 Enter Code 后，选择工作区，然后输入下面的 promtp
帮我把 https://github.com/kebreath/opc-xhs-extension.git 克隆到当前目录
7.Enter 会一步步引导到完成克隆的动作，其中涉及到权限的部分，我们会提供不同粒度的权限管控，选择一个你认为安全的。a.如果大家的系统没有安装过 Git，你就直接让 Enter 给你安装就可以了。
a.如果大家的系统没有安装过 Git，你就直接让 Enter 给你安装就可以了。
👾随着大家深入使用 Enter 和 Enter Code，大家会慢慢变成 Enter 工程师，疯狂地摁下 Enter 回车键。
随着大家深入使用 Enter 和 Enter Code，大家会慢慢变成 Enter 工程师，疯狂地摁下 Enter 回车键。
8.完成克隆。
9.我们新开一个命令行工具窗口，通过 ls 和 cd 来看看是不是真有了。
目录里多出了一个文件夹50%
文件夹是空的，合理，因为仓库是空的50%
👊你又比别人强一些了，很棒！加油加油，现在才是地狱开始。
你又比别人强一些了，很棒！加油加油，现在才是地狱开始。
Step3：跑一个 Hello World
1.我们退出刚才的 Enter，因为它的路径不是我们的代码仓库，进入新目录后重新打开 Enter。
# 第一步，没错，重复两次，完成退出
CTRL C
CTRL C
# 第二步，进入刚才克隆出来的路径
cd /opc-xhs-extension
# 第三步，再次打开 Enter
enter
2.现在代码仓库是空的，我们要完成仓库的初始化，输入以下指令，回车。
/init
正在以画中画形式播放
**重播播放00:00
/
00:13
直播
00:00
进入全屏
画中画1080p
360p1080p原画1x
2x1.5x1x0.75x0.5x
点击按住可拖动视频20260414114305_rec_.mp420260414114305_rec_00:13
正在以画中画形式播放
**重播播放00:00
/
00:13
直播
00:00
进入全屏
画中画1080p
360p1080p原画1x
2x1.5x1x0.75x0.5x
点击按住可拖动视频20260414114305_rec_.mp420260414114305_rec_00:13
5.在 Enter 里同时摁下shift + tab切换模式，进入到 Plan mode/manual approve(人工确认)/accept edits(agent modes)。
正在以画中画形式播放
**重播播放00:00
/
00:04
直播
00:00
进入全屏
画中画1080p
360p1080p原画1x
2x1.5x1x0.75x0.5x
点击按住可拖动视频20260414114516_rec_.mp420260414114516_rec_00:04
正在以画中画形式播放
**重播播放00:00
/
00:04
直播
00:00
进入全屏
画中画1080p
360p1080p原画1x
2x1.5x1x0.75x0.5x
点击按住可拖动视频20260414114516_rec_.mp420260414114516_rec_00:04
6.停留在 Plan mode 里，输入我们的需求，具体的提示词如下，摁下 Enter，喝口茶。
我要做一个浏览器插件，以 side panel 的方式出现在浏览器，下面是关于插件的一些说明。
# 需求
现在我需要你帮我完成插件的初始化，要求：
1. 插件里只需要有一个 好看的 Hello world 就可以。
2. 插件需要支持热更新，我修改后。
# 补充
插件的名称叫做 xhs-pic-saver，小红书图片保存神器。
7.方案出来了，确认没问题，我们就回车开干。
8.执行完成，代码出来了。
Step4：安装我们的插件 🌟🌟🌟
插件的安装比 Web 要复杂一点，我们一步步来。
1.从 Enter 的回复中，我们需要先把服务跑起来，然后安装插件。
2.打开新一个新的命令行窗口，记住需要确保这个命令行所在的目录是我们放代码的位置，通过 cd 来变更目录。
3.执行 dev 命令，让服务跑起来，生成 dist 文件夹（这个是浏览器插件的代码）。
npm run dev
4.打开浏览器，点击右上角的浏览器扩展程序 icon：a.点击管理扩展程序，进入到扩展程序页面。b.打开右上角的开发者模式开关，打开后我们就可以加载开发中的插件了。
a.点击管理扩展程序，进入到扩展程序页面。
b.打开右上角的开发者模式开关，打开后我们就可以加载开发中的插件了。
正在以画中画形式播放
**重播播放00:00
/
00:06
直播
00:00
进入全屏
画中画1080p
360p1080p原画1x
2x1.5x1x0.75x0.5x
点击按住可拖动视频20260414122418_rec_.mp420260414122418_rec_00:06
正在以画中画形式播放
**重播播放00:00
/
00:06
直播
00:00
进入全屏
画中画1080p
360p1080p原画1x
2x1.5x1x0.75x0.5x
点击按住可拖动视频20260414122418_rec_.mp420260414122418_rec_00:06
5.点击左上角的加载未打包扩展程序，找到插件代码目录，选择 dist 文件夹，等待加载完成。
正在以画中画形式播放
**重播播放00:00
/
00:17
直播
00:00
进入全屏
画中画1080p
360p1080p原画1x
2x1.5x1x0.75x0.5x
点击按住可拖动视频20260414122834_rec_.mp420260414122834_rec_00:17
正在以画中画形式播放
**重播播放00:00
/
00:17
直播
00:00
进入全屏
画中画1080p
360p1080p原画1x
2x1.5x1x0.75x0.5x
点击按住可拖动视频20260414122834_rec_.mp420260414122834_rec_00:17
6.加载完成后，点击浏览器扩展程序 icon 就能看到我们的小红书图片保存神器，点击它。
正在以画中画形式播放
**重播播放00:00
/
00:06
直播
00:00
进入全屏
画中画1080p
360p1080p原画1x
2x1.5x1x0.75x0.5x
点击按住可拖动视频20260414123046_rec_.mp420260414123046_rec_00:06
正在以画中画形式播放
**重播播放00:00
/
00:06
直播
00:00
进入全屏
画中画1080p
360p1080p原画1x
2x1.5x1x0.75x0.5x
点击按住可拖动视频20260414123046_rec_.mp420260414123046_rec_00:06
7.这里我遇到了第一个问题，我点击插件后没有任何反应，我让 Enter 来修一下。
我安装成功了，但是点击插件没有弹出 side panel，没有任何反应。
8.Enter 修复完成，插件验收的麻烦就在于我们需要不断的刷新，刷新插件、刷新页面，现在我们只需要做前者。
正在以画中画形式播放
**重播播放00:00
/
00:11
直播
00:00
进入全屏
画中画1080p
360p1080p原画1x
2x1.5x1x0.75x0.5x
点击按住可拖动视频20260414124402_rec_.mp420260414124402_rec_00:11
正在以画中画形式播放
**重播播放00:00
/
00:11
直播
00:00
进入全屏
画中画1080p
360p1080p原画1x
2x1.5x1x0.75x0.5x
点击按住可拖动视频20260414124402_rec_.mp420260414124402_rec_00:11
10.还是有报错，截图给 Enter，我们继续修复，直到没有报错。点击插件里的错误按钮。a.Enter 支持直接粘贴图片，我们截图后粘贴就可以。b.修复的提示词为：代码块Shell复制报错了，继续修复，我已经启动了一个 npm run dev，你不需要再次启动
a.Enter 支持直接粘贴图片，我们截图后粘贴就可以。
b.修复的提示词为：
报错了，继续修复，我已经启动了一个 npm run dev，你不需要再次启动
正在以画中画形式播放
**重播播放00:00
/
00:03
直播
00:00
进入全屏
画中画1080p
360p1080p原画1x
2x1.5x1x0.75x0.5x
点击按住可拖动视频20260414124607_rec_.mp420260414124607_rec_00:0351%
正在以画中画形式播放
**重播播放00:00
/
00:03
直播
00:00
进入全屏
画中画1080p
360p1080p原画1x
2x1.5x1x0.75x0.5x
点击按住可拖动视频20260414124607_rec_.mp420260414124607_rec_00:03
正在以画中画形式播放
**重播播放00:00
/
00:03
直播
00:00
进入全屏
画中画1080p
360p1080p原画1x
2x1.5x1x0.75x0.5x
点击按住可拖动视频20260414124607_rec_.mp420260414124607_rec_00:03
49%
11.修复完成，重复刷新-打开的动作，搞定。
👊历经千辛万苦，我们终于踏上了第一步，这是你的第一个插件，纪念一下。
历经千辛万苦，我们终于踏上了第一步，这是你的第一个插件，纪念一下。
Step5：打通同一个 Cloud 🌟🌟🌟 🌟
接下来我们开始跟站点打通，来实现另一个产品形态跟同一个数据库的连接，我们会同时用到 Enter 和 Enter Code。
获取连接 Enter Code 的方法
1.打开 Enter 网页项目，输入以下的提示词来获取连接方式。
我做了一款配套的浏览器插件，用户可以在浏览网页时将看到的图片通过插件保存到自己的私人库里。
现在我需要将我们的 Enter Cloud 接入到插件中，我需要你提供：
1. 所需要的依赖包
2. Cloud 链接
3. Cloud anon key
正在以画中画形式播放
**重播播放00:00
/
00:35
直播
00:00
进入全屏
画中画1080p
360p1080p原画1x
2x1.5x1x0.75x0.5x
点击按住可拖动视频20260414130525_rec_.mp420260414130525_rec_00:35
正在以画中画形式播放
**重播播放00:00
/
00:35
直播
00:00
进入全屏
画中画1080p
360p1080p原画1x
2x1.5x1x0.75x0.5x
点击按住可拖动视频20260414130525_rec_.mp420260414130525_rec_00:35
👊数据已经打通，这是最关键的一环，接下来我们就可以畅游插件了，自由开发吧！想怎么玩怎么玩！
数据已经打通，这是最关键的一环，接下来我们就可以畅游插件了，自由开发吧！想怎么玩怎么玩！
Step6：开始实现目标
我们的目标是什么？是让用户在浏览页面时，如果看到想要的图片可以丝滑地保存到私人图库里，实现它。
1.准备需求，下面是我的提示词，粘贴到 Enter 里。
现在已经连通了主站的 Enter Cloud 数据库，我们来实现核心的功能：用户在页面上浏览时，如果看到喜欢的图片可以通过一个保存按钮，点击后将网站上的图片保存到自己的图库里。
整个体验需要很丝滑，你给我的方案里需要画出原型来。
正在以画中画形式播放
**重播播放00:00
/
00:56
直播
00:00
进入全屏
画中画1080p
360p1080p原画1x
2x1.5x1x0.75x0.5x
点击按住可拖动视频20260414132316_rec_.mp420260414132316_rec_00:56
正在以画中画形式播放
**重播播放00:00
/
00:56
直播
00:00
进入全屏
画中画1080p
360p1080p原画1x
2x1.5x1x0.75x0.5x
点击按住可拖动视频20260414132316_rec_.mp420260414132316_rec_00:56
5.回到主站里，我们看看图片是否出现在了我的个人图库里。
正在以画中画形式播放
**重播播放00:00
/
00:27
直播
00:00
进入全屏
画中画1080p
360p1080p原画1x
2x1.5x1x0.75x0.5x
点击按住可拖动视频20260414133147_rec_.mp420260414133147_rec_00:27
正在以画中画形式播放
**重播播放00:00
/
00:27
直播
00:00
进入全屏
画中画1080p
360p1080p原画1x
2x1.5x1x0.75x0.5x
点击按住可拖动视频20260414133147_rec_.mp420260414133147_rec_00:27
6.发现 Cloud Storage 里有，但是图库里没有，我们让 Enter 修复一下。
我在插件里保存了两张图片，在 Cloud Storage 里看到了，但在我的图库里没有看到
7.Enter 修复完成，终于看到神仙姐姐了，搞定，这就通了呀哈哈！
👊业务流程也打通了！
业务流程也打通了！
Step7：打包插件，开始分发
流程完整了，下面就是要把插件分发给用户，我们就不能用 dev 开发了，需要真正的把插件构建 build 出来。
1.执行构建指令，可分发的包。
npm run build2.如果我们直接执行指令，一旦遇到报错，就得再次回到 Enter 里修改，所以我们可以直接让 Enter 帮我们构建。a.慢慢的你会习惯把一些可能出错的事情都交给 AI、Agent 或 Enter 做，这也是一个很明显的趋势。
a.慢慢的你会习惯把一些可能出错的事情都交给 AI、Agent 或 Enter 做，这也是一个很明显的趋势。
3.构建出来后，我们也需要验证产物是否正常，我们做以下事情：a.通过 CTRL + C 暂停正在运行的npm run dev。b.打开浏览器移除掉我们之前的插c.加载新打包出来的插件 dist 文件夹。
a.通过 CTRL + C 暂停正在运行的npm run dev。
b.打开浏览器移除掉我们之前的插
c.加载新打包出来的插件 dist 文件夹。
4.重新验证，记住如果我们插件更新了，你验证的页面也需要刷新（这里涉及到浏览器插件跟网页的通信细节）。
正在以画中画形式播放
**重播播放00:00
/
00:06
直播
00:00
进入全屏
画中画1080p
360p1080p原画1x
2x1.5x1x0.75x0.5x
点击按住可拖动视频20260414134711_rec_.mp420260414134711_rec_00:06
正在以画中画形式播放
**重播播放00:00
/
00:06
直播
00:00
进入全屏
画中画1080p
360p1080p原画1x
2x1.5x1x0.75x0.5x
点击按住可拖动视频20260414134711_rec_.mp420260414134711_rec_00:06
5.验证没问题，下一步就是要走到分发。
1 压缩成 Zip 包，放到官网上
1.打包 dist 文件夹成 zip 压缩包，通过 Cloud Storage 上传到 Enter Cloud 里。
正在以画中画形式播放
**重播播放00:00
/
00:26
直播
00:00
进入全屏
画中画1080p
360p1080p原画1x
2x1.5x1x0.75x0.5x
点击按住可拖动视频20260414135346_rec_.mp420260414135346_rec_00:26
正在以画中画形式播放
**重播播放00:00
/
00:26
直播
00:00
进入全屏
画中画1080p
360p1080p原画1x
2x1.5x1x0.75x0.5x
点击按住可拖动视频20260414135346_rec_.mp420260414135346_rec_00:26
2.在官网找个地方把链接放出来，下面是我的提示词。
我插件已经构建出来了，帮我存储到 storage 里，然后在站点中放出下载入口，插件下载地址为 https://spb-t4n87vf96hy3e0f7.supabase.opentrust.net/storage/v1/object/public/extension/dist.zip。
正在以画中画形式播放
**重播播放00:00
/
00:04
直播
00:00
进入全屏
画中画1080p
360p1080p原画1x
2x1.5x1x0.75x0.5x
点击按住可拖动视频20260414135554_rec_.mp420260414135554_rec_00:04
正在以画中画形式播放
**重播播放00:00
/
00:04
直播
00:00
进入全屏
画中画1080p
360p1080p原画1x
2x1.5x1x0.75x0.5x
点击按住可拖动视频20260414135554_rec_.mp420260414135554_rec_00:04
👊数据、业务、分发全部打通！
数据、业务、分发全部打通！
2 上架到 Google 扩展商店
1.注册 Google 账号，进到Google Developer 扩展程序开发里（还得掏钱）。
正在以画中画形式播放
**重播播放00:00
/
00:17
直播
00:00
进入全屏
画中画1080p
360p1080p原画1x
2x1.5x1x0.75x0.5x
点击按住可拖动视频20260414140050_rec_.mp420260414140050_rec_00:17
正在以画中画形式播放
**重播播放00:00
/
00:17
直播
00:00
进入全屏
画中画1080p
360p1080p原画1x
2x1.5x1x0.75x0.5x
点击按住可拖动视频20260414140050_rec_.mp420260414140050_rec_00:17
3.等待审核（非常麻烦，各种权限审核，）。
6 Enter 进阶玩法：玩点狠的
开启「绝命」模型，全自动
自从有了 Enter，我键盘上的 Enter 键触发频率远高于以前，小拇指都长茧了，有什么办法可以不让我一直按？
有，当然有，开始 ByPass 模式，忽略所有 Approve 动作，全 Accept。
1.新开一个命令行窗口，输入 enter --help 指令，打开新世界。
enter --help2.「绝命」模型就在这里，跳过一切审核，终极状态。
enter --dangerously-skip-permissions
微信远程操作，随时随地干活
1.打开新的命令行，进入 enter，选择 /remote-control 模式
2.扫码直连微信！
3.来一句日常问候，连通哈哈哈。
7 还能做什么？
我们能做的事情太多了。
编辑器
1.制图交互体验是不是更丝滑一点？
2.长文里是不是可以加入图片？
3.长文可以支持加粗、斜体吗？比如 Markdown？
4.制图里可以支持贴纸吗？
5.可以下载 png 以外的图片类型吗？
图库
1.图库是不是可以有更多的标签、分类，方便检索？
2.图库可以有详情页嘛？
3.图库的使用会有数据吗？比如曝光、点赞？让大家看起来？
4.图库支持搜索吗？
官网
1.Landing Page 能做的再好看一点吗？
2.我们怎么做到让更多客户信服？
3.我们会支持团队管理吗？团队或许是个好场景？
4.我们能接入 Agent 吗？用 Agent 做体验更好？
8 下课
下课。
欢迎关注 Enter 和我的社媒账号，获取最新 Enter 动态。
小红书：https://www.xiaohongshu.com/user/profile/698f4878000000001d0013fbYouTube：https://www.youtube.com/@EnterProAITiktok：https://www.tiktok.com/@enter.pro.aiInstagram ：https://www.instagram.com/enterpro_official/Twitter：https://x.com/EnterProAI47%
小红书：https://www.xiaohongshu.com/user/profile/698f4878000000001d0013fb
YouTube：https://www.youtube.com/@EnterProAI
Tiktok：https://www.tiktok.com/@enter.pro.ai
Instagram ：https://www.instagram.com/enterpro_official/
Twitter：https://x.com/EnterProAI
Chris 公众号30%
Enter 中文圈23%
10.继续修复，这次我直接提示词，我需要将模型生成的图片保存到 Cloud 里面。
Access to image at 'https://ark-content-generation-v2-cn-beijing.tos-cn-beijing.volces.com/doubao-seedream-4-5/021776070505371e7a9c000dd92b8b7b879cbc284c59191a96398_0.jpeg?X-Tos-Algorithm=TOS4-HMAC-SHA256&X-Tos-Credential=AKLTYWJkZTExNjA1ZDUyNDc3YzhjNTM5OGIyNjBhNDcyOTQ%2F20260413%2Fcn-beijing%2Ftos%2Frequest&X-Tos-Date=20260413T085512Z&X-Tos-Expires=86400&X-Tos-Signature=ea83921f9a195a50ac7b49765625df958639f10dce2892c03a1cf1a16d3bda54&X-Tos-SignedHeaders=host' from origin 'https://40bb9150f0364e58836856d3cb45fa92-latest.preview.enter.pro' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
这次可以生成图片，但是会出现跨域的问题，我需要你将 AI 生成的图片保存到 Storage 里面，再展示出来。11.图片生成成功。
3.万事俱备，只欠需求，跟之前一样，我们需要提供 Prompt，选择合适的模型，开启 Plan 模式。
4.在 Enter 里输入/models进入模型选择板块，上下选择模型，左右选择思考强度。
9.回到浏览器里，找到插件，点击刷新，打开插件。
2.把相关的信息复制下来，组成一个完整的提示词。
我现在需要连接主站点的 Enter Cloud，下面是连接信息：
1. 依赖包
npm install @supabase/supabase-js
2. Cloud 链接
https://spb-t4n87vf96hy3e0f7.supabase.opentrust.net
3. Cloud Anon Key
eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlIjoiYW5vbiIsInJlZiI6InNwYi10NG44N3ZmOTZoeTNlMGY3IiwiaXNzIjoic3VwYWJhc2UiLCJpYXQiOjE3NzU5NjQ3MTUsImV4cCI6MjA5MTU0MDcxNX0.avmsPZjBU6EYyYXzKS16YJ1tAi3CMzD00i9XNSVE1xE
在插件里我们先接入主站的登录，我们不支持用户在插件里注册，若用户需要注册点击后打开到我们的主站点 https://a26f17113d2c4082bf3391763455aaf9.prod.enter.pro插件中连接 Enter Code
1.粘贴提示词到 Enter 里，等待 Enter 执行（可以开启 Plan mode）。
2.构建完成，我们来验收下：a.Case 1：插件不支持注册，点击注册跳到主站点。b.Case 2：已注册用户可以登录。
a.Case 1：插件不支持注册，点击注册跳到主站点。
b.Case 2：已注册用户可以登录。
c.Case 3：未注册用户提示报错。
2.Enter 嘎嘎干了几分钟，完成了修改，在总结末尾提供了一段 SQL 语句，我们需要回到 Enter 项目里执行。
3.复制以下提示词，让 Enter 执行 Cloud 指令。
插件里做了一个保存图片到用户个人图库的需求，以下是我需要新增的表和 bucket，执行以下指令。
-- Table
CREATE TABLE saved_images (
id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
user_id UUID REFERENCES auth.users(id) NOT NULL,
storage_path TEXT NOT NULL,
original_url TEXT NOT NULL,
source_url TEXT,
source_title TEXT,
created_at TIMESTAMPTZ DEFAULT now()
);
ALTER TABLE saved_images ENABLE ROW LEVEL SECURITY;
CREATE POLICY "select own" ON saved_images FOR SELECT USING (auth.uid() = user_id);
CREATE POLICY "insert own" ON saved_images FOR INSERT WITH CHECK (auth.uid() = user_id);
CREATE POLICY "delete own" ON saved_images FOR DELETE USING (auth.uid() = user_id);
-- Storage bucket
INSERT INTO storage.buckets (id, name, public) VALUES ('saved-images', 'saved-images', true);
CREATE POLICY "upload own" ON storage.objects FOR INSERT
WITH CHECK (bucket_id = 'saved-images' AND auth.uid()::text = (storage.foldername(name))[1]);
CREATE POLICY "read all" ON storage.objects FOR SELECT
USING (bucket_id = 'saved-images');
CREATE POLICY "delete own" ON storage.objects FOR DELETE
USING (bucket_id = 'saved-images' AND auth.uid()::text = (storage.foldername(name))[1]);
4.执行完成后，回到插件里验收需求，图片保存成功。
执行 npm run build，帮我构建出插件3.验证，有浏览器下载入口，能下载，搞定！
2.点击上传新内容，填写插件信息。