用AI 10分钟做出高转化「AI工具推荐」H5页，嵌入公众号关注弹窗

我是RD！这期不教你写代码，教你用AI把知识变成流量：生成一个「程序员必备AI工具推荐」H5页，用户滑到底部自动弹出公众号二维码，扫码即关注——所有代码由Cursor实时生成，无需设计、不抠图、不买服务器。

> ✅ 成品：手机端完美适配，5款工具图文卡片+一句话价值点+跳转链接，底部悬浮关注按钮，点击弹窗大图二维码。

---

🧰 准备工作（2分钟）

---

🤖 第一步：Cursor生成基础H5（4分钟）

   你是一个资深H5营销工程师。请生成一个完整的、单文件HTML页面，要求：
   - 标题：「程序员偷偷在用的5个AI神器」
   - 主体：5个垂直卡片（CSS Grid布局），每张含：图标（用emoji代替）、工具名、1句痛点解决话术、跳转链接（占位符#）
   - 示例卡片：
       🐍 Claude Code —— “写Python脚本再也不查文档”
       🚀 Cursor —— “在代码里直接问AI，改BUG像聊天”
   - 底部固定悬浮按钮：文字「🔥 关注获取AI工具包」，点击弹出模态框，显示公众号二维码图片（img src="gzh-qrcode.png"）
   - 使用纯CSS（无框架），适配手机横竖屏，字体大小用rem
   - 只输出HTML+内联CSS+内联JS，不解释，不注释
   

---

🖼️ 第二步：插入真实二维码（2分钟）

在Cursor中搜索 → 找到模态框内的img标签

确保路径正确（如 ）

刷新Live Server页面 → 点击按钮，确认二维码弹窗清晰可见

---

📲 第三步：嵌入公众号自动关注（2分钟）

微信公众号后台 → 「公众号设置」→ 「公众号名片」→ 复制「公众号二维码链接」（形如 https://mp.weixin.qq.com/mp/qrcode?scene=...）

然后，在Cursor中搜索 href="#"（卡片跳转链接），全部替换成你的二维码链接，例如：

🐍 Claude Code

✅ 效果：用户点击任意工具，直接跳转公众号名片页，点击「关注」按钮即完成

---

🌐 第四步：免费托管+分发（1分钟）

打开 [GitHub Pages](https://pages.github.com/) → 新建仓库 ai-tools-h5

上传 index.html 和 gzh-qrcode.png

Settings → Pages → Source选 main branch / (root) → Save

1分钟后获得地址：https://yourname.github.io/ai-tools-h5

> ✅ 分发策略：
> - 在知乎回答「程序员如何入门AI编程？」时，文末加：「整理了5个亲测提效工具，[点此直达](...)」
> - 在技术群发：「刚做了个AI工具导航页，扫码关注自动领PDF版」

---

📈 数据放大技巧（副业关键）

在H5页底部加一行小字：“关注后回复【工具包】，自动获取5款工具注册教程+折扣码”（用公众号「自动回复」功能实现）

每周让Cursor生成新版：“把第3个工具换成「Replit Agent」，增加‘零配置部署’话术”

用GitHub Insights查看访问来源，重点运营转化率高的渠道（如CSDN评论区）

---

✅ 为什么这个H5能持续获客？

零成本：GitHub Pages永久免费，无域名费用

高信任：用真实工具推荐，非虚构内容，用户愿转发

强钩子：关注即得资料包，符合“付出感-回报感”心理模型

可进化：每次更新只需Cursor重写，不维护旧代码

你不是在建网页，是在搭建一个自动引流的AI内容引擎。

下期预告：《用AI把公众号粉丝提问自动聚类，生成每周FAQ知识库》

现在，打开Cursor，新建HTML，输入那行Prompt——你的第一个流量入口，正在生成。

---

📌 工具链：Cursor（生成）→ GitHub Pages（托管）→ 微信公众号（承接）→ 知乎/CSDN（分发）