AI生成的网页总是一个样Taste-Skill开源框架给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 生成过落地页、作品集或者品牌官网大概已经发现了那个尴尬的规律十个页面里有八个长得像亲兄弟。Taste-Skill正是为了解决这件事而生的开源项目它用一套可移植的技能说明书给 Codex、Cursor、Claude Code 等 AI 智能体补上设计品味这一课让 AI 生成网页告别千篇一律的模板感。有没有发现AI 做出来的网页全都长得很像先描述一个你大概率经历过的场景。你打开 Cursor 或 Claude Code输入一句帮我做一个 SaaS 产品的官网首页等了几十秒页面出来了居中的大标题、紫色到蓝色的渐变光晕、三张等宽的功能卡片、到处是毛玻璃、底部再来一行Scroll down。然后你又让它做一个花店官网它给你同样的紫色渐变、同样的三张卡片、同样的圆角玻璃面板。内容换了骨架没换。这种一眼就能认出来的AI 味英文圈子里有个很形象的说法叫AI slopAI 垃圾意思是 AI 批量生产出来的、缺乏个性和专业判断的界面。问题不在 AI 不聪明而在于它的默认值。大模型在训练数据里见过最多的就是那些被大量复制的中等水平页面于是稳妥地随大流成了它的条件反射。专业设计师会把版式、配色、字体当成一项项有意识的决策而 AI 默认跳过决策直接输出统计意义上的最大公约数。有意思的是Taste-Skill 项目里还专门附带了一整个research/目录从认知捷径、训练数据偏差、RLHF 与算力约束等角度认真分析了为什么大模型生成的东西总是偷懒。它不是把问题归结为一句AI 没审美而是把成因拆开来看再对症下药。Taste-Skill 是什么一份写给 AI 的设计品味说明书Taste-Skill 的核心形态是一批名为SKILL.md的纯文本技能文件。你可以把它理解成给 AI 看的岗位说明书里面不写死任何一套模板而是写清楚面对什么样的需求应该做出什么样的设计决策。这个定位很关键。它不是组件库不强制你用某个框架也不规定页面必须长成什么样。它的作用是改变 AI 做决策的方式从条件反射式地输出默认风格变成先读需求、再定策略、最后动手。对落地页、作品集、营销官网这类页面它有一整套设计纪律对把现有老网站改好看这类任务它有一套改版审计流程对先画设计图再写代码的工作流它还有配套的图像生成技能对极简、粗野主义、高端视觉等特定风格它各准备了一份专项技能。你不需要一次装完所有技能。装一个默认的taste-skill就能覆盖大部分场景其他的按需添加即可。它怎么把审美变成可执行的规则审美听起来很玄但 Taste-Skill 把它拆成了四条可落地的机制这也是它和普通提示词模板最本质的区别。规则一先读懂房间再动手画在碰代码之前技能要求 AI 先做一次需求推理这个页面是什么类型用户用了哪些风格词极简、冷静、Awwwards 风、高级消费品感有没有参考链接或竞品受众是技术采购委员会还是审美挑剔的消费者品牌方已有的 Logo、配色、字体是什么。推理完之后AI 必须先输出一句设计解读比如我将它理解为面向技术买家的 B2B SaaS 落地页走 Linear 式极简路线采用 Tailwind 工具类 Geist 字体 克制的动效。这句声明的作用是强迫 AI 把隐性假设摊到明面上而不是闷头就画。规则二三颗旋钮把风格参数化Taste-Skill 给每个项目预设了三颗从 1 到 10 的调节旋钮相当于把风格变成了可调参的变量旋钮含义1 代表10 代表DESIGN_VARIANCE设计变异度版式的大胆程度完美对称、干净居中不对称、艺术化、接近混乱MOTION_INTENSITY动效强度动画的深度与复杂度几乎静态只有悬停反馈电影级、滚动驱动、磁性交互VISUAL_DENSITY视觉密度每屏的信息量画廊般的空旷留白驾驶舱般的密集数据默认基准是 8 / 6 / 4但更重要的是由需求推导旋钮值你说要公共部门那种可信、稳重的官网AI 会把变异度降到 3、动效降到 2你说要创意机构那种炸裂的作品集它会把变异度拉到 9、动效拉到 8。需求决定参数而不是参数决定需求。规则三一张AI 味黑名单如果说旋钮是往哪个方向走那黑名单就是哪些路绝对不能走。技能里专门列了一长串AI 标志性特征逐条禁止破折号—被彻底禁用一个都不许出现因为它是 AI 最典型的行文习惯禁止V0.6BETA这类版本角标禁止Scroll、↓ scroll这类滚动提示禁止图片上叠加装饰性标签禁止00 / INDEX这种给区块编号的小字眉题禁止用 div 拼出来的假截图、假终端、假仪表盘禁止默认使用 Inter 字体、禁止AI 紫渐变当默认配色禁止同一个页面里出现两处相同意图的按钮文案联系我们和Lets talk重复出现就是不合格。这份黑名单不是凭空拍脑袋而是从大量真实生成结果里总结出来的指纹。项目甚至在文档里注明破折号禁令是历次测试中被违反次数最多的一条所以干脆写成零容忍。规则四交付前的预飞行检查在 AI 宣布写完了之前技能强制要求它逐项核对一份长达几十条的预飞行检查清单强调色是不是全页统一、圆角体系是不是一套、每个 CTA 按钮是否通过 WCAG AA 对比度、英雄区标题是否超过两行、导航栏在桌面端是否单行显示、是否有减少动效的适配、LCP 是否小于 2.5 秒。任何一项不能诚实地打勾页面就不算完成。这套硬检查把许多原本靠人肉 review 才能发现的细节问题前置到了 AI 交付环节相当于给生成结果装了一道质检闸门。上手实操三步让 AI 变得有品位光说不练没用下面按真实使用流程走一遍。第一步安装技能安装只需要一条命令。npx skills add会自动扫描仓库里的skills/目录把全部技能装好npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill如果只想装某个特定技能用--skill指定安装名即可比如只装最核心的设计品味技能npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill design-taste-frontend懒得用命令的话也可以直接把某个SKILL.md文件复制进项目或者粘贴到 ChatGPT 的对话里效果一样。第二步挑一个合适的技能技能家族分两大类输出代码的实现技能和只出参考图的图像技能。初次上手直接装默认的design-taste-frontend就行想换个口味或应对特定场景再按需补充技能安装名干什么用design-taste-frontend默认首选覆盖落地页、作品集、营销站带需求推理与全套设计纪律gpt-taste面向 GPT / Codex 的更严格版本动效与版式约束更激进image-to-code先出设计参考图再分析再照着实现代码redesign-existing-projects给已有网站做升级先审计再修复不推倒重来high-end-visual-design高端视觉更柔的对比、更贵的字体、更高级的留白minimalist-ui / industrial-brutalist-ui极简编辑风 / 粗野主义工业风风格已定时的专项选择imagegen-frontend-web / -mobile / brandkit只生成网页、移动端或品牌工具包的参考图不产代码第三步在提示词里声明用法装好之后正常写你的需求就行AI 会自动读取技能里的规则。如果你走的是先出图再编码的流程可以在提示词里把工作流说清楚例如遵循技能先生成图像然后分析最后编码。看一眼真实产出Floria 示例仓库里附带了用 Taste-Skill 生成的完整案例一个名为Floria的高端花艺网站。不看广告看疗效直接看它长什么样留意几个细节深色背景、白色大字与高饱和花艺摄影形成强烈对比整体只有一种基调商品陈列、作品档案、服务板块各自用了不同的布局家族没有重复的三等分卡片信息层级清晰从品牌名、大标题到副文案眼睛该看哪里被安排得明明白白。下半部分延续同一种视觉语言用户评价、品牌理念、行动号召层层递进配色与字体从头到尾保持一致。整个页面有一种被认真设计过的气质而不是被模板生成出来的感觉。进阶玩法图像优先与老项目改版图像优先先出图再编码传统做法是直接让 AI 写代码但 Taste-Skill 提供了一条更接近真实工作流的路径先用图像生成技能为每个区块各产出一张独立参考图。一个八区块的落地页就对应八张横向大图每张专注一个局部而不是压缩成一张看不清的小拼图。拿到参考图后再交给编码智能体按图实现。这样设计方向和代码实现解耦你可以在投入开发之前先确认视觉方向对不对。老项目改版先审计再动手Taste-Skill 把改版任务分成三种模式全新项目绿场、保留品牌渐进升级、彻底改造换视觉语言。面对已有网站时AI 先做一次设计审计把现有配色、字体、信息架构、SEO 基线摸清楚再按优先级依次应用现代化手段。技能还明确划了红线URL 结构、主导航文案、表单字段名、品牌 Logo 这些核心资产未经许可绝不能偷偷改掉。这正好治住了AI 一改版就把链接全弄坏的老毛病。它不做什么边界与适用场景Taste-Skill 的适用边界非常诚实技能文档里白纸黑字写明了它不适合什么数据仪表盘、复杂数据表格、多步骤表单、代码编辑器、原生移动端、实时协作界面。这些场景各有更专业的官方设计系统硬套反而画蛇添足。它真正擅长的是面向陌生人的第一印象型页面SaaS 落地页、个人与工作室作品集、品牌官网、活动页、以及给老网站做视觉升级。它和 React、Vue、Svelte 都兼容因为规则管的是设计意图不是某个框架的 API。另外值得一提的是它把所有设计决策都放在公开可读的规则文件里这意味着你可以随时翻看 AI 在遵守什么、甚至手动改规则。透明度高也更容易排查它为什么这么画。现在就可以开始给 AI 装品味这件事门槛比想象中低得多一条安装命令一次提示词调用剩下的交给规则。默认的design-taste-frontend适合作为起点有明确风格偏好就加对应的专项技能想走先看图再动手的流程就上image-to-code。最后回到那个核心问题好设计不该让人一眼认出这是 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），仅供参考