每日热门skill-你的AI写的页面，为什么总有一股“模板味“？52K星开源技能 taste-skill，一句话治好AI的“审美贫瘠“

原创于 2026-08-31 09:21:52 发布 · 269 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

一、先看一个"一眼AI"的现场

你让 Cursor 做一个 SaaS 落地页。五秒钟，页面出来了。

紫色到蓝色的渐变 Hero。三张等宽的 Feature 卡片，每张一个 icon。居中排布的大标题，右上角几个假的 status 圆点。Inter 字体，16px 圆角。滚动到下面，还有一行"Scroll Down"。

代码没毛病。响应式能跑。性能也过得去。

但你就是知道——这是 AI 写的。不是因为它丑，是因为它"太标准"了。标准得像同一个模板倒出来的。

这有个专门的名字：AI Slop。技术正确、但平庸到没有灵魂的生成物。

你的 AI 不是没有审美。它有"平均审美"——而平均，恰恰是最大的失败模式。大模型在做每一次设计决策时，都会回归到训练数据里出现频率最高的那个选项。于是紫色渐变、三列卡片、居中排版，成了 AI 的"舒适区"。

问题来了：怎么让 AI 跳出舒适区？

今天的主角，就是来干这件事的。

二、一行命令，给 AI 装上"审美大脑"

taste-skill，作者 Leon Lin（GitHub: Leonxlnx），2026 年迅速走红，目前 52K+ star，登顶过 GitHub Trending，拿到 Vercel OSS 赞助，MIT 协议可商用。

官方定位一句话：“The Anti-Slop Frontend Framework for AI Agents”——反 AI 生成烂界面的前端框架。口号更直白：“Less slop, designs pop.”（少一点模板，多一点设计。）

它不是一个组件库，不是 CSS 框架，不是运行时，也不是 MCP server。它是一套 SKILL.md 规则文件。AI 编码工具在生成代码之前，会先把这份规则读进上下文，然后照着规矩干活。

你可以把它理解成：给你的 AI 配了一个"设计审稿人"，还是个自带红头文件的审稿人。

兼容性拉满：Cursor、Claude Code、Codex、Gemini CLI、v0、Lovable、OpenCode、AI Studio……凡是支持 SKILL.md 的 Agent，一行命令通用。

三、它到底怎么"教"AI 审美的？

taste-skill 的核心是 v2（2026 年重写版，当前默认）。它把"审美"这个玄学，拆成了四个可执行的工程环节。

第一步：先"读房间"

AI 不再闷头写代码。它先读 brief——你的需求描述——推断四件事：行业、受众、氛围、布局家族。

做一个项目管理工具？目标用户是团队 leader，需要信任感和效率感。做一个设计工作室首页？受众是创意人，可以大胆一点。

这就像设计师接手项目，先问三个问题：给谁看？什么气质？什么场合？AI 现在也会问了。

第二步：拧三个旋钮

v2 引入了三个 1-10 的全局参数，官方叫"dials"（旋钮）：

DESIGN_VARIANCE：布局变化度。低=规整居中；高=不对称、强视觉表达。
MOTION_INTENSITY：动效强度。低=hover 淡入；高=滚动叙事、磁吸效果。
VISUAL_DENSITY：信息密度。低=大留白；高=接近 Dashboard。

这三个旋钮的价值在于：把"做得高级一点"这种模糊指令，翻译成了可执行的量化约束。

打个比方。以前你跟 AI 说"背景音乐调好一点"，它给你随机放一首。现在你给它一个三段均衡器——低音、中音、高音，各拧到几，一目了然。

举个例子。企业数据分析产品，通常这么设：VARIANCE=5，MOTION=3，DENSITY=6。意思是：布局别太花，动效别抢业务，信息密度可以高。设计工作室首页则相反：VARIANCE=8，MOTION=7，DENSITY=3——大字体、强节奏、自由版式。

第三步：映射设计系统

规则不是空谈。v2 内置了一张"brief 到设计系统"的映射表：什么时候用 shadcn/ui，什么时候用 Material、Fluent、Carbon、Polaris、Atlassian、Primer，什么时候干脆裸写原生 CSS。

AI 不再凭感觉堆组件，而是按场景选对体系。

第四步：反模式禁令 + 预飞检查

这是最硬核的部分。taste-skill 内置了一份"AI Tells"清单——AI 生成的典型破绽，逐条禁止：

禁止紫蓝大渐变
禁止连续三列等宽卡片
禁止用 div 伪造产品截图（假 Dashboard）
禁止没有来源的数字（“4.8x 提升”"99% 用户"这种，没有出处就不许写）
禁止 em dash（破折号）——AI 文案里破折号泛滥，是最明显的 AI 痕迹
禁止假用户头像墙、滚动提示、抽象口号式的 H1

输出之前，还有一道硬性 Pre-Flight Check：每个 checkbox 必须诚实通过，AI 才允许交付。暗色/亮色模式对比度和层级必须一致；动效要支持 prefers-reduced-motion；禁止在滚动时频繁更新 React state 卡死移动端。

一句话总结：**把"差点意思"拆成了 brief、旋钮、布局、动效、图片、文案和自检。**以前你只能说"这页面差点意思"，现在 AI 知道它差在哪了。

四、安装：一行命令，三秒上车

前置条件：Node.js 18+（用于 npx）。

# 装全部技能包（13 个）
npx skills add https://github.com/Leonxlnx/taste-skill

# 只装核心主技能（推荐新项目，默认 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"

不想用 CLI？直接把 SKILL.md 复制到项目目录也行：Cursor 放 .cursor/skills/，Claude Code 放 .claude/skills/ 或 ~/.claude/skills/，Codex 放 .codex/skills/。甚至可以直接粘贴进对话里，单次生效。

升级 v2 更省心：重跑安装命令即可，安装名没变，SKILL.md 原地替换，项目脚本零改动。

五、实战：有 taste 和没 taste，差距在哪？

同一句 prompt：“为一个项目管理 SaaS 工具生成落地页，Next.js + Tailwind”。

没装 taste-skill：紫蓝渐变 Hero，三列 Feature 卡片，居中 CTA，标准模板全家桶。整体观感：像 every SaaS template ever。

装了 taste-skill (v2)：AI 先推断——项目管理工具 → 受众是团队 leader → 需要信任感和效率感 → 自动选择 shadcn/ui 体系。然后布局改为非对称 Hero（左文右图），配色换成深蓝主色 + 琥珀色强调，避开紫色渐变；加微妙的滚动动画（MOTION_INTENSITY 自动调到 6）；信息密度拉到 7，加入实时数据预览模块。

结果：有设计判断力，不像模板。

更讲究的玩法是"图转代码"流水线：先用 imagegen-frontend-web 生成设计参考图（每个区块一张，8 区块的页面就出 8 张），再用 image-to-code 技能分析还原。先定视觉方向，再写代码——这正是人类广告公司的工作方式：先艺术指导，后执行。

六、不只是主技能：一个 13 件套的工具箱

taste-skill 不是一把万能钥匙，是个工具箱。除默认的 design-taste-frontend 外，还有：

风格变体：minimalist-ui（Notion/Linear 极简风）、high-end-visual-design（高端柔和）、industrial-brutalist-ui（瑞士粗野主义）
专项：gpt-taste（GPT/Codex 严格版）、redesign-existing-projects（存量项目先审计再重构）、full-output-enforcement（治 AI 写一半就跑）、image-to-code、stitch-design-taste（Google Stitch 兼容）
图像生成：imagegen-frontend-web / mobile、brandkit（品牌视觉板）

装哪个？新手直接装默认的 design-taste-frontend，覆盖 80% 场景。GPT/Codex 用户加一个 gpt-taste。改造老项目用 redesign。AI 总输出半成品？加 output-skill。

七、同类对比：它和 Impeccable 不是对手，是队友

社区里和 taste-skill 常被拿来对比的是 Impeccable——同样是给 AI 前端加"设计品味"的技能。两者恰好从两端解决问题：

taste-skill：生成前约束。从 brief 开始就把设计规则注入，让 AI 第一版就别长成模板。它不学习你的设计系统，而是强加一套方向 + 硬规则 + 预飞门禁。
Impeccable：生成后打磨。提供 23 个命令（typeset、quieter、colorize…），对已有代码做定向精修，继承你现有的设计 token。

最佳实践是组合：生成时用 taste，打磨时用 impeccable。至于 shadcn/ui、Tailwind 这些，不是竞争关系——taste-skill 是规则层，组件库是执行层，叠着用正好。

八、冷静一下：它不解决所有问题

诚实地说缺点。

第一，适用范围有限。它主要解决 marketing page、landing page、作品集、品牌页的审美问题。如果你做的是复杂后台，核心痛点不是"有没有味道"，而是表格、筛选、权限、可访问性——那应该优先用 Ant Design、Carbon 这些成熟设计系统。taste-skill 能压住视觉风格，不能替代产品交互设计。

第二，品味终究主观，且依赖模型。它能给 AI 一个强起点偏置，但最终效果还是取决于底层模型和你自己的方向把控。它不能保证好设计。

第三，v2 目前是 experimental 预发布版，规则措辞还在迭代；而且它很有主见，可能跟你公司的既有风格打架，需要你主动覆盖。

第四，作者明确声明：没有官方 token/币，凡是打着 taste-skill 名义发币的都是骗子。开源项目一火，骗子就来了。

九、结尾：别让你的 AI 继续"平均"下去

我们花了太多时间吐槽"AI 写的页面一眼假"，却很少告诉 AI 它到底差在哪。

taste-skill 的价值，恰恰是把这句吐槽翻译成了机器能执行的工程规范：brief 推断、三个旋钮、设计系统映射、反模式禁令、预飞检查。它让"审美"第一次变成了可复现、可调参、可审计的流程。

一行命令，三秒上车：

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

下次再让 AI 写页面之前，先想想：你是想再要一个"every SaaS template ever"，还是想要一个"looks like someone cared"？

Less slop, designs pop. 你的 AI，值得拥有好品味。

关键词：taste-skill；AI Slop；Agent Skills；前端设计；Cursor；Claude Code；SKILL.md；反模板

标签

#taste-skill #AI Slop #Agent Skills #前端设计 #Cursor