AI做的页面为什么总是那么丑?这个工具教AI学会＂审美＂

有没有注意到一个现象：AI生成的网页，长得都差不多。

圆角卡片、渐变按钮、左图右文的万年布局。打开十个AI做的产品页，八个像是一个模子刻出来的。配色永远是那几个安全色：淡紫、浅蓝、温柔的灰。

这不是你的错觉。

用设计师的行话来说，这叫"审美均值化"。AI训练数据里包含几百万个网页，它学会了"大多数网页长什么样"，然后忠实地复制那个"平均值"。结果是：不丑，但也不好看。像便利店的便当，能吃，但没人会拍照发朋友圈。

一个前端工程师的崩溃日常

Leon做了五年前端设计和开发，在一家中型互联网公司负责产品页面。

公司引入AI编程工具后，他本以为工作会变轻松，结果发现完全相反。

AI生成的页面"能用"，但永远"差点意思"。他举过一个例子：让AI做一个定价页，它会给你三个圆角卡片横排，每个卡片里有价格、功能列表、一个CTA按钮。功能列表用圆点标记，价格用大号字，按钮用品牌色渐变。

看起来没毛病。但问题是，每个AI工具做出来的定价页都长这样。

Leon每天的工作变成了：接AI的产出，然后花两三个小时手动改。调间距、改字号层级、重新选配色、去掉多余的装饰线条。他在博客里写了一句吐槽："我现在的工作不是写代码，是给AI当美术指导。"

然后他做了一个决定。

Leon的想法很直接：AI不懂设计，那就把设计规则直接写进它的脑子里。

他花了两个星期，把自己五年前端经验总结成了一套规则文件，命名为 Taste-Skill。

这套规则不是组件库，也不是模板。它更像一个"设计顾问"，在AI写代码之前先跟它约法三章。

具体有四条核心铁律：

留白要有呼吸感。 页面元素之间必须保持足够间距，不能挤在一起。人类的视觉系统会本能地排斥密密麻麻的排列，看到一个元素堆着另一个元素的页面，第一反应就是想关掉。AI没有这种直觉，它倾向于把信息密度做到最高。Taste-Skill强制它留出至少 8px到16px 的间距。

排版要有清晰的视觉层级。 标题、副标题、正文、注释，这四个层级之间必须有明显的视觉差距。如果读者需要花超过一秒来分辨"这段话里哪句是重点"，设计就失败了。AI最常犯的错误是标题和正文只差 2px字号，看起来几乎一样。Taste-Skill要求标题字号至少是正文的 4倍。

配色不能超过三个主色调。 这一条可能是AI犯得最频繁的错误。因为训练数据里大量的营销页面用了五六种颜色，AI学会了"颜色多=丰富"。但真正的设计原则是克制。Taste-Skill限制AI最多用三个主色，包括一个中性色、一个强调色、一个背景色。其他的全部砍掉。

字体大小必须有强烈对比。 很多AI生成的页面，标题 32px，正文 28px。技术上是"不一样"，但视觉上根本分不出来。Taste-Skill要求主标题和正文之间至少有 3:1 的比例差距，这样用户扫一眼就知道该看哪里。

Leon在自己的GitHub页面放了一组对比截图。

同一个"团队介绍页"需求，他让AI分别在不装和安装Taste-Skill的情况下生成。

不装的时候，AI给出的是标准的"三列卡片布局"：每个团队成员一个卡片，头像圆角裁切，名字加粗，职位用灰色小字，一段简介，底部一个社交图标行。配色用了淡紫、深紫、浅蓝三种。

装了之后，布局变了。不再是千篇一律的三列卡片，而是用了不对称的网格：左侧一个大的主视觉区放团队照片，右侧用更紧凑的排版列出成员信息。配色缩减为深色背景加一个暖橙色强调。字号对比明显拉开，一眼就能看到团队名称。

Leon在Readme里写了一句："不是翻天覆地的变化，但看起来终于不像AI做的了。"

Taste-Skill 目前在 GitHub 已有 62,000+ 颗星，4,378 次 Fork，MIT 开源协议，支持 Claude Code、Cursor、Windsurf、Cline 四款主流AI编程工具。

这个数据说明一件事：AI生成页面"差点意思"，不只是Leon一个人的痛点。数以万计的开发者每天都在经历同样的挫败感。

但更值得思考的是它背后的趋势。

Cursor的官方论坛里，讨论最多的话题之一是"怎么让AI生成的UI更好看"。Claude Code的用户群里有大量关于"设计质量"的抱怨帖。

竞争已经从"能不能写"进入了"写得好不好"的阶段。

这意味着什么？意味着光会写代码的AI工具，护城河正在变浅。当所有AI都能生成功能完整的页面时，"好看"就成了下一个决胜点。谁能把设计理解融入到代码生成里，谁就能留住用户。

Taste-Skill现在做的事，本质上是在填补这个空档。它不是要替代设计师，而是把AI的输出质量拉高一个台阶，让设计师的时间花在真正需要创造力的地方，而不是每天调间距和配色。

项目完全开源，MIT 协议，GitHub 搜索 Leonxlnx/taste-skill 就能找到。安装大概两分钟，把规则文件放进对应AI工具的配置目录就行。

装完之后你会理解那句话：好的设计不是加什么，而是知道不该加什么。