一、全文速览图
俩月过去了，我终于想起来写复盘了。
年前做了一个小网站，专门用来展示各大 APP 的年度报告。
每到年底年初，各家产品都会推出自己的年度总结，有些做得特别精致，有些创意十足，看到老三分享在语雀上，但是涉及到国外的软件老是被屏蔽，我就想着干脆把这些案例做个网页来展示。
2025年度报告设计大比拼！这30款 App，谁最懂你的这一年？
2025 年悄然收尾，当我们还在忙碌中奔走，时间的河流已经悄悄翻过一页。阅读文章 >
今天来复盘一下整个制作流程，顺便分享下我用到的工具链。
二、从 YouMind 开始规划
项目的起点是在 YouMind 里完成的。我先把想法和大致的页面结构梳理清楚，然后直接让 AI 帮我生成代码。
YouMind 有一点特别适合做这种小项目——它最终只输出一个 index.html 文件。所有的 HTML、CSS、JavaScript 都打包在一起，不需要搭建什么复杂的工程环境，也不用配置打包工具。对于这种展示型的静态页面，一个文件搞定一切，轻便得很。
如果你想在其他编辑器里输出一个 html 文件，可以增加这段提示词
提供完整可运行的单一HTML文件，包含所有必要的CSS和JavaScript
在 YouMind 里我主要完成了页面的整体框架搭建：布局结构、卡片样式、响应式适配的基础逻辑。AI 生成的代码质量不错，基本能跑起来，但细节上还需要打磨。
三、用 Trae 微调细节
从 YouMind 导出代码后，我把项目放到了 Trae 里继续开发。Trae 作为一个 AI 原生的 IDE，在处理细节调整和数据处理这块效率很高。
主要做了这几件事：调整一些样式细节让视觉效果更舒服、处理各个 APP 年度报告的数据（标题、描述、截图等）、优化交互体验。有些地方 YouMind 生成的代码不够优雅，在 Trae 里可以快速迭代修正。
这种「YouMind 出框架 + Trae 精修」的组合还挺顺手的，各取所长。
因为有很多截图文件需要处理，我想让他自动获取某个文件夹下的文件，大致描述需求给 AI，他果然可以做到！！！
四、图片压缩：TinyPNG4Mac
做展示类网站，图片往往是大头。各家 APP 年度报告的截图加起来体积不小，直接用的话页面加载会很慢。
我用的是 TinyPNG4Mac 这个开源工具来批量压缩图片。它基于 TinyPNG 的压缩算法，支持拖拽批量处理，压缩效果很不错——肉眼几乎看不出画质损失，但文件体积能压掉 60-70%。关键是本地运行、免费、不限量，比在线工具方便多了。
如果你也有类似的图片压缩需求，推荐试试这个工具。
五、部署到 Cloudflare
最后一步是把网站部署上线。我选择了 Cloudflare Pages。
原因很简单：免费、速度快、配置简单。对于这种单页静态网站，Cloudflare Pages 几乎是最省心的选择。把代码放到 Github，Cloudflare 可以自动拉取最新版本构建部署，还自带 CDN 加速和 HTTPS，几分钟就能搞定。
整个流程下来，从想法到上线，工具链非常轻量：YouMind 规划生成 → Trae 微调打磨 → TinyPNG4Mac 压缩图片 → Cloudflare 部署上线。没有复杂的工程配置，没有繁琐的环境搭建，很适合这种「快速做个小东西」的场景。