我在 genui.art 搭了一个 AI 在线生成页面工具，写一句话就能用
我在 genui.art 搭了一个 AI 在线生成页面工具，写一句话就能用
折腾 genui.art 也有段时间了，一直在写教程、分享思路，但我发现一个很尴尬的问题——说再多不如让人亲手试一次。
于是最近花了一个周末，把一个在线生成页面工具搭了出来，放在 genui.art/playground。写一句话，点一下，几秒后就出来一个完整的 HTML 页面。
今天来聊聊这个东西怎么做的，以及为什么我觉得它比我预想的好用。
为什么要做这个？
做 genui.art 的初衷很简单：让 AI 帮你写前端页面，不是那种只能聊天的 AI，而是真的能输出一个能跑的页面。
之前的方式是写文章教大家怎么用 CLI 工具，怎么写 prompt，怎么本地跑起来。但说实话门槛还是有点高——要装 Node、要配环境、要理解文件结构。
所以我在想：能不能直接在网页上写一句话就生成？
不需要任何工具，不需要任何配置，打开浏览器就能用。
技术上怎么做的？
说实话，整个后端不复杂，核心就两样东西：
Cloudflare Pages Functions —— 免费、全球部署、不需要管服务器。一个 Function 文件就是一个 API 端点，部署就自动生效。对于这种”写 prompt → 调 API → 返回结果”的场景简直完美。
小米 MiMo 的 API 通道 —— 这是关键。MiMo 的模型在生成 UI 代码这块表现不错，响应速度快，而且小米给了套餐通道，成本可控。
前端就是一个干净的输入框 + 一个预览区域。没有花哨的交互，输入一句话 → 调后端 → 渲染结果。整个流程大概 3-5 秒。
1 | |
部署也很简单，Cloudflare Pages 连 GitHub 仓库，push 就自动部署，连 CI 都不用单独配。
实际效果怎么样？
说几个我觉得挺有意思的生成结果：
“一个紫色渐变登录页面，带表单和按钮”
出来的是一个渐变背景的登录卡片，有用户名密码输入框和登录按钮，整体排版干净。不是那种一看就是 AI 生成的”凑合能看”，而是真的可以放到项目里用的水平。
“一个深色主题的仪表盘，左侧导航栏，右侧内容区”
这个更复杂一些，结果出来了一个带侧边栏、顶栏、卡片布局的 dashboard 页面。虽然不能直接替代设计师的工作，但作为快速原型完全够用。
“一个极简风格的个人主页，头像 + 名字 + 介绍”
生成了一个居中布局的个人页面，排版舒服，响应式也做了。这种小页面基本上复制粘贴就能用。
说实话，生成质量超出了我的预期。MiMo 在理解 UI 描述方面做得不错，输出的代码结构清晰，样式也很现代。
和其他 AI 生成工具比，有什么不同？
市面上已经有一些 AI 生成页面的工具了，我试过几个。genui.art playground 的定位不太一样：
- 轻量：不需要注册，打开就用，没有学习成本
- 专注：就做一件事——生成 HTML 页面，不搞花里胡哨的功能
- 可定制：生成的代码是纯 HTML + CSS + JS，没有框架依赖，可以随便改
- 免费：目前完全免费，因为后端用的是免费套餐
这不是要替代 Cursor 或 v0，更像是一个快速试想法的工具。你脑子里有个页面的模糊概念，写一句话试试看，几秒后就能看到结果，然后决定要不要继续打磨。
一句话能生成什么？
随便列几个我测试过的 prompt：
- “一个电商产品详情页，有图片轮播和购买按钮”
- “一个博客文章页面，深色代码高亮”
- “一个倒计时页面，显示距离 2027 年还有多少天”
- “一个移动端友好的天气卡片组件”
- “一个表单验证页面，实时校验输入”
基本上你描述得越具体，生成的质量越高。太模糊的 prompt 比如”一个好看的页面”也能生成，但效果一般。加点细节——颜色、布局、组件名称——效果会好很多。
来试试
光说不练假把式。直接上手：
打开网页，输入一句话，点生成，看看效果。
不需要安装任何东西，不需要注册账号。如果你觉得生成的页面不错，代码可以直接复制走；如果觉得哪里不满意，换个 prompt 再试一次。
写在最后
做这个工具的初衷就是降低门槛——让更多人能体验到 AI 生成 UI 是什么感觉。
不需要会写代码，不需要懂 AI 原理，你只需要知道你想做一个什么页面。
如果你试了，欢迎告诉我你的感受。好用的话我会继续迭代，不好用的话……我也得知道哪里要改 😂
这篇文章由一个周末的代码冲动和 MiMo 的 API 生成。感谢 Cloudflare 的免费额度让我可以不花钱就把这个东西上线。