用 Leonxlnx/taste-skill 给 AI 前端降降味
最近用 AI 帮忙写前端的人，十有八九都见过那么一类页面：深色背景打底，紫蓝渐变铺满视觉重心，三张功能卡片居中排开，大标题杵在正中间，右上角再点缀几个没实际功能的装饰点。代码确实没什么硬伤，响应式也能跑通，但总觉得哪里不对——说白了，就是长得像同一个模子里倒出来的，缺了点“味道”。
Leonxlnx/taste-skill 干的事其实挺干脆：它没再给你一套新组件库，也没让你在 Tailwind、React 或 Vue 之间重新站队，而是直接把一套前端审美标准和验收规则写进了一 SKILL.md 文件里。关键是，它让 AI 编码工具在落笔之前先读这份规则。你可以把它想象成给 Codex、Claude Code、Cursor、v0 这类工具配了个“设计评审员”——动手之前，先过一遍审美关。
先看它到底是什么
官方 README 里给的定位挺有意思：“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。这种指令太虚了，模型很容易掉回老套路。更稳妥的方式是拆成三步走：先让 AI 理解项目背景和业务语境，接着让它明确声明设计判断，确认无误后再开始写代码。大致流程长这样：
这里最关键的一步在 C 和 D。设计判断一旦跑偏，后面代码写得越多，返工就越痛苦。
三个旋钮比“高级感”这词好用多了
Taste Skill v2 里最实用的，是这三个可调参数：
DESIGN_VARIANCE MOTION_INTENSITY VISUAL_DENSITY
取值范围都是 1 到 10。
- ：控制布局变化程度。数字低，页面更规矩整齐；数字高，可以更多不对称、更强烈的视觉表达。
DESIGN_VARIANCE
- ：控制动效强度。数字低，只做 hover、淡入这类轻量动效；数字高，才能考虑滚动叙事、磁吸效果、复杂时间线编排。
MOTION_INTENSITY
- ：控制信息密度。数字低，留白更多，呼吸感强；数字高，更接近 dashboard 或工具类页面的信息浓度。
VISUAL_DENSITY
这三个参数好用在哪？它们能把抽象的“感觉”拆成可执行的约束条件。比如说一个企业级数据分析产品，我通常会这样设：
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 有搜索价值，AI 为了“更有高级感”改成一句抽象口号；原来的按钮文案对应埋点，AI 顺手改了；原来的客户 logo 顺序包含品牌合作层次，AI 直接打散重排。
改版≠清空重来。Taste Skill 的 redesign 思路更像先划线：哪里该保留，哪里该重做，哪里只需要调个间距。
我最在意的几条核心规则
第一，Hero 区域不堆料。
很多 AI 生成的页面首屏特别满：标题、副标题、按钮、三条 bullet、客户头像、信任条、右侧假产品图，再塞一个滚动提示。Taste Skill 明确在限制这种堆料的倾向。公众号读者可能觉得这不是什么大事，但落地页这东西，首屏越乱，用户越难搞清楚下一步该点哪里。
第二，别写没有来源的精确数字。
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，移动端很容易卡成 PPT。Taste Skill 更推荐用 CSS、IntersectionObserver、Motion 或 GSAP ScrollTrigger 这类更可控的方式，并且始终要考虑 prefers-reduced-motion。
第五，图片不是装饰品。
官网、作品集、品牌页里，图片应该承担信息传递任务。产品图就得展示产品，场景图就得展示场景，别放一张黑乎乎的抽象背景糊弄过去。没有真实图片时，先坦然承认没有，再做占位或生成参考。
什么场景不适合硬套
Taste Skill 主要解决的是 marketing page、landing page、portfolio、about page、redesign 这类页面的审美问题。如果你在做一个复杂后台系统，核心问题通常不是“页面有没有味道”，而是表格、筛选、权限、批量操作、异常状态、键盘操作、数据加载和可访问性。这种场景下，优先选用成熟设计系统和领域组件才是正路——比如 Ant Design、Carbon、Polaris、TanStack Table、AG Grid、Monaco、CodeMirror。Taste Skill 能帮你压住视觉风格的方向，但不能替代产品交互的底层设计。
最后，一份可以照单执行的验收清单
每次让 AI 用 Taste Skill 做完页面，我会按下面这份清单过一遍：
- 首屏是否一眼就能看出产品是干什么的？
- H1 是否没有变成抽象口号？
- CTA 是否在首屏可见？
- 是否连续出现了三列卡片？
- 是否出现了没有来源的数字？
- 是否用 div 伪造了产品截图？
- 页面是否只靠紫蓝渐变撑起视觉？
- 字体、圆角、阴影是否前后一致？
- 动效是否支持 reduced motion？
- 移动端是否真的重新组织过内容，而不只是缩了一下？
对于 Taste Skill，我的看法其实很简单：它并没打算让 AI 一夜之间变成顶尖设计师，而是把那些常见的坏习惯挡在了代码生成之前。
以前我们常说“AI 写出来总差那么点意思”，但很少有人真正告诉它到底差在哪里。Taste Skill 的价值就在这——它把“差点意思”拆成了 brief、参数旋钮、布局策略、动效策略、图片策略、文案规范以及自检流程。只要你的任务涉及官网、落地页、作品集或品牌页，它都值得作为默认前置规则放进工作流里。
