个人博客首页优化指南：Stitch、Figma、Trae、Claude 实践与对比

潦草的首页

这是博客原来的首页，非常简陋。就像人出门都要打扮，网站的首页也应该让人感到舒服，这样才能吸引更多的人阅读我的文章。

因此，我决定优化我的博客首页，并利用 AI 工具来给我提效和提升审美。

我们先让 Stitch 标准模式为我们生成博客首页的预览图，效果如下：

生成预览图的时候要注意，有任何要求最好在第一次对话中就提及，因为标准模式下的 Gemini 2.5 flash 非常不听话。例如刚开始的时候我生成的博客首页中，文章是带有封面图的，我多次命令它去掉封面图/缩略图功能，但都失败了。

接着我们把设计稿复制进 Figma，在 Trae 中安装 Figma MCP 服务（这部分 Trae 官方有发，直接问 AI 也问的到，这里不再赘述），叫 Trae 根据设计稿来还原前端页面。经过三轮对话效果如下：

本来以为有设计稿能很轻松还原的，没想到还原度也就百分之五十吧，很多地方还是需要自己调整。

这次尝试让 Stitch 实验模式为我们生成预览图，不过要注意的是，实验模式下生成的预览图是无法转成 Figma 的，所以待会我们只能把图片传给 Trae。

下载设计稿，把设计稿传给 trae，让它还原设计稿的内容。

经过两轮对话效果如下：

可以看到已经较为接近设计稿了，接下来就是对一些小的地方样式进行小修小补。

既然前面使用预览图的效果那么好，那我们也来试试在标准模式下使用图片而不是 Figma，看看是不是在 Figma 上出现了问题。经过三轮对话效果如下：

还原度会比用 Figma 高一些，看起来先前确实是 Figma 的步骤出了一些问题。

如果让 Trae 和 Claude 自由发挥呢？我将以下提示词提交给 Trae。

优化我的博客首页设计，使其更加美观、专业且用户友好。包括改进布局、配色方案、字体选择以及整体视觉层次，同时确保页面加载速度和响应式设计。重点提升用户体验和内容可读性。

生成效果如上。可以看到初次对话样式上就有不错的效果，动效也比较丰富。但是看起来太花哨了，我也更希望用户开屏就能看到我的文章。

Stitch 标准模式 + Figma + Trae + Claude：这是最接近真实开发流程的方法，如果要在一个内容驱动型的网站，例如产品官网之类的项目中使用 AI coding，Figma 也是必须的，这样才能获取到需要展示的图片或其他素材；但是目前存在 Stitch 模型不聪明、大模型理解 Figma 能力不足等问题，初步推测原因可能有：
- Figma 的元素没有使用语义化的命名，而是使用 Group 等模糊的字眼；
- Trae 本身的提示词不够好；
Stitch 实验模式 + Trae + Claude / Stitch 标准模式 + Trae + Claude：开发低素材密度的项目时还原度高。更便捷，少用了一个工具；但是可预见的在高素材密度的项目中将难以发挥，因为获取不到原始素材。
Trae + Claude：使用工具最少，最便捷。样式出错少，动效好；但是审美上不如专业生成设计稿的大模型。

综合来看对于个人博客项目，使用 Stitch 实验模式 + Trae + Claude 是较好的，综合了投入和产出。