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

Taste Skill88KB 提示词如何让 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] -- 硬门槛检查 有品味的定制化 UITaste Skill 是什么① 项目概况Taste Skill 是 GitHub 用户 Leonxlnx 维护的开源项目GitHub 地址MIT 协议获得了 Vercel OSS Program 的支持。它的定位很明确Anti-Slop Frontend Framework——反套路前端框架。Slop 是英文俚语指「低质量的、批量生产的垃圾内容」。Anti-Slop 就是反批量生产、反千篇一律。② 88KB 提示词的由来主技能taste-skill的 SKILL.md 有 88KB1200 多行。这不是一条简单的提示词而是一套完整的「设计方法论」——从需求分析、设计方向、布局规则、动效控制、颜色系统、排版规范到发布前检查全都有。它的核心理念是AI 不缺写代码的能力缺的是判断「什么该写、什么不该写」的能力。88KB 的内容大部分不是在教 AI 怎么写 CSS而是在教 AI 怎么做设计决策。③ 12 个子技能生态除了主技能之外项目还包含 11 个子技能覆盖不同的设计风格和场景brutalist-skill瑞士排版、极端对比、机械感minimalist-skillNotion/Linear 风格、单色系、严格留白soft-skill高级软 UI、大量留白、平滑动画redesign-skill审计优先、现代化改造output-skill反 AI 偷懒、禁止占位符和省略号stitch-skillGoogle Stitch 兼容的语义设计规则image-to-code-skill从截图生成代码imagegen-frontend-web生成网页设计参考图imagegen-frontend-mobile生成移动端设计参考图brandkit生成品牌套件参考图gpt-tasteAwwwards 级别的 GSAP 动效技能安装只需要一行命令npx skillsaddhttps://github.com/Leonxlnx/taste-skillBrief Inference——先「读房间」再动手① 为什么 AI 总是「不读房间」LLM 的默认行为是拿到需求立刻开始输出。它不会停下来想「这个需求适合什么风格」而是直接套用训练数据中出现频率最高的设计模式。频率最高 最安全 最平庸。你说「帮我做个 Landing Page」AI 不会问你目标用户是谁、品牌调性是什么、参考哪个竞品。它只会从记忆里调出一个「最常见的 Landing Page 模板」然后套上去。这就是为什么不管你怎么改需求描述出来的 UI 都像同一个模板的变体——因为 AI 根本没在「理解」你的需求它在「匹配」最常见的模式。② Taste Skill 的解决方案Design ReadTaste 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 kindLanding / Portfolio / Redesign / EditorialVibe words用户说的风格关键词minimalist、brutalist、Apple-y、playful…Reference signals用户提供的参考链接、截图、竞品名称AudienceB2B 采购团队 vs 设计敏感的消费者 vs 招聘官Brand assets已有的 logo、配色、字体、摄影素材Quiet constraints无障碍优先、公共部门、受监管行业、儿童产品第四个维度最关键受众决定审美不是 AI 的品味决定审美。给政府网站做设计和给创意工作室做设计风格完全不同。AI 不应该用同一套审美去覆盖所有场景。③ Anti-Default DisciplineTaste 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 到 10DESIGN_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 TellsAI 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-tborder-b。超过 5 个条目时用卡片、Tab、Marquee 或 Scroll-snap 替代。③ 为什么这些规则有效这些规则不是在限制创意而是在限制「偷懒」。AI 的偷懒机制是有学术研究支撑的。Taste Skill 的research/laziness目录专门研究了 LLM 为什么会偷懒RLHF 训练让模型倾向于输出「看起来完整」的内容而非「真正完整」的内容训练数据中大量存在占位符和省略模式模型会走「认知捷径」——用最常见的模式替代针对当前需求的思考。Anti-AI Tells 的每一条禁令都是在切断一条「偷懒路径」。禁止 em-dashAI 就必须重新思考文案的断句方式禁止三等分卡片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-filterblur 透明背景做出的效果是 glassmorphism不是 Liquid Glass。Taste Skill 附录里甚至提供了一个「更安全的 Web 近似骨架」代码注释里明确写着这是近似实现。这种诚实标注的态度在 AI 生成代码的场景下尤其重要。Pre-flight Check——发布前的硬门槛Taste Skill 的最后一条规则是发布前必须通过的硬检查清单。不是「建议检查」是「每一条都必须通过否则不能发布」。核心检查项颜色一致性锁定一个强调色贯穿全页禁止在第7节突然换颜色形状一致性锁定一个圆角系统不能有些卡片8px圆角有些16px按钮对比度检查每个 CTA 按钮通过 WCAG AA 对比度标准禁止白字白底Hero 纪律标题不超过2行副标题不超过20词CTA 不需要滚动就能看到导航纪律桌面端单行显示高度不超过80pxSection 布局重复禁令8个 Section 中至少用4种不同的布局家族页面主题锁定整页一个主题light/dark/auto禁止页面中途切换明暗这些规则看起来琐碎但每一条都是从「AI 反复犯的错误」中提炼出来的。AI 最擅长的就是「差不多就行」——颜色大概对了、布局大概齐了、对比度大概够了。Pre-flight Check 把「大概」变成「必须」。是否用户需求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>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 会自己读。你只需要告诉它你想要什么风格然后调旋钮就行。