把信息密度调到9之后界面变成了Bloomberg终端：三个参数治好了AI的三等宽卡片

在短短3个月当中，这个项目的 stars 数量从1524个攀升到22000多个，增长了14倍。这样的增长速度在 GitHub 上面并不常见。

项目取名 Taste-Skill，标语很直接地写着 gives your AI good taste。

它做的事情理解起来很简单：就是让 AI 编码助手所生成的前端界面，不再显得那么模板化。

在使用 Cursor 或者 Claude Code 去写前端代码的时候，你大概率也碰到过这种尴尬的局面。功能本身其实没什么问题，但居中的 Hero，三等宽卡片，紫蓝渐变，再配上 Inter 字体，这几样一凑到一起，总会让人有种似曾相识的感觉。

效果对比

工具网站效果PK：不用 Skill 的情况下，是一个标准的4列等宽卡片网格，主要色调为紫色渐变，鼠标悬停的时候会向上浮动4个像素。这就是 AI 前端代码的标准模板，你在网上搜一百个 AI 工具导航，大概率长得差不多。把 Skill 加上以后，布局完全不同。没有采用无聊的等宽网格，而是换了非对称布局，卡片宽窄交替，每个区块的节奏感都不一样。这种设计语言你经常能在 Apple 和 Stripe 的官网上看到，但 AI 在默认状态下是绝对生成不出这种效果的。

聊天界面PK：不用 Skill 的情况下，得到的界面是标准的微信聊天克隆版本。方块头像当中分别写着助和我，绿色气泡的圆角大小完全统一，底部则是一个8列一共40个 emoji 的表情面板。用了 Skill 后，头像换成了真实的圆角图片，聊天对象有名字，有在线状态，连消息气泡也用了非对称圆角。整体观感会更自然，不再是一眼 AI 模板的味道。

产品介绍页横向PK：提示词全部用"写一个产品关于健身App的介绍页，配色要亮眼能够吸引人，要有一点动画和光效，有立体感"。不借助 Skill 直接去生成，出来的效果基本能拿来用，但很明显还停留在应付作业那个水准上。用 Taste Skill 之后所得到的效果是所有方案当中最均衡也最稳妥的一个，它把暖粉、珊瑚以及金色渐变结合起来，再配上玻璃卡片和柔光背景，让整体画面看上去非常舒服。借助 Frontend-Design 来做的话，出去的东西带有设计师的那种味道，舞台感表现得很出色。这说明 Taste Skill 并不是最炸裂的那个，但它在综合表现方面是最稳当的，不太容易翻车。

为什么AI生成的界面总是那么普通

开发者社区最近出来一个新词 AI slop。意思是 AI 生成的 UI 正在越长越像，Inter 字体，居中的 hero，三等宽卡片，紫蓝渐变。其背后的缘由很简单，AI 在预测最可能出现的代码，而不是最好看的设计。大部分项目都在用 Inter，AI 也就跟着使用 Inter；大部分页面采用居中布局，AI 也就跟着居中。AI 给出了多数的设计选择，但带来的后果就是平庸。

另外每一次会话结束以后，你之前给出的设计要求就跟着消失了。到了下一个项目，AI 又会返回到那些安全的选择。

taste-skill怎么解决

它凭借三个参数来控制设计风格：

01 DESIGN_VARIANCE，布局变化程度，默认8：这个参数首要负责管理布局风格。数值调低一点，界面就会更稳、更常规；数值调高一点，设计感会变得更突出。像设置为3，基本就是大家熟悉的三等宽卡片。调到8，布局就会更灵活，重点内容放大来展示，次要信息则集中排布，不会所有东西都挤成一个样子。

02 MOTION_INTENSITY，动画强度，默认6：这个参数是来控制动画效果的。数值越高，界面动起来的感觉就越明显。像设置为8，极有可能加入滚动触发动画，还有按钮跟随鼠标的反馈等效果。实现方式也会把性能放在前面去考虑，不至于动画一多就卡。

03 VISUAL_DENSITY，信息密度，默认4：这个参数决定界面是走清爽路线还是信息流路线。数值偏低的时候留白会更多，看下来就比较轻松；数值偏高的时候，同一屏里面会塞进更多内容。要是调到9，风格会有点像 Bloomberg 终端那种感觉，也就是信息很密集，卡片会减少，更多地用分隔线来整理内容，数字也会换成等宽字体，方便快速扫数据。

如何使用

打开电脑上的终端窗口，随后执行下面这条命令：

npx skills add https://github.com/Leonxlnx/taste-skill

命令执行完毕并且没有报错，它就会自动把 SKILL.md 文件放置到你的项目目录里面。很多支持 Skills 的 AI 编码工具，比如 Cursor、Claude Code、Codex、Windsurf 以及 GitHub Copilot，一般都会自动检测到这个文件，不需要你再额外去做配置工作。

一旦安装好了，调用它的方式也相当简单，直接在对话界面里面告诉 AI 你打算要做的事情即可：

帮我做一个 SaaS 官网首页，风格高级一点，避免模板感。

另外需要提一点，这个 skill 不绑定任何特定的前端框架，它重点关注的是设计层面。如果设计好了，用 React、Vue 还是 Svelte，都是可以的。

注意事项

它的设计规则全都包含在 SKILL.md 文件里面，不同模型跑出来的效果大概率都会不一样，关键还是看 AI 能不能真正把这些规则吃透。更直白地说，选用什么模型相当关键，如果想要获得好效果，还是应该挑选那些排名靠前的大模型。

以前要用 AI 写前端，要不断跟 AI 说不要用三等宽、不要太模板化。装了 Taste-Skill 之后，不需要每次都跟 AI 说这些，一个 SKILL.md 全部搞定，节约了不少时间和精力。经常用 Cursor 或 Claude Code 写前端的朋友，推荐试试。

项目基于 MIT 协议开放。

开源地址：https://github.com/Leonxlnx/taste-skill