AI 生成的前端为什么总是一眼假我把 Taste-Skill 装进智能体实测了一周【免费下载链接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill上周我接了一个花艺工作室的官网需求丢给 Cursor 十分钟回来一版紫色渐变加三张等宽卡片的界面——和上个月的客户长得一模一样。我在 Taste-Skill 项目里见过对这种病的精准命名AI slopAI 垃圾。接下来一周我把这个项目装进 Cursor 和 Claude Code用同一份需求做了对照实验这篇文章就是这次实验的记录。为什么 AI 画的界面总是长得一样先说我观察到的现象同一份需求用普通提示词时AI 稳定输出紫色渐变居中版式三卡片的配方把 Taste-Skill 的说明文件附进对话后同一份需求产出的方案完全不同——它先问我这个页面是给谁看的然后给出一个黑色背景、大尺寸花艺摄影、明显不对称的布局。问题从来不在代码能力上。模型不是不会设计而是不知道在为谁设计。它只是在统计上选择最安全的答案而这个答案恰恰是你见过无数次的模板。这个项目在仓库里放了一整份研究资料专门分析 LLM 为什么会偷懒输出被截断、占位符、跳过复杂环节——这些现象背后是训练目标和算力成本共同作用的结果不是提示词写错了那么简单。最有说服力的是项目自己的实测统计破折号——那种中文排版里很长的横线——被列为违反次数最多的AI 痕迹。Inter 字体、紫色渐变、三张等宽卡片、玻璃拟态这些默认值单看都没错但凑在一起就是一眼假。到这一步我基本确认AI 缺的不是技巧是一套动手前先看看房间的工作纪律。 它到底是怎么让 AI改掉坏习惯的Taste-Skill 的本质是一份叫SKILL.md的说明书。它不是组件库不提供现成 UI而是一份可以被智能体加载的工作规范规定了一套完整的设计流程先读懂需求再动手写码。智能体必须先输出一句设计解读比如我把这次需求理解为面向招聘负责人的独立设计师作品集偏向编辑感与动态排版。需求没说清时只准问一个问题不许连环追问。三个旋钮调风格。每个项目开始前先设定三个 1 到 10 的数值风格方向定下后后续所有决策都被这三个值约束。旋钮控制什么数值含义设计变异度布局的实验程度低对称居中高不对称现代动效强度动画的深度低悬停高滚动/磁性视觉密度每屏的信息量低画廊留白高仪表盘密集该用官方设计系统就用官方的。需求读出来是微软风格就接 Fluent是谷歌风格就接 Material 3是 GitHub 风格就接 Primer而不是每次手工仿制一套。一份AI 痕迹黑名单。页面禁止出现破折号、版本角标、滚动提示、装饰性图片说明……逐条列举写得很细。一道交付前的预检关卡。几十项检查从按钮对比度是否通过无障碍标准到移动端适配全部勾选通过才允许交付。这个思路很像给一个天赋很好但缺乏审美的实习生配一位设计总监总监不替他画图只负责规定流程、把住底线、交付前逐项审查。项目还配了一套图像生成技能可以让 AI 先生成设计参考图再照着写代码——先有审美靶子再动手实现。到这一步它解决问题的思路已经清楚了不教 AI 什么是美而是教它怎么避免丑。 上手 30 分钟的真实感受安装很轻量。它通过npx skills add工具安装一行命令装全套也可以只装某一个技能更原始一点直接把SKILL.md复制进项目或者整段贴进对话里同样有效。npx skills add 仓库地址 --skill design-taste-frontend仓库里带了完整的示例最有代表性的是一个叫 Floria 的花艺工作室官网黑色背景配高饱和度花卉摄影首页标题克制服务区块用不对称的网格铺开评价区、订阅区、页脚各用各的布局方式——同一个页面里没有两个区块长得像复制粘贴。实测下来有几个坑要提醒智能体会滑过规则。说明书写得再好模型也可能偷懒跳读。我在提示词里显式加上先读取需求输出设计解读再写代码这句话命中率明显更高。默认技能是实验版。官方坦白说默认技能刚经历了一次彻底重写仍在迭代旧版行为被单独保留、可以固定安装。如果你依赖旧版的确定行为别默认升级。它不是万能模板。我第一次跑通时产出依然需要我调整细节——但它不再一眼假了这是质的差别。它适合谁又不适合谁适合的场景很明确着陆页、作品集、营销网站以及存量项目的改版。项目文档里甚至自己划了一条边界——仪表盘、数据表格、多步骤表单、代码编辑器这类高密度产品界面不在它的服务范围内。这一点我反而很放心一个知道自己在哪没用的项目通常也知道自己在哪有用。需要泼的冷水是它只是一份规则文档不是魔法。最终成品的上限还是取决于你用的模型本身有多强以及你给的需求有多具体。给 AI 配上这套规范相当于给一个新手配了教练但上场跑的还是它自己。说到底它改变的是什么回到那个花艺工作室。装上 Taste-Skill 之后同样一份需求AI 给出的是一个黑底、满屏花艺摄影、层层展开的沉浸式长页——我改了三轮细节但没有推翻重来。我后来想明白了一件事AI 从来不会没有品味它只是太习惯给你看它见过最多的东西。Taste-Skill 没有教 AI 什么是好的设计它只是让 AI 在动手之前先学会看一眼房间。这一眼值回所有安装成本。【免费下载链接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 AI 生成的前端为什么总是一眼假？我把 Taste-Skill 装进智能体实测了一周
AI 生成的前端为什么总是一眼假我把 Taste-Skill 装进智能体实测了一周【免费下载链接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill上周我接了一个花艺工作室的官网需求丢给 Cursor 十分钟回来一版紫色渐变加三张等宽卡片的界面——和上个月的客户长得一模一样。我在 Taste-Skill 项目里见过对这种病的精准命名AI slopAI 垃圾。接下来一周我把这个项目装进 Cursor 和 Claude Code用同一份需求做了对照实验这篇文章就是这次实验的记录。为什么 AI 画的界面总是长得一样先说我观察到的现象同一份需求用普通提示词时AI 稳定输出紫色渐变居中版式三卡片的配方把 Taste-Skill 的说明文件附进对话后同一份需求产出的方案完全不同——它先问我这个页面是给谁看的然后给出一个黑色背景、大尺寸花艺摄影、明显不对称的布局。问题从来不在代码能力上。模型不是不会设计而是不知道在为谁设计。它只是在统计上选择最安全的答案而这个答案恰恰是你见过无数次的模板。这个项目在仓库里放了一整份研究资料专门分析 LLM 为什么会偷懒输出被截断、占位符、跳过复杂环节——这些现象背后是训练目标和算力成本共同作用的结果不是提示词写错了那么简单。最有说服力的是项目自己的实测统计破折号——那种中文排版里很长的横线——被列为违反次数最多的AI 痕迹。Inter 字体、紫色渐变、三张等宽卡片、玻璃拟态这些默认值单看都没错但凑在一起就是一眼假。到这一步我基本确认AI 缺的不是技巧是一套动手前先看看房间的工作纪律。 它到底是怎么让 AI改掉坏习惯的Taste-Skill 的本质是一份叫SKILL.md的说明书。它不是组件库不提供现成 UI而是一份可以被智能体加载的工作规范规定了一套完整的设计流程先读懂需求再动手写码。智能体必须先输出一句设计解读比如我把这次需求理解为面向招聘负责人的独立设计师作品集偏向编辑感与动态排版。需求没说清时只准问一个问题不许连环追问。三个旋钮调风格。每个项目开始前先设定三个 1 到 10 的数值风格方向定下后后续所有决策都被这三个值约束。旋钮控制什么数值含义设计变异度布局的实验程度低对称居中高不对称现代动效强度动画的深度低悬停高滚动/磁性视觉密度每屏的信息量低画廊留白高仪表盘密集该用官方设计系统就用官方的。需求读出来是微软风格就接 Fluent是谷歌风格就接 Material 3是 GitHub 风格就接 Primer而不是每次手工仿制一套。一份AI 痕迹黑名单。页面禁止出现破折号、版本角标、滚动提示、装饰性图片说明……逐条列举写得很细。一道交付前的预检关卡。几十项检查从按钮对比度是否通过无障碍标准到移动端适配全部勾选通过才允许交付。这个思路很像给一个天赋很好但缺乏审美的实习生配一位设计总监总监不替他画图只负责规定流程、把住底线、交付前逐项审查。项目还配了一套图像生成技能可以让 AI 先生成设计参考图再照着写代码——先有审美靶子再动手实现。到这一步它解决问题的思路已经清楚了不教 AI 什么是美而是教它怎么避免丑。 上手 30 分钟的真实感受安装很轻量。它通过npx skills add工具安装一行命令装全套也可以只装某一个技能更原始一点直接把SKILL.md复制进项目或者整段贴进对话里同样有效。npx skills add 仓库地址 --skill design-taste-frontend仓库里带了完整的示例最有代表性的是一个叫 Floria 的花艺工作室官网黑色背景配高饱和度花卉摄影首页标题克制服务区块用不对称的网格铺开评价区、订阅区、页脚各用各的布局方式——同一个页面里没有两个区块长得像复制粘贴。实测下来有几个坑要提醒智能体会滑过规则。说明书写得再好模型也可能偷懒跳读。我在提示词里显式加上先读取需求输出设计解读再写代码这句话命中率明显更高。默认技能是实验版。官方坦白说默认技能刚经历了一次彻底重写仍在迭代旧版行为被单独保留、可以固定安装。如果你依赖旧版的确定行为别默认升级。它不是万能模板。我第一次跑通时产出依然需要我调整细节——但它不再一眼假了这是质的差别。它适合谁又不适合谁适合的场景很明确着陆页、作品集、营销网站以及存量项目的改版。项目文档里甚至自己划了一条边界——仪表盘、数据表格、多步骤表单、代码编辑器这类高密度产品界面不在它的服务范围内。这一点我反而很放心一个知道自己在哪没用的项目通常也知道自己在哪有用。需要泼的冷水是它只是一份规则文档不是魔法。最终成品的上限还是取决于你用的模型本身有多强以及你给的需求有多具体。给 AI 配上这套规范相当于给一个新手配了教练但上场跑的还是它自己。说到底它改变的是什么回到那个花艺工作室。装上 Taste-Skill 之后同样一份需求AI 给出的是一个黑底、满屏花艺摄影、层层展开的沉浸式长页——我改了三轮细节但没有推翻重来。我后来想明白了一件事AI 从来不会没有品味它只是太习惯给你看它见过最多的东西。Taste-Skill 没有教 AI 什么是好的设计它只是让 AI 在动手之前先学会看一眼房间。这一眼值回所有安装成本。【免费下载链接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考