AI 做前端,差的不是代码,是审美约束

一、AI 现在很会写前端，但经常不太“像人做的”

过去我们嫌 AI 写不出可运行的代码。现在很多时候恰好相反：它能很快搭出页面，组件能跑，按钮能点，响应式也差不多有。

真正的问题变成了另一件事：页面一眼就像 AI 生成的。

三张卡片、一个居中大标题、紫蓝渐变、玻璃拟态、假数据仪表盘、意义不明的动效、随处可见的模板感。代码没坏，但审美没有约束。

Taste Skill 这个项目解决的正是这个问题。它的自我定位很直接：The Anti-Slop Frontend Framework for AI Agents，也就是给 AI Agent 用的“反糊弄前端”规则包。

项目地址：https://github.com/Leonxlnx/taste-skill 官网：https://tasteskill.dev

二、它不是组件库，而是一组可移植的 Agent Skills

Taste Skill 不是 React 组件库，也不是一套 UI Kit。它更像是一组可复制、可安装、可粘贴到对话里的设计指导文件。

README 里给出的安装方式是：

如果只安装默认 Skill，可以指定 install name：

这些 Skill 面向 Codex、Cursor、Claude Code 等 AI 编程工具。它们的目标不是让模型“灵感爆发”，而是把前端设计里容易被 AI 忽略的判断写成明确规则，让模型在写代码前先读 brief、判断场景、选择设计语言，然后再动手。

三、默认 Skill 的核心：先读需求，再调三个旋钮

默认 Skill 的 install name 是 design-taste-frontend，目前 README 标注为 v2 experimental。

它开头最重要的要求不是“马上写代码”，而是先做 Brief Inference：

• 这是什么页面：SaaS landing、作品集、重设计、编辑型页面？
• 受众是谁：技术采购、设计敏感型消费者、招聘经理、公共服务用户？
• 用户用了哪些 vibe 词：minimalist、Linear-style、Awwwards、brutalist、premium、dark tech？
• 有没有参考站、截图、品牌资产、监管或可访问性约束？

然后它要求 AI 输出一句设计判断，比如：这是面向技术买家的 B2B SaaS landing，应该偏 Linear 式克制语言，而不是默认上来就做紫色渐变英雄区。

接下来是三个旋钮：

• DESIGN_VARIANCE：布局实验程度。越高越不对称、越现代、越敢打破居中模板。
• MOTION_INTENSITY：动效强度。低值只做 hover，高值才考虑滚动叙事、磁吸、GSAP。
• VISUAL_DENSITY：首屏和页面的信息密度。低值更留白，高值更接近复杂产品界面。

这三个旋钮的意义在于：不要让 AI 凭感觉“做漂亮点”，而是让它在同一套规则里明确控制布局、动效和密度。

四、Taste Skill 最有价值的地方，是把“AI 味”列成了检查清单

很多设计建议都停留在抽象层面，比如“更高级一点”“更有呼吸感”“不要太模板”。这些话对人类设计师有用，但对 AI 不够硬。

Taste Skill 的做法更机械：它把常见 AI 前端痕迹写成具体禁令和预检项。

例如 v2 changelog 里提到的强化规则包括：

• 禁止把 em dash 当成随处可用的设计语气。
• 禁止每个 section 都加编号眉标，比如 00 / INDEX。
• 禁止英雄区塞太多元素，主标题最多两行，副文案要短，CTA 首屏可见。
• 禁止桌面导航换行，导航高度不要失控。
• 禁止把“Trusted by”做成纯文字 logo wall，应该使用真实 SVG logo。
• 禁止一整页重复同一种 section 布局。
• 禁止假装产品截图，把一堆 div 拼成“假仪表盘”。
• 禁止长列表只用 border-t 和 border-b 一行行堆。
• 禁止按钮对比度不合格、CTA 文案换行、表单 placeholder 当 label。

这类规则听起来细碎，但非常关键。AI 前端最常见的问题不是某一处错得离谱，而是几十个小型“默认模板痕迹”叠在一起，最后页面就失去了可信度。

五、它还拆出了不同口味的 Skill

项目不是只有一个 Skill，而是按使用场景拆了一组：

• design-taste-frontend：默认 Taste Skill，适合 landing page、作品集和 redesign。
• design-taste-frontend-v1：保留旧版行为，便于依赖 v1 的项目固定版本。
• gpt-taste：更严格的 GPT / Codex 变体，强调更强的布局变化和动效约束。
• image-to-code：先生成参考图，再分析，再实现页面的图像优先流程。
• redesign-existing-projects：用于已有项目，先做 UI audit，再改布局、间距、层级和样式。
• high-end-visual-design：更克制、更柔和、更“贵”的视觉方向。
• minimalist-ui：偏 Notion / Linear 气质的编辑型产品 UI。
• industrial-brutalist-ui：硬朗、机械、瑞士字体、强对比的 brutalist 方向。
• stitch-design-taste：兼容 Google Stitch 的规则。
• full-output-enforcement：当模型总是省略实现、写 placeholder 时，用来强制完整输出。

另外还有三个偏图片生成的 Skill：

• imagegen-frontend-web：生成网站参考图。
• imagegen-frontend-mobile：生成移动端界面和流程参考。
• brandkit：生成品牌板，包括 logo、色彩、字体和身份应用。

这说明作者并不把“taste”理解成一个固定风格，而是拆成不同任务下的约束系统。

六、示例为什么有效：它不是“好看”，而是统一

项目 README 里放了一个名为 Floria 的示例。这个页面是一个高端花艺工作室风格的 landing page：黑色背景、克制排版、雕塑感花艺图片、少量按钮、强烈的品牌语气。

这个例子不是靠“炫技”取胜，而是靠统一：

• 文案把花艺说成 botanical architecture，而不是普通花店。
• 图片选择和文案一致，都是雕塑感、空间感、装置感。
• 黑色背景和少量灰白文字支持“高端工作室”定位。
• CTA 和导航很克制，没有到处发光。
• 卡片、圆角、留白和摄影风格保持同一套语言。

这就是 Taste Skill 想训练 AI 做到的事：不是往页面上堆设计元素，而是让定位、布局、图片、文字、动效和组件状态都服务同一个判断。

七、适合谁用？

Taste Skill 更适合已经在用 AI 写前端的人，尤其是这些场景：

• 你用 Codex、Cursor、Claude Code 快速搭 landing page，但总觉得页面模板味重。
• 你想让 AI 在写代码前先判断品牌语气，而不是直接生成默认 hero。
• 你经常做 redesign，希望模型先审计旧页面，再分层修复视觉问题。
• 你需要给 AI 一个明确的前端设计检查清单，减少“看起来能跑但不像产品”的输出。
• 你希望在不同审美方向之间切换，比如 minimalist、soft、brutalist、premium，而不是每次都重新解释一遍。

它不适合拿来替代设计师，也不适合做数据表、复杂后台、多步骤表单、代码编辑器或实时协作产品 UI。默认 Skill 自己也明确说：它主要面向 landing pages、portfolios 和 redesigns。

八、一个小提醒：这类 Skill 的价值在于执行，而不在于收藏

Taste Skill 最有意思的地方，不是仓库里有多少条规则，而是它把“审美”变成了 AI 可以执行的流程：

先读 brief，再判断受众和风格； 再设置布局、动效、密度旋钮； 再选择真实设计系统或诚实的 aesthetic 实现； 最后用 pre-flight checklist 逐项排雷。

如果只是把它装上，但每次提示词仍然写“做个高级一点的官网”，效果不会稳定。它真正的用法，是把 Skill 当成项目约束，让 AI 在生成前、中、后都受它约束。

九、结语：前端 AI 的下一步，是从“生成代码”到“生成判断”

AI 前端已经不缺速度。缺的是判断：什么时候该克制，什么时候该实验；什么时候该用真实设计系统，什么时候只是 aesthetic；什么时候动效有意义，什么时候只是炫耀；什么时候页面看似丰富，其实只是模板元素堆叠。

Taste Skill 的价值就在这里。它把这些判断写成规则，让 AI 不只是更快地写前端，而是更少写出一眼 AI 味的前端。

项目地址： https://github.com/Leonxlnx/taste-skill

官网： https://tasteskill.dev

补充说明：项目 README 明确声明 Taste Skill 没有官方 token、coin 或 crypto 项目，任何使用其名称、图像或项目名的 token 都与作者无关，也未获得背书。