引言
经常用AI的人都会遇到一个让人难受的事：
很多AI平台上的前端代码预览功能非常鸡肋，只能预览纯HTML的代码，如果AI给出的代码是HTML、CSS、JS分开的就没法预览了！更难受的是有些AI平台压根就不提供前端代码预览功能，输出了代码，还得自己将代码下回来，本地起个Live Server什么的才能预览AI生成出来的代码，移动端上要预览前端代码更是麻烦得很…
对于搞开发的来说，这可能是习以为常的事，对于不搞开发，或者不想折腾的人来说，直接就是浅尝辄止了 -- 知道AI能生成前端代码就够了
于是忽略了AI生成前端代码的一个重要价值：在AI的加持下，人人都可以是前端开发工程师，每个人都应该能实现快速发布自己的网页作品！它甚至可以比让你去搞什么低代码更容易，也更灵活！
为了解决这个问题，作者尝试推出自己的解决方案：CodeFlux
CodeFlux
AI生成式前端代码预览/微调辅助工具，前端代码在线运行/发布平台，codepen、jsbin、jsfiddle等的开源替代方案
GitHub：github.com/xxxily/code…
应用场景
项目的主要目标是：结合AI生成前端代码的能力，以实现便捷地预览或微调AI生成的前端页面代码，快速发布能适应多场景的、高质量的、交互动效丰富的网页作品。
1️⃣ AI生成的网页内容即时可视化
- 快速渲染AI生成的信息卡片、数据看板等可视化组件/页面
- 实时预览个人主页、风格化简历等网页级作品
- 动态调试SVG矢量图形与Canvas动画参数
2️⃣ 实现交互元素的敏捷开发
- 所见即所得编辑AI生成的表单组件
- 即时验证AI生成的网页小游戏的交互逻辑
- 可视化调整CSS动画关键帧与过渡效果
3️⃣ 产品原型的快速验证
- 基于AI代码生成快速搭建原型页面
- 快速体验产品设计期望的交互效果
- 跨设备响应式布局实时调试
更多实用场景，静待您的发掘～
界面截图
特性
-
支持一键运行AI生成的前端代码
-
支持适配移动端
-
支持多种预处理语言
-
支持多种布局随意切换
-
支持添加额外的
css、js资源 -
内置多种常用模板
-
支持导出
zip -
支持代码格式化
-
美观强大的控制台
-
支持
vue单文件（2.x、3.x） -
支持直接移植
VSCode主题，并且已经内置了大量优质主题 -
内置支持保存到github gist【gist API】，想要保存到自己的存储体系修改也十分简单
-
内置支持在未配置github gist的情况下将变动保存到url中，可方便的将url分享给他人查看
-
内置支持生成和carbon一样漂亮美观的代码图片
-
支持嵌入模式，方便在文档网站中使用，让文档示例更轻松
在线案例
利用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平台上点击运行
