Zing 论坛

正文

Just-Product-Preview:AI代理原生的预览资源生成工具包

Just-Product-Preview是一个面向AI代理的预览资源生成工具包,支持将本地应用、URL和HTML转换为README就绪的视觉证明。它提供CLI工具、可复用包、配方、清单和GitHub Action,帮助开发者自动化生成截图、视频、GIF等预览资源。

Just-Product-Preview预览生成AI代理截图视频录制GIFCLI工具GitHub Action自动化Playwright
发布时间 2026/05/19 02:43最近活动 2026/05/19 02:56预计阅读 3 分钟
Just-Product-Preview:AI代理原生的预览资源生成工具包
1

章节 01

导读 / 主楼:Just-Product-Preview:AI代理原生的预览资源生成工具包

Just-Product-Preview是一个面向AI代理的预览资源生成工具包,支持将本地应用、URL和HTML转换为README就绪的视觉证明。它提供CLI工具、可复用包、配方、清单和GitHub Action,帮助开发者自动化生成截图、视频、GIF等预览资源。

2

章节 02

问题:预览资源制作的痛点

在软件开发过程中,预览资源(截图、视频、GIF等)扮演着重要角色。它们是README的视觉门面,是Pull Request的直观证明,是发布说明的生动展示。然而,制作这些预览资源往往是一个繁琐且容易出错的过程:

手动操作繁琐:开发者需要手动打开浏览器、调整到合适的视口、执行一系列操作、截图或录屏、编辑、导出。这个过程不仅耗时,而且难以保持一致性。

本地开发难展示:很多功能在本地开发阶段就已经完成,但尚未部署到生产环境。如何向团队成员或审查者展示这些本地工作的成果?

重复劳动:每个项目都需要类似的预览资源,但开发者往往需要重复相同的操作流程。

AI代理的困境:AI代理可以比团队更快地构建UI,但团队审查的速度跟不上。代理生成的代码如何快速转化为可审查的视觉证明?

Just-Product-Preview正是为解决这些问题而设计的。

3

章节 03

解决方案:自动化的预览管道

Just-Product-Preview是一个面向AI代理的预览管道,能够将本地应用、URL和HTML转换为README就绪的视觉证明。它由just-preview CLI、可复用包、配方、清单和GitHub Action组成。

核心理念是:在部署之前捕获本地应用,将视觉证明附加到Pull Request和发布中,为移动应用、文档、仪表板、落地页和PR预览维护可重复的配方

4

章节 04

核心功能:从命令到资源

Just-Product-Preview提供了一系列简洁的CLI命令,覆盖各种预览需求:

5

章节 05

1. 缩略图生成(Thumbnail)

just-preview thumbnail --url https://example.com --out outputs/cover.png

为README生成封面图片,支持PNG或JPEG格式。这是最基础的用例,几乎每个开源项目都需要。

6

章节 06

2. 视频录制(Video)

just-preview video --url https://example.com --out outputs/preview.mp4 --duration 8

录制产品演示视频,支持WebM、MP4或MOV格式。适用于展示交互流程和动态效果。

7

章节 07

3. GIF生成

just-preview gif --url http://localhost:3000 --out outputs/preview.gif --duration 6 --gif-width 960

生成轻量级动画预览,支持大小控制。GIF虽然画质不如视频,但兼容性更好,可以直接在GitHub README中播放。

8

章节 08

4. 脚本化捕获(Recipe)

just-preview recipe --config recipes/landing-page.json

基于配方的录制,支持等待、滚动、点击、填充、悬停、按键和截图等步骤。这是最强大的功能,可以精确控制录制流程。