尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

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

每日热门skill-你的AI写的页面,为什么总有一股“模板味“?52K星开源技能 taste-skill,一句话治好AI的“审美贫瘠“ 基金定投助手为什么你的基金定投总在追涨杀跌价值平均法定投引擎 综合估值模型动态再平衡仓位管理一个单文件 HTML 的免费定投工具-CSDN博客https://download.csdn.net/download/weitingfu/93339607?spm1011.2124.3001.6210一、先看一个一眼AI的现场你让 Cursor 做一个 SaaS 落地页。五秒钟页面出来了。紫色到蓝色的渐变 Hero。三张等宽的 Feature 卡片每张一个 icon。居中排布的大标题右上角几个假的 status 圆点。Inter 字体16px 圆角。滚动到下面还有一行Scroll Down。代码没毛病。响应式能跑。性能也过得去。但你就是知道——这是 AI 写的。不是因为它丑是因为它太标准了。标准得像同一个模板倒出来的。这有个专门的名字AI Slop。技术正确、但平庸到没有灵魂的生成物。你的 AI 不是没有审美。它有平均审美——而平均恰恰是最大的失败模式。大模型在做每一次设计决策时都会回归到训练数据里出现频率最高的那个选项。于是紫色渐变、三列卡片、居中排版成了 AI 的舒适区。问题来了怎么让 AI 跳出舒适区今天的主角就是来干这件事的。二、一行命令给 AI 装上审美大脑taste-skill作者 Leon LinGitHub: Leonxlnx2026 年迅速走红目前 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 的核心是 v22026 年重写版当前默认。它把审美这个玄学拆成了四个可执行的工程环节。第一步先读房间AI 不再闷头写代码。它先读 brief——你的需求描述——推断四件事行业、受众、氛围、布局家族。做一个项目管理工具目标用户是团队 leader需要信任感和效率感。做一个设计工作室首页受众是创意人可以大胆一点。这就像设计师接手项目先问三个问题给谁看什么气质什么场合AI 现在也会问了。第二步拧三个旋钮v2 引入了三个 1-10 的全局参数官方叫dials旋钮DESIGN_VARIANCE布局变化度。低规整居中高不对称、强视觉表达。MOTION_INTENSITY动效强度。低hover 淡入高滚动叙事、磁吸效果。VISUAL_DENSITY信息密度。低大留白高接近 Dashboard。这三个旋钮的价值在于把做得高级一点这种模糊指令翻译成了可执行的量化约束。打个比方。以前你跟 AI 说背景音乐调好一点它给你随机放一首。现在你给它一个三段均衡器——低音、中音、高音各拧到几一目了然。举个例子。企业数据分析产品通常这么设VARIANCE5MOTION3DENSITY6。意思是布局别太花动效别抢业务信息密度可以高。设计工作室首页则相反VARIANCE8MOTION7DENSITY3——大字体、强节奏、自由版式。第三步映射设计系统规则不是空谈。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-uiNotion/Linear 极简风、high-end-visual-design高端柔和、industrial-brutalist-ui瑞士粗野主义专项gpt-tasteGPT/Codex 严格版、redesign-existing-projects存量项目先审计再重构、full-output-enforcement治 AI 写一半就跑、image-to-code、stitch-design-tasteGoogle 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 caredLess slop, designs pop.你的 AI值得拥有好品味。关键词taste-skillAI SlopAgent Skills前端设计CursorClaude CodeSKILL.md反模板
返回列表