5个让菜市场摊主主动拍视频推荐的「AI摊位名片」网页模板（扫码即用，连WiFi密码都不用输）

站

站长

2026年4月11日 · 阅读 910 · 点赞 107 · 预计 4 分钟

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

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

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

不用记网址

不用教怎么“添加到桌面”

不用输WiFi密码（摊主手机常年连不上自家热点）

能让顾客喊话就响应（语音交互）

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

---

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

入口极简：每个摊主一个独立二维码，指向https://woshird.com/stall/12345.html（短链服务托管，无需买域名）

加载极快：所有资源内联，首屏<1s（摊主手机多为旧安卓）

交互极傻瓜：点击头像→播放录音；长按商品图→复制微信；喊话→调用Web Speech API（仅Chrome/Edge支持，但摊主基本用Chrome）

内容极灵活：所有文字、电话、语音URL均通过URL参数注入（例：?name=王师傅&phone=139****1234&voice=https://xxx.mp3）

---

🧩 模板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只负责排版美化。

---