AI网页设计千篇一律？这个工具让它拥有“品味”

你是否留意过一个现象：人工智能生成的网页，风格惊人地相似。

圆角卡片、渐变按钮、左侧图片右侧文字的老套布局。随便打开十个AI制作的产品页面，有八个仿佛出自同一个模板。色彩搭配永远是那几个稳妥的选择：淡紫色、浅蓝色、柔和的灰色。

这并非你的主观感受。

用设计师的专业术语讲，这叫“审美趋同化”。AI的训练数据涵盖了数百万个网页，它掌握了“大多数网页的外观”，然后精确地复刻那个“平均样式”。结果就是：不难看，但也不出众。如同便利店的盒饭，能填饱肚子，却不会有人特意拍照分享到社交圈。

Leon拥有五年前端设计和开发经验，在一家中型互联网企业负责产品界面。

公司引进AI编程助手后，他原本以为工作会变得轻松，没想到情况恰恰相反。

AI生成的页面“功能可用”，但始终“缺了点韵味”。他举过一个实例：让AI制作一个定价页面，它会呈现三个圆角卡片并排，每个卡片包含价格、功能清单、一个行动号召按钮。功能清单用圆点标识，价格用大号字体，按钮采用品牌色渐变。

表面上看没问题。但关键在于，每个AI工具生成的定价页面都如出一辙。

Leon的日常任务变成了：接收AI的输出，然后耗费两三个小时手动调整。修改间距、调整字号层次、重新挑选配色、删掉多余的装饰元素。他在博客里写下了一句抱怨：“我现在的工作不再是编写代码，而是充当AI的美术指导。”

于是他做出了一个决定。

Leon的思路很明确：AI不理解设计，那就把设计准则直接注入它的逻辑中。

他耗费了两周时间，将自己五年的前端经验凝结成一套规则文件，命名为Taste-Skill。

这套规则既不是组件库，也不是模板。它更像一个“设计顾问”，在AI编写代码之前先与它达成协议。

具体包含四项核心准则：

留白需具备透气感。页面元素之间必须维持充足的距离，不能拥挤堆叠。人类的视觉系统会本能地排斥紧密排列的布局，看到一个元素紧贴另一个元素的页面，首要反应就是想要关闭。AI缺乏这种直觉，它倾向于将信息密度最大化。Taste-Skill强制其保留至少8像素到16像素的间隔。

排版要具有清晰的视觉层次。主标题、副标题、正文、注释，这四个层级之间必须有显著的视觉差异。如果读者需要花费超过一秒来辨别“这段话中哪一句是重点”，设计就宣告失败。AI最常出现的失误是标题和正文仅相差2像素字号，看起来几乎一致。Taste-Skill要求标题字号至少是正文的4倍。

色彩搭配不能超出三个主色调。这一条或许是AI最频繁触犯的规则。因为训练数据中大量的营销页面使用了五六种颜色，AI学会了“颜色多等于丰富”。但真正的设计原则是节制。Taste-Skill限制AI最多使用三个主色，包含一个中性色、一个强调色、一个背景色。其余的统统剔除。

字体尺寸必须有强烈反差。许多AI生成的页面，标题32像素，正文28像素。技术上是“存在差异”，但视觉上根本无从分辨。Taste-Skill要求主标题和正文之间至少保持3:1的比例差距，这样用户扫一眼便知道该关注何处。

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

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

未安装时，AI提供的是标准的“三列卡片布局”：每位团队成员一张卡片，头像圆角裁剪，姓名加粗，职位用灰色小字，一段简介，底部一排社交图标。配色采用了淡紫、深紫、浅蓝三种。

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

Leon在Readme文件中写道：“并非天翻地覆的改变，但看起来终于不像是AI的产物了。”

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

这个数据揭示了一个事实：AI生成页面“缺了点韵味”，并非Leon一个人的困扰。数以万计的开发者每天都在体会相同的挫败感。

但更值得深思的是其背后的趋势。

Cursor的官方论坛里，讨论最热烈的话题之一是“如何让AI生成的界面更美观”。Claude Code的用户群中充斥着大量关于“设计质量”的抱怨贴。

竞争已经从“能否编写”迈入了“编写得好不好”的阶段。

这预示着什么呢？意味着仅会编写代码的AI工具，其护城河正在变浅。当所有AI都能生成功能完整的页面时，“美观”便成为下一个决胜因素。谁能将设计理解融入代码生成中，谁就能留住用户。

Taste-Skill当前所做的事情，本质上是在填补这个空白。它并非要取代设计师，而是将AI的输出质量提升一个层次，让设计师的时间投入到真正需要创造力的地方，而不是每日调整间距和配色。

项目完全开源，采用MIT协议，在GitHub搜索Leonxlnx/taste-skill即可找到。安装大约两分钟，将规则文件放入对应AI工具的配置目录即可。

安装完毕后你会理解那句话：优秀的设计不是添加什么，而是清楚不该添加什么。