UI Review Workbench

一个配置驱动的本地前端评审台。它并列承载真实产品页面、产品原生 Story/Fixture 和真实截图录屏，自身不重画或伪造产品界面。

本仓库提供 ui-review CLI 和配套 Skill；使用旧插件版的用户请按下面的方式安装，原 MCP 入口已由 CLI 替代。

使用

npm ci
npx playwright install chromium
npm link

ui-review init --config ./review.json
ui-review dev --config ./review.json --out ./dist --port 5180
ui-review probe --config ./review.json

也可以不安装全局命令：

node ./bin/ui-review.mjs build --config ./review.json --out ./dist

完整配置字段见 docs/config.md，最小配置见 examples/minimal.json。

Related MCP server: Refract

能力

• 真实产品 iframe、Story iframe、图片、视频、代码和说明面板

• macOS 风格窗口、拖拽排序、自由并排与分行、布局记忆和重置

• 适应框内 与 原始 100% 两种观察尺度

• iframe 内部、窗口画布、评审台外层之间的滚动处理

• 页面探测、截图、录屏和渲染表面颜色测量

• 可重复的页面状态操作与可见性、文本、数量、属性断言

• 产品 Git diff 中的个人路径和评审专用残留审计

边界

• 候选版本在临时 worktree 中运行真实 App；评审台指向各实例 URL。

• 产品仓库不得因评审增加或遗留专用路由、fixture、假状态、variant 开关或适配 CSS。

• 状态准备脚本只存在于任务产物中，通过真实 UI/API 或项目原生 seed 写入真实数据；禁止拦截接口或直接修改前端 store 伪造通知。

• 外部项目应运行自己的 App/Storybook；无法运行或嵌入时，使用明确标记的真实截图或录屏。

• 每次评审的配置、截图、录屏与构建结果属于任务产物，不属于本仓库源码。

• Agent 的选择和操作规范由 skills/review-frontend-variants 维护；该 Skill 调用本仓库 CLI，不保存核心实现副本。

Codex Skill

仓库中的 Skill 是唯一源文件。本地 Codex 通过符号链接直接读取它：

npm run link:skill

命令遇到已有的非链接目录或指向其他来源的链接时会拒绝覆盖。

开发

npm run verify

测试覆盖 CLI、配置校验、页面探测、颜色测量、窗口分行持久化和嵌套滚动处理。