使用人工智能编程工具修改网页时，经常需要花很多时间描述自己想改的位置。
例如，我们想修改网页上的一个按钮，可能要先说明它位于哪个区域、旁边有什么内容、现在是什么颜色。页面稍微复杂一些，人工智能就可能找错组件或者改错文件。
OpenMagic 提供了另一种操作方式。它会在本地网页上加入一个悬浮工具栏。我们可以直接选中按钮、标题和卡片等网页元素，用文字说明修改要求，检查修改计划和代码差异，最后再决定是否写入源码。
下面按照图片中的实际操作顺序，完成一次 OpenMagic 网页修改。
一、OpenMagic 到底解决什么
OpenMagic 的核心流程可以概括为三步：选中网页元素、描述修改要求、审查并写入源码。
它并不是根据一张网页截图猜测代码位置。选中元素以后，OpenMagic 会读取网页结构、计算样式、父级布局、附近元素和组件信息，再尝试找到最相关的源码文件。
生成修改以后，它还会显示代码差异。只有我们选择批准，改动才会被写入真实源码。
因此，它主要解决的是两个问题：减少描述网页位置的时间，以及避免人工智能在没有确认的情况下直接修改代码。
二、准备运行环境
开始之前，需要准备三项内容。
第一，本机需要安装 Node.js 20.19 或更高版本。
打开 Windows PowerShell，执行：
node -v
能够显示符合要求的版本号，说明 Node.js 已经准备好。
第二，需要准备一个可以正常运行的本地网页项目。
OpenMagic 支持 React、Next.js、Vue、Nuxt、Angular、Svelte、Astro、Vite 和普通静态网页等多种项目。
第三，需要准备一个可用的模型服务。
OpenMagic 支持多种在线模型服务，也可以连接本机运行的 Ollama 模型。
如果使用在线模型，需要准备对应的接口密钥。接口密钥不要出现在截图、录屏或者公开仓库中。
三、启动网页项目
进入需要修改的网页项目，在项目根目录中打开终端。
按照项目原来的方式启动开发服务器。例如，Vite 项目通常可以执行：
npm run dev
终端显示本地访问地址以后，先在浏览器中打开网页，确认项目能够正常运行。
图片中的示例地址是：
这个终端需要保持运行。OpenMagic 后面会把浏览器请求转发到当前开发服务器。
四、运行 OpenMagic
不要关闭网页项目的开发服务器。
重新打开一个终端，并确保当前目录仍然是项目根目录。
然后执行：
npx openmagic@latest
OpenMagic 会扫描当前项目，并尝试找到正在运行的开发服务器。
识别成功以后，终端会显示原项目地址和 OpenMagic 代理地址。
图片中的原项目运行在 5173 端口，OpenMagic 代理页面运行在 4567 端口。
终端显示 Ready，说明代理已经启动。
使用过程中不要关闭这个终端。完成操作后，可以按 Ctrl＋C 停止 OpenMagic。
五、打开 OpenMagic 代理页面
OpenMagic 启动后，会自动在浏览器中打开代理页面。
也可以手动访问：
需要区分两个地址：
原项目地址是 localhost:5173。
OpenMagic 代理页面是 localhost:4567。
代理页面会继续显示原来的网页，同时在页面中加入 OpenMagic 悬浮工具栏。
看到工具栏和绿色连接状态，才说明 OpenMagic 已经成功接入当前网页。
如果页面能够打开，但没有出现工具栏，需要检查访问的是不是 4567 端口，以及运行 OpenMagic 的终端有没有报错。
六、配置人工智能模型
第一次使用时，打开 OpenMagic 工具栏中的设置页面。
依次选择服务商和模型，然后填写对应的接口密钥。
填写完成后，点击“测试模型”。
显示“连接成功”，说明模型名称、接口密钥和网络连接都可以正常使用。
如果测试失败，可以根据提示检查密钥是否有效、模型是否可用，以及账户是否还有可用额度。
OpenMagic 会把设置保存在本机用户目录中，不会自动写入当前网页项目。
但是接口密钥仍然属于敏感信息，截图之前要确认它已经被完全隐藏。
七、选中需要修改的网页元素
模型连接成功后，打开 OpenMagic 工具栏中的元素选择功能。
把鼠标移动到网页内容上，可以看到当前元素被边框标记。
找到要修改的按钮后，直接点击它。
图片中选中的是页面里的 Get Started 按钮。
选中后，工具栏中会出现 button 标签，表示 OpenMagic 已经获取了这个按钮的元素信息。
选择元素时，尽量直接点击真正需要修改的目标，不要选中包裹整个页面的大容器。
目标越准确，后面匹配源码时越不容易改错位置。
八、先看计划，再生成修改
选中元素以后，在输入框中写明修改要求。
例如：
把这个按钮改成黑色圆角按钮，增加左右留白。
不要只写“优化一下”或者“做得更好看”。
颜色、圆角、间距和需要保留的功能都说清楚，结果会更容易检查。
对于可能影响源码的操作，建议打开“修改前先生成计划”。
OpenMagic 会先列出准备进行的操作，例如定位按钮组件、调整颜色和圆角、保持原有点击功能。
先检查计划有没有找错目标、遗漏限制或者扩大修改范围。
计划确认无误后，再点击“生成修改”。
九、审查代码差异
代码修改生成以后，不要立即批准。
OpenMagic 会显示修改的文件以及红色、绿色代码差异。
红色表示准备删除或替换的内容，绿色表示准备新增的内容。
审查时重点检查三件事：
第一，修改的是不是正确的文件和组件。
第二，有没有删除原来仍然需要的功能。
第三，有没有加入与当前要求无关的额外改动。
如果修改方向不正确，可以选择拒绝，然后重新调整要求。
如果差异符合预期，再选择批准。
十、批准修改并检查结果
批准以后，OpenMagic 会把代码改动写入源码。
网页项目的热更新功能会自动刷新页面。
图片中，修改前是紫色英文按钮，修改后变成了更宽的黑色圆角按钮，文字也改成了中文。
看到页面变化以后，还需要继续检查：
按钮样式是否正确。
原来的点击功能是否正常。
页面在不同窗口宽度下有没有错位。
如果修改结果不符合预期，可以使用撤销功能恢复上一版。
不要只检查外观。按钮、链接、表单和响应式布局都应该实际操作一次，确认修改没有破坏原有功能。
使用时需要注意什么
OpenMagic 主要用于本地开发环境，不应该把它的代理服务部署到正式生产环境。
OpenMagic 会通过新的端口打开网页。原项目和代理页面的来源地址不同，可能会影响登录回调、本地存储和服务工作线程。
带有登录、支付或者严格内容安全策略的项目，需要额外检查相关配置。
此外，虽然 OpenMagic 会提供修改计划、代码差异、验证和撤销功能，最终的代码改动仍然需要人工审查。
总结
OpenMagic 把传统的“描述网页位置”，变成了“直接选中网页元素”。
完整流程是：
准备环境。
启动网页项目。
运行 OpenMagic。
打开代理页面。
配置模型。
选中网页元素。
检查修改计划。
审查代码差异。
批准并验证结果。
它可以减少寻找组件和反复描述位置的时间，但不能代替我们判断修改范围和检查最终结果。
参考资料
OpenMagic 官方仓库：
https://github.com/Kalmuraee/OpenMagic
OpenMagic 项目主页：
10:10
本文来自投稿，不代表OPC中国立场，如若转载，请注明出处：https://www.opcchina.ai/?p=4289
