每天上午快到十一点四十，办公室里就会冒出一句「今天中午吃啥」。
我们几个中午基本在公司附近解决，来来回回就是那几家店。店面是固定的，菜点得越来越窄。我连着四天点了青椒土豆丝，第五天再报这个菜名的时候，同事看我的眼神有点不对。
难处不是没得选。附近几家馆子的菜单加起来少说上百道菜，谁都想不出新花样，也都不愿意花脑子想。
那就做个东西，把这事一次性解决掉。
先看做成了什么样
它的功能一句话能讲完。把常去餐馆的菜单拍成照片丢进去，它认出菜名和价格建成菜单库；中午打开点菜，点完自动汇总成一张订单卡片发到群里，吃完给每道菜打分，难吃的以后自动少出现。
成品链接是 xiezhr.github.io/lunch-decid… 源码放在 github.com/xiezhr/lunc…
四个页面，底部导航跟 App 一样，分别是菜单库、点菜、汇总、评分。配色我选了暖橙棕配米白，中午看菜单，暖色比冷色下饭。
用什么做的
全程在豆包工作里跑，模型选的 Seed-2.1-pro-0915。
Seed-2.1-pro-0915 是 Seed-2.1-pro 的升级版本，0915 是这次的版本号。升级主要动了三块，看图理解、把图和代码接起来、写完自己跑一遍验证。我挑它，也是因为要干的活正好压在这三块上。
菜单照片是典型的信息密集图片，菜名后面跟价格，还要按凉菜热菜汤归堆，读不明白就建不成库。其次我手上有一张手画的草图，想看看它能不能照着图长出界面。第三，代码写完以后我懒得自己调，希望它能自己跑起来验证。
豆包工作去 www.doubao.com/work 下载，装完登录。这一步有个坑，要用手机号登录。我一开始图省事用飞书账号登，等半天也没见到新用户送的 30 天会员权益，换成手机号才弹出来。飞书账号对应的是企业身份，个人权益走不到那边去。
装完先建项目，这一步别跳过。
运行环境选本地电脑。 选云电脑它读不到你本机的文件，本地模式才能直接往你的目录里写东西。
新建一个项目，绑到一个空文件夹。 我在桌面建了个 今天吃啥，相当于给它划了个工作区，它只在这个目录里翻东西，不会满电脑乱窜。
模型选 Seed-2.1-pro-0915。
喂给它两样东西
一张手画的 UI 草图，两张拍下来的菜单。
画草图额外花了我十几分钟，回头看这十几分钟花得挺值。光用文字描述需求，模型只能猜你想要什么样；给张图，按钮放哪、卡片多大、底部几个 Tab，它都能对得上。后来第一版界面出来，跟我画的那张几乎一个样。
项目结构我让它拆成五个文件，不要一个大 HTML 装全部。拆开之后每次迭代只用改其中的一两个文件，输出短，也不容易改崩别处。
index.html 页面骨架
styles.css 暖橙棕主题
app.js 全部逻辑
data.js 菜单数据
README.md 项目说明
五轮对话，我只展开两轮
整个应用分五轮跑完。中间几轮是常规加功能，不占篇幅。第一轮负责把菜单认出来，第五轮是修一个我自己用出来的逻辑漏洞，这两轮值得说。
第一轮 照片里的菜单变成结构化数据
菜单照片和草图放进项目的素材文件夹，然后把下面这段丢给它。
我常去几家餐馆吃饭，菜单拍成了照片，另外我还手绘了一张界面草图。请帮我做一件事：
第一步，识别这些菜单，输出结构化的 JSON 数据，字段包括：
- 餐馆：我给它们起代号，分别叫【A店、B店】（不要出现真实店名）
- 每道菜：菜名、价格、分类（热菜/凉菜/汤/主食/其他）
要求：
- 价格只保留数字，单位统一为元
- 识别不准或不确定的，标注 "uncertain": true，不要瞎编
- 输出一个完整的 JSON，不要省略
第二步，基于这个 JSON，帮我写一个网页应用。界面严格参照我上传的手绘草图，要求：
- 拆成 4 个文件：index.html（骨架）、styles.css（样式）、app.js（逻辑）、data.js（菜单数据写成 JS 常量）
- 零外部依赖（不引 CDN、不联网），双击 index.html 就能跑，不用 ES Module
- 数据用 localStorage 存储，页面刷新不丢
- 移动端竖屏适配（宽度按 390px 设计），配色用暖橙棕 #c45a1b 配米色 #f7f5f0
- 按草图的布局：底部做固定 Tab 导航，四个 Tab 菜单库 / 点菜 / 汇总 / 评分
- 本轮只实现「菜单库」页：按餐馆分组展示所有菜，显示菜名、价格、分类，支持按餐馆筛选和搜索
- 另外三个 Tab 先做占位页：居中写一句「这个页面下一步实现」加一句引导文案，不要空白
- 界面简洁好看，卡片式布局，圆角 12px
它就开始干活了。
打开 index.html，菜单库已经能按餐馆筛选了。
两张菜单照片的排版完全不一样。一张是两列竖排，菜名后面跟着一串虚线点和勾选框；另一张硬挤了三列，还分了特色干锅、炒饭、汤、盖饭四个区。
我对着照片一道一道数了一遍。A 店 97 道，B 店 102 道，一共 199 道。它输出 199 条，菜名和价格都对得上的是 198 道。
| 项目 | 数量 |
|---|---|
| 菜单照片张数 | 2 张（素材/菜单01.jpg 1280×2338、素材/菜单02.jpg 1279×1302） |
| 照片上的实际菜品 | 199 道 |
| 模型输出的条目 | 199 条 |
| 菜名和价格都对上 | 198 道 |
| 菜名认错 | 1 道 |
| 价格认错 | 0 道 |
| 漏认 | 0 道 |
| 多认（凭空多出来的菜） | 0 道 |
| 界面准确率 | 198 / 199 = 99.5% |
认错的地方只有一处，在 B 店的盖饭区。菜单上印着「麻辣豆腐盖饭」，它写成「麻婆豆腐盖饭」。它认得清那几个字，只是觉得麻婆豆腐这个写法更常见，顺手把名字改了。我把这一行指出来让它改，一次就对了。
有意思的是另一头。还有两道菜它主动标了 uncertain，说照片上的字像「鸡珍」，怀疑该是「鸡胗」。我对着照片核了一遍，菜单上印的确实是没有月字旁的那个字。这种地方它反而没自作主张，老老实实标出来交给我定。199 道菜，价格一处没错。
这一轮其实是两件事连着做的。读完图直接接着写码，中间我没手工整理过一次数据，也没自己敲过一个菜名。照片丢进去，能按店筛选的菜单库就出来了。
第二轮到第四轮
这三轮照着手绘草图往上填东西，一轮一个页面。
点菜页加了推荐组合和「换一批」，每个人输入名字点一个菜，点完复制出一行口令发到群里，格式是 小明|宫保鸡丁|18。汇总页负责把这堆口令粘回来，算出总价，顺手用 Canvas 画一张订单卡片。评分页给今天吃过的菜打星。
这几轮我没再写长 prompt，基本一句人话加一张草图就够了。它自己会开内置浏览器边改边测，省了我不少事。
第五轮 我自己用出来一个缺陷
前四轮跑完，我兴冲冲拿去中午点了一次，当场翻车。
它把两家店的菜混在一起推荐，也能跨店点菜。可我们是一群人一起去吃饭的，一顿饭只能是同一家店。总不能让一半人去 A 店，一半人去 B 店。
这是我用的时候才发现的，写需求的时候压根没想到。于是有了第五轮。
我发现一个业务逻辑错误，必须改。
我们是一群人中午一起去一家餐馆吃饭，所以一顿饭只能点同一家店的菜。
但我昨天拿去真用了一次，你现在的版本会把不同餐馆的菜混在一起推荐、也能跨店点菜，
最后根本没法下单。
请按下面的规则修正：
1. 新增「定店」步骤，放在点菜之前：
- 进入「今日点菜」页，最上面先选今天去哪家，餐馆列表显示店名代号、平均分、上次去是哪天
- 加一个「帮我选」按钮，规则是排除昨天去过的店，剩下的按评分高、最久没去排序选第一个
- 选定后整页只显示这家店的菜，推荐组合、点菜、汇总全部限定在这家店内
- 锁定后顶部固定显示当前店名，加「换一家」和「导航」按钮
- 点「换一家」要二次确认，并清空今天已点的菜
2. 点菜限制：只能点当前这家店的菜，别的店的菜直接不显示
3. 汇总逻辑改掉：
- 不再按餐馆分组。改成顶部显示今天去哪家店，下面菜品清单，底部总价
- 口令格式升级为：名字|店代号|菜名|价格，例如 小明|A店|宫保鸡丁|18
- 粘贴汇总时校验店名，有人点的不是同一家店就高亮那一行并提示，让我决定剔除还是改店
- 兼容旧格式（只有 3 段、没有店名的口令），按当前选中的店处理
4. 订单卡片图：标题写店名代号加日期，下面菜品清单和总价
5. 数据层面：记录每天去的是哪家店，评分仍然按菜记，推荐时在这家店内部按评分排序
一会儿就改完了。
现在不先定店，菜是点不了的。
这一轮我自己挺意外。我给它的是一条业务规则，不是一段报错，它自己找出哪些地方在跨店取数，把推荐、点菜、汇总、历史记录一起改了，还顺手处理了旧口令不兼容的情况。换成我手写，这堆改动够我翻半天。
顺手又让它干了一件小事
除了这个主 Case，我还在豆包工作里另跑了个小活，一轮就完事。
把菜单库导出成一份 Excel，按餐馆分两个 sheet，
每家的菜按分类排好，列是菜名、价格、分类、被点次数、平均分。
文件放在项目目录下，取名 菜单库.xlsx。
表格打开就能用。菜单从照片变成数据，又从数据变回表格，这一趟来回我没手工抄过一行。
上线
豆包工作里带 GitHub 插件，授权一次就行。
授权完，跟它说一句把代码提交到 GitHub 仓库，它会自己建仓库、提交、推送。
再让它配 GitHub Pages，同样一句话的事。Pages 是 GitHub 附带的网页托管，仓库公开以后给一个网址，手机点开就能用，不用买服务器，也不用备案。静态页面专属，恰好适合这种数据存在浏览器里的应用。
把 xiezhr.github.io/lunch-decid… 发到群里，同事就能一起点了。
后面再要改东西也一样，改完推代码，Pages 自己重新部署，过一两分钟刷新就是新的。
做完之后的一点想法
回头看这一趟，它替我干的几件事是连着的。看懂我随手画的草图，认完菜单照片直接变成能用的数据，我说一句业务规则它自己找出跨店的地方改掉。看图、写码、再自己跑起来验证，这三步连下来，不会代码的朋友照着来一遍应该也不难。
从装豆包工作到 Pages 能打开，前后大概2个小时，中间还隔了一觉。想加的东西还挺多，按预算推荐、忌口过滤、按人数自动配菜，反正也就是再聊一轮的事。
我是晓凡，再小的帆也能远航。热衷于分享一些好玩的实用的干货内容。
如果你觉得今天这篇有收获，欢迎 点赞、在看、转发 三连，我们下篇见。
