实时预览工坊 · Live Preview Studio

前言¶

智能体在生成桌面应用或安卓 APK 时，传统流程是让模型写代码、打包、安装、运行，然后才能看到效果。改一个界面元素往往要重复这一整套流程，效率较低。Live Preview Studio 把这个顺序反过来：先用 Web 产物在本地实时预览界面，在预览窗口里试用、选择元素、调整样式，最后再由用户确认打包。本文介绍这个插件的核心能力、安装方式与典型用法。

插件简介¶

Live Preview Studio 是一个给 DeepSeek Harness 桌面端用的插件（Experimental）。它在桌面版 0.2.1-rc.2 上测试通过，目前不保证兼容其它版本或其它环境。插件会在 Harness 里打开一个和最终应用一样的实时预览窗口，支持运行、选择、调整三种模式，并在每次生成前由用户确认打包命令，或通过面板开关「无需确认」功能。

核心功能¶

实时预览与模式切换¶

插件在对话中调用 preview_studio（action open）后，会在右下角显示预览浮窗。浮窗支持以下模式：

运行：不拦截事件，像真实应用一样点击、输入、滚动。
选择：点击元素加入选择（蓝色选框），支持连续多选，最后一次点击的是主选元素。插件会为每个选中元素在项目源码中搜索文字、id、class、data-testid 等特征，给出候选 文件:行号，并在下一次模型调用时通过会话上下文提供。
调整：拖动移动、8 角点缩放、顶部圆点旋转；属性面板可精确设置 X/Y、宽/高、旋转、字号、文字、文字颜色、背景色；双击文字元素可直接改字；支持撤销或 Ctrl+Z。

调整会先在预览中生效，约 0.7 秒后汇总同步给模型。模型改完项目文件后调用 preview_ack，窗口自动刷新。若正在调整且有未应用的修改，会提示手动刷新。

打包闸门与确认机制¶

插件向模型注入 4 个工具：preview_studio、preview_inspect、preview_ack、preview_release。其中 preview_release 是打包闸门：只有当它返回 confirmed: true 时，模型才能执行打包命令。

每次生成单独确认：点击「确认生成」只批准一次打包。preview_release 消耗本次确认，下次生成需要重新确认。
改动即失效：确认后如果项目源码变化又有新的调整，确认会自动失效。
无需确认：面板上的「无需确认 · 开/关」按钮默认关闭。开启后模型可以直接执行打包命令，也可以继续点「确认生成」；关闭则恢复逐次确认，并清掉之前的确认/放行状态。该状态只对当前预览有效，重新打开预览会回到默认关闭。

打包命令（如 flutter build apk、gradlew assemble、electron-builder、tauri build、pyinstaller、dotnet publish、msbuild、build.ps1 等）在预览未确认时会被工具守卫直接拒绝。

浮窗操作¶

打开：在对话中说「做一个桌面/安卓应用」或「给 clock-app 打开实时预览」，模型调用 preview_studio（action open）后浮窗出现。
收起：点右上角「收起」会变成右下角小胶囊；胶囊可拖动，点一下展开。收起不会停止预览，选中和调整都会保留。
关闭：点 × 会停止预览服务。关闭后没有可恢复的预览，需要再对模型说一次「重新打开实时预览」「给 clock-app 开预览」。
新会话：插件工具在所有会话可用，但新会话默认没有预览。预览属于打开它的会话，会话结束/关闭时会停止。浮窗同时只显示最近打开的那个预览，若属于其它会话会显示「来自另一个会话」。
浮窗不见了：先看窗口右下角有没有小胶囊；没有就说明预览已关闭，让模型重新打开即可。

预览适配约定¶

「实时窗口和安装后一样」建立在同一套界面代码上：

Flutter：flutter build web --release，root 指向 build/web。
Tauri / Electron：前端生产构建（如 Vite npm run build 的 dist），root 指向该目录。
React / Vue / 原生 HTML：构建产物或源码目录。
Android / iOS 原生：浏览器无法直接渲染原生 UI。可以让模型先做一份与原生界面一致的 Web 还原版作为预览，插件在 target=apk 时会套上手机边框。
预览使用独立的本机源（随机端口），因此 /assets/... 这类绝对路径、ES Module、相对 fetch 都能正常工作，不需要改 base。
entry 默认 index.html；root 也可以直接传一个 HTML 文件。

安装与启用¶

环境要求¶

DeepSeek Harness（带 Web UI 的桌面端或 dsh web）
Node.js 20+

安装步骤¶

克隆仓库到本地：

git clone https://github.com/szsall/dsh-preview-studio.git

在 Harness 里让模型安装克隆下来的 bundle（绝对路径）：

plugin_manager install_bundle  target = <克隆目录>

安装并激活后，右下角会出现预览浮窗（有预览时），插件列表里会显示「实时预览工坊」。

典型用法¶

以做一个 Windows 桌面待办软件为例：

在对话中说「帮我做一个 Windows 桌面待办软件，先给我看看界面」。
模型调用：

preview_studio  action=open  root=dist  target=exe  title=待办清单  build="npm run dist"

在预览窗口中试用、选择元素、调整样式，满意后点「确认生成」。
模型收到唤醒消息后：

preview_release  → confirmed: true, build: "npm run dist"
bash             → npm run dist
preview_studio   action=built artifact="release/待办清单 Setup.exe"

适用场景与注意¶

适合在 DeepSeek Harness 桌面版 0.2.1-rc.2 上使用，用于 EXE 或 APK 项目的界面预览与调整。
插件以当前 DSH 进程权限运行，安装前应检查源码与许可证。
预览的是 Web 可渲染的界面，原生控件、系统菜单、真实窗口阴影等只能近似。
源码定位是启发式搜索，构建产物没有 source map 时尤其如此，候选位置需要模型打开文件确认。
元素选中依赖注入的检查器脚本；若页面 CSP 禁止内联样式或脚本，选择/调整会提示未连接。
预览服务只监听 127.0.0.1 随机端口，不会暴露到局域网；关闭预览或会话结束即释放。

结尾¶

Live Preview Studio 通过将打包流程前置为确认闸门，把「写代码→打包→安装→看效果」的串行流程改为「预览调整→确认打包」的迭代流程，减少重复打包带来的时间损耗。插件目前是实验版，仅测试过 DeepSeek Harness 桌面版 0.2.1-rc.2，其它版本或环境尚未验证。如需了解详情，可访问插件目录页或 GitHub 仓库。