AI工具流：小网站速成记

年前做了一个小网站，专门用来展示各大 APP 的年度报告。今天来复盘一下整个制作流程，顺便分享下我用到的工具链。

俩月过去了，我终于想起来写复盘了。

年前做了一个小网站，专门用来展示各大 APP 的年度报告。

每到年底年初，各家产品都会推出自己的年度总结，有些做得特别精致，有些创意十足，看到老三分享在语雀上，但是涉及到国外的软件老是被屏蔽，我就想着干脆把这些案例做个网页来展示。

今天来复盘一下整个制作流程，顺便分享下我用到的工具链。

从 YouMind 开始规划

项目的起点是在 YouMind 里完成的。我先把想法和大致的页面结构梳理清楚，然后直接让 AI 帮我生成代码。

YouMind 有一点特别适合做这种小项目——它最终只输出一个 index.html 文件。所有的 HTML、CSS、JavaScript 都打包在一起，不需要搭建什么复杂的工程环境，也不用配置打包工具。对于这种展示型的静态页面，一个文件搞定一切，轻便得很。

如果你想在其他编辑器里输出一个 html 文件，可以增加这段提示词

提供完整可运行的单一HTML文件，包含所有必要的CSS和JavaScript

在 YouMind 里我主要完成了页面的整体框架搭建：布局结构、卡片样式、响应式适配的基础逻辑。AI 生成的代码质量不错，基本能跑起来，但细节上还需要打磨。

从 YouMind 导出代码后，我把项目放到了 Trae 里继续开发。Trae 作为一个 AI 原生的 IDE，在处理细节调整和数据处理这块效率很高。

主要做了这几件事：调整一些样式细节让视觉效果更舒服、处理各个 APP 年度报告的数据（标题、描述、截图等）、优化交互体验。有些地方 YouMind 生成的代码不够优雅，在 Trae 里可以快速迭代修正。

这种「YouMind 出框架 + Trae 精修」的组合还挺顺手的，各取所长。

因为有很多截图文件需要处理，我想让他自动获取某个文件夹下的文件，大致描述需求给 AI，他果然可以做到！！！

做展示类网站，图片往往是大头。各家 APP 年度报告的截图加起来体积不小，直接用的话页面加载会很慢。

我用的是 TinyPNG4Mac 这个开源工具来批量压缩图片。它基于 TinyPNG 的压缩算法，支持拖拽批量处理，压缩效果很不错——肉眼几乎看不出画质损失，但文件体积能压掉 60-70%。关键是本地运行、免费、不限量，比在线工具方便多了。

如果你也有类似的图片压缩需求，推荐试试这个工具。

最后一步是把网站部署上线。我选择了 Cloudflare Pages。

原因很简单：免费、速度快、配置简单。对于这种单页静态网站，Cloudflare Pages 几乎是最省心的选择。把代码放到 Github，Cloudflare 可以自动拉取最新版本构建部署，还自带 CDN 加速和 HTTPS，几分钟就能搞定。

整个流程下来，从想法到上线，工具链非常轻量：YouMind 规划生成 → Trae 微调打磨 → TinyPNG4Mac 压缩图片 → Cloudflare 部署上线。没有复杂的工程配置，没有繁琐的环境搭建，很适合这种「快速做个小东西」的场景。

回顾这次开发，最大的感受是：做小项目不需要大动干戈。选对工具、保持轻量，反而能更专注在内容本身。

YouMind 的单文件输出让我省去了很多工程化的烦恼，Trae 的 AI 能力让细节调整变得高效，TinyPNG4Mac 解决了图片体积问题，Cloudflare 让部署变得无脑简单。这套组合拳打下来，整个项目从 0 到上线可能也就花了一个下午的时间。

如果你也想做类似的小型展示网站，这个工作流可以参考一下。