一个 Skill 文件，让 AI 写的前端页面判若两人

优质文章学习记录

08 Apr 2026 — 10 min read

说实话，我一直对 AI 写前端这件事又爱又恨。

爱的是它真的快——描述几句话，几十秒后一个完整页面就出来了。恨的是...你仔细看看那些页面，总有一股说不上来的"AI味"。紫色渐变、圆角卡片、居中大标题，千篇一律。能跑，但总让人觉得差点意思。

直到我发现了一个叫 taste-skill 的开源项目。

它只有一个文件——SKILL.md，塞进 AI 编程工具的上下文里，就能让生成的前端代码从"学生作业"变成"设计公司出品"。

之前我们聊过 code-simplifier（《Claude Code 官方放大招：code-simplifier 让 AI 写的代码也能优雅起来》），那个解决的是 AI 代码写得乱的问题——冗余多、命名差、逻辑绕。今天这个 taste-skill，解决的是另一个维度：不是代码写得丑，而是页面长得丑。

但原版有几个问题，我折腾了一番，做了些优化。今天就来聊聊这个事。

原版 taste-skill：思路很棒，但有几个痛点

taste-skill 的原作者做了一件很聪明的事：他把一整套高端 UI/UX 工程规范写成了一个 Markdown 文件。AI 之所以写出千篇一律的页面，不是因为它不会写好代码，而是没人告诉它什么是好的设计。这个 SKILL.md 就是那个"告诉它"的东西。

想法很好，但原版用下来，我发现了几个实际问题：

第一，安装方式太原始。

原版的 README 写得很直接：

1. Download the SKILL.md file from this repository. 2. Put it into your project folder. 3. Tell your AI: "Please read and strictly follow the rules in SKILL.md."

手动下载、手动放到项目里、手动告诉 AI 去读。在 2026 年了，大家都用 npx 一行命令装东西，这个安装流程多少有点"上古"了。而且如果你换个项目、换台电脑，还得重新来一遍。

第二，整个项目全是英文。

README 是英文的，SKILL.md 也是全英文的。对于中文开发者来说，光是理解那三个控制旋钮（DESIGNVARIANCE、MOTIONINTENSITY、VISUAL_DENSITY）各自代表什么，就得先翻译一遍。

第三，也是最坑的一个：AI 会把你的中文页面变成英文。

这个问题我是实际用了之后才发现的。因为 SKILL.md 通篇英文，AI 在执行这些规范的时候，会"顺便"把你项目里原本的中文 UI 文案全部替换成英文。你让它写一个中文导航页，出来的标题变成了 "Discover the Best AI Tools"，按钮变成了 "Get Started"。

说实话，当时挺无语的。设计是好看了，但语言全变了，等于白做。

我做了哪些优化

既然思路是对的，问题都是可以解决的，我就 Fork 了一份，动手改了三个地方：

1. 支持 npx 一键安装

现在只需要一行命令：

npx skills add https://github.com/BND-1/taste-skill.git

这行命令会自动把 SKILL.md 安装到你的 AI 编程工具（Claude Code、Cursor、Codex、Gemini CLI 等）的 Skills 目录中。不用手动下载，不用手动配置，装完即用。

想所有项目全局生效？加个 -g：

npx skills add https://github.com/BND-1/taste-skill.git -g

这里用到的是 Vercel Labs 的 skills CLI 工具，它是专门为 AI 编程工具设计的 Skill 分发方案。目前主流的 AI 编程工具基本都支持。

2. 加入语言保护规则

这是最关键的一个改动。我在 SKILL.md 里加了一段强制规则：

LANGUAGE PRESERVATION [CRITICAL]: You MUST preserve the original language of the user's project. If the existing codebase uses Chinese for UI text, labels, headings, descriptions, or any user-facing content, you MUST keep all content in Chinese. NEVER replace or translate existing Chinese text into English.

加了这段之后，AI 在遵循设计规范的同时，会老老实实保留你项目原本的语言。中文项目生成中文界面，英文项目生成英文界面，不再乱翻译了。

3. README 中文化

把整个 README 翻译成了中文，包括三个控制旋钮的详细说明。中文开发者打开就能看懂，不用再对着英文文档猜意思了。

实测对比：同样的提示词，两种截然不同的结果

光说不练没意思。我做了一个简单的实验：用几句话的简短提示词，让 AI 分别在"有 Skill"和"没有 Skill"的情况下，各写两个页面——一个 AI 工具导航页，一个聊天界面。

提示词真的就一句话，没有任何关于设计的额外描述。（这里不好放视频，对比视频放公众号了。）

结果差异大到我自己都没想到。

实测一：AI 工具导航页

没有 Skill 的版本：

看看，是不是很眼熟？标准的 4 列等宽卡片网格，紫色渐变主色调，鼠标悬停往上浮 4 个像素，居中的大标题配一行灰色副标题...这就是 AI 前端代码的"标准模板"。能用，但你在网上搜一百个"AI工具导航"，大概率长得差不多。

使用 Skill 之后：

同样的内容，同样简单的提示词。但你看这个版本：

布局完全不同。没有用无聊的等宽网格，而是用了非对称布局，卡片宽窄交替，每个区块的节奏感都不一样。这种设计语言你在 Apple 和 Stripe 的官网上经常见到，但 AI 默认是绝对写不出来的。

细节拉开差距。搜索框、数据指标、页面纹理...处处都是小心思。更别说代码里还藏了一堆动效——渐变光球、滚动淡入、鼠标跟随光晕，截图里看不到，但实际跑起来体验完全不同。

一个文件带来的差距，是从"能用"到"想用"。

实测二：聊天界面

没有 Skill 的版本：

标准的微信聊天界面克隆。方块头像里写着"助"和"我"，绿色气泡圆角统一，底部是一个 8 列 40 个 emoji 的表情面板。对话内容也很模板——"好的，收到！"、"嗯嗯，我明白了~"、"了解了，还有其他问题吗？"。功能没毛病，但这就是任何人让 AI "做一个聊天界面"都会得到的结果。

使用 Skill 之后：

还是聊天界面，但质感完全不同了。

头像变成了真实的圆角图片，聊天对象有名字、有在线状态。气泡用了非对称圆角——这是 Telegram 和 iMessage 的现代设计语言，AI 默认不会用。表情面板也从 40 个 emoji 挤在一起，变成了一套手绘风格的 SVG 线条贴纸，精致太多。

甚至连自动回复的文案都不一样了。没有 Skill 时是"好的，收到！"这种客服话术；有 Skill 时变成了"这个角度确实新鲜，之前没想到过"——像真人在聊天，不像机器人在应答。

三个旋钮，调出你想要的风格

taste-skill 在 SKILL.md 文件顶部提供了三个数值参数，你可以像调音台一样调整 AI 输出的设计风格：

DESIGN_VARIANCE（设计差异度）：1-10

1-3（常规）：安全的居中布局，标准网格，适合后台管理系统
4-7（创意）：元素开始重叠，文字偏移，图片大小各异
8-10（狂野）：非对称布局、大面积留白、瀑布流网格，杂志感拉满

MOTION_INTENSITY（动效强度）：1-10

1-3（静态）：几乎没有动画，只有简单的悬停变色
4-7（流畅）：丝滑的淡入效果，流畅的滚动体验
8-10（电影级）：鼠标磁性吸引、弹簧物理动画、高级滚动特效

VISUAL_DENSITY（视觉密度）：1-10

1-3（美术馆模式）：大量留白，一张大图一个标题，Apple / Gucci 风格
4-7（日常应用模式）：正常间距，像 Instagram 或新闻网站
8-10（驾驶舱模式）：紧凑的数据面板，一屏看到上百个数据点，适合仪表盘和交易界面

我前面展示的对比案例用的是默认值 8, 6, 4——偏艺术、有动效、留白多。你完全可以根据项目需求调整。比如做后台管理系统，调成 3, 3, 7 就很合适。

怎么安装

一行命令：

npx skills add https://github.com/BND-1/taste-skill.git

装完不需要做任何额外配置。下次让 AI 写前端代码时，它会自动遵循 SKILL.md 里的设计规范。

GitHub 地址：https://github.com/BND-1/taste-skill

写在最后

我以前觉得"AI 写前端"的天花板是由模型能力决定的——模型越强，写出的页面越好看。但这次实验让我改变了想法。

AI 不是不会写好看的代码，它只是缺一个好的设计标准。

taste-skill 证明了一件事：与其等模型升级，不如先把"什么是好设计"讲清楚。一个几十 KB 的 Markdown 文件，就能把 AI 的前端输出质量拉到一个完全不同的级别。

如果你也经常用 AI 写前端代码，又总觉得结果差点意思——试试这个 Skill。用过之后，你大概率会和我一样，再也回不去了。

往期推荐：

飞书社群开源知识库：https://my.feishu.cn/wiki/PFJswU0arip563kZbpNccWkIn0f?fromScene=spaceOverview

今天的文章就到这里啦，如果觉得不错，可以点个赞、在看、转发，三连支持我～

扫描下方图片中我的微信二维码备注"进群"，拉你进社群一起交流学习！