Trae 工具链支持三种 Story 自动创建方式：一、CLI 命令 trae generate story 基于组件路径与类型注释生成 CSF 文件；二、Babel 插件监听文件变更并依注释自动注入 Story；三、AST 解析脚本批量生成带精细控制的 Stories。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您使用 Trae 工具链开发前端组件，但尚未为组件自动生成 Story 文件以供 Storybook 展示，则可能是由于缺乏标准化的模板注入机制或未集成代码生成插件。以下是实现 Story 自动创建的几种可行路径：
一、通过 Trae CLI 内置命令生成 Story
Trae CLI 在 2.4.0+ 版本中集成了 trae generate story 子命令，可基于组件源文件结构自动推导 props 类型并生成对应 CSF 格式 Story 文件。
1、确保当前项目已安装 @trae/cli@latest 并完成初始化配置。
2、在终端执行 trae generate story Button，其中 Button 为组件名称（需与 src/components/Button/Button.tsx 路径匹配）。
立即学习“前端免费学习笔记（深入）”；
3、CLI 将自动读取组件默认导出的 TypeScript 接口或 JSDoc 注释，生成 Button.stories.tsx 文件，内容包含基础交互示例及参数控制面板。
4、运行 npm run storybook 启动服务，新 Story 将立即出现在左侧导航栏中。
二、利用 Babel 插件在构建时动态注入 Story
该方式不依赖人工触发命令，而是在组件文件保存后由 Babel 插件扫描 AST，识别符合命名规范的 React 组件并同步生成配套 Story 文件。
1、安装插件 @trae/babel-plugin-story-inject 并将其加入 babel.config.js 的 plugins 数组。
2、在组件文件末尾添加特殊注释标记：// @trae-story auto。
3、启动开发服务器时启用 watch 模式，插件将监听 src/components/**/*.{tsx,jsx} 文件变更。
4、当检测到新增组件且含上述注释时，自动在同级目录下创建 {ComponentName}.stories.tsx，并填充最小可运行模板。
三、基于 AST 解析器定制 Node.js 脚本批量生成
适用于已有大量无 Story 的存量组件，需一次性补全全部展示页面，且要求对 props 默认值、事件模拟、变体组合进行精细控制。
1、使用 @babel/parser 和 @babel/traverse 解析每个组件文件的 ExportDeclaration 节点。
2、提取 ComponentName、defaultProps、PropTypes 或 TypeScript Interface 定义。
3、调用预设模板引擎（如 EJS），将解析结果注入 CSF v3 模板，生成 stories 目录下的对应文件。
4、执行脚本 node scripts/generate-stories.js --src src/components --out src/stories 完成批量写入。
