最近翻阅相册，旧旧的照片有一张独特的排版，思绪一下就把我拉回了从前，这张照片是《留白》App 编辑生成的，一款非常具有艺术感的 App。《留白》是我前司创始人开发的 App，当时用户量还挺多的，首页还会推荐一些摄影师拍摄的作品。
最近想从 App Store 重新下载把玩下发现，该应用下架很多年了，并且从一些三方渠道拿到的 Apk 都是 32 位的，现在主流的手机已经无法安装了，通过知乎发现，已经很久没有维护了：
这款独特又小众的 App 无法使用着实有点可惜，留白的 preview 页：
所以，我萌生了一个想法，基于强大的 AI 能力，让这款产品重新再现一下，说干就干。
开发步骤：
- 技术选型：最主要是实现快，能快速验证思路与想法，最终敲定下来用 react
- AI 编码：最终敲定下来是 claude clode(后文简称 cc) + 智谱 GLM-4.7
- 部署体验：将 react 部署到线上体验
- 终极体验：将 react 实现的能力，让 AI 翻译成微信小程序，部署到微信小程序中
在技术选型中，我最先思考的是如何快速实现自己想要的效果，相比较知识库与社区的成熟度，对于 AI 来说，生成前端的正确率会比移动端会高点，并且能快速的调试。我将留白 preview 图片丢给了 cc，让 cc 按照该图生成前端应用，并为该图增加了滤镜、字体、主题等一类设置，如下是实现效果，你也可以访问 liubai-white.vercel.app/ 进行试玩：
cc + 智谱 GLM-4.7 的生成效果与正确率还是蛮惊艳的，并没有因为一个错误的解决而无限陷入另一种错误。
在经过各种细节与优化中，我发现这种方案可行，但提供网页让用户使用的话，一个是体验不佳，另一个是没有人会记住一个网址，所以，我决定将这个方案的实现迁移到微信小程序。
起初，我了解到 Taro + react 是可以生成微信小程序代码的，我尝试让 cc 将 react 转成 Taro 模式，然后让 Taro 编译 react 代码生成微信小程序项目，但经过我各种调试，都无法达成满意的效果，最主要的原因是 react 很多库的实现，在微信小程序上没有，Taro 无法进行转译，所以，这种方案我立马放弃了。
最终还是直接让 cc 翻译了 react 的项目结构，并生成了项目的功能指南，接着我让 cc 重新创建了个 miniapp 的目录，让他读取 react 代码与功能指南，重新生成微信小程序项目。
未来，AI 也可能是跨端的另一种实现
转义的效果依然非常惊艳，第一把就成功了，预览效果与 react 差不多，但细节还需要再做下处理，本以为没啥大问题，当我将图片下载下来时发现，各种排版错乱。检查了下项目代码实现，在微信小程序中，页面布局的展示是通过 wxml 渲染的，但生成图片是通过 canvas 画的，也就是说，canvas 要对着 wxml 的 css 进行转义，而且 AI 的转义能力特别弱，即使我用 cursor+opus 尝试过，也是一塌糊涂，如果界面渲染排版发生了变动，AI 又会忘了 canvas 也要变动， 在这块的调试上吃了太多力气。那怎么办呢，只能给 cc 添加更多的 rules 规则，去定制规则并且限制他的随意发挥。
经过各种调试对垒，第一版的 留白 微信小程序实现啦，效果图如下：
如果你想体验的话，可以扫如下的小程序码：
有任何体验的问题，或是对 AI Coding 有想法的，都可以在公众号中找到我的联系方式。
元旦这三天智谱的 tokens 消耗：
对于 AI Coding ，我有一点想说：
随着大模型越来越强，我觉得用谁家的模型会变得没那么重要，比如我用的智谱GLM 就能帮我实现非常惊艳的能力，我觉得当前最重要的还是工具，我非常推荐 claude code，Anthropic 这家公司一直走在 AI Coding 的最前沿，无论是 mcp、cli，还是最近非常火热的 skills 、subAgent，他总能从工程化思维去解决你的问题，让 AI 代码生成的更可靠。比如 prompt 的拆解与注入、token 如何减少消耗、上下文污染如何规避等等。
2026 年，AI Coding 一定是往更可靠的大方向走，但要想更可靠，交给开发者肯定是不足够的，一定是有很多工具去辅助开发者更可靠才行。
正如 Anthropic 首席产品官 Mike Krieger 所说的：
能可靠地接过你手里的活儿。