用途
storybook-gen 是一款面向 React 开发者的命令行工具,命令名为 ai-storybook。它的目标是根据 React 组件自动生成完整的 Storybook 故事(stories),从而省去手写样板故事的工作。官方描述为:指向一个 React 组件,即可得到包含所有变体、控件(controls)和边界情况的完整 Storybook 故事。
主要能力
根据资料,该工具具备以下能力:
- 分析组件 props 并生成相应的控件(controls)
- 为常见状态创建故事,包括 default、disabled、loading、error
- 处理复杂 prop 类型,包括对象和回调函数
- 为 story args 生成正确的 TypeScript 类型
- 包含真实感的示例数据,而非仅占位文本
使用方式
该工具无需安装,直接通过 npx 运行,推荐 Node.js 18+。基本命令格式为:
npx ai-storybook ./src/components/Button.tsx
资料中给出的用法示例包括:
# 为单个组件生成故事
npx ai-storybook ./src/components/Card.tsx
# 处理整个组件目录
npx ai-storybook ./src/components/ --recursive
# 输出 CSF3 格式
npx ai-storybook ./src/Button.tsx --format csf3
# 包含交互测试
npx ai-storybook ./src/Modal.tsx --with-interactions
# 指定输出目录
npx ai-storybook ./src/Input.tsx -o ./stories/
查看帮助:
npx ai-storybook --help
工作原理
工具会解析 React 组件,提取 prop 类型、默认值和组件结构,然后生成覆盖各 prop 组合的 Storybook 故事,并基于 prop 名称和类型创建有意义的示例。
适用场景
资料列出的适用场景包括:
- 为现有代码库搭建 Storybook
- 新增组件时快速补充故事
- 为团队记录组件库
- 构建设计系统并保持故事模式一致
最佳实践
资料建议:
- 先写好 prop 类型——更好的 TypeScript 类型会带来更好的生成故事
- 加入 JSDoc 注释——AI 会利用你的文档生成有意义的描述
- 先生成再定制——用它处理样板代码,再手动补充特定边界情况
- 保持组件职责单一——职责清晰的组件会生成更干净的故事
限制与说明
资料未提供关于收费、价格、平台支持范围、生成准确率或性能等方面的具体信息。该工具声明为 MIT 许可、永久免费,属于 LXGIC Dev Toolkit(由 LXGIC Studios 构建的 110+ 免费开发者工具之一),免费层无付费墙、无需注册、无需 API 密钥。资料中未说明其对非 React 框架的支持情况。