文章

记录一次用Skill给博客做的前端美化

36

这两天逛Github,发现一个不错的Skill仓库,antigravity-awesome-skills,这里推荐下。

ScreenShot_2026-03-02_174900_043.png

该仓库收集了900余个来自Anthropic 和 Vercel 的官方Skill,均为经过实战检验的高性能 AI 智能体技能。

为了测试一下这个技能包的效果,我挑选了其中的 frontend-design 技能对博客的前端进行改造。

这个博客是完全用Qoder生成的,UI部分一直维持第一版时的设计风格,没怎么修改过。怎么说呢,能看但不美观,那个时候的AI风格输出大致也就是这个意思。

将这个前端设计的Skill目录(frontend-design)拷贝到 C:\Users\xxxx\.qoder\skills (xxxx为本机用户名称)中,重启Qoder,在对话窗口输入 / 就能看到这个全局技能,在后续的对话中选中该技能(或者让Agent被动触发)即可。

ScreenShot_2026-03-02_175715_786.png

剩下的就很简单了,我先让Agent创建一个demo目录,用Skill在这个目录下生成各个页面的原型设计,用了大约5轮对话微调Skill输出的原型设计文件。然后开启一个新的对话,让Agent根据demo目录下的原型设计正式进行前端优化,效果就是目前这个样子了,过去访问过这个博客的朋友可能因为浏览器缓存的原因会导致页面显示不正常,用Ctrl+F5强制刷新缓存就可以了,个人感觉Skill效果还是很不错的,页面效果比原来美观多了。

另外,这个技能包覆盖面很全,从前后端到运维,各个方面均有不错的Skill模板复用,并且这个仓库更新非常活跃,值得长期关注!

正在加载评论...

发表评论