5个让菜市场摊主主动拍视频推荐的「AI摊位名片」网页模板

上周六，北京南城某菜市场。王师傅（卖活鱼23年）举着手机拍短视频：“扫这个码，喊一声‘王师傅在哪’，它自己说话！”——视频被3个本地生活号转发，当天新增17个摊主来问：“能给我也做一个？”

他们要的，不是炫酷动画，而是：

我们用Claude Code + Cursor，在3小时内批量生成了5套「摊位名片」模板。全部基于纯HTML/CSS/JS，单文件，无后端，扫码即用。

---

🎯 模板设计原则（比代码更重要）

---

🧩 模板1：语音播报版（最受欢迎）

Prompt（Cursor中输入）：

生成一个单HTML文件，实现：
- 页面顶部大字显示摊主姓名（从URL参数name获取，默认‘摊主’）
- 中间一张圆形头像（占宽70%，圆角100%，默认用https://via.placeholder.com/150/4a90e2/ffffff?text=🐟）
- 点击头像，播放一段语音（URL从voice参数获取，若无则提示‘暂无语音’）
- 底部固定栏：左「微信」右「电话」，点击分别调用wx.miniProgram.navigateTo和tel:协议
- 全页无外部请求，所有CSS/JS内联
- 加载时显示‘正在唤醒摊主…’，语音加载完变‘已就绪’

Claude Code输出后，保存为stall-voice.html，上传至Vercel或GitHub Pages，生成短链：woshird.com/s/12345

摊主只需：① 录3秒语音上传到免费平台（如vocaroo） ② 把链接填进短链参数 ③ 打印二维码

---

🧩 模板2：扫码加微版（接单率最高）

核心：不跳微信，直接唤起「添加联系人」界面。

关键代码（Claude Code不会自动生成，需手动加）：

<a href="weixin://contacts/profile/gh_xxx" style="display:block;padding:12px;background:#07c160;color:white;text-align:center;border-radius:8px;margin:16px;">+ 添加王师傅微信</a>

⚠️ 注意：gh_xxx需替换为摊主公众号原始ID（在公众号后台“设置与开发→公众号设置→账号详情”里找）。Claude Code无法获取此信息，但摊主自己能抄。

---

🧩 模板3：菜品滚动版（适合蔬菜摊）

用<marquee>标签（是的，复古但有效！旧手机兼容性100%）：

<marquee behavior="scroll" direction="left" scrollamount="3">
  <span>🍅番茄 ￥6.8/斤</span>
  <span>🥬菠菜 ￥5.5/斤</span>
  <span>🥕胡萝卜 ￥4.2/斤</span>
</marquee>

Claude Code生成时要求：“用marquee实现横向滚动菜品价格，每项用span包裹，背景色交替”。

---

🧩 模板4：方言问候版（引爆传播）

Prompt追加：

在页面加载完成时，自动播放一段1.5秒方言语音（如北京话‘您来啦~’），语音URL由dialect参数指定

摊主录一句“今儿个黄瓜特水灵！”，顾客扫码听到瞬间笑出声——视频转发量翻倍。

---

🧩 模板5：摊位导航版（解决“找不到人”痛点）

用<img>替代地图：

<img src="market-map.jpg" alt="菜市场布局图" style="width:100%;max-height:300px;object-fit:contain;" />
<p style="text-align:center;font-size:14px;color:#666;margin-top:8px;">📍王师傅摊位：东门进去左转第三排，蓝色遮阳棚</p>

摊主手绘一张草图拍照上传，Claude Code只负责排版美化。

---

🚀 批量交付技巧

没有一行服务器代码，却让23个摊主第一次拥有“数字身份”。

记住：好工具不是更智能，而是更懂「不用学就能用」。

（模板源码已打包：woshird.com/download/stall-kits.zip）