半小时给AI装上“审美开关”：一条命令接入，AI做的网页终于不像模板了

半小时给AI装上“审美开关”一条命令接入AI做的网页终于不像模板了【免费下载链接】taste-skillAgent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill先问你一个扎心的问题。你有没有发现如今让AI写个网页出来的东西长得越来越像“同一个妈生的”大标题居中、上面顶一个小标签、下面三张一模一样的图标卡片、背景来一层紫蓝渐变、再配几行细得看不见的分割线。换个店名咖啡店能用健身房能用卖墓地的也能用。业内给这种页面起了个外号叫“AI味”或者更直接一点——模板脸。最近几个月一个叫taste-skill的开源项目在技术社区被反复安利。各路博主写实测、写拆解、写踩坑记录标题一个比一个激动“给AI装上审美”“治好我的审美焦虑”“告别AI建站模板脸”。它到底是个啥普通人能不能用今天咱们不讲代码只讲清楚三件事它是什么、半小时怎么接上、接上之后到底有啥变化。一、它不是什么高科技是“一本写给AI看的设计手册”你可以这样理解。AI写网页就像一个手艺不错但完全没审美的装修队。水电都通、墙也砌得直可一到“选什么颜色的砖、沙发摆哪儿、灯挂多高”它就开始抄小区里最常见的那一套。taste-skill 干的事就是给这支装修队塞一本施工规范什么能做、什么绝对不能做、先量哪面墙、完工后必须自己拿卷尺复核一遍。具体拆开看它其实就三样东西第一样一份“说明书”。AI编程工具Claude Code、Cursor、Codex 这些在开工前会先读它读完就知道标题不许超过两行、不许在标题上方加小标签、不许用渐变色、不许把六张一模一样的卡片排成一行、不许用那种灰得看不清的浅色正文。第二样一个“抽签筒”。这是我觉得最妙的设计。AI最擅长的就是走老路——你让它自由发挥它一定选最安全最眼熟的那套。所以这个技能不让它自由发挥而是从20个研究过的设计方向里随机抽3个摆在AI面前让它挑一个最能承载“这家客户独有东西”的方向。注意是随机抽。这一个小小的动作直接掐死了“每次都回到舒适区”的死循环。第三样一把“验收尺”。页面写完后它会真的打开一个浏览器按电脑、平板、手机三种宽度把页面渲染出来一寸一寸地量标题几行、字号多大、字体的颜色够不够深、左右边距对不对齐、有没有哪一段是空白、有没有文字贴着屏幕边缘。量不过就判不合格打回去改。写完之后还要截图让AI自己看自己的作品挑三个最丑的地方改最多改三轮。说白了它没有让AI变聪明而是逼着AI认真检查自己的作业。二、半小时怎么接上分四步一步都别跳重点来了。整个接入过程比装一个手机App稍微麻烦一点点但只要你会复制粘贴就能搞定。第一步清点家底看看你的电脑够不够格它有两个硬要求说穿了都不吓人一是电脑里要有一个叫Node 22的运行环境。你别被名字唬住它就是让电脑能跑这类小工具的一个“底座”官网下载、下一步下一步装完就行。二是电脑里要有Chrome、Edge 或者 Chromium浏览器。你天天上网用的那个就行。不需要独立显卡不需要本地跑大模型不需要申请任何API密钥也不额外花钱。整个技能包不装任何东西就靠你已经在用的那个AI工具干活。只有在“找图片”这一步需要联网因为它要去公开图库里翻真实照片。第二步把它放进AI工具的“技能抽屉”现在主流的AI编程工具都有一个专门放技能的地方你可以理解成手机的“插件目录”。最省事的办法是在终端里敲一句以npx skills add开头的安装命令后面跟着项目地址和技能名。一句回车它自己就装好了全程不用你操心。如果你用的是 Claude Code还有更“傻瓜”的路子它支持插件市场两条命令就能装完以后更新也是一条命令的事。如果你喜欢自己动手也可以把这个技能文件夹直接复制到你主目录下的技能目录里。项目里还提供了一个小脚本它不复制、只做“快捷方式”好处是以后项目更新了你这边自动跟着变不用重装。这里有个坑要提醒技能必须放进“技能目录”不能随手丢在桌面或者项目根目录。放错地方AI是永远看不见它的。第三步重开一个会话让它“加载”这一步被无数人忽略然后跑来问“为啥没反应”。技能是在会话开始的时候读取的。你装完技能如果还赖在原来那个聊天窗口里AI根本不知道有新东西。关掉重新开一个。用 Cursor 的话可以在提问时手动点名让技能被显式调用若是 Claude Code技能还带了命名空间不会跟你装的其他技能打架。还有个小彩蛋就算你忘了点名只要你描述里出现“这页面看着像模板”“太像AI做的了”“帮我做得高级一点”它也会自动被触发——因为这本来就是它存在的理由。第四步用一个最小案例验证它是真生效还是装样子别一上来就让它做公司官网。用一个小到不能再小的题目试水比如帮我给一家只有二十个座位、自己烘豆子的街角咖啡店做个单页网站。然后盯着三个信号看。信号一它开始“抽签”了。如果它先给你三个明显不同的设计方向还认真解释“为什么我选这个”说明它在按流程走。如果它二话不说直接开写那就是没加载上。信号二它开始找真图片了。它会去维基共享、Openverse、芝加哥艺术博物馆、大都会博物馆这些公开图库里翻这家店所在街道的老照片、咖啡豆的特写、烘焙机的版画而且只挑允许商用的授权还会把摄影师名字标在页面底部。信号三它开始自我批评了。生成完之后它会给你一组桌面、平板、手机宽度的截图然后老老实实列出“这三个地方我做得不好”再改一遍。三个信号里出现两个基本可以确认开关装上了。三、装上之后效果到底差多少空口无凭看两个维度。先说眼睛能看到的。下面是这个技能自己生成的案例同样是“一句话需求”出来的东西是这样的注意几个细节一屏只有一个主角那间店的橱窗标题够大够狠右边像价目牌一样分区导航左下角直接告诉你“现在关门了明天8点开门”还有一个“导航过去”的按钮。这不是“漂亮”这是有人做过决定。再看烘焙过程这一屏四张实拍照片尺寸递进配文里写着196度、205到227度、“晚十秒就是另一杯咖啡”。这种细节AI自己是编不出来的——但技能要求它必须去客户的世界里找素材。再说冷冰冰的数据。这个技能的规则不是拍脑袋定的是从247个精选网站其中包含近百个Awwwards每日最佳里一个像素一个像素量出来的。结果很有意思在评分高的网站里用“图标卡片墙”的只占1%评分低的网站里占28% 用渐变色背景的高分站22%低分站52% 用投影的高分站24%低分站48% 用那种小号大写字母标签的高分站16%低分站57%。换句话说你以为是“高级感”的那些装饰恰恰是廉价感的来源。这个技能干的第一件事就是把这些“看起来很努力”的装饰全删掉。而删掉装饰之后空出来的地方它要求用三样东西填更大的字号、完整的真实内容、为这个客户专门找的图片。有测试数据佐证用这个技能的成品在浏览器体检里是0 个不合格项而不用技能的对照组平均有8 到 13 个不合格项——小标签、等宽字体、01/02/03编号、发丝线、渐变、投影、三行标题、小于13px的文字。四、门槛有多高丑话说在前面第一它不是魔法。项目自己公布的盲测记录很诚实五轮测试里前几轮它甚至输给了“什么都不装”的版本直到最后一轮才打成 7.7 比 7.8 的平手。原因也简单——把装饰删干净只完成了一半工作剩下那一半叫“内容”。页面必须有真东西可讲否则删完就成了一张白纸。所以它不是一个“一键变高级”的按钮更像一个特别较真的设计总监逼你把该做的事做完。第二它有点费时间和token。完整跑一遍流程抽方向、找图、搭建、体检、自评、修改三轮大概要30到45分钟消耗几十万个token。按现在主流模型的价格算几毛到几块钱不等。不贵但也不是免费。第三它救不了“没有内容”的项目。如果你连自己卖什么、地址在哪、价格多少都没想清楚再好的审美规则也只能给你一个漂亮的空壳。那它适合谁适合独立开发者、接私活的外包、要做落地页的自媒体、开小店想有个像样官网的老板、做作品集的学生、以及需要快速出原型给老板看的产品经理。不适合谁那种有严格VI规范、一个字的位置都不能动的大品牌团队——虽然它也支持“保留你的品牌色和字体只借用排版思路”但那种活儿还是交给人类设计师更稳妥。五、几个最容易翻车的坑技能装上了但没反应。九成是没重开会话或者放错了目录。先查这两条别急着怀疑人生。AI模型本身连不上。社区里有不少人踩过这个坑技能装得好好的结果接口报401、代理不通AI连话都回不了自然谈不上审美。先保证模型能正常聊天再折腾技能。指望一次成型。它自己都要改三轮你就别指望第一版能直接上线。看截图、挑毛病、再来一遍这才是正确用法。图片版权。它默认只挑公共领域和允许商用的授权并且会把作者标在页面上。但商用前最好自己再确认一遍——这一点任何工具都替不了你。写在最后我一直觉得AI最缺的从来不是能力是品味。它能一分钟写出你三天写不完的代码却分不清“留白”和“空洞”的区别分不清“克制”和“寒酸”的区别。因为它学的是全人类的平均水平而“平均水平”本身就是平庸的同义词。taste-skill 做的事其实就是把那些说不清道不明的“好看”拆成一条条可以执行、可以检查、可以打回重做的规则。这事儿的意义可能比“让网页变好看”大得多——它证明了一件事审美是可以被写下来的。那么问题来了如果连“品味”都能被写成规则交给AI你觉得下一个被拆解成清单的会是啥评论区聊聊我先说一个我觉得是“讲笑话”。【免费下载链接】taste-skillAgent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考