前言¶

在 DeepSeek Harness（DSH）里让智能体改前端时，常见做法是保存文件、切到浏览器刷新，再把报错或 DOM 片段贴回对话。预览和聊天来回切，静态页还好；接了 Vite、Next 等 dev server 时，还要自己记端口、盯控制台。

PriRex Preview 是维护者 Prirex 出品的 客户端（Web）插件，在 DSH 右侧面板增加 PriRex Preview 标签页：选项目目录即可在本机起 HTTP 服务，用 WebSocket 做 live reload，并内置设备框、控制台错误流和 DOM 点选inspector。流量绑定在 127.0.0.1，README 明确写了本地设计、不上报遥测。

下文按「是什么 → 能做什么 → 怎么装 → 怎么用 → 注意点」说明，事实均来自仓库 README 与 package.json（当前版本 2.0.0，许可证 MIT）。

这是什么¶

dsh-prirex-preview（npm 包名）在 DSH 中注册为 Web 平台插件，通过 cordis.patch.yml 注入侧栏等 UI 挂载点。它不负责托管你的代码仓库，而是在本机扫描你选的文件夹，自动判断是静态站点还是 Node.js 项目，再提供可嵌入的预览 WebView。

社区目录页：skillhub.cn 上的 PriRex Preview。源码与说明：GitHub — Prirex/dsh-PriRex-Preview。

核心功能¶

项目发现与两种预览模式¶

选文件夹后，插件会在该目录及最多两层子目录中扫描（HTML 发现深度 ≤3，文件数上限 500，并跳过 node_modules、.git、dist、build、.next 等）。若存在静态 HTML 站点则优先；否则查找嵌套的 Node.js 项目并启动。

• 静态站点：在内置 ephemeral localhost 端口提供 HTTP，开启 CORS，自动挑选 index.html。
• Node.js 项目：根据 package.json 中的 dev / start / serve / preview 等脚本启动 dev server（根据 lockfile 或 packageManager 识别 npm、pnpm、yarn、bun）；若无脚本则尝试入口文件。若声明的包管理器在 DSH 进程中不可用，则回退为 npm run。启动命令可在标签页中查看并编辑，端口从 dev server 输出中解析，日志实时流入标签页。

反向代理与 live reload¶

Node 预览走本地反向代理：向 HTML 注入 inspector、改写绝对重定向、转发任意方法的 API 并透传 WebSocket，以便 Vite/Next 的 HMR 仍在预览内工作。chokidar 监视工程源文件，经 WebSocket 向嵌入 WebView 推送 reload（静态 debounce 150 ms，Node.js 350 ms）。

设备框与浏览器外开¶

提供 Desktop (1920px)、Tablet (768px)、Mobile (375px) 三种框宽，页面按侧栏宽度缩放；In browser 可在 DSH 外用同一 URL 打开。

控制台错误流¶

捕获预览页中的 window.onerror、unhandledrejection 与 console.error，带源码位置（source/line/column），支持一键复制可粘贴的报告。

Point-and-ask DOM inspector¶

悬停元素经可配置延时（1.5 / 3 / 5 秒，默认 3 秒）后冻结（粉色轮廓与锁定标记），打开 What should change?（界面支持俄/英/中文切换）。你的说明连同该元素的 outerHTML 与 computed styles 会写入当前活跃对话的草稿；自动发送始终关闭，需自行审阅后发送。按 R（或俄文布局下的 К）可解除所有冻结元素。

README 中的典型闭环是：在 inspector 面板描述修改 → 智能体改代码 → live reload 后页面呈现变更。

安装与启用¶

环境要求（README）：带 Web 界面的 DeepSeek Harness，以及 Node.js ≥ 20。

面向普通用户的推荐方式是在 DSH 内安装 bundle，而非手写 CLI：

1. 打开 DSH：Plugins → Install bundle → GitHub。
2. 填写仓库 Prirex/PriRex-Preview。安装时 pnpm 会把包复制到 profile；仓库已提交编译产物 lib/，安装阶段无需再 build。

若从本机路径开发插件：Plugins → Install bundle → local path，指向克隆后的目录；DSH 会通过目录联接链到 node_modules/dsh-prirex-preview。README 提醒：本地联接与 GitHub 安装不要同时占同一槽位，否则 pnpm 可能因无法替换联接而报错。

package.json 中 dsh.bundle.patch 指向 cordis.patch.yml，会自动插入 prirexstudio 相关配置，一般无需手改 patch。仓库内 lib/ 可直接运行；仅在你修改 index.ts 或 client.cts 时需要在本机构建：

pnpm install        # 或: npm install
pnpm run build      # 或: npm run build
pnpm run smoke      # 或: npm run smoke

典型用法¶

1. 在 DSH 中装好插件后，打开右侧 PriRex Preview 标签。
2. 选择项目根目录（可以是站点的父目录，不必恰好是 index.html 所在层）。
3. 等待自动识别：静态站直接预览；Node 项目确认标签页中展示的启动命令后启动，在嵌入框中查看页面。
4. 用设备按钮切换视口；若控制台有错误，从错误流复制报告贴回对话。
5. 对要改的元素使用 inspector，在面板中写期望变更，确认草稿内容后自行发送消息；保存源码后应看到 live reload。

静态与 Node 两种模式下的端口、代理与 WebSocket 均由插件在本机协调，你主要操作的是「选目录 → 看预览 → 把 DOM/CSS/报错送回聊天」。

适用场景与注意¶

更适合：在 DSH 里边聊边改前端（静态页或带 dev script 的 Node 全栈/SPA），需要设备框、控制台聚合和带样式的 DOM 上下文，又不想把预览堆到公网。

需要注意：

• 插件随 当前 DSH 进程 运行，启动 dev server 使用的是该进程环境与已安装的 Node/包管理器；安装前请自行阅读源码与 MIT 许可证。
• 仅监听本机地址的设计降低外泄风险，但不替代你对项目脚本与依赖的安全审查。
• 社区目录（如 skillhub.cn）是独立生态站点，与 DeepSeek / 幻方无官方从属关系；插件 star 数等以各站点登记为准（目录线索中为 1）。

结尾¶

PriRex Preview 把「本地 HTTP + WebSocket 热刷新 + 设备框 + 控制台错误 + DOM 点选进草稿」收进 DSH 右栏，缩短前端与智能体协作时的上下文搬运。进一步了解可访问 目录页 与 GitHub 仓库。