用途：Storybook 是前端工作台，用于隔离构建 UI 组件与页面，便于开发、测试和文档化难以触达的状态与边界情况，无需运行整个应用。
主要能力：以 Stories（组件渲染状态）、CSF（组件故事格式）、args（props/输入）、decorators（包装器）、play functions（交互测试）为核心概念。每个 story 渲染成功即视为冒烟测试；可用 play 配合 storybook/test 的 expect 做交互测试；可启用 @storybook/addon-a11y 做无障碍检查，用 Chromatic 或快照做视觉回归。
安装与使用：要求 Node.js 20+、npm 10+ 或 pnpm 9+ 或 Yarn 4+、Vite 5+ 或 Webpack 5+，TypeScript 4.9+ 可选。新建或已有项目执行 create storybook@latest；指定框架用 create storybook@latest --type <framework>；开发服务器 run storybook（通常端口 6006）；构建 run build-storybook。CLI 会自动检测框架，也可手动指定 nextjs、react、vue3、angular、svelte、sveltekit 等。Next.js 推荐 @storybook/nextjs-vite，Vite + React 推荐 @storybook/react-vite。
项目结构：建议将组件放在 system/ 目录，每个组件独立文件夹，story 文件与组件共置，如 system/Button/Button.tsx 与 Button.stories.tsx。在 .storybook/main.ts 中配置 stories 为 ['../system/**/*.stories.@(js|jsx|mjs|ts|tsx)']。
CSF 写法：使用 CSF 3，默认导出为 meta（含 component、可选 title），具名导出为 stories。args 映射组件 props 并出现在 Controls 面板；render 用于默认渲染不足时自定义；decorators 包装 story（如内边距、主题、Provider）；parameters 为插件提供静态元数据。可导入子组件 story 的 args 来组合父组件 story。preview.ts 可配置全局装饰器、参数与 CSS。
适用场景：UI 组件开发、交互测试、文档化、无障碍与视觉回归。
限制与常见错误：story 不要放在单独文件夹，应共置；meta 中缺少 component 会影响 autodocs 与 Controls；避免硬编码 props，应使用 args；框架导入要正确（如 @storybook/nextjs-vite、@storybook/react-vite，而非通用 @storybook/react）；确保 main.ts 的 glob 匹配 system/。官方文档见 https://storybook.js.org/docs。