给AI上了一堂设计课


原文地址:https://github.com/Leonxlnx/taste-skill


刷 GitHub 的时候无意间浏览到一个项目,名字叫taste-skill,副标题写得十分直白,给AI加品味,阻止它去生成那些无聊的泛泛之类内容。

我当时就在想,这得是多少前端开发者被AI生成的界面反复折磨到实在忍不了了,才会把一个纯指令文件的项目推到这个位置。60000颗星,没有一个npm包,没有一行运行时代码,并且也没有什么构建步骤。全是SKILL.md,纯文本指令文件,教你的AI编码agent怎么去开展设计决策工作。

这事儿着实戳到我了。我做用户体验出身,后来转行做产品,这两年跟AI编码工具打交道不少,Cursor、Claude Code、Codex我一个一个试过来,它们写代码的速度确实快,语法没问题同时逻辑也没毛病,但前端界面出来的那一刻我每次都要叹气。

居中的hero区域,紫色渐变背景,三张等宽的feature卡片横排,Inter字体配slate-900深色底,标题里硬塞一个破折号当装饰。你选用十个不同的AI agent跑十次,出来的东西骨架基本上都一样。上次我让Cursor搭一个产品落地页,它给我出了居中标题加副标题加CTA按钮加三卡片,跟一个月前Claude Code出的那个落地页几乎一模一样,换个项目名而已。AI写不出代码吗?它能写,写得还挺好。它缺的是审美判断,训练数据里模板式页面太多了,模型复制的是统计均值,均值就是你一眼看上去觉得还行,仔细看觉得无聊,再看一遍就烦的东西。

taste-skill把这个均值给彻底拆解掉了。

项目核心流程三条。头一条叫Brief推理,agent动笔之前先阅读你给出的需求,对六个信号开展提取工作,页面类型和氛围词与参考信号,受众和品牌资产与隐性约束,然后输出一行Design Read把设计方向进行明确声明。这条规则很关键,逼agent先想清楚再动手,不直接跳进代码去生成默认模板。

第二条叫三旋钮配置,DESIGN_VARIANCE控制布局实验性,1是居中保守10是不对称现代,MOTION_INTENSITY控制动画深度,1是hover级微动10是scroll级叙事动效,VISUAL_DENSITY控制信息密度,1是留白充裕的编辑风10是密不透风的仪表盘。默认8/6/4偏向有变化但不疯。三旋钮让agent凭借Brief推理结果自动开展参数选择工作,这样一来不同项目拿到不同视觉策略,你不需要手动调。

第三条叫设计系统映射,要是Brief读出来是微软企业级产品,那么agent就应该选用Fluent UI,英国公共服务选用GOV.UK Frontend,开发者工具选用Primer。taste-skill内置了行业到设计系统的对应表,让agent选组件库和配色体系有依据,不从训练数据均值里随机拼凑。

这三个方面叠加起来所产生的效果,就是能够把AI从单纯的模板复制器转变成为具备明确方向的执行者,具体方向凭借指令文件来进行提供,执行动作则依靠agent去落实完成,人类负责贡献出品味把控,而AI则负责提供运转速度。

v2版本才刚刚对外发布,眼下依然停留在experimental这个阶段,开发者是来自越南的Leon Lin,他在推特上的账号是@lexnlin。taste-skill项目最初只是依靠他本人亲手撰写的一份指令文件起步的,发展到当下已经累计收获了57000颗星并且包含了131个commit,项目里面专门设立了一个research文件夹,用来存放那些对塑造这些skill起到支撑作用的背景研究文档资料,同时还配备了一个examples文件夹,里面保存了选用taste-skill生成的实际界面截图来进行对比展示,这样一来你能够清楚地观察到同一个Brief在缺少skill和具备skill这两种不同情况下所产生输出之间的差异,这种对比方式极其直观,根本不需要去对代码开展解释工作就能明白规则文件确实在发挥着作用。

从v1升级到v2算是经历了一次大幅度的重写操作,不仅加入了设计系统映射,还引入了硬性破折号禁令、GSAP动画骨架代码模板、redesign审计协议以及严格的pre-flight检查环节。v1版本的规则更偏向于宽泛建议性质,然而v2则倾向于硬性约束,这个转变方向无疑是正确的,要是给出宽泛建议的话,对AI而言就显得过于软弱了,读完之后照样会滑回到均值水平,只有依靠硬性约束才能够把输出强行拽到全新的轨道上去。

这13个skill被划分成了两大类别,其中一类是实现skill并且输出代码,比如taste-skill本身,gpt-taste则是专门给GPT和Codex准备的更为严格的版本,image-to-code会先把参考图生成出来然后再去编写代码,redesign负责对已有的界面开展审计工作之后再进行修改,soft-skill主打那种昂贵感的柔和UI风格,minimalist-skill用来输出Notion和Linear式的编辑风格,brutalist-skill走的是瑞士排版结合CRT终端美学的路线,output-skill能够把agent半途截断输出的行为给阻止掉,stitch-skill则是用来制定Google Stitch的兼容规则。另一类则是图像生成skill,这类只出参考图而不出代码,涵盖了前端网页构图、移动端界面流程以及品牌视觉板这三种类型。

这种分类方式本身其实就是一个信号,说明前端开发正在从纯粹的代码生成阶段逐步走向图像先行的工作流模式,先借助ChatGPT Images或者类似的工具把参考构图生成出来从而把视觉方向给确定下来,然后再将其交给编码agent去进行实现,这样一来比起让agent从零开始去猜测你要什么,效率要高出很多并且最终结果也会好得多,taste-skill里面的image-to-code恰恰就是对这条路线的标准化处理。

进行安装操作仅需一条命令就能搞定,也就是npx skills add https://github.com/Leonxlnx/taste-skill,该项目提供了对Cursor、Claude Code、Codex、Gemini CLI、v0、Lovable、OpenCode的支持,可以说基本上主流的AI编码工具都已经覆盖到了。要是你仅仅只想进行单个skill的安装,那么就可以运用--skill参数来指定install name,比如运用--skill 「design-taste-frontend」来单独安装默认的taste-skill,或者干脆直接把SKILL.md文件复制到你的项目目录里面,甚至把它粘贴进ChatGPT的对话当中也都能发挥出作用。它跟框架没有任何关联,不管是React、Vue还是Svelte都可以正常运行,鉴于规则是针对设计意图来进行制定的,并不针对具体的框架API,这恰恰是taste-skill能够得以实现跨agent以及跨框架传播的一个关键性设计选择。

Vercel的OSS Program提供了赞助方面的支持,同时Emil Kowalski的animations.dev也是赞助方之一,把这两个名字放在一起,前端圈子里的人一看便知该项目究竟处于什么样的生态位上。Vercel正在大力推行agent-skills标准,而taste-skill正是凭借这个标准所开展的设计层实现,它并不孤立,而是属于整个生态的一部分。

我实际体验了一番soft-skill那个变体,它走的是那种昂贵感的路线,对比度做得偏低,留白方面给得相当充裕,字体这块挑选了premium级别,动效则是借助spring物理动画来实现的,这样一来最终呈现出来的界面确实跟默认的模板拉开了明显的距离,带着往高端品牌官网去靠拢的那种气质。

我拿它试着跑了一下SaaS定价页,标题没有做居中处理而是偏左,卡片彼此之间的间距直接给拉到了40px,背景色则用了#f8f5f0那种暖白而非冷灰,整体给人的感觉就像是有着三年前端经验的老手手动调校出来的。

不过它也不是万能的,要是项目本身不需要这种气质,强行去选用soft-skill反而会显得有点装,到底决定用哪个skill得根据Brief来决定,而不是取决于哪个stars比较多就去用哪个。

brutalist-skill我也上手体验了一下,呈现出来的东西完全是另外一种味道,瑞士排版配上CRT绿色终端字体,边框做了硬切处理不留圆角,信息密度直接给拉满了,比较适合那些需要视觉冲击力的项目,不过日常去用的话真的太硬了。

60000颗星我觉得有一半是前端开发者给投出来的,另一半可能是不做前端但也被AI生成界面给折磨过的人,大家投的其实不是代码而是形成一个共识,AI是需要品味的,品味这种东西需要有人去教,而教的方式靠的是规则文件而非训练数据。

说个我自己做出的判断吧。taste-skill所解决的是AI编码agent存在的一个结构性缺陷,训练数据偏向均值,输出也就偏向模板了。指令文件这种方式是把人类的设计决策逻辑做显式化处理然后塞进agent的执行流程当中,从根上就把滑回均值的倾向给打断了。这种方式能不能持续保持有效得看两个东西,AI模型到底会不会变得越来越聪明,自己就能凭Brief推理出合适的设计方向而不再需要依靠外部指令文件来拉扯,指令文件的维护成本会不会变成一种负担,设计趋势变化得很快,要是SKILL.md里的规则跟不上趋势,它自己也会变成一种新的模板。

目前来看模型在短期内还做不到自动对设计方向开展推理,审美判断牵扯到文化语境还有行业惯例以及用户心理,模型训练数据的覆盖是偏的,指令文件作为外部补充在现阶段算得上是一条务实的路径。
至于规则过时的问题,taste-skill的做法是给每一个skill分配版本号,v1保留着不删除,v2作为新的默认选项,用户能够按需去开展切换,版本管理相较于单一规则文件要更加灵活,降低了规则过时变成新模板的风险。

57000颗星的背后并不是某一个项目的胜利,而是整个AI编码生态在不得不承认一件事,那就是速度已经完全足够了但品味却还没有跟上。教AI去编写代码相对容易,但要教AI去做出设计层面的决策就变得困难了。taste-skill选用了一种极其朴素的方式对这个问题做出了回应,纯文本纯规则零依赖,仅仅凭借一个人编写出来的指令文件就让六万个开发者点了星。在GitHub Trending上它排在了第四位,daily增长863,排在它前面的三个项目里面有两个是纯代码工具还有一个是system prompt泄露合集,只有taste-skill是纯指令文件,没有运行时代码没有依赖也没有构建步骤,凭借纯文本规则成功获取到的关注量跟凭借代码拿到的关注量完全是同等量级的。

这类项目能够火爆到当前这种程度,其实本身就已经足以说明市场需求有多么强烈,这并非是功能层面的需求,而是审美层面的需求。AI把编码效率大幅拉升到了一个全新的高度,但同时却也把设计质量给挤压到了平均水平,只要是去进行填补这个缺口的东西,哪怕再怎么简单,只要方向是对的,那么就一定会被市场稳稳地接住。

作者 AISet

阅读全文