用途:为前端组件搭建可视化回归测试,自动生成 Storybook 故事、可视化回归工具配置和 CI/CD 工作流,减少手工查阅文档与配置成本。
主要能力:检测项目框架(React/Vue/Svelte)、Storybook 版本、已有可视化回归工具与 CI 平台;解析组件 props、变体与状态并生成 .stories 文件,附带可访问性与交互测试;生成 Chromatic、Percy 或 BackstopJS 配置;生成 GitHub Actions、GitLab CI 或 CircleCI 工作流;输出 API token、首次基线等后续步骤说明。
使用方式:由用户以自然语言触发,例如“为 ProfileCard 组件设置可视化回归”。内部依次执行 vr_setup_validator.py、story_generator.py、对应配置生成脚本与 ci_workflow_generator.py,并基于 templates 目录模板产出文件。若未检测到 Storybook,会提示先安装;若检测到多个可视化回归工具,会询问选择,默认推荐 Chromatic。
适用场景:为单个组件或整套设计系统批量生成可视化回归测试;为已有 Storybook 添加 Chromatic;在 CI 中自动比对视觉变化。
限制:资料未提供具体收费与价格细节,仅提及 Chromatic 免费额度为每月 5000 张快照;Percy 与 BackstopJS 的对比描述来自资料,未提供独立验证。需自行准备 Chromatic 等项目 token 并配置为 CI 密钥。资料标注 v3.3.0 初始版本支持 Chromatic,Percy、BackstopJS、Vue、Svelte 列为未来计划,实际可用性暂未提供。