![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96"><rect fill-opacity="0"/></svg>){kind=small}
![distorted_face](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72"><rect fill-opacity="0"/></svg>){kind=small}
最近了解到几款还不错的skill可以极大的提升前端开发的体验，分别是
- ui-ux-pro-max（用于前端作为设计主提示，给CLI工具的设计书）;
- agentation（一个批注的小插件，可以在前端中直接进行批注，然后让CLI工具“指哪打哪”，可以绕开使用视觉模型和解决模型理解不清需求的困难）;
- validating-performance-budgets（指导CLI来评估前端性能并用多种方法进行性能回归优化）
现在就用这几个小工具来快速vibe一个论坛前端试试水。
所提到的skill都可以在skillsmp找到，其中agentation（我觉得比较好玩的一个工具，如下图）
可以去他们的官网查看简洁的安装指令和使用教程，貌似仓库也是开源的：https://agentation.dev
为了体现出Skill对模型能力的提升，我们使用比较廉价且不自带视觉的模型来进行本次任务：GLM Coding Plan Lite包月套餐 里的GLM-4.7，分别看看它在不使用该这一串Skill和使用这一串Skill下分别能做出什么样的前端。
同时，为了避免在未使用skill时缺乏必要流程对比不公平，为其提示词中加上需要做的附加步骤，保证两次测试的迭代流程是相同的。
无Skill
prompt:
任务
制作一个糅合Discourse+X功能性的论坛前端，需要配备i18n和深浅色主题切换的功能；
步骤
- 使用ask user question工具向我提问所需要的技术栈、功能、前端风格等一系列信息确认开发需求；
- 根据我的开发需求完成初步设计后停止工作；
- 停止开发，通知我进行初步验收；
- 在初步验收及按我的进一步要求调整完成后，优化性能，通知我再次验收。
下面是claudecode通过ask user question向我提问的内容和我做出的回答，如果对照组提出相同问题，将尽量选择相同选项：
CC开发中…GLM Coding Plan太慢了，先打会终末地）
出师不利第一轮跑完就报错了，但是问题不大（毕竟这种简单的提示词本就不指望一次出），丢给CC修一修）：
又搞了好几回总算是修好了）
功能都是全面的这个不用说，但是这个前端样式嘛，还是AI神秘超绝蓝紫色渐变，没眼看；
然后来跑个lighthouse看看分数如何：
吓哭了，性能分数来到惊人的21分）
我们还是来看看远处的有Skill吧
有Skill
prompt:
任务
制作一个糅合Discourse+X功能性的论坛前端，需要配备i18n和深浅色主题切换的功能；
步骤
- 使用ask user question工具向我提问所需要的技术栈、功能、前端风格等一系列信息确认开发需求；
- 根据我的开发需求，使用ui ux pro max匹配前端，并且完成初步设计后停止工作；
- 向项目中激活agentation后停止开发，通知我进行初步验收；
- 在初步验收及调整完成后，我会给你明确指令开始审计，此时调用validating-performance-budgets开始迭代，直到手机/电脑双端分数各项都达到满分时，通知我验收。
依旧陈列提问和回答：
路由管理忘记截了
这次提问多了不少，依旧同问题保持和上次选项差不多的情况下随便乱选
后续也是很流畅地启动了我们的ui ux pro max skill来进行前端设计，并且加载了agentation组件：
初步设计结果如下（虽然有了skill的加持，还是避免不了AI做玻璃拟态风格的时候的毛病啊）：
下面我们用agentation来对页面做一些批注，进行进一步迭代：
我们看到的数字就是有批注的标志，圆形的是控件批注，方形的是区域批注，用自然语言描述即可，比如说首次开发会发现它的内容和页脚是打架的，就可以定位到页脚的元素框选并且批注注明这个情况让CLI修改；
批注完成后点击红框里的复制即可粘贴给CC指哪打哪
经过一番批注修改后，能达到如下的效果：
下面来跑一下lighthouse：
虽然有chrome扩展没关的影响，这个分数依旧惊人啊，完全交给ai写出来的前端的通病，尤其是用廉价模型，下面就要用到我们的validating-performance-budgets来优化了：
这个skill会模拟请求和处理阻塞和压缩js，使得页面性能整体优化不少;
这次测的时候想起来要用无痕了）看看优化完以后的lighthouse分数，算是提高了不少:
截图呈现一下最后的前端效果吧，感觉用GLM做到这个前端还是很不错的：
实测这个前端的工作流在Codex里面可以产出非常精致有设计感的前端，但是codex太慢了太苛刻了，在做性能优化的时候会一直做到全满分才收手）
没有前端设计经验也没有比较强大模型的感兴趣的佬可以去试试这套流程，说不定会得到一些让你感到很惊喜的前端设计
![:tieba_087:](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="90" height="90"><rect fill-opacity="0"/></svg> ":tieba_087:"){kind=small}
