给AI装上审美旋钮Taste-Skill v2 如何根治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你一定有过这种感觉打开一个用 Cursor 或 Claude 生成的网页第一眼就知道它是AI做的。紫色渐变、居中的大标题、三张一模一样的等宽卡片、满屏的毛玻璃、正文里到处飞的破折号……这种一眼假的AI指纹几乎成了所有大模型前端输出的通病。Taste-Skill 就是冲着这个问题来的它是一套可移植的 Agent Skills 前端设计框架专门训练 AI 智能体生成有专业品味的界面而不是复制粘贴式的样板货。最近它升级到了 v2实验版把防 AI 味这件事从口号变成了硬性规则。先认清敌人AI 网页为什么总是长得一样把责任全推给模型不太公平真正的病灶藏在训练数据和生成机制里。大模型最擅长的是概率最高的下一个词而概率最高的设计方案恰恰就是它见过的那些紫色光晕、黑色星空背景、三等分卡片、Inter 字体配 slate-900……这套组合拳打出来十个网页有八个是双胞胎。Taste-Skill 把这类特征称作AI TellsAI 暴露信号并在 v2 里给它们上了硬禁令。什么叫硬禁令就是你没法跟它讨价还价。举几个最狠的破折号—全面封杀正文、标题、按钮、图片 alt一个都不许出现。想表达停顿用句号、逗号或括号重写句子。滚动提示禁用什么Scroll↓ scroll统统删掉。用户知道自己可以滚动不需要页面教他。版本标签禁用Hero 区不许出现V0.6BETA这种装饰除非需求本身就是一个发布公告。编号小眉题禁用那种00 / INDEX001 · Capabilities式的区块编号一律换成大白话标题。紫色渐变默认禁用除非品牌方点名要紫色否则默认配色走中性底 单个高饱和强调色。这一刀下去效果立竿见影。v2 测试里最常见的几个翻车模式全在检查清单上被拦下来了。三步装好让AI立刻换口味Taste-Skill 的安装逻辑很直接它就是一份份可移植的 SKILL.md 指令文件装进 Agent 就能生效。核心技能一条命令搞定npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill只想装最核心的设计品味技能指定 install name 即可npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill design-taste-frontend这套 CLI 会自动扫描仓库里的skills/目录所以后面的所有技能代码类和图像生成类都是同一种安装方式。老用户升级也不用改脚本v2 沿用了design-taste-frontend这个安装名重新跑一遍安装命令新版 SKILL.md 会原地替换旧版。如果你依赖 v1 的确切行为也可以显式锁定旧版design-taste-frontend-v1。三大旋钮把品味变成可量化的参数Taste-Skill 最有意思的设计是把抽象的设计风格拆成了三个 1 到 10 的旋钮。你不需要跟 AI 描述我想要那种高级感直接调数字就行。默认基线是8 / 6 / 4但需求一读就能覆盖默认值。旋钮含义低值1-3高值8-10DESIGN_VARIANCE布局实验度完美对称、居中干净不对称、杂志式错落、艺术化混乱MOTION_INTENSITY动效深度只有 hover 微反馈滚动触发、吸附堆叠、磁吸物理效果VISUAL_DENSITY每屏信息量画廊般的空旷留白驾驶舱式的密集数据三旋钮还能跟需求联动。比如极简 / Linear 风自动映射到低变异的 5-6Awwwards 获奖感 / 实验风直接拉到 9-10而公共部门 / 无障碍优先这类场景会被强制压到 3 左右的保守区间因为约束比审美优先级更高。这正是 Taste-Skill 的核心哲学设计决策要跟着需求走而不是跟着 AI 的默认偏好走。v2 重写从建议到纪律如果说 v1 是给 AI 讲道理v2 就是给 AI 立规矩。这次实验版重写新增了 7 个章节把很多你最好这样做升级成了做不到就不许交付。先读懂房间再动手写码v2 新增的 Brief Inference 模块要求 AI 在写任何代码之前先读四个信号页面类型着陆页 / 作品集 / 改版 / 编辑页、用户的氛围词、参考信号链接、竞品、截图、受众群体和既有品牌资产。读完必须输出一行设计解读声明类似这样Reading this as: B2B SaaS landing for technical buyers, with a Linear-style minimalist language, leaning toward Tailwind utilities Geist restrained motion.一句话说清楚给谁看、什么调性、用什么体系。写不出来说明需求本身没读明白。设计系统映射别再造轮子需求读出来像微软企业应用直接上官方 Fluent UI。像 Google 风格用 Material Web 的 Material 3 令牌。像 GitHub 那种开发者工具Primer CSS 就在那等着。v2 内置了一张需求 → 官方设计系统的映射表覆盖 Fluent、Carbon、Polaris、Atlassian、Primer、GOV.UK、USWDS、Bootstrap、Radix、shadcn/ui 和 Tailwind v4。核心规则只有一条有官方包就用官方包不要手搓一个山寨版设计系统。同时也规定了诚实原则玻璃拟态、Bento 网格、粗野主义这类美学风格没有官方库就老实标注实现方案绝不假装自己拿到了苹果 Liquid Glass 的官方 CSS。动画纪律动效必须有动机动画不是越炫越好。v2 要求每个动画都能用一句话说清它传达什么是强调层级是推进叙事是反馈操作答案如果是因为好看那这个动画就不该存在。库的选型也定了UI 动效用Motion原 Framer Motion 的新品牌滚动叙事用 GSAP ScrollTrigger并附上了粘性堆叠和水平平移两份可直接抄的规范代码骨架。同时明令禁止window.addEventListener(scroll)这种每帧都跑的写法所有高强度动画必须提供prefers-reduced-motion降级。交付前的预飞行检查这是 v2 最硬核的部分一份几十项的检查矩阵逐条打勾才能交付。从全页只有一个强调色的颜色一致性锁到每个 CTA 按钮对比度过 WCAG AA从8 个区块至少用 4 种布局家族的反重复规则到Hero 标题不超过 2 行、副文本不超过 20 词的排版纪律。任何一项不通过页面就不算做完。你可能觉得苛刻但正是这种机械式的自检才堵住了 AI 偷懒的所有口子。一整套技能矩阵按场景挑兵器Taste-Skill 不是一个技能而是一个技能库。每个技能只干一件事按需取用技能安装名用途taste-skilldesign-taste-frontendv2 默认版最安全的通用选择taste-skill-v1design-taste-frontend-v1锁定原始 v1 行为gpt-tasteGPT / Codex 专用严格版用 Python 模拟随机化打破重复redesign-existing-projects现有项目改版先审计再动手high-end-visual-design高端视觉设计做出贵的感觉minimalist-ui极简编辑风Notion / Linear 气质industrial-brutalist-ui粗野主义工业风full-output-enforcement治 AI 输出半成品、占位符的毛病imagegen-frontend-web网站设计参考图每区块一张独立横图imagegen-frontend-mobile移动端设计参考图brandkit品牌工具包设计板选择逻辑其实很简单默认从 taste-skill 起步要严格规则选 gpt-taste要改老项目用 redesign输出老被截断就加一个 output-skill。图像类技能和 ChatGPT Images、Codex 图像模式配合生成参考帧之后丢给 Codex、Cursor 或 Claude Code 去落地实现。图像优先一条值得抄的工作流很多人不知道Taste-Skill 的图像生成技能藏着一个大杀器一个区块一张独立的横向参考图。一个 8 区块的着陆页就生成 8 张图每张只专注一个设计部分绝不压缩成一张长图。这在工程上是合理的分块生成的分辨率更高、细节更清晰编码模型才能精确复刻。配合 image-to-code-skill推荐在提示词里显式声明工作流follow the skill: generate images, then analyze, then code。AI 会先出图、再分析、最后照着图写代码。这样生成的页面至少视觉上是有设计感的而不是模型从零想当然出来的。上面这张 Floria 就是 Taste-Skill 的实战产物黑色底、高饱和的花卉摄影、清晰的层级、克制的留白从品牌标题到商品展示再到服务列表一气呵成。下面这张图展示了它的下半场评价卡片、订阅模块、页脚导航风格从头到尾保持统一没有出现滚动到一半换了家网站的割裂感。这就是 v2 里页面主题锁的功劳整页只有一种明暗主题区块之间不许反转。性能与无障碍好看不是唯一标准好看之外v2 还把生产标准焊死在了规则里LCP 小于 2.5 秒、INP 小于 200 毫秒、CLS 小于 0.1动效只用transform和opacity暗色模式默认双模式设计且对比度必须过 WCAG AA。另外还有一条容易忽略的细节默认字体别用 Inter除非用户点名AI 最爱的两款衬线字体 Fraunces 和 Instrument Serif 也被拉进了黑名单。这些规则看似琐碎但正是它们决定了页面是像专业设计师的作品还是一眼 AI。有意思的是这个仓库里还附带了一份research/目录记录了LLM 懒惰的研究成果为什么模型会产出半成品、占位符和漏掉的区块以及对应的参数调优和提示工程方案。也就是说Taste-Skill 的反 AI 味不止停留在规则层面背后是有实证研究支撑的。写在最后有人说设计是玄学但 Taste-Skill 告诉你AI 的审美可以被拆成三个旋钮、一份禁令清单、一张检查矩阵。你不需要教会模型什么是美只需要让它不再偷懒地复读最平庸的答案。好的设计不该看起来像 AI 生成的而应该看起来像专业设计师的作品。现在把这个框架装进你的 Agent让它学会闭嘴先读懂房间。【免费下载链接】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），仅供参考
