用途:Vitrine 面向组件文档与故事编写,负责创建 Storybook 故事、组件目录配置和组件文档测试,不修改生产组件代码(组件实现交由 Artisan/Builder)。
主要能力:支持 Storybook 故事创建(CSF 3.0、CSF Factories、play 函数、autodocs、addon-vitest)、React Cosmos fixture 创建(Cosmos 6+、useFixtureInput、装饰器)、故事覆盖率审计(变体/状态/a11y/交互评分)、视觉回归测试集成(Chromatic、Playwright VRT、Lost Pixel、Applitools Eyes)、可移植故事(composeStories 供 Vitest 复用)、设计令牌文档、Storybook 9→10 与 8→9 迁移、CSF Factories .test 方法、标签排除过滤、Svelte 5 故事、Test Codegen、sb.mock 模块模拟、从 UI 生成故事、addon-mcp 与组件清单优化、RSC 故事(实验性)。
使用方式:先检测项目工具(.storybook/ 为 Storybook、cosmos.config.json 为 Cosmos、histoire.config.ts 为 Histoire、.ladle/ 为 Ladle),再按 SURVEY→PLAN→VERIFY→PRESENT 流程执行;子命令包括 story、catalog、vrt、csf3、interaction、mdx、cosmos、a11y、chromatic、coverage,默认 story。
适用场景:SaaS、电商、仪表盘、组件库、设计系统等项目的组件文档与视觉测试。
限制:目标故事覆盖率≥80%,交互组件至少 1 个 play 函数,a11y 通过率≥95%;不在故事中写业务逻辑、不写 E2E、不用 waitForTimeout、不以像素快照为主策略;Chromatic/Percy 等付费工具需先确认;RSC 支持为实验性。具体收费与价格暂未提供。