

> **项目简介**
>
> **page-harness** 是一个把正在运行的网页直接变成编码 Agent 工作台的开源工具。只需一行 `npx page-harness <url>` 即可零配置启动，自动连接你电脑上已有的 Claude Code、Codex、Cursor Agent、CodeBuddy Code 或 OpenCode。你可以直接在页面上点选元素与 Agent 对话、在线修改文案与样式实时预览、原地切换多套候选方案，还能生成一个分享链接拉上产品、设计与测试同事在同一个页面上实时批注和审批，让 Agent 直接读取大家的意见完成代码修改。
>
> - **GitHub 地址**：https://github.com/Tencent/page-harness
> - **NPM 地址**：https://www.npmjs.com/package/page-harness

---

## 一、项目描述：page-harness 究竟解决什么问题？

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

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

![Clipboard_Screenshot_1792381841.png](https://developer.qcloudimg.com/http-save/yehe-10812790/103ae7150425c868d932b5a22e4aa9a5.png)

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

在不改动业务项目一行代码的前提下，它将任意正在运行的网页直接升级为 AI 协同工作台：
![Clipboard_Screenshot_1792381864.png](https://developer.qcloudimg.com/http-save/yehe-10812790/752fb522b10a62d815e2118036150aec.png)

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

```bash
# 标准模式：开启页面取点 + 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
```

---

## 二、主要用途：围绕“一键启动、在线编辑、团队合作”的四大核心场景

![Clipboard_Screenshot_1792381882.png](https://developer.qcloudimg.com/http-save/yehe-10812790/32bfba996303c5834d1eaabb7d4258bf.png)

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

### 2. 在线编辑与多方案 Live 实时调优
- **可视化在线编辑**：在评审模式下，选中任意元素即可点击「编辑」，直接原地修改文案、字体颜色、背景色、字号、字重、内边距、圆角或图片地址，实时预览效果并保存为修改记录。
- **多套候选方案对比**：拿不准哪种设计更好？对元素发起 **Live 候选**，Agent 会一次性生成 2~4 套候选方案。你可以在页面上无缝切换、并排对比、拖动滑块调节间距与圆角参数，挑中满意方案后一键采纳，不满意则一键还原。

![image](https://developer.qcloudimg.com/http-save/yehe-10812790/ac09c78d3a1829e442417caac3d2529f.png)

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

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

![image](https://developer.qcloudimg.com/http-save/yehe-10812790/8ae6720262d2a593f3d4a9bf6a04e88d.png)

---

## 三、使用产品与技术生态：无缝连接你主力使用的 AI 工具

### 1. 开箱支持五大主流 Coding Agent CLI（零额外订阅）
`page-harness` 自身不设账号体系，也不要求单独配置大模型 API Key，自动检测并驱动你电脑上已安装并登录的 CLI：

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

![Clipboard_Screenshot_1792381937.png](https://developer.qcloudimg.com/http-save/yehe-10812790/d40ea619307e9a8b3aa038f21ddfa6c0.png)

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

### 2. DeepSeek Harness (DSH) 官方插件级联动
仓库内置了面向 **DeepSeek Harness** 的专属插件，打通了 Web Agent 会话与页面实时预览的闭环：
- **右栏实时预览**：当 Agent 写完网页、修改前端脚本或启动本地服务时，对话右侧自动展开可拖拽宽度的预览栏。在预览中点选元素即可一键「引用到对话」；留完批注后只需说一句“按意见改”，Agent 即可自动读取未解决批注并完成代码修改。
- **一键分享预览**：在预览栏点击分享，或直接对 Agent 说“把这个页面分享给同事看看”，即可一键生成团队协同评审卡片。

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

---

## 四、项目核心 Feature 全景解析

![Clipboard_Screenshot_1792381953.png](https://developer.qcloudimg.com/http-save/yehe-10812790/9d18a17acab9694bc41e48d40361091d.png)

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

---

## 五、为什么开源？

1. **打通“终端文字”与“浏览器画面”是全行业的共性需求**
   无论你使用哪家大模型、习惯哪个 CLI，只要在开发 Web 应用，就一定需要“指着页面某处让 AI 改代码”和“把页面发给同事收集修改意见”。这种基础体验不应该被锁在某一个昂贵的商业软件里，而应该像浏览器开发者工具一样，成为所有 Web 开发者的公共基础设施。
2. **坚持本地优先（Local-First）与工具中立，拒绝重复付费**
   开发者已经为 Claude Code、Cursor、Codex 或各类模型付过费了。`page-harness` 坚持**零账号、零云端中转、零绑定**——直接复用你本机现有的工具，所有会话、产物与团队评审数据 100% 存储在本地。
3. **开放透明，让每个团队都能放心接入研发流程**
   通过 MIT 协议完全开源，代码逻辑与权限边界清晰透明，企业与个人开发者都可以放心地将其引入日常开发与走查流程。

---

## 六、与其它框架、工具的关系：不是替代，而是“视觉外骨骼”

很多开发者会问：*“它和我正在用的 Claude Code / Cursor、前端框架或者自动化测试工具有什么关系？我需要换掉现有工具吗？”*

答案是：**完全不需要。`page-harness` 不替代你现有的任何工具，它是套在现有工具链之外的一层“视觉外骨骼”**：

![Clipboard_Screenshot_1792381974.png](https://developer.qcloudimg.com/http-save/yehe-10812790/45b02094f602ca11578fa9d4d5dbc3ad.png)

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

---

## 七、项目未来的计划（Roadmap）


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

---

## 八、社区发展计划 & 欢迎贡献者加入！

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

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

### 如何参与贡献？
欢迎通过以下标准流程参与到项目中来：

```bash
# 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
```

---

### 立即体验与支持

如果你也曾为在终端里描述“把那个按钮往左挪 4px”而抓耳挠腮，或者厌倦了满屏飞的走查截图，现在就打开终端敲下 `npx page-harness <你的本地端口>` 试试吧！

如果 `page-harness` 对你有帮助，欢迎前往 GitHub 为我们点亮一颗 **Star ⭐**，也欢迎提交 Issue 与 PR，和我们一起重新定义 AI 时代的 Web 开发与团队协作方式！

- **GitHub 仓库**：https://github.com/Tencent/page-harness
- **NPM 包**：https://www.npmjs.com/package/page-harness


page-harness 是一个把正在运行的网页直接变成编码 Agent 工作台的开源工具。只需一行 npx page-harness <url> 即可零配置启动，自动连接你电脑上已有的 Claude Code、Codex、Cursor Agent、CodeBuddy Code 或 OpenCode。你可以直接在页面上点选元素与 Agent 对话、在线修改文案与样式实时预览、原地切换多套候选方案，还能生成一个分享链接拉上产品、设计与测试同事在同一个页面上实时批注和审批，让 Agent 直接读取大家的意见完成代码修改。

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

page-harness 是一个把正在运行的网页直接变成编码 Agent 工作台的开源工具。只需一行 `npx page-harness <url>` 即可零配置启动，自动连接你电脑上已有的 Claude Code、Codex、Cursor Agent、CodeBuddy Code 或 OpenCode。你可以直接在页面上点选元素与 Agent 对话、在线修改文案与样式实时预览、原地切

开发工具

人工智能

前端

page-harness将任意运行中网页变为编码Agent工作台，一行命令零配置接入Claude Code、Codex等五大CLI。支持页面点选对话、在线改样式、多方案实时对比与团队分享批注审批，全程本地存储。MIT开源，让AI协作真正落到浏览器画面上。

自动化测试工具

代码解释

消息队列

服务器

云主机

CodeBuddy

Markdown

Python

GitHub

Agent

Vite

JSON

2026上云采购 | AI焕新·智启新局

coding

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

Page-harness开源 ：一键启动、在线编辑、团队合作，把正在运行的网页变成 Coding Agent 的工作台-腾讯云开发者社区-腾讯云

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

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

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