大家好,我是大骏。
最近谷歌新发布的Gemini3一度令我爱不释手。
如果有统计每天使用网页时间的功能的话,Gemini在我这儿能排第一。
无论是写前端代码、互动游戏、生成图片,还是日常的聊天问答,Gemini3的输出效果都令我非常满意。
但可能是日常使用时间太长,我开始对Gemini的原生UI有了很多不满。
1、字体太小了,长时间阅读很累
(能不能自由调节字体大小)
2、排版太挤了,一眼看过去段落全挤在一起
(能不能加大行间距)
3、背景太素了,也不好看啊
(能不能换成护眼的颜色)
然而,要问什么东西能像开启了上帝模式一样,能自由改造/美化网页的,那绝对油猴脚本莫属了。
我之前发了一个别再让浏览器“欺负”你了!解锁油猴脚本,99%的上网难题都能一键搞定,教大家如何安装油猴脚本,如何用AI来编写油猴脚本。
当时让Deepseek来写代码,实操生成了一个「网页文字高亮与收藏工具」的油猴脚本,可以随时在网页上划词高亮文字,并且可以在悬浮窗里查看和管理当前网页下高亮了的内容。
现在,我在好奇,Gemini3本身有着强大的编码能力,那拿它来做一个优化它自己网页的脚本会是什么样的。
一开始我的需求很简单,
就是要求脚本能优化Gemini的输出内容的样式就行。
优化的结果就是让我读起来能够更直观,更舒服。
由于当时,我也不知道自己想要的那种“舒服”到底是什么样的,
索性,直接提要求,先看看它生成出来是什么样的,
然后再去优化迭代。
结果第一次生成出来的代码,根本不生效,跟原来的“丑UI”一点区别都没有。
我就直接把我的主观感受,和新的想法继续发给它。
当时,想到了公众号的排版,就是那种把内容分成一块儿一块儿的。
效果就变了,变成了下面这种,真的就像在读某些公众号似的。
加粗的字变成了荧光笔的样式,小标题也做了装饰。
但是,我还是不满意,文字大小和背景都还改不了。
于是,我又发了一次感受(这会儿还没法儿提出什么建议)。
效果有了再一次调整。我还不满意。
这时候,我突然有了一个想法。
要说读起来舒服,有一个产品做的阅读体验就很好,那就是「微信读书」。
我们尝试让它致敬微信读书,学习它这些阅读功能的设计。
结果却翻车了,这次只是更改了大部分的背景的颜色,好多元素的背景都没有同步,而且右下角悬浮按钮点了也没反应。
接着,我指出了悬浮按钮点了没反应的问题,又截图了微信读书的设置界面供它参考,并且要求增加新的字体。
思源黑体、思源宋体、霞鹜文楷,这几个都是我平常比较喜欢的字体。
这下终于能正常打开阅读设置了,而且和微信读书的设置神似。
可惜页面上还是有几个顽固份子,不参与大改造。这就导致感觉更丑了。
这个时候最好的方法,就是给Gemini提供这些顽固份子的“身份ID”,
在网页设计中,为了方便管理不同元素(文字、图片、链接)的样式,
通常会给这些元素取一个不同的名字,比如:
以下图中,箭头所指的这个设置按钮,就有一个独特的名字,也就是class=
后面的内容,mat-mdc-button-touch-target
mat-mdc-button-touch-target 所对应的样式。
我们把上面的那些不听话的元素都给它找出来。
先在网页任意位置右键,点“检查”,或者“审查元素”
然后会跳出来一个框,这个在浏览器上被叫做开发者工具,
点一下框框左上角的这个图标,然后再用鼠标点一下对应的元素,就会自动跳转到那个元素的代码上。
我们鼠标在点击那个图标后移动到网页上就会发现有个东西会自动框选我们鼠标所在的网页上的元素,
我点左边这个侧边栏,点了之后底下这行被选中且折叠了的代码,就是这个侧边栏的代码,右边是它的样式,
我们右键复制它这个代码,给Gemini。
这就解决了这个问题,接着,我又进行了一波修改。
最终,成了截图上大家看到的这种样式。
是不是读起来清爽很多了。
目前大家已经可以直接安装使用了~
安装地址 (Greasy Fork):
GitHub 开源:github.com/JackeyCloud…
如果不晓得怎么安装使用,可以看看我之前发的这一篇教程别再让浏览器“欺负”你了!解锁油猴脚本,99%的上网难题都能一键搞定。
到这里,你其实会发现,这个方法适用于大部分的网页。
如果有一个你经常读的网页,你对它的样式很不满,那你也可以试试,用同样的方法,
做一个自己的网页美化脚本~
以上,既然看到这里了,如果觉得不错,随手点个赞、在看、转发三连吧,如果想第一时间收到推送,也可以给我个星标⭐~谢谢你看我的文章,我们,下次再见。
>/ 作者:大骏的百宝箱