https://mp.weixin.qq.com/s/GvlHWJo60taWPmgceyEaQQ

正文从这里开始!


🔹 HTML = 网页的骨架 🏗️,就像房子的结构!
🔹 标签(Tag) = 建房的砖块 🧱,比如
是大标题,
是段落。
🔹 属性(Attribute) = 额外信息 📌,比如 里的 src 就是图片地址。
🔹 HTML 只是基础,就像一座房子的结构,决定了房间的布局,要让房子变得漂亮,得加上 CSS(装修),想让装修好的房子里的水电能用起来,还得加上 JavaScript!



房子“动“起来。
⚠️ 此时此刻,你可以自己在 AI 对话框里,提一个最简单的需求:「帮我写一个完整的 HTML 网页,主题是关于什么是 HTML」然后复制代码保存到你的文本里,改成 111.html,打开预览一下。

我的效果如下(二维码识别即可预览)

AI 编程 – 纯 HTML
我推荐大家直接就从 AI 编辑器开始,选择用代码能力最好的claude (3.7优先,要是排队需要等太久,就换 3.5),比如用免费的 trae(trae.ai),方便你后面更好的驾驭复杂的项目。
(当然也不是绝对的,你也可以坚持就在大模型窗口里让它完成,但要加一句让它给你一个包含全部 css,js的完整的 HTML 页面,要不然复制也麻烦,让你用 trae 这种工具,是为了方便你后面进阶可以做更复杂的。)

后面的演示我都用trae来操作~
感兴趣的可以看下之前我发过的一些纯 HTML 的代码页面:
体验用 AI Claude 3.5 五分钟写了一个 H5 页面
我先带大家先从纯 HTML 开始探索~不要小瞧它,它也能干很多事情的~
1,一个文字卡片生成器页面
我的提示词过程,错别字我都复制进来了:
帮我设计一个做文字卡片的 HTML5 页面,大概是左侧输入文字,右侧在对应的模板上显示出来,请你结合你对考类产品的理解,帮我多设计几款卡片模板,可以自由选择的
效果预览没有效果
我想在右侧增加一个卡片下载功能,可以把图片下载下来
图片下载的按钮位置可以更合理一些
增加图片尺寸选择,比如 9:16,2:3 ,1:1,4:3 等,右侧区域根据注册的选择,呈现不同的尺寸北京
代码构成(你也可以要求 AI合并在一个HTML文件里):

最终效果如下:


线上效果(二维码识别):
https://zlbigger.com/ai/kapian/
2,时间
提示词过程:
帮我写一个可以在一个页面上显示全球 100 个不同国家地区城市所在首都的当前时间,以北京时间为对比时间,会显示其他城市跟北京时间的时差,要显示城市名,所在时区等信息,可以用横版的形式展示,你根据最佳的设计风格来设计,要求用纯 html代码来实现
网页顶部显示一个类似图片上的这种设计,时间显示

可以给每个城市时间旁边增加一个白天或者晚上的小图标,代表他们所处的状态
最终效果:


https://zlbigger.com/ai/time/
3,做好看的单页,如个人简历,宣传页等。

以我想卖的这个域名为例做个单页。
需求:
我有一个域名:linggan.ai,对应中文"灵感",寓意创意与启发,完美契合AI创新的本质。我想卖给有缘人,你帮我设计一个好看的HTML 单页,介绍它的好,并让感兴趣的人可以联系我,比如加我的微信zlbigger。我对设计的要求就是,突出重点信息,优化视觉层次,配色专业、和谐,多参考一些设计好的产品风格。可以引入一些好看的图标来加强。
输出结果:


体验地址:
https://linggan.ai/
AI编程 – HTML + cURL 快速调用 API
这个部分,就可以进阶一部分了,风险就在于别人可能通过查看你页面的源代码获取到你的 key。
各个大模型平台都有 API 可申请,我就以群里那位同学提到的用 kimi 实现儿童菜谱来举例,直接就用 kimi 的 API。

密钥是一段 sk-开头的代码:
sk-doj3GklTg66UMy9gF770wthsnT12QCLx****************
API 申请地址:
https://platform.moonshot.cn/console/api-keys

把你的需求和对应的 API 文档里的示例(包括你的key)一起告诉 AI:
我想实现一个儿童菜谱功能,用户输入菜谱名字,就从儿童营养专家的角度去分析菜谱是否适合儿童,并给出这个菜谱的制作方法。请用 HTML 的方式实现,设计要求简约清新,我用的 API 是https://api.moonshot.cn ,我的key是sk-doj3GklTg66UMy9gF770wthsnT12QCLx,示例:curl https://api.moonshot.cn/v1/chat/completions
-H "Content-Type: application/json"
-H "Authorization: Bearer $MOONSHOT_API_KEY"
-d '{
"model": "moonshot-v1-8k",
"messages": [
{"role": "system", "content": "你是 Kimi,由 Moonshot AI 提供的人工智能助手,你更擅长中文和英文的对话。你会为用户提供安全,有帮助,准确的回答。同时,你会拒绝一切涉及恐怖主义,种族歧视,黄色暴力等问题的回答。Moonshot AI 为专有名词,不可翻译成其他语言。"},
{"role": "user", "content": "你是一名优秀的儿童营养专家,根据我输入的菜单名字,你来帮我做食谱解析,并给出建议"}
],
"temperature": 0.3
}'
基本上什么都不用改就可以实现一个简单的菜谱查询了:


你要是觉得页面太简单了,或者格式不好看,可以继续提需求~
面太朴素了,我需要更好的设计,同时现在的输出的内容是 markdown 格式的,我需要你帮我转成适合这个页面风格的html 代码,并尽可能引入一些图案来让它更有吸引力

同样的,换成别的大模型 API 也是一样的,比如 DeepSeek,

好了,这个暴露我的 key,我就不放在线地址了……
如果你对这个感兴趣,建议按照我的方式自己操作一下,主要是开动你的想象力,看在这个框框里,你能想出什么好玩的需求去实现它!
最后就是等我的视频教程!麻烦关注我的视频号……