📌 项目地址：Leonxlnx/taste-skill | ⭐ 53,754 颗星 | 🔧 Shell | 📜 未标注

痛点：AI做的前端页面，业务对但看着难受

用过AI生成前端的人都有体会：API调用没错，逻辑跑通，但页面怎么看怎么“普通”。字体大小似是而非，间距一视同仁，颜色灰扑扑，动效要么没有要么乱跳。调整几轮后，padding翻倍、标题加粗，布局就塌了。

这不是AI智商不够，是训练数据里平庸设计占了绝大多数。AI默认输出的是“大多数人这么写”，不是“这么写好看”。

taste-skill 做了什么

taste-skill 不是CSS框架，也不是设计规范文档。它借助Vercel的Agent Skills生态工作。每个skill是一个SKILL.md文件，里面写了一套硬规则：布局怎么分视觉权重、间距怎么呼吸、动效怎么克制、排版怎么分层。AI生成代码时，不再凭训练数据的“平均审美”发挥，而是按这套规则执行。

项目分两类skill：

• Implementation skills：输出可直接用的代码。
• Image-generation skills：输出参考图（用于ChatGPT Images、Midjourney等）。

你可以用CLI安装，也可以直接复制SKILL.md的内容粘贴到AI对话里。

安装很简单

# 安装全部技能
npx skills add https://github.com/Leonxlnx/taste-skill
只安装核心v2
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

如果用ChatGPT或Claude，直接复制对应SKILL.md的内容进去就行。

v2升级了什么

默认skill design-taste-frontend 现在是v2实验版。README说是“substantial rewrite”。我实际看了下，v2比v1具体在几方面：

• 布局：定义了视觉权重分层。主卡片字号更大、颜色更深；次要卡片用浅灰背景。
• 动效：限制动画幅度。hover只有0.2s ease-out淡入，没有弹跳或花哨效果。
• 间距：不再均匀等距，而是根据内容密度调整呼吸感。密集排版区域间距小，大图区域留白多。

如果你已经装了v1，重跑相同命令自动升级到v2。v1的安装名是 design-taste-frontend-v1，想锁在老版本可以用：

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend-v1"

v1和v2的完整差异在CHANGELOG.md里。

实际效果：我试了个数据仪表盘

我用一个监控仪表盘试了下：8个监控卡片 + 1个大盘图。不装taste-skill，AI生成的页面卡片一样大、颜色一样、间距一样，表格行hover没有反馈。

装了 design-taste-frontend 后重新生成，几个关键变化：

• 卡片按重要性分了两级，主卡片深色背景白色文字，次卡片浅灰背景。
• 表格行hover有0.2s淡入，不刺眼。
• 左侧卡片排列紧凑，右侧大图周围留白大，视觉上不挤。

我手动改了两个颜色值（把主色从蓝改成品牌色），布局和间距没再动过。原来调UI要七八轮，这次两三轮就定了。

但这不是魔法。像素级控制（比如精确边距、自定义字体）仍然要手写CSS。它只是让AI绕开了“默认模板”的大坑，把审美下限拉高。

技能列表

完整列表和说明在项目README里，建议直接去仓库看。

安装速查

# 核心v2（推荐）
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
锁v1
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend-v1"
安装所有skill
npx skills add https://github.com/Leonxlnx/taste-skill

免责声明

项目没有官方代币、加密货币。任何使用作者名字、项目名的代币都与项目无关。