CodeFlux
AI生成式前端代码预览/微调辅助工具，前端代码在线运行平台，codepen、jsbin、jsfiddle等的开源替代方案
在线体验：code-flux.anzz.top
GitHub：github.com/xxxily/code-flux
应用场景
项目的主要目标是：结合AI生成前端代码的能力，以实现便捷地预览或微调AI生成的前端页面代码，快速输出能适应多场景的、高质量的、交互动效丰富的网页作品。
AI生成的网页内容即时可视化
- 快速渲染AI生成的信息卡片、数据看板等可视化组件/页面
- 实时预览个人主页、风格化简历等网页级作品
- 动态调试SVG矢量图形与Canvas动画参数
实现交互元素的敏捷开发
- 所见即所得编辑AI生成的表单组件
- 即时验证AI生成的网页小游戏的交互逻辑
- 可视化调整CSS动画关键帧与过渡效果
产品原型的快速验证
- 基于AI代码生成快速搭建原型页面
- 快速体验产品设计期望的交互效果
- 跨设备响应式布局实时调试
更多实用场景，静待您的发掘～
界面截图
在线案例
利用AI生成产品首页
| Name | Prompt | Model | Link | Completeness | Notes |
|---|---|---|---|---|---|
| CodeFlux介绍页 | - | DeepSeek-V3-0324 | 链接 | ★★★★☆ | - |
利用AI生成简单小应用
| Name | Prompt | Model | Link | Completeness | Notes |
|---|---|---|---|---|---|
| 牛B人生简历生成器 | - | DeepSeek-V3-0324 | 链接 | ★★★★★ | - |
| 高尔顿板模拟器 | content | gemini-2.5-pro-exp-03-25 | 链接 | ★★★★☆ | - |
利用AI创建小游戏
| Name | Prompt | Model | Link | Completeness | Notes |
|---|---|---|---|---|---|
| 奇幻贪吃蛇 | content | DeepSeek-V3-0324 | 链接 | ★★★★★ | - |
| 重力翻转跑酷 | content | DeepSeek-V3-0324 | 链接 | ★★☆☆☆ | - |
运行/预览AI生成的前端代码
在任意支持生成前端代码的AI平台上，使用提示词让AI生成你期望的前端网页，然后将生成的内容一键复制到 CodeFlux 平台上，即可对其进行运行/预览。
以在DeepSeek网站上生成的内容为例：
一键复制：
将复制到的内容直接粘贴到 CodeFlux 平台
点击确定，即可自动分解代码并进行运行/预览
备注：后续考虑做成浏览器插件，直接在AI平台上点击运行
手机上还要干活是真牛马
