【开源自荐】AI生成式前端代码预览/微调辅助工具，前端代码在线运行/发布平台，codepen、jsbin、jsfiddle等的开源替代方案

[xxxily]

CodeFlux

AI生成式前端代码预览/微调辅助工具，前端代码在线运行/发布平台，codepen、jsbin、jsfiddle等的开源替代方案

在线体验：code-flux.anzz.top
GitHub：github.com/xxxily/code-flux

应用场景

项目的主要目标是：结合AI生成前端代码的能力，以实现便捷地预览或微调AI生成的前端页面代码，快速发布能适应多场景的、高质量的、交互动效丰富的网页作品。

1️⃣ AI生成的网页内容即时可视化

• 快速渲染AI生成的信息卡片、数据看板等可视化组件/页面
• 实时预览个人主页、风格化简历等网页级作品
• 动态调试SVG矢量图形与Canvas动画参数

2️⃣ 实现交互元素的敏捷开发

• 所见即所得编辑AI生成的表单组件
• 即时验证AI生成的网页小游戏的交互逻辑
• 可视化调整CSS动画关键帧与过渡效果

3️⃣ 产品原型的快速验证

• 基于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 平台上，即可对其进行运行/预览。

• 注意：无需单独复制html、css、js等代码，直接复制AI生成的内容，然后粘贴到 CodeFlux 平台上， CodeFlux 平台会自动识别并分解成对应的前端代码。

以在DeepSeek网站上生成的内容为例：

一键复制：

将复制到的内容直接粘贴到 CodeFlux 平台

点击确定，即可自动分解代码并进行运行/预览