乐于分享
好东西不私藏

为什么 AI 做网页总有一股“模板味”?我从两个 Skill 里找到了答案

为什么 AI 做网页总有一股“模板味”?我从两个 Skill 里找到了答案

现在很多 AI 做网页,其实已经不差了。

问题是,它总差一口气。

第一眼你会觉得:还不错。

第二眼你就会开始皱眉:怎么又是这个味。

紫粉蓝渐变,发光大圆角卡片,玻璃拟态半透明面板,堆满图标和假数据,再来一个标准得不能再标准的 hero 区 + feature 卡片 + FAQ 结构。

单看这些元素,未必有错。

但当它们高频、默认、无差别地出现在几乎所有 AI 生成设计里时,问题就出来了。

AI 不是不会做设计,它只是太容易做出“像设计,但没有判断”的东西。

这也是我最近一直在看两套 Skill 的原因。

一套是 code秘密花园的 garden-skills,里面最值得关注的是 web-design-engineer

另一套是花叔的 huashu-design

看完之后我更确定了一件事:

AI 设计最大的问题,不是会不会生成,而是为什么它总会滑进一种最低成本的默认审美。

而这两个 Skill,刚好给了两个不同但互补的答案。

01 AI 的“模板味”,到底是怎么来的?

我觉得根源主要有三个。

1. 模型会自动回到最常见、最安全、最熟悉的模板

模型看过太多网页、组件、模板和设计稿。

一旦你的需求不够具体,它就很容易回到“统计上最像网页”的结构:大标题、副标题、按钮、几排卡片、最后再补一个 FAQ。

逻辑上没错,但这种方案只保证“像”,不保证“准”。

它像一个网页,但不一定像你的网页。

2. AI 太擅长“堆元素”,不擅长“做取舍”

真正让页面显得高级的,很多时候不是加了什么,而是没加什么。

留白是设计,节奏是设计,克制也是设计。

但 AI 在默认状态下往往特别怕空。你让它做一个 landing page,它会恨不得把 hero、功能、数据、用户评价、FAQ、CTA 一股脑全塞进去。

结果就是:页面很完整,但没有重点。

3. AI 会生成“视觉特征”,但不一定生成“设计哲学”

很多 AI 能学会渐变、圆角、阴影、留白、排版,但如果没有更高一层的约束,它学到的只是形式,不是哲学。

它知道“高级感页面可能长这样”,但它不一定知道:

为什么这个品牌适合克制,而不是热闹为什么这个主题适合杂志感,而不是科技感为什么这里应该用留白,而不是再加 3 张卡片

说到底,AI 很容易学会“像”,但不一定学会“为什么”。

而没有“为什么”,就很难摆脱模板味。

02 garden-skills 的答案:先把坏习惯掐掉

先说 code秘密花园的 garden-skills

这个仓库的定位很清楚:它是一个面向 Claude Code、Cursor、Codex 等环境的 Agent Skills 合集,其中最值得设计场景关注的,就是 web-design-engineer

它给我的第一感受不是“炫”,而是“狠”。

因为它不是在建议 AI 做好看一点,而是在明确拦截最常见的坏习惯。

README 里几个关键词很能说明问题:

anti-cliche blocklistoklch color theorysix-step workflowadvanced patterns library

翻译成人话就是:它知道 AI 最容易俗在哪里,所以先把这些俗套堵上。

它最聪明的一点,是先说“你不能再像谁”

很多人写提示词喜欢说“请帮我做得更高级一点”,但这句话对 AI 几乎没有约束力。

什么叫高级?是苹果风、编辑风、海报感、信息建筑还是极简?如果你不说,模型大概率还是会回到最熟悉的套路里。

而 web-design-engineer 更聪明的一点,是它不先说“你应该像谁”,而是先说“你不能再像谁”。

比如:

不要默认紫粉蓝渐变不要默认 Inter 一把梭不要用 emoji 当图标不要用烂大街的发光大圆角卡片糊满全页

这非常有效。因为 AI 在视觉生成上,很多时候不是缺能力,而是缺边界。

它解决的是:当你已经开始做页面,怎么别做俗

garden-skills 不是一个泛设计 Skill,它在网页和前端视觉这个方向上打得很深。

从需求、上下文、设计系统,到 v0、构建、验证,它给的是一条很明确的链路。

它不是在跟 AI 说“灵感一点”,而是在告诉 AI:

设计不是一次生成,而是一套逐步压实的过程。

所以我从 garden-skills 得到的启发很直接:

去 AI 味,第一步可能不是“加创意”,而是“先戒掉坏习惯”。

03 huashu-design 的答案:先把问题想明白

如果说 garden-skills 给我的感觉,是在前端生成层“纠偏”,那么花叔的 huashu-design,给我的感觉就是在设计决策层“前移”。

它最不一样的一点,是它并不急着让 AI 直接出图。

它先要求 AI 去理解:

目标受众是谁核心信息是什么情绪基调是什么输出场景是什么

这一步看起来慢,但它正好打中了 AI 模板味的另一个根源:

很多模板味,不是因为模型生成得差,而是因为问题一开始就提得太平。

它的核心,不是“直接给方案”,而是“先拉开方向”

huashu-design 很有意思的一点,是它要求推荐 3 套来自不同流派的设计方向。

而且不是笼统说“极简、科技、商务”,而是要带设计师或机构名,比如 Pentagram、Fathom、Kenya Hara、Takram。

这会逼 AI 不要停留在空泛形容词里。

“高级感”这个词太空了,但如果你说:

更像 Pentagram 的编辑秩序更像 Kenya Hara 的东方留白更像 Fathom 的信息叙事

AI 才更可能从抽象形容词,进入可操作的设计语言。

它解决的是:在开始做页面之前,怎么别把问题想窄

它把“看到比说到更有效”写进了工作流。

推荐方向之后,应该尽快出视觉 Demo。因为沟通越模糊,AI 就越容易回到平均值。

所以我从 huashu-design 得到的启发也很明确:

去 AI 味,第二步可能不是继续调参数,而是先把“为什么这样设计”想清楚。

04 这两个 Skill,到底有什么相同点和不同点?

它们的相同点,其实非常清楚:

都不满意 AI 的默认值。

它们都在对抗同一个问题:模型一旦失去约束,就会滑进最常见、最安全、最没有个性的审美模板里。

但它们的解法不一样。

garden-skills:改生成习惯

它更像一个前端视觉层的训练器。

它告诉 AI:

哪些套路不要再碰哪些颜色体系更稳哪些流程更合理怎样把网页从“能用”推进到“更像专业团队作品”

它擅长解决的是:

当你已经准备开始做页面时,怎样别做俗。

huashu-design:改设计判断

它更像一个设计顾问。

它告诉 AI:

先理解需求先推荐方向先拉开风格差异先用设计哲学约束表达最后再评审结果

它擅长解决的是:

在你开始做页面之前,怎样别一开始就把问题想窄。

一个管“别做俗”。

一个管“别想浅”。

05 如果你真想摆脱 AI 模板味,我建议把它们串起来用

我不建议把这两个 Skill 看成二选一。

更好的方式,是把它们串起来。

第一步:先用 huashu-design 定方向

先让 AI 帮你想清楚:

这次设计的受众是谁核心信息是什么适合哪种设计哲学至少应该看哪 3 个明显不同的方向

这一步,本质上是在防止你一上来就掉进模板。

第二步:再用 garden-skills 把页面做深

当你已经确定方向,再让 web-design-engineer 去推进具体页面生成。

它更适合处理:

视觉套路怎么规避颜色和字体怎么落地页面结构怎么从普通走向更成熟v0 到最终版本怎么一步步压实

第三步:最后再回到 huashu-design 做评审

真正好的流程,不是出图就结束。

还要再问一遍:

这个页面真的符合一开始的设计哲学吗视觉层级够不够清晰细节是不是还带着 AI 的平均值痕迹

这时候,huashu-design 的评审框架就会非常有用。

06 我最后的判断

我越来越不相信一句神 Prompt 能解决问题。

因为 AI 设计里真正难的部分,从来不是“生成一个东西”,而是:

怎么判断什么不该生成怎么判断什么值得保留怎么判断什么风格才对怎么判断这个结果到底像不像一个真正有判断的人做出来的

所以我为什么会推荐这两个 Skill?

不是因为它们让 AI 更会“画”,而是因为它们都在推动一件更重要的事:

把设计从凭运气,变成有工作流;把审美从凭感觉,变成有约束。

garden-skills 让我看到的是,先进产品能力是可以被迁移和开源的。

huashu-design 让我看到的是,设计顾问式的判断也是可以被结构化的。

而这两件事合起来,才更像未来的 AI 设计工作方式。

最后一句话

如果你也总觉得 AI 做网页有一股去不掉的“模板味”,那问题可能不是模型不够强。

更可能是:你还没有一套足够好的设计工作流,帮它摆脱最省事、最安全、最廉价的默认答案。

而 garden-skills 和 huashu-design,就是我最近看到的两种很值得研究的解法。


参考链接

code秘密花园 garden-skillshttps://github.com/ConardLi/garden-skills花叔 huashu-skillshttps://github.com/alchaincyf/huashu-skills花叔 huashu-designhttps://github.com/alchaincyf/huashu-skills/tree/master/huashu-designAnthropic Claude Designhttps://www.anthropic.com/news/claude-design-anthropic-labs