今天又折腾一天，搞个 AI 生成网页 HTML 的小玩意，跟你们分享分享，省的你们以后走弯路。

摸索阶段

我是想偷个懒，看看能不能直接用 AI 帮我写个抽奖的网页。我找好几个，像是那个什么豆包、kimi ，还有通义千问啥的，都试试。我跟它们说：“给我写个网页，能抽奖的那种，点一下‘开始’，然后按钮变成‘停止’，屏幕上就开始滚名字。”

我还特意列个名单：“张三”，“李四”，“王五”，“赵六”……就这么几个名字。

你们猜怎么着？这帮 AI ，还真能给我生成点东西出来，HTML、CSS、JavaScript 都有，像模像样的。但是，跑起来一看，多多少少都差点意思。有的样式乱七八糟，有的功能不太对，反正就是不能直接用。

碰壁后的调整

后来我就琢磨着，这直接让 AI 从零开始写，可能还是太难为它们。要不我先弄个网页的架子，然后让 AI 帮我填内容？

然后我就找到个叫 openui 的东西。听说这玩意挺厉害，能根据你的描述生成 UI 界面。不过这东西得先安装，还挺麻烦。我在自己电脑上搞半天没弄后来还是找个在线的演示版本体验一下。

我试着描述一下我想要的抽奖界面，你还别说，它真给我生成一个，看起来还不错！

另辟蹊径

不过问题又来，这个 openui 生成的界面，我怎么把它变成 HTML 代码？我又开始四处找资料，发现有个叫 Figma to HTML 的插件，说是可以把设计稿转成 HTML。

我一想，这不正好吗？我把 openui 生成的界面截图，然后用这个插件转成 HTML，这不就齐活？

说干就干，我把截图导入，然后用那个插件一转，还真给我生成 HTML 代码！

这中间也遇到一些小问题，比如生成的代码有点乱，有些地方还得手动调整一下。不过比我一开始预想的要顺利多。

最终实现

我把 AI 生成的代码和这个插件转出来的 HTML 代码结合起来，修修改改，总算是弄出一个能用的抽奖网页。

• 第一步： 找 AI （豆包、kimi、通义千问）生成初步代码。
• 第二步： 尝试用 openui 生成界面（但没完全成功）。
• 第三步： 截图 openui 的结果。
• 第四步： 用 Figma to HTML 插件把截图转成 HTML。
• 第五步： 把 AI 生成的初步代码和转换的 HTML 代码结合，手动修改。

这一天折腾的，虽然有点累，但是也学到不少东西。下次再遇到类似的需求，我就知道该怎么做，哈哈！

今天的分享就到这里，希望对你们有点帮助！