用 Leonxlnx/taste-skill 给 AI 前端降降味

最近用 AI 写前端的人，大概率都见过一种页面：深色背景、紫蓝渐变、三张功能卡片、居中的大标题、右上角几个假状态点。代码没毛病，响应式也能跑，但就是像从同一个模版里倒出来的。

Leonxlnx/taste-skill 做的事情挺直接：它不是再给你一套组件，也不是替你选 Tailwind、React 或 Vue，而是把一套前端审美和验收规则写进 SKILL.md，让 AI 编码工具在动手前先读规则。你可以把它理解成给 Codex、Claude Code、Cursor、v0 这类工具装了一个“设计审稿人”。

先看它到底是什么

官方 README 里把 Taste Skill 定位成 “The Anti-Slop Frontend Framework for AI Agents”。关键词不是 framework，而是 anti-slop。它想处理的不是工程框架问题，而是 AI 前端常见的“廉价感”。

它的默认技能叫：

design-taste-frontend

安装命令是：

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

也可以安装整个仓库：

npx skills add Leonxlnx/taste-skill

如果你的工具不支持 npx skills add，也可以把仓库里的 skills/taste-skill/SKILL.md 复制到项目或对话上下文里。它本质上是一份给 Agent 读的指令文件。

官方仓库目前把 taste-skill 标成 v2 experimental。v2 和 v1 的差异，主要是它不再只给一些“好看规则”，而是要求 AI 先读 brief，再推导设计语言，再设置几个旋钮，最后做自检。

我会怎么用它

我不会一上来就让 AI “做个高级官网”。这种话太虚，模型很容易回到老套路。更稳的方式是分三段：

1. 先让 AI 读项目和业务背景。
2. 再让它声明设计判断。
3. 确认后再写代码。

流程大概是这样：

这个流程的关键在 C 和 D。只要设计判断错了，后面代码越多，返工越麻烦。

三个旋钮比“高级感”好用

Taste Skill v2 里有三个很实用的参数：

DESIGN_VARIANCE

MOTION_INTENSITY

VISUAL_DENSITY

它们都是 1 到 10 的数字。

DESIGN_VARIANCE 控制布局变化。数字低，页面更规整；数字高，页面可以更不对称、更强视觉表达。

MOTION_INTENSITY 控制动效强度。数字低，只做 hover、淡入这类轻动效；数字高，才考虑滚动叙事、磁吸、复杂编排。

VISUAL_DENSITY 控制信息密度。数字低，留白更多；数字高，更接近 dashboard 或工具页的信息量。

这三个参数好用，是因为它们能把“感觉”拆成可执行的约束。比如一个企业级数据分析产品，我通常会这样设：

DESIGN_VARIANCE: 5

MOTION_INTENSITY: 3

VISUAL_DENSITY: 6

意思是：布局别太花，动效别抢业务，信息密度可以高一点。这个组合比“做得专业一点”清楚很多。

如果是设计工作室首页，参数就可以换成：

DESIGN_VARIANCE: 8

MOTION_INTENSITY: 7

VISUAL_DENSITY: 3

这时 AI 才有理由使用更大的字体、更强的滚动节奏和更自由的版式。

一个可直接用的 Prompt

下面这个 Prompt 适合新建落地页。我会让 AI 先停在设计判断，不要直接写代码。

我已经加载 taste-skill v2，本次只用它作为前端审美规则。

任务：
为 InsightPilot 做一个 B2B SaaS 首页。它是给运营团队用的 AI 数据分析助手，可以连接数据库、自动生成分析结论，并把洞察推送到飞书或 Slack。

受众：
增长负责人、运营分析师、SaaS 创业团队。

气质：
冷静、准确、可信、有一点技术感，但不要赛博风。

参考：
Linear、Vercel、Hex、Retool。

不要出现：
紫蓝大渐变、三张等宽功能卡片、假 dashboard div、假用户头像墙、滚动提示、没有来源的 99% 提升。

第一步：
只输出 Design Read，包括：
- 页面类型判断
- 受众判断
- DESIGN_VARIANCE
- MOTION_INTENSITY
- VISUAL_DENSITY
- 应该避免的视觉套路
- 首屏应该承担什么任务

输出后停止，等我确认。

确认之后，再让它继续：

按刚才确认的 Design Read 实现页面。

要求：

• Next.js + Tailwind
• 至少 8 个 section
• 至少 4 种不同布局，不要一路三列卡片
• Hero 标题桌面端最多两行
• CTA 首屏可见
• 产品展示不要用 div 伪造，用真实截图占位或明确标注 screenshot placeholder
• 动效不要监听 window scroll 写 React state
• 支持 prefers-reduced-motion
• 最后输出 Pre-Flight Check

这里有一个小细节：如果没有真实产品截图，不要让 AI 装作有。可以让它留一个明确的 screenshot placeholder，或者先生成参考图。假截图一眼就露馅，比没有图更伤。

改版时别急着重画

Taste Skill 里比较值得借鉴的一点，是它对 redesign 很谨慎。真实项目里，老页面往往有一些不能乱动的东西：导航名称、SEO 标题、表单字段、埋点按钮、品牌主色、客户案例顺序。

所以改版时，我会换成这个 Prompt：

我已经加载 taste-skill v2。现在不是新建页面，而是 redesign。

先不要写代码。

请先审计当前页面：

• 品牌 token：颜色、字体、圆角、阴影、按钮风格
• 信息架构：导航、首屏、转化路径
• 应该保留的内容
• 明显 AI 化或模版化的部分
• SEO 和埋点上不能随便改的内容
• 当前页面大概的 DESIGN_VARIANCE、MOTION_INTENSITY、VISUAL_DENSITY

审计完停止，等我确认。

这个步骤看起来慢，实际能省时间。AI 最容易犯的错不是不会改样式，而是把原来有效的东西一起改掉。比如原来的 H1 有搜索价值，它为了“更有高级感”改成一句抽象口号；原来的按钮文案对应埋点，它顺手改了；原来的客户 logo 有顺序含义，它打散重排。

改版不是清空重来。Taste Skill 的 redesign 思路更像先划线：哪些保留，哪些重做，哪些只调间距。

我最看重的几条规则

第一，Hero 不要堆东西。

很多 AI 页面首屏很满：标题、副标题、按钮、三条 bullet、客户头像、信任条、右侧假产品图，再塞一个滚动提示。Taste Skill 明确限制 Hero 的堆料倾向。公众号读者可能觉得这是小事，但落地页里首屏越乱，用户越难知道下一步点哪。

第二，不要用假的精确数字。

4.8x、99%、12k teams 这类数字，如果没有来源，就不要写。AI 喜欢用它们制造可信感，但真实项目里这属于风险文案。宁愿写“示例指标”，也不要装成真实数据。

第三，别只会三列卡片。

功能区、案例区、流程区、价格区，如果每一屏都是 grid-cols-3，页面会很快变钝。Taste Skill 要求检查 section 之间的布局重复。实际做页面时，可以混用 split layout、timeline、comparison table、tab、media strip、quote band、dense table。

第四，动效要管性能。

如果 AI 为了炫，在滚动时频繁更新 React state，移动端很容易卡。Taste Skill 更推荐 CSS、IntersectionObserver、Motion 或 GSAP ScrollTrigger 这类更可控的方式，并且要考虑 prefers-reduced-motion。

第五，图片不是装饰。

官网、作品集、品牌页里，图片应该承担信息。产品图就展示产品，场景图就展示场景，不要只放一张黑乎乎的抽象背景。没有真实图时，先承认没有，再做占位或生成参考。

不适合硬套的场景

它主要解决 marketing page、landing page、portfolio、about page、redesign 这类页面的审美问题。

如果你做的是复杂后台，核心问题通常不是“页面有没有味道”，而是表格、筛选、权限、批量操作、异常状态、键盘操作、数据加载和可访问性。这种场景应该优先使用成熟设计系统和领域组件，比如 Ant Design、Carbon、Polaris、TanStack Table、AG Grid、Monaco、CodeMirror。Taste Skill 可以帮你压住视觉风格，但不能替代产品交互设计。

最后给一份验收清单

每次让 AI 用 Taste Skill 做完页面，我会按这个清单过一遍：

1. 首屏是否一眼看出产品是什么？
2. H1 是否没有变成抽象口号？
3. CTA 是否在首屏可见？
4. 是否连续出现三列卡片？
5. 是否出现没有来源的数字？
6. 是否用 div 伪造产品截图？
7. 页面是否只靠紫蓝渐变撑视觉？
8. 字体、圆角、阴影是否前后一致？
9. 动效是否支持 reduced motion？
10. 移动端是否真的重新组织过内容？

我对 Taste Skill 的看法很简单：它不是让 AI 突然变成设计师，而是把一些常见的坏习惯挡在代码生成之前。

以前我们常说“AI 写出来差点意思”，但很少告诉它到底差在哪里。Taste Skill 的价值就在这里：它把“差点意思”拆成了 brief、旋钮、布局、动效、图片、文案和自检。只要你的任务是官网、落地页、作品集或品牌页，它值得作为默认前置规则。