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 完成批量写入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
