page-harness开源：一键启动、在线编辑、团队合作，把正在运行的网页变成 Coding Agent 的工作台

解决前端开发与 AI 编码的割裂问题

过去一年里，AI Coding 工具突飞猛进。无论是 Claude Code、Codex、Cursor，还是 CodeBuddy Code 与 OpenCode，它们在终端和代码编辑器里读写代码、重构逻辑的能力已经非常惊艳。但只要回到前端界面开发与 UI 还原走查，开发者依然困在一种极度割裂的循环里：

• 定位成本高：你在浏览器里看到一个按钮间距不对，切回终端却要花半天向 Agent 描述"左侧边栏第二个折叠面板下的主操作按钮"，或者自己先打开开发者工具翻出组件名和文件路径喂给 AI。
• 试错链路长：想看"字体粗一点 vs. 颜色淡一点 vs. 胶囊圆角"哪种更好看，只能让 Agent 改一次代码、看一次、撤回再改下一次，无法在同一个页面上直观地并排对比和滑块微调。
• 团队反馈断层：设计师、产品经理验收页面时，依然靠"截图 + 画红框 + 写长段文字"，开发者收到后再人肉翻译成 Prompt 喂给编码 Agent。

page-harness 的核心理念很简单：既然网页本身就在浏览器里运行，为什么不能直接在页面上点一下要改的地方，当场在线编辑或告诉 Agent 怎么改，并让整个团队在同一个页面上协同验收？

在不改动业务项目一行代码的前提下，它将任意正在运行的网页直接升级为 AI 协同工作台：

对正在运行的开发服务器敲一行命令即可一键启动：

# 标准模式：开启页面取点 + AI 对话 + 多套候选方案预览 + 产物管理
npx page-harness http://localhost:5173 --project ./my-app

# 仅评审模式：不启动 Agent，仅保留页面取点、在线编辑与批注讨论
npx page-harness --no-agent http://localhost:5173

# 团队分享模式：生成安全邀请链接，拉起同网同事实时协同评审
npx page-harness http://localhost:5173 --share

# 书签主页模式：一键拖拽 ✦ Page-Harness 书签，在任意外部网站上直接标注
npx page-harness

四大核心使用场景

🎯 交互式 UI 开发与精准微调

在本地开发时点击页面任意元素（或按住 Shift + 点击 快捷引用），元素的上下文信息会自动带入浮动对话窗。直接说"把这个卡片改成毛玻璃风格"，Agent 修改源码后触发页面热更新，原地即刻呈现。

✏️ 在线编辑与多方案 Live 实时调优

可视化在线编辑：在评审模式下，选中任意元素即可点击「编辑」，直接原地修改文案、字体颜色、背景色、字号、字重、内边距、圆角或图片地址，实时预览效果并保存为修改记录。

多套候选方案对比：拿不准哪种设计更好？对元素发起 Live 候选，Agent 会一次性生成 2~4 套候选方案。你可以在页面上无缝切换、并排对比、拖动滑块调节间距与圆角参数，挑中满意方案后一键采纳，不满意则一键还原。

👥 跨角色团队实时协同与审批

加上 --share 参数即可生成安全邀请链接。同一网络（或云主机）的产品经理、设计师、测试工程师无需配置开发环境，打开浏览器输入昵称，即可在真实页面上同步打点批注、在线修改样式预览、楼中楼回复讨论，并按页面给出「通过 / 需修改」审批结论。研发回到终端，让 Agent 读取全员批注即可自动闭环修复。

🔖 无源码网站走查与任意网页书签标注

面对测试环境、线上公网页面或任意第三方网站（无本地源码），可通过 ✦ Page-Harness 书签工具在任意网页上直接开启标注。所有网站的批注统一汇总在「我的标记」中心，支持一键导出 Markdown、JSON 或复制专属修复 Prompt 发送给 Agent。

无缝连接主流 AI 工具生态

🤖 开箱支持五大主流 Coding Agent CLI（零额外订阅）

page-harness 自身不设账号体系，也不要求单独配置大模型 API Key，自动检测并驱动你电脑上已安装并登录的 CLI：

• • Claude Code (claude)
• • OpenAI Codex (codex)
• • Cursor Agent (cursor-agent)
• • CodeBuddy Code (codebuddy)
• • OpenCode (opencode)

支持流式文字与思考过程展示、工具调用卡片与改动文件列表、多轮对话续接、模型自由切换、推理强度调节以及图片附件上传。

🔗 DeepSeek Harness (DSH) 官方插件级联动

仓库内置了面向 DeepSeek Harness 的专属插件，打通了 Web Agent 会话与页面实时预览的闭环：

• 右栏实时预览：当 Agent 写完网页、修改前端脚本或启动本地服务时，对话右侧自动展开可拖拽宽度的预览栏。在预览中点选元素即可一键「引用到对话」；留完批注后只需说一句"按意见改"，Agent 即可自动读取未解决批注并完成代码修改。
• 一键分享预览：在预览栏点击分享，或直接对 Agent 说"把这个页面分享给同事看看"，即可一键生成团队协同评审卡片。

🧩 全栈前端开发服务全兼容

无论你的项目使用的是 Vite、Webpack、Next.js、Nuxt，还是 Python、Go 或纯静态 HTML，无需安装任何构建插件、不改动一行项目配置，原有的热更新（HMR）均照常丝滑工作。

核心功能全景解析

• 🎯 精准取点（Pick）
  点击页面任意元素即可引用到对话（Shift+点击 直接秒引）、留意见、在线直接改，或开启 Live 候选。
• 🔀 Live 候选方案（Live Candidates）
  说一句想怎么改，Agent 直接生成 2~4 个候选变体。支持在页面上来回切换、并排对比、滑块调参，采纳后自动清理临时标记。
• 💬 多会话浮动对话窗（Chat）
  窗口自由拖拽与缩放，支持流式 Markdown、代码高亮、可折叠思考过程、改动文件追踪、图片/文件附件、消息队列排序与撤回，每个对话可独立选择 Agent 与模型。
• 📦 版本化产物管理（Artifacts）
  Agent 生成的调研报告、交互原型、JSON 与图片支持分标签页预览、版本历史对比，并能一键导出 PNG 或 PDF。
• 📌 页面改版也不丢批注
  页面重新渲染或改版后，系统会自动根据元素特征与上下文重新定位批注位置，确保团队反馈精准挂载。
• ❓ 交互式提问卡片（Questions）
  遇到需求细节需要确认时，Agent 可在页面上弹出选择题或小表单，等待你确认后再继续执行。
• 🤖 受控页面自动化（Page Control）
  默认关闭。手动开启后可授权 Agent 自动读取页面、点击、输入、选择与滚动；开启期间顶部有醒目提示，随时可一键收回，且自动屏蔽密码框内容。
• 📁 完整本地历史记录（History）
  所有对话与评审记录均保存在本地项目的 .page-harness/ 目录中，支持浏览、搜索与导出，删除该目录即可一键重置。

开源动机：打造 Web 开发者的公共基础设施

🌍 打通"终端文字"与"浏览器画面"是全行业的共性需求
无论你使用哪家大模型、习惯哪个 CLI，只要在开发 Web 应用，就一定需要"指着页面某处让 AI 改代码"和"把页面发给同事收集修改意见"。这种基础体验不应该被锁在某一个昂贵的商业软件里，而应该像浏览器开发者工具一样，成为所有 Web 开发者的公共基础设施。

💰 坚持本地优先（Local-First）与工具中立，拒绝重复付费
开发者已经为 Claude Code、Cursor、Codex 或各类模型付过费了。page-harness 坚持零账号、零云端中转、零绑定——直接复用你本机现有的工具，所有会话、产物与团队评审数据 100% 存储在本地。

🔓 开放透明，让每个团队都能放心接入研发流程
通过 MIT 协议完全开源，代码逻辑与权限边界清晰透明，企业与个人开发者都可以放心地将其引入日常开发与走查流程。

定位：作为“视觉外骨骼”嵌入现有工具链

很多开发者会问："它和我正在用的 Claude Code / Cursor、前端框架或者自动化测试工具有什么关系？我需要换掉现有工具吗？"
答案是：完全不需要。page-harness 不替代你现有的任何工具，它是套在现有工具链之外的一层"视觉外骨骼"：

• 与 Coding Agent CLI 的关系：它们是负责代码推理与文件读写的"大脑与双手"，page-harness 是它们的"眼睛与画布"，让原本只能看代码文件的 CLI 瞬间具备感知页面元素、生成多方案实时对比、读取并回复团队页面批注的能力。
• 与前端框架及构建工具的关系：100% 框架无关且零侵入。无需安装框架插件，不绑架构建配置，任何正在运行的网页都能即插即用。
• 与自动化测试/调试工具的关系：自动化工具服务于"机器自检与回归脚本"，而 page-harness 专注于"人在回路（Human-in-the-loop）"的交互式在线编辑、多方案视觉对比与跨角色团队协同验收。

未来路线图

• 🔍 组件级源码精准定位
  结合主流前端框架组件树信息，在点击页面元素时直接关联到对应的组件源码文件与具体行列，大幅缩短 Agent 在大型项目中的检索耗时。
• 🎨 设计稿叠加比对与视觉还原自愈
  支持在运行页面上叠加半透明设计稿图层或上传参考图，自动识别间距、字号、色值偏差，一键生成走查批注或驱动 Agent 自动对齐修复。
• 🧩 更丰富的 Agent 生态与 IDE 联动
  持续适配更多国内外优秀 Coding Agent 工具，并拓展与主流 IDE、浏览器扩展及 DeepSeek Harness 的深度协同体验。
• 🔗 预览环境与 Git PR 评审流打通
  支持将团队在预览链接中留下的在线编辑修改、批注讨论与页面审批结论同步至 GitHub / GitLab Pull Request，让视觉走查成为代码合入的标准一环。

欢迎社区共建

一个优秀的开发者工具，一定是长在真实研发场景里的。page-harness 现已基于 MIT 协议开源于 GitHub - Tencent/page-harness，我们诚挚邀请每一位前端开发者、全栈工程师、设计师与 AI 工具爱好者加入社区共建！

🙌 我们期待哪些方向的贡献？

• 🔌 新增 Agent 适配器：为你喜爱的命令行 Coding Agent 编写适配支持，让更多工具接入页面工作台。
• 🎨 页面工作台与在线编辑体验打磨：一起打磨更强大的在线样式编辑器、快捷键体验与交互细节。
• 🌍 多语言国际化与实战案例分享：补充更多语言支持、录制实战演示视频，或分享你们团队使用 --share 进行跨职能走查的最佳实践。
• 🛡️ 复杂页面场景适配优化：针对微前端、复杂动态列表等场景持续优化元素取点与批注定位体验。

🚀 如何参与贡献？

欢迎通过以下标准流程参与到项目中来：

# 1. 克隆仓库并安装依赖
git clone https://github.com/Tencent/page-harness.git
cd page-harness
npm install

# 2. 启动本地开发模式，指向任意前端应用体验
npm run dev
node dist/cli.js http://localhost:5173 --project ../some-app