产品简介
gpt-frontend-code-gen 这是一个用于生成前端页面和组件代码的工具,支持Chakra UI和ShadcnUI,通过持续对话实时预览和调整效果。解决开发者快速原型设计和交互效果展示的痛点,适合前端开发者、UI设计师及需要快速展示效果的团队。

核心功能
- 使用GPT-4生成React组件
- 支持ShadcnUI风格组件生成
- 实时预览生成的组件
- 通过对话持续修改和更新组件
- 配置自定义APIKey和BaseUrl,支持多种大模型
快速开始
- 确保Docker已安装(推荐)
- 运行`docker-compose up -d --build`
- 打开浏览器访问`http://localhost:9000`
- 在界面配置你的APIKey和BaseUrl
界面预览


与其他方案对比
| 对比项 | gpt-frontend-code-gen | 同类方案 |
|---|---|---|
| 交互方式 | 支持基于对话的实时调整和预览 | 通常一次性生成,修改需手动编辑代码 |
| 部署灵活性 | 支持Docker一键启动,跨平台 | 可能依赖特定环境或复杂配置 |
| 大模型集成 | 可配置自定义API,支持本地和多种大模型 | 可能仅支持特定云API |
适合谁用
- 需要快速生成前端原型的前端开发者
- 需要实时调整UI交互效果的设计师
- 需要向客户展示页面效果的团队成员或产品经理
下载与版本
当前最新版本为 main,发布于 。支持 Windows、macOS、Linux。
⚠️ 注意:本项目仅提供源代码下载,不包含可直接运行的安装包(exe/dmg/apk 等。下载后需要自行编译构建才能使用,适合有一定开发经验的用户。如果你不熟悉编译流程,建议寻找同类开箱即用的替代方案。
注意事项
- 本工具仅供学习和研究使用,请遵守相关法律法规。
- 请尊重内容创作者版权,勿将下载内容用于商业或非法传播。
- 项目源码地址:https://github.com/bravekingzhang/gpt-frontend-code-gen