核心功能
使用指南
- 1
登录Chromatic账号，关联对应代码仓库与项目，完成基础权限配置
- 2
将Chromatic CLI工具安装至本地开发环境，配置项目构建命令与输出路径
- 3
提交首次UI组件代码变更，执行构建命令后推送至Chromatic平台
- 4
等待平台自动捕获UI快照，生成初始版本的组件展示与对比基线
- 5
发起新的代码提交并执行构建，平台将自动识别UI差异生成对比报告
- 6
进入项目审核页面，查看差异区域标注，完成团队内部协作评审
- 7
确认UI变更无误后，将基线版本同步至正式环境，完成交付流程
- 8
可配置CI/CD流水线，实现代码提交后自动触发UI测试与快照更新
优势亮点
和Storybook原生兼容，支持React、Vue等主流前端框架，接入成本低
像素级对比组件渲染差异，小到文字间距改动都能精准识别
支持多人在线标注问题，反馈直接关联代码提交，沟通效率高
覆盖主流浏览器和设备尺寸，不用本地挨个环境测试
使用须知
定价: 平台提供免费套餐，支持小体量项目每月固定次数的快照上传和测试，适合个人开发者或者小型团队试用。付费套餐按项目规模、每月快照上传量、团队成员席位划分不同档位，包含更多的浏览器测试覆盖、优先技术支持等权益。具体的套餐价格和权益详情以官网为准，企业用户可联系官方定制专属方案。
价格和授权政策可能变化，请以官网最新信息为准
访问第三方网站时，请注意以下事项:
- 谨慎提供个人账号、密码和支付信息
- 下载文件前确认来源安全，警惕诱导性广告
- 涉及版权素材使用时，请核实授权范围
- 如遇网站无法访问或内容异常，可反馈给我们
常见问题
深度了解
Chromatic专注于为前端开发、UI设计、产品相关团队提供UI研发全流程的协作与质量管控支持。
核心功能包含四个方向：第一是视觉回归测试功能，支持接入前端项目代码仓库，在每次代码提交后自动生成不同分支的UI渲染快照，通过像素级对比识别出代码变更带来的非预期UI差异，无需人工逐页核对界面效果。第二是UI组件库管理功能，可集中收纳项目所有可复用UI组件，自动同步组件的属性、样式、交互逻辑说明，支持按组件类型、使用场景快速检索，方便团队成员调用统一的组件资源。第三是协作审核功能，团队成员可直接在对应UI版本上标注修改意见，关联对应代码提交记录，所有审核反馈实时同步，避免跨工具沟通带来的信息差。第四是部署预览功能，每次代码提交后自动生成独立的UI预览链接，无需本地搭建环境即可查看最新的界面效果，支持不同设备尺寸的适配效果预览。
适用场景包含三类：一是企业级前端项目迭代，在版本更新、功能新增时，快速排查界面异常，避免线上出现UI显示问题；二是UI组件库维护，统一管理多项目共用的组件资源，保障不同产品线的界面风格统一；三是跨角色团队协作，设计师、开发、产品人员可围绕UI效果同步意见，提升需求落地的准确性。
日常使用中可将Chromatic接入现有CI/CD工作流，无需调整原有研发流程即可获得全流程的UI质量保障，团队可根据项目迭代频率设置测试的触发规则，适配不同的开发节奏。