大家好，我是南月。

众所周知，我业余爱好是搞软件怀旧，在怀旧之余也会对软件进行分享，所以搭了一个下载站。

为了方便查看下载站内的软件，所以我做了一个静态页面当做导航，不过我个人不是产品，也不是设计，所以没有什么审美，做的比较简单，将就用着，就这么用了几年。

不过前段时间小米的MiMo Code发布了，在此我就想着利用AI把这个导航页重新制作一下，所以选了3个工具尝试一下各自的风格：MiMo Code、TREA SOLO、WPS灵犀Claw。

1.页面生成

因为我自己还是没有好想法，所以把自由基本都交给AI了，提示词：

参考https://oldsoft.sthmoon.com/navigate.html这个页面，这是一个下载站软件的导航页，我现在想基于这些内容制作一个风格更加现代化的网页，请帮我制作一个。顶部的横向菜单可以改为侧边纵向，最好是响应式页面。

（现在这个页面已经更新了，不是当时的老旧样式了）

TREA SOLO的Code模式会要求选择项目目录，然后开始制作，不过它没有直接替换我的navigate.html文件，而是新建了一个navigate_modern.html在项目文件夹下。

MiMo Code我没有截图，它是单独生成的页面，不过也叫navigate_modern.html。

WPS灵犀Claw也是在自己的任务空间下生成的页面，名字也叫navigate_modern.html。

灵犀生成的有一个问题，就是打开后没有菜单和软件列表，我让他重新维护了一下，发现它只是重新把被注释的加上去了，但是打开后显示正常了……

接下来发起一个投票（文末），看大家都喜欢哪一种风格：

1.MiMo Code ↑

2.TREA SOLO ↑

3.WPS灵犀Claw ↑

后来选择了TREA的，但是不够怀旧，我让他把主色调改为怀旧的蓝色，加上灵犀Claw生成的那种菜单后的数字统计，最后再应用一些像素风格，最后成了这样：

接下来是字体，微软雅黑可不是怀旧的字体。

2.生成CSS代码

我有一套NES（红白机）风格的css样式集，我只用了其中的像素字体，但是缺点是只有英文和数字，并且是woff2格式。

我在网上找了一个带中文的像素字体，ttf格式，为了和其他字体统一我打算将其转换为woff2格式，试探了一下灵犀果然它可以。

转换成功，不过字体依旧高达9.17MB（我服务器只是5Mbps带宽的小水管），意味着网页打开后等字体加载还需要近20秒。

在NES.css中字体是通过google在线加载的，几乎访问不通，所以需要把字体和css文件放到本地，在线字体css打开后是这样的（字体URL已经被我替换为本地路径），中文字体本来照着改一下就行，不过这个unicode-range难倒我了，我不知道这个字体支持的unicode范围。

最后还是靠WPS灵犀Claw：我把css中一段字体代码丢给他，再把要读取的字体文件上传给灵犀，让他分析仔细信息后按这个格式生成css，从执行中的记录看灵犀Claw是能查到Unicode范围信息的。

最后它直接将css代码生成了。

打开后如上，不知道为啥这些范围不能放在一条内，然后尝试把css加载到页面内，并修改相关字体，果然可以用，无需在本机提前安装字体：

感觉不错，以前旧的页面设置菜单、悬停高亮、列表、分组名、调样式调布局等自己搞了大半天，而让AI处理生成只用了不到5分钟（3个页面版本、转换字体格式、生成css），加上我自己手动修改页面的字体和大小，总共用了不到20分钟。

经过这次体验，我发现虽然WPS灵犀Claw不是主要定位Code的AI工具，开发系统级程序可能效率低一些，但是生成这种比较简单的代码，灵犀Claw的速度非常快，同时还能进行辅助工作（比如字体转换）。

－－＞南月的发帖记录和回顾合集＜－－

https://www.kdocs.cn/l/ctYBtxhDgFwQ