不得不感慨 AI 的快速发展，为我等零代码经验的小白带来了很大的便利。

事情是这样的，摸鱼时看到了 Eallion 和 伏枥 两位大佬都给博客添加了热力图组件，心里痒痒，也想给自己的博客添加一个。Eallion 虽然撰写了相近的说明，但奈何大佬用的是 HUGO 框架，与我选择的 Astro 框架并不通用；伏枥大佬虽然与公开了 GitHub 仓库，并且使用的同样是 Astro 框架下的 Fuwari 主题，但对于零代码基础的我来说，仅靠阅读 GitHub 仓库中的代码就复现功能，简直难如登天。

于是我灵机一动，将 Eallion 大佬的教程链接和伏枥大佬的仓库链接，一同扔给了 Trae AI (没错，我电脑中甚至没有安装 VS Code) 请它帮我实现热力图的功能。

很快，两百多行的代码就写好了，根据提示一路确认代码变更，并执行命令，发现预览并不如 Trae AI 自己所说实现了热力图的功能，而是出现了报错。

1
Your site is configured with trailingSlash set to always . Do you want to go to /archive/ instead?
2

3
See the documentation for trailingSlash if you need help.

继续将错误提醒粘贴给它，很快便做出了修改。继续确认预览，发现功能确实已经实现，但并不美观。于是继续对话进行细节上的修改。

为保持与博客视觉风格统一，于是截图给它，并继续要求它参考“分类”与“标签”组件的标题样式进行修改。它便自行查阅起主题文件中关于“分类”及“标签”组件标题部分的代码，并进行了修改。

经检查确认，AI 生成的热力图月份与该月份所对应的 1 日，并不处于同一列，于是继续沟通修改。

修改后虽然实现了功能，但并不美观，于是细化对样式的要求。

自此，月份部分调整完毕，开始调整星期的部分

根据个人习惯，继续要求它进行修改，将一周的起始设置为星期日。

经检查日期排序逻辑正确，与日历对照正确，自此基础功能实现。但此时热力图位于整个组件的左侧，并不美观，于是继续优化。

与 Trae AI 明确了一下热力图中，每个格子深浅颜色的规则，并根据实际情况做了一些调整。按 AI 的规则，一天 7 篇文章，实在有些太水了。

经检查发现，热力图的文字不会随主题的明暗变化而改变，于是勒令修改。

自此，在 PC 端上的功能基本实现。参考 Eallion 大佬对不同移动端的适配，进行测试。发现 AI 果然没有为热力图进行多端的适配，于是命令其添加该功能。

修改后，热力图在移动端的显示又跑到了组件的左侧，于是继续调整。中途因未知原因中断失败了一次，应该是我没有确认修改导致的，但紧接着又重新进行了修改。

继续测试，发现移动端热力图会有上下移动的滚轴出现，于是继续命令其修改布局。

发现在移动端，显示一周七天的缩写有些拥挤。于是继续调整，在移动端隔行显示星期，优化阅读体验。

自此，我能想到的功能，已完整实现，完全依靠 Trae AI，全程零代码。AI 时代下，我等零代码基础的文科生也拥有了利用代码实现一些想法的可能，或许在未来，我也会尝试成为 AI 的产品经理，利用 AI 做一些小产品，而不仅仅局限于博客的功能中。