Appearance
taste-skill 22k星开源技能库:让Claude Code前端告别丑模板
你AI写的前端功能能用,但就是"有点土"?不是你的prompt写得不好,是AI默认没有审美。
taste-skill在GitHub Trending上挂了不知道多少周——21.9k stars,1.7k forks,可以说是AI前端领域最被低估的项目之一。
装法就一行命令:
bash
npx skills add Leonxlnx/taste-skill它解决了什么?
taste-skill是一套开源的设计规则文件(SKILL.md),给Claude Code、Cursor、Codex、Gemini CLI、v0、Lovable、OpenCode等AI编程工具装上"审美系统"。
装了之后AI生成的页面不再是千篇一律的模板感——开始有设计语言了,有节奏感了,有视觉个性了。
作者Leon Lin是个设计工程师,项目97次提交,更新极其活跃。v2版本刚出,读你的brief自动推断设计语言,调三个旋钮(VARIANCE/MOTION/DENSITY)。
10个Skill,每个都是不同的设计语言
1. taste-skill v2(默认核心包)
安装名:design-taste-frontend
核心包。读brief自动推断设计语言方向,根据VARIANCE/MOTION/DENSITY三个维度调整输出。内置设计系统地图和严格前置检查。大多数人应该装的第一个。
2. image-to-code
安装名:image-to-code
图片转前端的纯设计通道。传截图或设计稿,先分析设计风格(色板、间距体系、字体层级),再生成匹配的前端代码。甩一张Figma截图过去,就能生成风格一致的页面。
3. redesign-skill
安装名:redesign-existing-projects
现有项目的救星。先审计现有UI——布局、间距、层级、样式——然后定向修复。翻新UI比手动改CSS省10倍时间。
4. minimalist-skill
安装名:minimalist-ui
Notion/Linear风格的极简产品UI。克制色板、清晰结构、编辑气质。适合SaaS后台、工具类产品、文档类页面。
5. gpt-tasteskill
安装名:gpt-taste
给GPT/Codex用的严格版。布局方差更大,GSAP动画方向更激进。Codex用户装这个效果更好。
6. soft-skill / brutalist-skill
安装名:high-end-visual-design / industrial-brutalist-ui
两个极端。soft走高级感——柔对比度、大量留白、高端字体、弹性动效。brutalist走工业风——瑞士字体、锐利对比、实验性布局。
其他
- output-skill:确保AI不写半成品,不留占位注释
- stitch-skill:Google Stitch兼容规则
- v1(保留版本):切回去保底
为什么要现在用
AI编程工具今年最大的瓶颈已经不是"能不能写代码"了。真正的瓶颈是写出来的东西没审美。
这个瓶颈不是靠prompt engineering能解决的。你需要一套系统性的设计规则,告诉AI"什么好看、什么不好看、每种场景用什么风格"。
taste-skill做的就是这件事——不是教你写CSS,是把你的AI从"工地施工队"变成"室内设计师"。
免费、开源、MIT协议。21.9k stars不是白来的,社区也很活跃。
唯一的槽点
| 问题 | 解法 |
|---|---|
| Cursor自带rules可能冲突 | 手动调优先级 |
| v2目前experimental偶尔抽风 | v1作为legacy保留,随时切回去 |
| npx skills add报错 | 确保Node 18+ |
三个都不算什么大问题,装一下试试,10分钟就知道了。
bash
npx skills add Leonxlnx/taste-skill现在让你的AI写一个落地页——你会发现,这次出来的东西,终于不那么丑了。
关键词:taste-skill, Claude Code, 前端设计, AI审美, 开源
