PageLens 页面透镜 · AI 页面助手

让 AI Agent 看懂你的页面。

在 VS Code 里预览项目，点选需要关注的页面元素，用自己的话描述问题或修改需求。PageLens 会补充对应的源码文件和行号，将需求交给你正在使用的 AI Agent。

不必先知道组件在哪，也不必手动整理大段代码上下文。

从页面出发，完成你的需求

• 可视化定位源码：点选页面元素，查看标签、文本和源码位置，一键打开对应文件；支持重新定位或清空选择。
• 把想法交给 AI：输入问题、修改要求，添加截图或参考图，生成可编辑的提示词；一键复制，或发送到指定的 VS Code 集成终端并回车。
• 使用你自己的 Agent：支持 Takumi、MyFlicker 及其他在终端运行的 AI Agent。提示词在本地生成，无需额外配置模型 API Key。
• 预览与切换页面：发现项目应用与页面入口，支持多标签预览、手动访问地址，以及手机、平板和桌面尺寸；可调整画布大小和缩放比例。
• 查看页面接口：查看预览中捕获的请求及其状态；在能够匹配项目配置时，定位 Mock 文件或展示代理目标。选择元素后可查看相关接口。
• 查看业务埋点：查看支持的业务 SDK 调用记录和源码中的埋点定义，辅助核对页面行为。
• 从空白页面开始：填写页面需求与跳转意图，生成通用任务提示词，由 Agent 按当前项目约定创建页面并接入入口。

快速开始

1. 在本机 VS Code 中打开前端项目，运行命令 PageLens: 打开页面透镜。
2. 选择应用，点击 启动项目。首次使用可跟随界面中的分步引导。
3. 点击 选择元素，在预览页面中点选目标；也可以直接提出整个页面的需求。
4. 输入诉求，按需添加图片，点击 生成提示词。生成结果会显示在原输入框中，可继续编辑。
5. 点击 选择终端，指定已经运行 AI Agent 的集成终端，再点击 发送给 AI Agent ↵。
6. 根据 Agent 的执行结果，在预览中检查页面效果。

例如：

这个弹窗什么时候会出现？

把这张商品卡片的按钮改成深蓝色，并调整卡片间距。

参考我上传的图片新增一个活动详情页，并连接当前页面的入口。

运行环境

• 本机桌面版 VS Code 1.85.0 或以上。
• PageLens 本地预览服务需要 Node.js 20 或以上；业务项目使用其自身要求的 Node 和包管理器版本。
• 业务项目需要可运行的开发服务及相应依赖。运行环境面板会检测 Node、npm、pnpm、yarn 和项目依赖，并在启动失败时展开。

如果环境尚未准备好，可将插件生成的准备提示词交给 Agent。提示词会考虑已有的 nvm 等版本管理工具；完成后重新检测并重试启动。Node 不在 VS Code 可访问的 PATH 中时，可通过设置 pagelens.nodePath 指定 Node.js 20+ 的可执行文件路径。

数据与工作方式

PageLens 为 Agent 提供用户诉求、元素简述、源码文件位置和图片附件的本地路径，不自动附带大段业务代码。图片保存在本机，插件不会自动上传给第三方；Agent 如何读取、处理和发送这些信息，取决于你使用的 Agent 及其配置。

代码分析、修改与执行由所选 Agent 完成。点击发送会向指定终端输入提示词并按回车，请先确认终端内运行的是你希望使用的 Agent。

插件不提供账号登录，也不包含插件使用行为的埋点上报。业务页面的埋点查看与插件使用统计无关。

使用说明

• 源码定位依赖开发组件信息、源码映射与页面语义匹配；只有候选结果时会提示定位精度。
• 接口与埋点面板展示能够捕获或匹配到的内容。代理配置匹配不代表已确认响应来源，SDK 调用记录也不代表服务端已成功入库。
• 图片支持 PNG、JPEG、GIF 和 WebP，每次最多 6 张，每张最多 8 MB。
• 当前支持本机工作区；远程、虚拟工作区及禁止 iframe 嵌入的外部网页不在支持范围内。
• 关闭插件面板会停止由插件启动的服务。