夜雨聆风
AI写前端最大的问题,不是代码,是“审美”
现在做前端开发，谁还没试过用AI撸代码？
Cursor、Claude Code、Codex轮番上阵，几行prompt就能出一整个页面的代码，效率确实拉满。
但几乎所有开发者都绕不开一个通病：AI写出来的界面，永远带着一股洗不掉的“模板味”——万年不变的居中布局、毫无层次的字体层级、敷衍了事的间距和动效，看着能用，但离“专业、有质感、有设计感”差了十万八千里，最后改样式的时间，比自己从头写还久。
最近我挖到了一个专门解决这个痛点的开源项目——Leonxlnx/taste-skill。
它不做新的前端框架，也不堆现成的代码模板，而是直接给你的AI编程助手，注入一套完整的、专业的前端设计思维，从根源上阻止AI生成那些无聊、同质化的模板代码，让AI写出来的界面，真正拥有 “好品味”。
按需取用的模块化技能，覆盖全场景开发需求
项目没有做一个大而全的“万能包”，而是拆成了多个独立的、各司其职的技能模块，你不需要一次性全用上，根据自己的开发场景按需取用就好。
实现类Skill会输出代码，图片生成类Skill仅输出参考图片。
实现类Skill
|
|
|
| taste-skill |
|
| gpt-taste |
|
| image-to-code-skill |
|
| redesign-skill |
|
| soft-skill |
|
| output-skill |
|
| minimalist-skill |
|
| brutalist-skill |
|
| stitch-skill |
|
图片生成类Skill
此类Skill仅生成设计图片（不输出代码），可搭配ChatGPT图片生成、Codex图片模式，或任意支持生成图片的智能体使用。
|
|
|
| imagegen-frontend-web |
|
| imagegen-frontend-mobile |
|
| brandkit |
|
实例项目
像调音台一样灵活的参数，精准匹配项目需求
在核心的taste-skill里，项目还做了非常贴心的参数化设计，文件顶部设置了三个1-10级的调节旋钮，不用修改复杂的规则，就能快速调整AI的输出风格，精准匹配不同的项目需求。
DESIGN_VARIANCE用来控制布局的实验性，数值越低，输出的布局越偏向居中、稳妥的简洁风格；数值越高，AI就会越倾向于使用不对称、更具现代感的创新布局。
MOTION_INTENSITY用来控制动效的深度，低数值只会保留基础的悬停动效，高数值则会加入更丰富的滚动触发、磁性动效等进阶动画。
VISUAL_DENSITY用来控制单屏的信息密度，做官网、营销页可以调低数值，留出充足的留白提升呼吸感；做后台仪表板、工具类产品可以调高数值，在单屏内放下更多有效信息。
一分钟就能上手，零门槛接入
这个项目的使用门槛极低，哪怕你是第一次接触，也能一分钟完成接入。官方已经适配了Vercel Agent Skills的CLI工具，一行命令就能完成安装。
想把所有技能都装到项目里，直接执行：
npx skills add https://github.com/Leonxlnx/taste-skill如果只想用某一个特定的技能，比如移动端的图像生成技能，加上–skill参数指定名称即可：
npx skills add https://github.com/Leonxlnx/taste-skill --skill "imagegen-frontend-mobile"
最后说几句
它让AI不再只是一个只会敲代码的工具人，而是能真正理解设计逻辑、帮你把控视觉细节的合作伙伴，这绝对是一个能实实在在提升效率和产出质量的工具。
如果你也经常用AI生成前端代码，却总对产出的界面设计不满意，不妨去试试这个项目，说不定能彻底改变你用AI写前端的体验。
项目地址：
欢迎 置顶（标星）关注本公众号「AI开源前哨」获取有趣AI技术/工具分享,这样就第一时间获取推送啦~
