Taste Skill：88KB 提示词如何让 AI 写的 UI 不再像流水线罐头

让 AI 写个 Landing Page，出来永远是深色背景加紫色渐变，三个等宽 Feature Card 整齐排列，Inter 字体配 slate-900 文字颜色，再点缀一层 glassmorphism 玻璃拟态。换个需求再试，还是这一套。再换，还是。

AI 写 UI 的问题不是「写不出来」，而是「写出来的都长一个样」。就像便利店的饭团——包装整齐，口味合格，但你永远分不清哪个是哪个。

这不是模型能力不够。GPT-4o 能写诗、能推导数学公式、能帮你 debug 一个复杂的并发问题，但让它做个网页，审美就自动退化成「最大公约数」——因为训练数据里最常见的就是这种模板。

直到我遇到一个 88KB 的提示词。它不教 AI 写代码，而是试图教会 AI 什么叫「品味」。

AI 写 UI 的六个「罐头症状」

① 紫色渐变无处不在

AI 对紫色渐变的执念，堪比甲方对「大气」的执念。不管你要什么风格——科技感、商务风、小清新——它总能找到办法塞一层from-purple-500 to-blue-600进去。

② 居中 Hero + 暗色背景三件套

每个 Landing Page 的 Hero 区域都像从同一个模板复制粘贴的：居中标题、一行副标题、两个 CTA 按钮、深色渐变背景。偶尔加个 mesh gradient 背景点缀，但骨子里还是那一套。

③ 三个等宽 Feature Card

永远是三个。不是两个，不是四个，是三个。等宽、等高、等间距，整整齐齐像超市货架。AI 似乎被训练出了某种「三的执念」。

④ 玻璃拟态滥用

glassmorphism 本身不丑，但 AI 把它当万能调料——卡片加一层毛玻璃、导航栏加一层毛玻璃、弹窗再加一层毛玻璃。整个页面像隔着起雾的浴室玻璃看世界。

⑤ Inter + slate-900 万年不变

字体永远是 Inter，文字颜色永远是 slate-900，背景永远是 white 或 slate-950。偶尔换一次 sans-serif，你以为它要突破了，结果是font-family: system-ui, sans-serif。

⑥ 破折号泛滥成灾

标题里塞破折号，副标题里塞破折号，Feature 描述里塞破折号，甚至 Footer 都要塞一个。人类设计师不会这么干，但 AI 对 em-dash（—）有种莫名的热爱。

这六个症状单独看都不致命，但叠在一起就形成了一个效果：所有 AI 生成的 UI 都像从同一条流水线上下来的罐头。

AI 写 UI 的「罐头流水线」： 用户需求 --> [AI 默认审美引擎] --> 紫色渐变 + 居中 Hero + 三等分卡片 + 毛玻璃 + Inter + 破折号 = 千篇一律的模板 Taste Skill 的「品味引擎」： 用户需求 --> [Brief Inference] --> Design Read --> [三旋钮] --> VARIANCE / MOTION / DENSITY --> [Anti-AI Tells] --> 禁令清单过滤 --> [Pre-flight Check] --> 硬门槛检查 = 有品味的定制化 UI

Taste Skill 是什么

① 项目概况

Taste Skill 是 GitHub 用户 Leonxlnx 维护的开源项目（GitHub 地址），MIT 协议，获得了 Vercel OSS Program 的支持。

它的定位很明确：Anti-Slop Frontend Framework——反套路前端框架。Slop 是英文俚语，指「低质量的、批量生产的垃圾内容」。Anti-Slop 就是反批量生产、反千篇一律。

② 88KB 提示词的由来

主技能taste-skill的 SKILL.md 有 88KB，1200 多行。这不是一条简单的提示词，而是一套完整的「设计方法论」——从需求分析、设计方向、布局规则、动效控制、颜色系统、排版规范，到发布前检查，全都有。

它的核心理念是：AI 不缺写代码的能力，缺的是判断「什么该写、什么不该写」的能力。88KB 的内容，大部分不是在教 AI 怎么写 CSS，而是在教 AI 怎么做设计决策。

③ 12 个子技能生态

除了主技能之外，项目还包含 11 个子技能，覆盖不同的设计风格和场景：

• brutalist-skill：瑞士排版、极端对比、机械感
• minimalist-skill：Notion/Linear 风格、单色系、严格留白
• soft-skill：高级软 UI、大量留白、平滑动画
• redesign-skill：审计优先、现代化改造
• output-skill：反 AI 偷懒、禁止占位符和省略号
• stitch-skill：Google Stitch 兼容的语义设计规则
• image-to-code-skill：从截图生成代码
• imagegen-frontend-web：生成网页设计参考图
• imagegen-frontend-mobile：生成移动端设计参考图
• brandkit：生成品牌套件参考图
• gpt-taste：Awwwards 级别的 GSAP 动效技能

安装只需要一行命令：

npx skillsaddhttps://github.com/Leonxlnx/taste-skill

Brief Inference——先「读房间」再动手

① 为什么 AI 总是「不读房间」

LLM 的默认行为是：拿到需求，立刻开始输出。它不会停下来想「这个需求适合什么风格」，而是直接套用训练数据中出现频率最高的设计模式。频率最高 = 最安全 = 最平庸。

你说「帮我做个 Landing Page」，AI 不会问你目标用户是谁、品牌调性是什么、参考哪个竞品。它只会从记忆里调出一个「最常见的 Landing Page 模板」，然后套上去。

这就是为什么不管你怎么改需求描述，出来的 UI 都像同一个模板的变体——因为 AI 根本没在「理解」你的需求，它在「匹配」最常见的模式。

② Taste Skill 的解决方案：Design Read

Taste Skill 的第一条规则就是：在写任何代码之前，先输出一行「设计解读」。

Reading this as: B2B SaaS landing for technical buyers, with a Linear-style minimalist language, leaning toward Tailwind utilities + Geist + restrained motion.

这句话做了四件事：判断页面类型（B2B SaaS Landing）、识别目标用户（technical buyers）、确定设计语言（Linear-style minimalist）、选择技术方案（Tailwind + Geist + restrained motion）。

它要求 AI 从六个维度读取信号：

• Page kind：Landing / Portfolio / Redesign / Editorial
• Vibe words：用户说的风格关键词（minimalist、brutalist、Apple-y、playful…）
• Reference signals：用户提供的参考链接、截图、竞品名称
• Audience：B2B 采购团队 vs 设计敏感的消费者 vs 招聘官
• Brand assets：已有的 logo、配色、字体、摄影素材
• Quiet constraints：无障碍优先、公共部门、受监管行业、儿童产品

第四个维度最关键：受众决定审美，不是 AI 的品味决定审美。给政府网站做设计和给创意工作室做设计，风格完全不同。AI 不应该用同一套审美去覆盖所有场景。

③ Anti-Default Discipline

Taste Skill 明确列出了一组「禁止默认值」：

Do not default to: AI-purple gradients, centered hero over dark mesh, three equal feature cards, generic glassmorphism on everything, infinite-loop micro-animations everywhere, Inter + slate-900.

翻译过来就是：紫色渐变、居中 Hero 暗色背景、三等分 Feature Card、万能毛玻璃、无限循环微动效、Inter 字体配深灰文字——这些全都是「禁止默认值」。

核心思想很直接：默认值不是「安全」，而是「平庸」。如果 AI 的每个决策都走默认值，出来的结果就是最大公约数。Anti-Default Discipline 强迫 AI 根据 Design Read 的结果去选择，而不是凭惯性去选择。

三旋钮系统——用数字控制品味

① 三个旋钮是什么

Taste Skill 的核心配置是三个数字旋钮，每个 1 到 10：

• DESIGN_VARIANCE: 8——布局实验性。1 = 完美对称，10 = 艺术混沌
• MOTION_INTENSITY: 6——动画深度。1 = 纯静态，10 = 电影级物理动效
• VISUAL_DENSITY: 4——信息密度。1 = 美术馆般的留白，10 = 驾驶舱般的数据密集

基线值是8 / 6 / 4：偏实验的布局、中等强度的动效、适度的留白。除非 Design Read 覆盖，否则用这组默认值。

② 旋钮怎么用

不同场景对应不同的旋钮预设：

+---------------------------+-----------+--------+---------+ | 场景 | VARIANCE | MOTION | DENSITY | +---------------------------+-----------+--------+---------+ | SaaS Landing (主流) | 7 | 6 | 4 | | Agency / 创意工作室 | 9 | 8 | 3 | | 高端消费品 | 7 | 6 | 3 | | 设计师 Portfolio | 8 | 7 | 3 | | 开发者 Portfolio | 6 | 5 | 4 | | 编辑 / 博客 | 6 | 4 | 3 | | 政府 / 公共服务 | 3 | 2 | 5 | | Redesign - 保留风格 | 匹配现有 | +1 | 匹配现有 | | Redesign - 大改 | +2 | +2 | 匹配现有 | +---------------------------+-----------+--------+---------+

旋钮之间是联动的：VARIANCE 高意味着布局可以不对称、可以用非常规的网格；MOTION 高意味着可以用 GSAP 滚动动画、物理弹跳；DENSITY 低意味着大留白、少元素、呼吸感。

③ 为什么用数字而不是文字描述

这是我觉得 taste-skill 最聪明的设计之一。

「稍微活泼一点」是模糊的——AI 不知道「活泼」意味着布局更自由还是动画更多还是颜色更亮。但「VARIANCE 从 6 调到 8」是精确的——AI 知道这意味着可以尝试不对称布局、非常规的网格系统。

数字的好处：

• 精确：不会有歧义
• 可调：不满意就调一个数字，不用重新描述需求
• 可复现：同样的旋钮值，多次生成的结果风格一致
• 可交流：「我用 7/5/3 做了个 Landing Page」比「我做了个稍微简洁的 Landing Page」信息量大得多

用户不需要懂设计术语，只需要调旋钮。这把「设计品味」从一个主观的、模糊的概念，变成了一个可操作的、可量化的过程。

Anti-AI Tells——给 AI 列出「禁令清单」

① 什么是 AI Tells

AI Tells 是 AI 生成内容的「指纹」——人类设计师不会犯的错误，AI 反复犯。一看就知道是 AI 写的，就像看到一个人穿着西装去海滩，你知道他肯定没「读房间」。

Taste Skill v2 的核心改进之一，就是建立了一套完整的「禁令清单」。每条规则都是从实际测试中提炼出来的——不是理论推导，而是「AI 反复犯这个错，所以直接禁掉」。

② 禁令清单精选

Em-Dash 禁令——全文禁止使用破折号（—），用连字符（-）或重构句子。这是 v2 测试中违反最多的规则。AI 对 em-dash 的热爱到了病态的程度：标题里塞、副标题里塞、Feature 描述里塞、Footer 里还要塞一个。人类设计师写网页文案，几乎不会用 em-dash。Taste Skill 直接一刀切：零 em-dash，没有例外。

编号眉毛禁令——禁止00 / INDEX、001 Capabilities、06 how it works这种编号风格。AI 特别喜欢给每个章节加编号眉毛，看起来很「工业设计」，实际上 99% 的场景不需要。

版本标签禁令——Hero 区域禁止V0.6、INVITE-ONLY PREVIEW、BETA。除非你的需求明确是产品发布，否则不要在 Hero 里放版本号。

装饰性文字禁令——禁止BRAND. MOTION. SPATIAL.这种装饰性文字条。AI 觉得这样「有设计感」，实际上只是噪音。

滚动提示禁令——禁止Scroll、scroll、Scroll to explore。用户知道怎么滚动页面，不需要你提醒。

假截图禁令——禁止用 styled div 伪造产品 UI（假任务列表、假终端、假聊天界面）。AI 经常用<div>堆出一个看起来像截图的假 UI，但仔细一看全是假数据。要么用真实截图，要么不要放。

分割线滥用禁令——长列表禁止每行都加border-t+border-b。超过 5 个条目时，用卡片、Tab、Marquee 或 Scroll-snap 替代。

③ 为什么这些规则有效

这些规则不是在限制创意，而是在限制「偷懒」。

AI 的偷懒机制是有学术研究支撑的。Taste Skill 的research/laziness目录专门研究了 LLM 为什么会偷懒：RLHF 训练让模型倾向于输出「看起来完整」的内容而非「真正完整」的内容；训练数据中大量存在占位符和省略模式；模型会走「认知捷径」——用最常见的模式替代针对当前需求的思考。

Anti-AI Tells 的每一条禁令，都是在切断一条「偷懒路径」。禁止 em-dash，AI 就必须重新思考文案的断句方式；禁止三等分卡片，AI 就必须根据内容选择布局方式；禁止假截图，AI 就必须提供真实的视觉元素。

和项目里的output-skill（反 AI 偷懒技能）理念一致：部分输出就是坏输出。如果你要求 AI 写5个组件，它就必须写5个，不能写2个加一句「剩下的类似」。

Design System Map——什么时候用什么框架

Taste Skill 有一套从 Brief 到设计系统的映射规则：

• Brief 读出来是 Material / Fluent / Carbon / Polaris / Atlassian / Primer / shadcn 等官方设计系统 →用官方包，不要自己手搓
• Brief 读出来是某种美学风格（glassmorphism、brutalism、editorial、dark tech、aurora）→用 Web 标准实现，诚实标注是「近似实现」
• Apple Liquid Glass → 明确标注是Web 近似实现，不是 Apple 官方包

这里有个很重要的原则：不要把随机 CSS 片段当成官方设计系统。网上有很多「Liquid Glass CSS」的代码片段，但 Apple 从来没有发布过面向 Web 的 Liquid Glass 包。用backdrop-filter+blur+ 透明背景做出的效果是 glassmorphism，不是 Liquid Glass。

Taste Skill 附录里甚至提供了一个「更安全的 Web 近似骨架」，代码注释里明确写着这是近似实现。这种诚实标注的态度，在 AI 生成代码的场景下尤其重要。

Pre-flight Check——发布前的硬门槛

Taste Skill 的最后一条规则是：发布前必须通过的硬检查清单。不是「建议检查」，是「每一条都必须通过，否则不能发布」。

核心检查项：

• 颜色一致性锁定：一个强调色贯穿全页，禁止在第7节突然换颜色
• 形状一致性锁定：一个圆角系统，不能有些卡片8px圆角有些16px
• 按钮对比度检查：每个 CTA 按钮通过 WCAG AA 对比度标准（禁止白字白底）
• Hero 纪律：标题不超过2行，副标题不超过20词，CTA 不需要滚动就能看到
• 导航纪律：桌面端单行显示，高度不超过80px
• Section 布局重复禁令：8个 Section 中至少用4种不同的布局家族
• 页面主题锁定：整页一个主题（light/dark/auto），禁止页面中途切换明暗

这些规则看起来琐碎，但每一条都是从「AI 反复犯的错误」中提炼出来的。AI 最擅长的就是「差不多就行」——颜色大概对了、布局大概齐了、对比度大概够了。Pre-flight Check 把「大概」变成「必须」。

子技能生态——12 个口味

Taste Skill 不是一个单体技能，而是一个技能家族。12 个子技能覆盖了从前端代码到设计参考图的完整链路：

+---------------------------+-------------------------------+---------------------------+ | 技能名称 | 定位 | 适用场景 | +---------------------------+-------------------------------+---------------------------+ | taste-skill (主技能) | Anti-Slop 前端框架 | Landing / Portfolio / 改版 | | brutalist-skill | 瑞士排版、极端对比、机械感 | 创意工作室、艺术项目 | | minimalist-skill | Notion/Linear 风格、单色系 | 工具类产品、文档站点 | | soft-skill | 高级软 UI、大量留白、平滑动画 | 消费品、品牌站 | | redesign-skill | 审计优先、现代化改造 | 已有网站的升级改造 | | output-skill | 反 AI 偷懒、禁止占位符 | 任何需要完整输出的任务 | | stitch-skill | Google Stitch 语义设计规则 | AI UI 生成的语义约束 | | gpt-taste | Awwwards 级别 GSAP 动效 | 高端动效需求 | | image-to-code-skill | 从截图生成代码 | 有设计稿需要实现 | | imagegen-frontend-web | 生成网页设计参考图 | 先生成参考图再写代码 | | imagegen-frontend-mobile | 生成移动端设计参考图 | 移动端 App 设计参考 | | brandkit | 生成品牌套件参考图 | Logo、配色、字体系统 | +---------------------------+-------------------------------+---------------------------+

其中最值得关注的是output-skill。它不是设计技能，而是「反偷懒技能」——强制 AI 输出完整代码，禁止// ...、// rest of code、Let me know if you want me to continue这些偷懒模式。当输出接近 token 限制时，它要求 AI 在干净的断点暂停，标注「X of Y complete」，用户说「continue」后从断点继续。

这个技能可以独立使用，不一定要搭配 taste-skill。任何需要 AI 输出完整内容的场景都适用。

选择建议：根据项目风格选对应的子技能，不要全装。做 SaaS Landing 装 taste-skill 就够了；做创意工作室装 brutalist-skill；做品牌站装 soft-skill。装太多反而会互相冲突。

我的实测体验

我用 taste-skill 做了两件事：一个项目页面原型，一个会议研究的 HTML 页面。

项目页面原型那个任务，我之前不用 taste-skill 试过，出来的就是标准的「AI 罐头」——深色背景、居中标题、三个 Feature Card。用了 taste-skill 之后，同样的需求描述，AI 先输出了一行 Design Read：「Reading this as: technical product page for engineering teams, with a clean>LLM 偷懒研究——taste-skill 背后的学术支撑

taste-skill 的research/laziness目录让我很意外——一个前端设计技能，居然做了 LLM 偷懒行为的学术研究。

他们研究了四个导致 LLM 偷懒的根因：

• RLHF 和计算经济学：强化学习让模型倾向于输出「看起来完整」的内容，而不是「真正完整」的内容。因为「看起来完整」更容易通过人类评估。
• 训练数据偏差：训练数据中大量存在占位符（// TODO、// implement here）、省略模式（// similar to above）。模型学会了这些模式，认为它们是正常的。
• 认知捷径：面对复杂任务时，模型会走捷径——用最常见的模式替代针对当前需求的思考。这就是「罐头 UI」的根因。
• 输出限制：消费者级 API 有输出 token 限制，模型会提前「收尾」以避免截断。

对应的修复方案包括参数调优（温度、Top-p）、提示词工程（XML 框架、验证循环）、架构模式（MCP 集成、懒加载技能）、参考提示词模板。

taste-skill 的 Anti-AI Tells 和 Pre-flight Check，本质上就是「提示词工程」层面的修复方案——通过硬规则切断模型的偷懒路径。

写在最后

taste-skill 的价值不是让 AI「会设计」——AI 本来就会写 CSS、会用 Tailwind、会调颜色。它的价值是让 AI「有品味」：在动手之前先读房间，用旋钮精确控制设计方向，用禁令清单过滤掉 AI 的惯性偷懒，用硬门槛检查保证输出质量。

88KB 的提示词看起来很长，但它的本质是一套可执行的设计方法论。每一行规则都有存在的理由——要么是从「AI 反复犯的错误」中提炼出来的禁令，要么是从「好的设计实践」中总结出来的规范。

如果你也在用 AI 写 UI，但对输出质量不满意，可以试试：

npx skillsaddhttps://github.com/Leonxlnx/taste-skill

不需要读完 88KB。装上之后，AI 会自己读。你只需要告诉它你想要什么风格，然后调旋钮就行。