最近借助 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：控制布局的变化程度。数值越低，页面越规整统一；数值越高，可以容纳更多不对称和更强烈的视觉表达。
- 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 有搜索价值，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、参数旋钮、布局策略、动效策略、图片策略、文案规范以及自检流程。只要你的任务涉及官网、落地页、作品集或品牌页，它都值得作为默认前置规则放进工作流中。
