让 AI 做出来的页面,不像 AI 做的

hallmark:专治「一眼就看出是 AI 做的」

一句话说清:它是一套设计规矩,逼着积木在写页面前先想清楚结构,再套上一种视觉风格,最后自己过一遍 57 道检查。目的只有一个——做出来的东西不带 AI 味。


什么是「AI 味」

你让 AI 做个落地页,十次有九次长一个样:

上面一个大标题配副标题,下面三个并排的功能卡片,再来一排客户 logo,然后是价格表、常见问题,最后一个「立即开始」按钮加四列链接的页脚。

不是说这个结构不对,是每一个 AI 都这么做。看多了就会有一种说不出的塑料感——配色能换、字体能换,但骨架永远是那一套。

这个技能干的事,就是把这套默认骨架给拆了。


它是怎么做到的

1. 先定结构,再谈好看

它准备了 21 种完全不同的页面骨架:有的像报纸版面,有的像一封信,有的像产品目录,有的像宣言海报。做之前先挑一种,而且不许和上次挑的一样

它会把选择明明白白说出来:「这次用宣言式骨架,上次是网格式,这次换了」。你能看到它在挑,而不是闷头套模板。

2. 21 种视觉风格轮着来

报纸感、终端感、油印感、深夜氛围感、手作感……每种都是一整套配色和字体搭配。而且有条硬规矩:连续两次的风格,必须在「底色深浅」「字体气质」「主色冷暖」三个维度里至少差一个。否则就换。

3. 它会自己记账

每次做完,它在项目里留一个小记录,写下这次用了什么骨架、什么风格。下次再做,先翻这个账本,避开用过的。所以同一个项目里做五个页面,五个都不一样。

4. 交付前自己挑刺

最后有 57 道检查,全部是具体的、能判断对错的条目。举几个我觉得特别到位的:

  • 不许编数字。你没给它转化率,它就不能写「转化提升 47%」;你没给它客户数,它就不能写「50000+ 团队在用」。这些编出来的数据,是最廉价的 AI 味。
  • 不许画假浏览器框。那种带三个红黄绿圆点的假浏览器窗口、假手机边框,一律禁止。
  • 标题不许用斜体。这是最容易暴露 AI 的细节之一。
  • 手机上必须真的能用。320、375、414、768 四个宽度都得检查,按钮文字不许折成两行,页面不许左右横滑。

还有一步叫「交付前自评」:它给自己的作品在六个维度打分,低于 3 分就得重做一遍再交。


四种用法

直接用——让它做新页面,它自己走完整套流程。

审一遍(audit)——把你现有的页面丢给它,它只挑毛病、不动手,给你一份按严重程度排序的清单。

重做一遍(redesign)——保留你的文案、导航、品牌,只把视觉结构整个换掉。这个模式有个安全保护:它不许乱删你的文件,动手前要先告诉你打算改哪些,删东西必须你点头。

照着学(study)——看到一个喜欢的网站或者截图,丢给它。它会告诉你这个设计的「骨架」是什么:什么结构、什么字体搭配、主色是什么。然后用你自己的内容重新做一个。

注意:它不抄像素。它明确拒绝复刻别人的页面,也拒绝分析付费模板网站的链接。它提取的是设计思路,不是外观。


效果长什么样

下面两张都是它做的,来自完全不同的需求:

一个是版画展,一个是夜行列车车票。看不出是同一套技能做的——这就是它想要的效果。

还有个「定制」分支:如果你说的需求所有现成风格都装不下(比如你报了品牌色,或者描述了一种很具体的感觉),它会现场调一套专属配色和字体,从零设计。但这条路是安静的,普通需求根本不会触发。


适合谁

  • 让 AI 写前端,但总觉得出来的东西「差点意思」的人
  • 自己不是设计师,但需要页面看起来专业的开发者
  • 手上有个 AI 做的页面,想知道毛病在哪的人
  • 看到好设计想学,但不想直接抄的人

如果你不写代码:这个技能解释了为什么有些网页看着就是「AI 做的」——不是配色的问题,是结构千篇一律。


技能包下载

hallmark-skill.zip (305 KB,解压后放进 skills 目录即可使用)

里面是 107 个文件:一份主规则加上按需加载的参考资料——21 种骨架、21 种风格、50 种组件写法、57 道检查各自独立成篇。积木用到哪个才读哪个,不会一次全塞进上下文。

装好之后,直接说「用 hallmark 做个落地页」就行。它会先问你三件事——给谁看、要用户做什么动作、什么调性——你也可以直接说「你定」,它会把自己的判断说出来给你确认。

开源地址https://github.com/Nutlope/hallmark (MIT,Together AI 出品,目前 2.4 万+ star)

在线看效果https://www.usehallmark.com (21 种风格,按 T 键切换)