AI 编程工具很火但是你发现它生成出来的页面都一样。使用几回之后便会发觉, 同一提示词于各异的工具之中所呈现的结果, 版式以及配色皆大致相同。你让 AI 给你写一个落地页。几分钟后就会给你一个“挺好看”的页面紫蓝色渐变的hero居中大标题三张等宽功能卡。很干净颜色搭配也很好。但看多之后就会觉得它太AI了。最近发现了一个开源项目来解决这个问题。它叫 是一套反AI味道的设计规则集合。已经有 21000 多个 Star。01 开源项目简介这是一种具备设计规范性质的skill, 它能够被直接安装进诸如Code、Codex这类工具里面。安装完成之后, 径直朝着AI讲“制作一个页面”。在人工智能采取行动之前, 它会被相关的规则集合所接管。能够自动开展宏观结构的挑选, 进行主题的套用, 实现页面的生成, 并且实施57个质量方面的检查。全部都通过了之后再给你。02 用实际例子来演示一下像举例来说, 我要去做一个东西, 这个东西与工具落地页相关。该工具的名字是, 它是专门针对SRE以及平台工程师而设计的。我想要的是技术感、专业性还能说明它是干嘛的。装上 。我打开 Code输入为能生成一个落地页, 这指的是一个可用于分布式系统的追踪工具, 这个工具是面向SRE以及平台工程师来使用的, 并且这个落地页还要具备技术感。它思考片刻后。提出三个问题来澄清对象、目的、语气。我给出答案之后它选择了这个宏观结构。然后又添加了主题。页面生成以后, 要去运行57个slop - test闸门, 所有闸门都通过了, 之后才把HTML以及CSS交给我。页面出现了, 它显得很整齐, 每一处的排版, 都呈现出比较合理的样子, 一眼看去, 就能够知道, 其并非是经由随便拼凑而得来的。还给 CSS 注释加了本次使用的宏结构标签方便后面检查。03 几个核心功能① 57 个 slop-test 闸门在生成一个页面以前, 要先去跑57个质量检查, 只要挂掉一个, 就得重新开始来做。把被称作“AI味”的事物分成六个不同方面来考量 , 这六个方面分别是哲学 , 层级 , 执行 , 具体性 , 限制性 , 多样性 , 并且在此基础上 , 每个轴线上都存在着8到12个二元判断。比如“卡片高度都一样”挂“字体都用Inter”挂。AI 会把模板化的部分给去掉。② 21 个宏观结构内置 21 种整页骨架可以选。有的排版规则是Bento Grid, 有的排版规则是Hero, 有的排版规则是Long、、Stat-Led, 有的排版规则是Quote-Led、、Index-First……等等, 存在各种各样的排版规则。有两个需求, 它们是不同的, 由这两个不同需求所产生的页面, 其宏观结构并非相同, 所以, 进而得出的结果, 也不会过分相似, 或者是完全一样的。③ 四个动词不仅可以创建新页面还可以审核老代码、修改指纹、学习设计。build 创建新的页面。它会打分并列出AI味反模式清单。去除视觉结构, 留存文案以及 IA, 再度构建指纹。从截图或者 URL 里提取出设计 DNA, 输出.md 的是 study。可是呢, 有人尝试讲过, 跟 skill 相同类型的事物, 最终都会汇聚到一种模样, 除非你把它描绘得极为细致。这也许是它的不足之处。④ 22个主题自定义模式已设置了二十二个, 关于“字体、颜色、排版”的三元组, 而且能够自行进行定义。每一个主题都符合OKLCH色彩系统、字体搭配以及排版规范。比如, Hum呈现出柔和且圆润的特质, 带有奶油或者铁锈的色泽, 还有衬线的样式。而与之相对的, 是锐利的技术感, 有着深蓝色的锚点, 以及mono的特质。要是上述这些全都无法达成你需求的情形下, 便会实现自动切换, 进而生成一个临时的调色板, 以及完成一种字体配对。⑤ 项目记忆./log.json上一次生成的内容会记住不能让两次长得一模一样。每一次构建完毕之后, 于 ./log.json 文件范围内, 将宏观结构事项、主题相关内容、nav/ 这类信息, 全部都予以记录下来。下一次build的时候先读取这个文件。这样连续生成多个页面它就不会用上一次的组合。⑥ 用起来和其它 skill 一样打开 Code 执行。安装完。不需要做其它的设置直接说出自己想要的东西就可以了。04 写在最后有人声称它将AI味给治好了, 然而, 也存在其他人持有这样的看法, 即它仅仅是换了另外一种表述方式, 实际上并没有产生实质性的改变。分场景来看。若是仅仅只是想要一个落地页这情况, 那么呢, 会是能够帮你把模板感给去掉的。如果要的是完全个性化设计的话那它可能还是不够。另外, 有人曾进行过吐槽, 与之相类似的技能, 到最终的时候, 都会趋向于收敛到一种特定的状态, 除非你将其书写得极为详细。这也许是一个问题。但是现在来看还是很实用的。有需要的朋友可以试试。