Vibe Coding，也就是歪脖抠腚这件事情，随着 AI 的发展，已经变得跟吃饭一样简单，谁都可以拿一个 Coding Agent 生成一个网站。

当然，这些绝大部分都是只有前端的网页，后端的话要求还稍微高一些，会涉及到最后的环境依赖搭建和部署。

不过也不是什么难事，交给 Agent 一样可以搞定后端。排除掉后端不讲，我们现在做出来的前端网页，普遍面临一个千篇一律、难看的问题。

归根结底是 AI 模型之前用了太多的模板去训练，导致出来的效果一看就是套模板的，卡片味很浓，还有狗屁膏药一样的 AI 紫渐变色和假高级感。

所以，审美这件事情，咱们得交给专业的人来做。或许你也有审美，但那都是看过了很多美的东西，或者做过了很多美的作品，培养起来的。

今天给大家分享的是一个 Skill 技能，可以说是 GitHub 上目前最火的，有关网页设计提升审美的 Skill。类似的搭配技能还有很多，以后老马慢慢介绍。

01 · TASTE SKILL

这个 Skill 是什么？

这个 Skill 叫 taste-skill，品味审美技能。

它相当于给你的 AI Agent 加上一套前端审美增强包。以后做出来的网页网站，再也不会撞脸一样的丑，也不会缺乏美感。

taste-skill 的开源地址如下：
github.com/leonxlnx/taste-skill

02 · INSTALL

安装方式

安装这个 Skill 也比较简单，直接把下面的命令发给你的 Agent 就行。Agent 可以是我们常用的 Hermes、OpenClaw、WorkBuddy、TraeWork、Codex 等等。

npx skills add Leonxlnx/taste-skill

网络问题安装不了的，可以给老马的公众号发送“github 访问”，然后根据回复去微软应用商店下载工具即可。

03 · FEATURES

taste-skill 的核心功能

接着聊这个 Skill 的核心功能，老马根据官方的介绍文档整理了一下。taste-skill 目前最新的版本是 V2。

01、通用前端设计 Skill：默认 design-taste-frontend，用于 landing page、作品集、官网改版。

02、三档设计旋钮：DESIGN_VARIANCE、MOTION_INTENSITY、VISUAL_DENSITY，控制布局实验性、动效强度、信息密度。

03、Brief 推理：先判断页面类型、目标受众、视觉气质、约束，再决定设计方向。

04、设计系统映射：遇到 Material、Fluent、Carbon、Polaris、Atlassian、Primer、GOV.UK、USWDS 等场景，要求优先使用官方设计系统。

05、AI 味检测和禁令：禁止常见 AI 设计套路，比如泛滥的紫蓝渐变、三等分功能卡、装饰性版本号、假产品 UI、无意义滚动提示、滥用分隔线等。

06、动效规范：推荐 Motion 或 GSAP，并给出 sticky stack、horizontal pan、scroll reveal 等模式约束。

07、重设计协议：面向旧项目先审计，再决定保留、演进还是大改，强调不随便动 URL、导航、表单字段、品牌和法律文案。

08、最终交付检查表：从暗色模式、按钮对比度、hero 可视区、移动端折叠、减少动效、图片真实度到 Core Web Vitals 都有检查项。

09、多种专项 Skill：包括 gpt-taste、image-to-code、
redesign-existing-projects、minimalist-ui、industrial-brutalist-ui、high-end-visual-design、brandkit 等。

10、图像生成链路：不仅能写代码，也有 web、mobile、brandkit 的图像参考生成 Skill，用于先产出视觉稿，再交给 Codex、Cursor、Claude Code 实现。

看不懂这些技术术语没有关系，一个好用的 Skill，关键是装起来试试。实际做出来的效果符不符合自己的预期，才是最重要的。

04 · DEMO

用 Codex 跑一个新中式家具博物馆

下面老马就使用 Codex 进行安装，把前面的命令发送过去，很快就安装完毕了：

接下来使用这个 Skill，设计一个新中式风格的家具博物馆官网吧。好像之前都是在做什么敦煌、七星堆的主题。

然后是动效要求大气一点，极简留白、大面积画面元素，大概这样的一句话提示词发过去：

这里补充一个细节点，提示词中老马要求网页上的图片和图标不要拿网络上现成的素材，而是要根据整体风格去重新生成。

那就会涉及到 AI 生图模型对图片素材的生成。Codex 它是自带 imagen 的，会使用 GPT Image2 模型去生成。

有些 Agent 不支持 AI 生图，或者没有接入生图模型的，可能这类要求你就得自行调整一下，或者自行接入生图模型，解决方案可以跟你的 Agent 去探讨。

经过一次的调整，因为第一版生成的网页留白的地方太多，老马又让 Agent 微调了一下，最终的效果如下图：

怎么样，是不是有点审美和品味。一方面是 Skill 的标准约束，另外一方面加上 Codex 的生图，搭配起来就可以做出不错的网页。

∞ · POSTSCRIPT

最后说一句

好了，以上就是今天的分享，欢迎关注、点赞、转发一键三连。

有任何问题和需求，请在评论区留言，回见！