[🛠] 在博客内实现减脂饮食应用 MVP

✨ GPT-5.6 Sol 的总结 　

把只会自动累积、却连我自己都不看的饮食记录，改造成博客里的小应用，并亲自使用和持续改进这个 MVP 的记录。

版本 1：数据很多，但可读性很糟

从2026 年 6 月 20 日开始，我记录身体数据和吃过的食物。

我只要上传食物照片，Codex 就会去 FatSecret 查找营养数据、写入记录并添加超链接，因此记录本身并不难。问题是可读性实在太差。连我自己都不看，其他人大概也不会看。

版本 2：折叠食物明细，并加入最近 7 天

从2026 年 7 月 10 日开始，我改了格式。

我把食物明细藏进展开/折叠区域，改成主要供 AI 扫描的归档。同时提升整体可读性，并加入最近 7 天的变化后，它终于开始产生一些自我反馈。

“原来我实际摄入了这么多热量，所以体重发生了这样的变化。”这些信息逐渐能看出来了。

但它依旧很难一眼看懂。我觉得原因是界面仍以文字为主。反正可以让 Codex 来做，于是我开始考虑在页面里直接实现一个简单的应用式查看器。

版本 3：博客里的小应用让记录清晰了许多

从今天起，我把它改成了这样。

我把想要的功能逐项详细告诉 Codex，再持续反馈。一个小时后，我想要的效果就已经能在文章内运行。

改成应用界面后，我能一眼看出各个时段吃了什么、每顿具体有哪些食物，自我复盘也顺畅了很多。整体感觉很像我以前常用的 Pillyze。

用 front matter 记录数据，用 Liquid 绘制界面

它看起来像应用，但我没有再开发一个专门的输入应用。我在每篇 Daily Review Markdown 顶部的 front matter 中，用 YAML 填写 body_review 数据。

body_review:
  today:
    exercise:
      aerobic: []
      anaerobic: []
    nutrition:
      complete: true
      meals:
        - type: lunch
          foods:
            - name: 辣炒猪肉盖饭
              calories_kcal: 779
              macros_g:
                carbohydrate: 115.13
                protein: 29.85
                fat: 21.41

正文不必每次重复 HTML，只需通过 Liquid 的 {% include %} 调用一次共用查看器。

{% include body-review.html review=page.body_review %}

Jekyll 构建时会把 page.body_review 传给 _includes/body-review.html，再由它渲染卡片、运动记录、饮食标签和宏量营养素图表。早餐或夜宵等没有记录的时段，连标签都不会生成。只要填写每种食物的热量和宏量营养素，渲染器就会计算每餐与全天合计以及百分比。评分和饮食习惯判断不会由界面自行计算，而是由 Codex 从减脂角度作出判断，再把数值直接写进 front matter。

因此，之后的 Daily Review 只需填写当天数据，不必再复制相同的 UI 代码。

对 MVP 进行 Dogfooding

接下来我会继续使用它，并不断改进不方便的地方。我也开始觉得，将来或许可以推出一个在 Web 与应用之间联动的相关服务。

这实际上是正式开发应用之前，先放在博客内部运行的 MVP，也是一种 dogfooding¹。有空时，我想用 Codex 和 Flutter 一点点做出原生与 Web 应用，最终让博客也能嵌入该应用的数据。

参考资料

1. Dogfooding 指产品开发者在真实环境中亲自使用正在开发的产品，以确认其价值和易用性。Microsoft Azure DevOps Blog 对 Lean Product 的说明也把它介绍为进一步打磨 MVP 前，先由开发者亲自使用产品的过程。 ↩