### [发现神仙工作流！教你用 AI 低成本快速开发网站](https://www.qxunye.com/article/1400)

**Published:** 2026-04-15T01:45:23

**Author:** 小野

**Excerpt:** 一、全文速览图 俩月过去了，我终于想起来写复盘了。 年前做了一个小网站，专门用来展示各大 APP 的年度报告。 每到年底年初，各家产品都会推出自己的年度总结，有些做得特别精致，有些创意十足，看到老三分享在语雀上，但是涉及到国外的软件老是被屏

### 一、全文速览图

![发现神仙工作流！教你用 AI 低成本快速开发网站](https://image.uisdc.com/wp-content/uploads/2026/04/Gemini_Generated_Image_uc7duluc7duluc7d.webp)

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

![发现神仙工作流！教你用 AI 低成本快速开发网站](https://image.uisdc.com/wp-content/uploads/2026/04/4114a9f3440c0846e7d9f10bf916def6.webp)

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

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

[](https://www.uisdc.com/2025-wrap-up-gallery)

[](https://www.uisdc.com/2025-wrap-up-gallery)

## [2025年度报告设计大比拼！这30款 App，谁最懂你的这一年？](https://www.uisdc.com/2025-wrap-up-gallery)

[2025 年悄然收尾，当我们还在忙碌中奔走，时间的河流已经悄悄翻过一页。阅读文章 _\>_](https://www.uisdc.com/2025-wrap-up-gallery)

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

### 二、从 YouMind 开始规划

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

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

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

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

在 YouMind 里我主要完成了页面的整体框架搭建：布局结构、卡片样式、[响应式](https://www.uisdc.com/tag/%e5%93%8d%e5%ba%94%e5%bc%8f)适配的基础逻辑。AI 生成的代码质量不错，基本能跑起来，但细节上还需要打磨。

![发现神仙工作流！教你用 AI 低成本快速开发网站](https://image.uisdc.com/wp-content/uploads/2026/04/232d9ae4ec1b51700ec63d20f9073315.webp)

### 三、用 Trae 微调细节

从 YouMind 导出代码后，我把项目放到了 Trae 里继续开发。[Trae](https://www.uisdc.com/tag/trae) 作为一个 AI 原生的 IDE，在处理细节调整和数据处理这块效率很高。

![发现神仙工作流！教你用 AI 低成本快速开发网站](https://image.uisdc.com/wp-content/uploads/2026/04/85826bb633632ff3b71055bff8708fa8.webp)

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

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

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

![发现神仙工作流！教你用 AI 低成本快速开发网站](https://image.uisdc.com/wp-content/uploads/2026/04/9c1fa0a7299f640fcb82e4ac2152bcb6.webp)

### 四、图片压缩：TinyPNG4Mac

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

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

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

![发现神仙工作流！教你用 AI 低成本快速开发网站](https://image.uisdc.com/wp-content/uploads/2026/04/a3e32938be89cb3036f9bf07222da88a.webp)

### 五、部署到 Cloudflare

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

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

![发现神仙工作流！教你用 AI 低成本快速开发网站](https://image.uisdc.com/wp-content/uploads/2026/04/1a924142c2fb07f8237e21890fe4d231.webp)

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

**Tags:** AIGC, Trae, YouMind, 网站设计

**Categories:** AIGC, AI创作

---