产品简介
story-ui 面向使用任何 JavaScript 框架和设计系统的前端开发者，Story UI 能通过自然语言描述生成完整的 Storybook 故事代码，支持多种 AI 提供商，减少手动编码时间，提高开发效率。
核心功能
- AI 驱动的故事生成：从自然语言描述创建完整 Storybook 故事
- 自愈代码生成：自动验证和修正生成的代码错误
- 跨框架支持：适用于 React、Vue、Angular、Svelte 和 Web Components
- 语音画布：通过语音输入实时生成和渲染组件
- 多 AI 提供商：支持 Claude、OpenAI 和 Gemini 模型
快速开始
- 安装 Story UI：运行 `npm install -D @tpitre/story-ui`
- 初始化项目：运行 `npx story-ui init`，按提示选择框架和设计系统
- 开始生成故事：运行 `npm run story-ui`，输入自然语言描述
界面预览
与其他方案对比
| 对比项 | story-ui | 同类方案 |
|---|---|---|
| 生成方式 | AI 自动生成，支持自然语言和语音输入 | 手动编写代码，耗时易错 |
| 框架支持 | 全面支持 React、Vue、Angular、Svelte 和 Web Components | 可能只支持特定框架 |
| 错误处理 | 自愈生成，自动验证和修正错误 | 无自动错误处理 |
适合谁用
- 需要快速生成 Storybook 故事代码的前端开发者
- 使用多种 JavaScript 框架的开发团队
- 想通过语音快速原型化 UI 的设计师
下载与版本
当前最新版本为 v4.17.0，发布于 2026-07-03。支持 Windows、macOS、Linux。
⚠️ 注意：本项目仅提供源代码下载，不包含可直接运行的安装包（exe/dmg/apk 等。下载后需要自行编译构建才能使用，适合有一定开发经验的用户。如果你不熟悉编译流程，建议寻找同类开箱即用的替代方案。
注意事项
- 本工具仅供学习和研究使用，请遵守相关法律法规。
- 请尊重内容创作者版权，勿将下载内容用于商业或非法传播。
- 项目源码地址：https://github.com/southleft/story-ui