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 动效技能

安装只需要一行命令：

bash 复制代码

npx skills add https://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 把「大概」变成「必须」。
#mermaid-svg-5OwjqvMHzwFc1s51{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-5OwjqvMHzwFc1s51 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-5OwjqvMHzwFc1s51 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-5OwjqvMHzwFc1s51 .error-icon{fill:#552222;}#mermaid-svg-5OwjqvMHzwFc1s51 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-5OwjqvMHzwFc1s51 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-5OwjqvMHzwFc1s51 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-5OwjqvMHzwFc1s51 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-5OwjqvMHzwFc1s51 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-5OwjqvMHzwFc1s51 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-5OwjqvMHzwFc1s51 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-5OwjqvMHzwFc1s51 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-5OwjqvMHzwFc1s51 .marker.cross{stroke:#333333;}#mermaid-svg-5OwjqvMHzwFc1s51 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-5OwjqvMHzwFc1s51 p{margin:0;}#mermaid-svg-5OwjqvMHzwFc1s51 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-5OwjqvMHzwFc1s51 .cluster-label text{fill:#333;}#mermaid-svg-5OwjqvMHzwFc1s51 .cluster-label span{color:#333;}#mermaid-svg-5OwjqvMHzwFc1s51 .cluster-label span p{background-color:transparent;}#mermaid-svg-5OwjqvMHzwFc1s51 .label text,#mermaid-svg-5OwjqvMHzwFc1s51 span{fill:#333;color:#333;}#mermaid-svg-5OwjqvMHzwFc1s51 .node rect,#mermaid-svg-5OwjqvMHzwFc1s51 .node circle,#mermaid-svg-5OwjqvMHzwFc1s51 .node ellipse,#mermaid-svg-5OwjqvMHzwFc1s51 .node polygon,#mermaid-svg-5OwjqvMHzwFc1s51 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-5OwjqvMHzwFc1s51 .rough-node .label text,#mermaid-svg-5OwjqvMHzwFc1s51 .node .label text,#mermaid-svg-5OwjqvMHzwFc1s51 .image-shape .label,#mermaid-svg-5OwjqvMHzwFc1s51 .icon-shape .label{text-anchor:middle;}#mermaid-svg-5OwjqvMHzwFc1s51 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-5OwjqvMHzwFc1s51 .rough-node .label,#mermaid-svg-5OwjqvMHzwFc1s51 .node .label,#mermaid-svg-5OwjqvMHzwFc1s51 .image-shape .label,#mermaid-svg-5OwjqvMHzwFc1s51 .icon-shape .label{text-align:center;}#mermaid-svg-5OwjqvMHzwFc1s51 .node.clickable{cursor:pointer;}#mermaid-svg-5OwjqvMHzwFc1s51 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-5OwjqvMHzwFc1s51 .arrowheadPath{fill:#333333;}#mermaid-svg-5OwjqvMHzwFc1s51 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-5OwjqvMHzwFc1s51 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-5OwjqvMHzwFc1s51 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-5OwjqvMHzwFc1s51 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-5OwjqvMHzwFc1s51 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-5OwjqvMHzwFc1s51 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-5OwjqvMHzwFc1s51 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-5OwjqvMHzwFc1s51 .cluster text{fill:#333;}#mermaid-svg-5OwjqvMHzwFc1s51 .cluster span{color:#333;}#mermaid-svg-5OwjqvMHzwFc1s51 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-5OwjqvMHzwFc1s51 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-5OwjqvMHzwFc1s51 rect.text{fill:none;stroke-width:0;}#mermaid-svg-5OwjqvMHzwFc1s51 .icon-shape,#mermaid-svg-5OwjqvMHzwFc1s51 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-5OwjqvMHzwFc1s51 .icon-shape p,#mermaid-svg-5OwjqvMHzwFc1s51 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-5OwjqvMHzwFc1s51 .icon-shape .label rect,#mermaid-svg-5OwjqvMHzwFc1s51 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-5OwjqvMHzwFc1s51 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-5OwjqvMHzwFc1s51 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-5OwjqvMHzwFc1s51 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 是
否
用户需求
Brief Inference

读房间
Design Read

一行设计解读
三旋钮

VARIANCE/MOTION/DENSITY
代码生成
Anti-AI Tells

禁令清单过滤
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 data-driven language」，然后 VARIANCE 设到 6、MOTION 设到 4、DENSITY 设到 5，出来的东西完全不一样------左对齐的标题、不对称的两栏布局、克制的动画、有呼吸感的留白。

最让我惊喜的是旋钮的可调性。同一个需求，VARIANCE 从 6 调到 9，布局立刻变得更实验性------标题倾斜、图片打破网格、元素之间有了张力。这种「用一个数字改变整体风格」的体验，比反复用自然语言描述「再活泼一点、再大胆一点」高效得多。

也遇到了一些小问题。em-dash 禁令在纯英文场景下很有道理，但我做中文内容时，中文的破折号（------）和英文的 em-dash（---）是不同的字符，禁令规则没有区分。另外，某些禁令过于严格------比如「禁止装饰性状态点」，但在数据产品的场景下，状态点是有实际语义的。

整体感受：从「能用」变成了「想用」。 之前 AI 写的 UI 能用，但你不会想把它展示给别人看。用了 taste-skill 之后，AI 写的 UI 开始有「设计感」了------不是那种模板化的设计感，而是针对当前需求的、有判断力的设计感。

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，但对输出质量不满意，可以试试：

bash 复制代码

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

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