教程|免费使用 Gemini 3 Flash 编写互动 HTML 示例

AI 知识库5天前发布 lmm214
1,080 0 0
博思AIPPT
之前很多“惊艳”到自己的小工具都是采用 Gemini 3 制作的,发现已经有平台上线了免费的,实测可用。
(补记:对话有限额,每日十来次😂)
一、打开链接,邮箱登录https://zenmux.ai/invite/MRJDSB(可选)安装代码编辑器:Sublime Texthttps://www.sublimetext.com/download二、开启对话,选择模型1.点击首页的 Chat Now

教程|免费使用 Gemini 3 Flash 编写互动 HTML 示例

2.选择模型为 Gemini 3 Flash

  • 上传图片,输入提示词:

制作一个现场互动的单网页 html,风格样式参考附件图。工具命名:身份证校验码计算器。

教程|免费使用 Gemini 3 Flash 编写互动 HTML 示例
教程|免费使用 Gemini 3 Flash 编写互动 HTML 示例

3.复制代码,粘贴到代码编辑器中

  • 代码编辑器中 Ctrl+V , Ctrl+S
  • 粘贴代码,保存代码,命名为XXX.html。记得确认有后缀名为.html
  • 桌面或文件夹内双击打开这个文件查看效果。
教程|免费使用 Gemini 3 Flash 编写互动 HTML 示例
教程|免费使用 Gemini 3 Flash 编写互动 HTML 示例

三、继续对话,迭代优化

  • 不迷信号称“超长超牛超强”的提示词。
  • 更多实用好用的小工具如好文章一样都是——改出来的。
  • 比如在第一版保存之后发现按钮很单调,所以继续对话:

让数字按钮更立体,有按下去的真实效果。增大17位数字显示框的宽度,避免数字多的时候抖动

教程|免费使用 Gemini 3 Flash 编写互动 HTML 示例
教程|免费使用 Gemini 3 Flash 编写互动 HTML 示例
教程|免费使用 Gemini 3 Flash 编写互动 HTML 示例

四、示例提示词及HTML下载夸克网盘下载链接https://pan.quark.cn/s/ac5e50ff91ab

教程|免费使用 Gemini 3 Flash 编写互动 HTML 示例

🎉

© 版权声明

相关文章