
AI 生成前端代码常面临风格单一的问题。描述几句话,几十秒后一个完整页面就出来了,但仔细查看总有一股说不上来的"AI 味":紫色渐变、圆角卡片、居中大标题,千篇一律。能跑,但总觉得差点意思。
taste-skill 是一个开源项目,它只有一个文件——SKILL.md,塞进 AI 编程工具的上下文里,就能让生成的前端代码从"学生作业"变成"设计公司出品"。
原版 taste-skill:思路很棒,但有几个痛点
taste-skill 的原作者将一整套高端 UI/UX 工程规范写成了一个 Markdown 文件。AI 之所以写出千篇一律的页面,不是因为它不会写好代码,而是没人告诉它什么是好的设计。
但原版用下来,发现了几个实际问题:
第一,安装方式太原始。 原版的 README 建议手动下载 SKILL.md 文件放到项目文件夹,并告诉 AI 去读。在现在的环境下,这个安装流程略显落后。如果换个项目或电脑,还得重新配置。
第二,整个项目全是英文。 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 的版本:





