让 AI 前端少一点模板味：Taste Skill 把审美写成可执行规则

现在让 AI 写一个前端页面很容易。

输入一句“做一个现代 SaaS 首页”，它很快给你一套页面：居中的大标题、渐变背景、三张卡片、圆角按钮、浅色阴影、再加几段看起来正确的文案。

页面能跑，也不丑。

问题在于，它太像了。

换一个项目，还是同样的 hero。
换一个行业，还是同样的卡片。
换一个产品，还是同样的蓝紫渐变。

你能感到它来自 AI，但很难说哪一行代码出了问题。

最近看到一个很有意思的开源项目：Taste Skill。

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

它不是一个组件库，也不是一个模板市场。它更像一组给 AI Agent 用的“前端审美约束”。

项目 README 里给出的定位很直接：

Portable Agent Skills for building tasteful web applications and high-quality UI assets.

翻成中文，就是一套可移植的 Agent Skills，用来让 AI 构建更有审美判断的 Web 应用和 UI 资产。

这里的关键词不是“更漂亮”，而是“更有判断”。

一、AI 前端的模板味从哪里来

AI 做前端时，常见问题并不是完全不会写。

它会用 React。
它会写 Tailwind。
它会加响应式。
它会放按钮、卡片、导航和图标。

真正的问题是，它习惯走安全路线。

安全路线通常长这样：

• 页面从一个居中的 hero 开始
• H1 很大，副标题很长
• 背景是蓝紫渐变
• 内容被拆成三张功能卡
• 卡片圆角很大，阴影很轻
• section 之间留很多空白
• 所有东西都对齐得很规矩
• 文案在解释“这个产品如何帮助你提升效率”

这种页面不难看，但没有记忆点。

它像一个“合格默认值”。用户不会被吓到，也不会记住它。

Taste Skill 想解决的就是这个问题：把“别再写默认模板”这件事，写成 AI 能执行的规则。

它不让模型只追求干净。它要求模型考虑布局、字体、密度、动效、颜色、组件完成度，以及不同场景下页面应该有什么气质。

二、这个仓库里有什么

Taste Skill 不是一个单独 skill，而是一组 skills。

从 README 看，它把内容分成两类。

第一类是 Coding Agents 用的 skills，用来指导 AI 写前端代码。包括：

• design-taste-frontend
• gpt-taste
• image-to-code
• redesign-existing-projects
• minimalist-ui
• industrial-brutalist-ui
• full-output-enforcement
• stop-slop
• prevent-text-overflow

第二类是 Image Generation 用的 skills，用来生成前端参考图、移动端 mockup、brandkit 等视觉素材。包括：

• imagegen-frontend-web
• imagegen-frontend-mobile
• imagegen-frontend-brandkit
• imagegen-icon-patterns

这套结构说明作者并不把“审美”看成一句 prompt。

不同任务需要不同规则。

新做一个页面，需要 design-taste-frontend。
把图片还原成代码，需要 image-to-code。
重做旧项目，需要 redesign-existing-projects。
想走极简方向，可以用 minimalist-ui。
想要更硬、更工业化的视觉，可以用 industrial-brutalist-ui。
生成参考图，则走 imagegen 系列。

把所有风格都塞进一条指令，结果往往会互相打架。Taste Skill 的思路是按任务拆开。

三、核心 skill：design-taste-frontend

Taste Skill 默认安装的是 design-taste-frontend。

它主要管三件事：

第一，避免常见 AI 视觉套路。

比如不要默认使用一眼 AI 的 hero、随机渐变、过度卡片化布局、同质化 section。

第二，让页面从产品和场景出发。

一个 AI infra dashboard，不应该长得像消费级 App landing page。
一个开发者工具，不应该用过多装饰性卡片。
一个创意作品集，也不该像企业后台。

第三，提高完成度。

前端页面不只是“看起来有内容”。它需要处理真实状态：

• hover
• focus
• loading
• empty state
• error state
• mobile layout
• text overflow
• chart or table density
• icon and button affordance

这类细节决定页面能不能像产品，而不是像 demo。

四、三个旋钮控制页面气质

Taste Skill 里有一个很实用的设计：用环境变量控制生成风格。

README 里列了三个旋钮：

DESIGN_VARIANCE=0.7
MOTION_INTENSITY=0.3
VISUAL_DENSITY=0.6

DESIGN_VARIANCE 控制布局实验度。

值低一点，页面更稳，更接近常规布局。
值高一点，模型会尝试更强的布局变化，比如不对称构图、重叠层级、非标准网格。

MOTION_INTENSITY 控制动效强度。

值低一点，只保留 hover、transition 这类轻动作。
值高一点，可以加入 scroll reveal、磁吸交互、视差和更强的状态反馈。

VISUAL_DENSITY 控制信息密度。

值低一点，适合 landing page、品牌页、展示页。
值高一点，适合 dashboard、编辑器、管理后台和专业工具。

这三个变量很有意思。

它们把“我要更有设计感一点”这种模糊要求，拆成了 AI 能理解的控制项。

你不需要每次都写一大段审美描述。你可以把方向收敛到几个明确参数上。

五、不是一个 Skill，而是一套前端审美工具箱

Taste Skill 的另一个特点是可移植。

README 给了几种安装方式：

安装全部 skills：

curl -fsSL https://raw.githubusercontent.com/Leonxlnx/taste-skill/main/scripts/install.sh | bash

只安装默认的 design-taste-frontend：

curl -fsSL https://raw.githubusercontent.com/Leonxlnx/taste-skill/main/scripts/install-default.sh | bash

也可以手动复制到不同 agent 环境：

• Codex：$CODEX_HOME/skills/<skill-name>/SKILL.md
• Cursor：.cursor/skills/<skill-name>/SKILL.md
• Claude Code：$CLAUDE_HOME/skills/<skill-name>/SKILL.md
• Gemini：$GEMINI_HOME/skills/<skill-name>/GEMINI.md

这说明项目的目标不是绑定某个工具，而是把审美规则写成可迁移的 agent skill。

同一套规则，可以在 Codex、Cursor、Claude Code、Gemini 这类环境里复用。

六、它适合什么场景

第一类场景，是从零生成一个前端应用。

比如你让 AI 做一个 SaaS dashboard、开发者工具、管理后台或作品集页面。Taste Skill 能帮模型少走默认模板。

第二类场景，是重做旧项目。

很多旧项目不是功能不行，而是 UI 缺少层级、状态和密度。redesign-existing-projects 这类 skill 更适合这类任务。

第三类场景，是从设计图还原代码。

image-to-code 和 imagegen 系列 skills 可以用于参考图到界面的转换，适合先出视觉方向，再让 agent 写实现。

第四类场景，是长期维护一个产品的前端气质。

团队可以把常用 skill 固定下来，让 AI 每次生成页面时都遵守同一套审美边界。这样比每次重新写 prompt 更稳。

七、它的边界

Taste Skill 不能替代设计师。

它不能理解品牌历史。
它不能替你做用户研究。
它也不能保证生成出来的页面一定符合业务目标。

它解决的是另一个问题：AI Agent 写前端时缺少稳定的审美约束。

如果你的输入只有“做个现代页面”，模型大概率会交一个安全默认值。Taste Skill 会把这个默认值往更明确的方向推。

真正好的页面仍然需要人来判断：

这个布局是否符合使用场景？
这个密度是否适合目标用户？
这个动效是否干扰操作？
这个色彩是否符合品牌？
这个页面是否真的比旧版更好用？

Skill 能提高下限。上限还在人的判断里。

我的看法

Taste Skill 抓住了 AI 前端生成里的一个实际问题。

现在模型写代码越来越强，但生成的界面经常停在“能看”的层级。代码结构对了，组件也有了，页面却像十个 demo 拼出来的。

这不是单纯的 CSS 问题。

它和模型的默认偏好有关：选择最常见的布局，使用最安全的配色，复用最容易预测的 section 结构。

Taste Skill 的做法是把这些偏好显式写出来，再用规则约束它。

不要默认卡片。
不要默认蓝紫渐变。
不要只有 hero 和三列功能点。
不要忽略文字溢出。
不要省略状态。
不要把所有产品都做成同一种 SaaS 首页。

这些规则看起来琐碎，但正是这些琐碎细节，让页面从 demo 接近产品。

如果你经常让 AI 生成前端页面，这个项目值得试试。

结尾

AI 前端工具已经能把页面搭起来。

接下来更重要的问题是：它搭出来的页面有没有判断。

Taste Skill 给出的答案不是再加一个模板，而是把设计偏好、反模板规则和交付标准写进 skill。

这很适合今天的 agent 工作流。

让模型写代码。
让 skill 约束审美。
让人做最后判断。

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

参考资料：
Taste Skill GitHub README、项目默认 design-taste-frontend skill 说明。