AI写的前端太丑？这22k星的开源技能库让Claude Code秒变设计大师
如果你用 AI 编程工具写过前端页面，你肯定遇到过这个问题。
生成出来的东西，功能是能用的。但那个页面吧——说不上来哪里不对，就是看着有点土。像某个 2019 年的后台管理系统模板，或者是某个从 Bootstrap 4 考古现场挖出来的东西。
不是你的 prompt 写得不好。是 AI 默认的「审美」——如果那能叫审美的话——就是往最安全、最平均、最不冒犯的方向走。居中、白色背景、蓝色按钮、圆角卡片。不丑，但也绝谈不上好看。
然后我遇到了 taste-skill 。准确说，是它在 GitHub Trending 上挂了不知道多少周了——21.9k stars ， 1.7k forks 。基本就是现在 AI 前端领域最被低估的项目，没有之一。
这玩意儿解决什么问题
taste-skill 是一套开源的设计规则文件（ SKILL.md ），给 Claude Code 、 Cursor 、 Codex 、 Gemini CLI 、 v0 、 Lovable 、 OpenCode 这些 AI 编程工具装上「审美系统」。
装完之后会怎么样呢？这么说吧——AI 生成的页面不再是那种千篇一律的模板感。它开始有设计语言了，有节奏感了，有视觉个性了。讲真，我第一次试的时候，盯着屏幕愣了两秒——这玩意儿会了，它真的会了。
作者 Leon Lin 是个设计工程师，项目在 GitHub 上已经有 97 次提交，更新极其活跃——最近 6 小时前还有 commit 。 v2 版本刚出，是个大重构，读你的 brief 然后自动推断设计语言，调三个旋钮（ VARIANCE/MOTION/DENSITY ）。
装法简单到我有点不好意思写出来：
npxskillsaddLeonxlnx/taste-skill 对，就一行。
10 个 Skill ，每个都是不同的设计语言
taste-skill 不是只有一个规则包。它是一整箱工具，按需取用。默认安装的是核心包，但你可以针对不同项目按需激活不同的子技能：
我挑几个最常用的说说：
1. taste-skill （ v2 / 默认）
安装名： design-taste-frontend
这是核心包。 v2 版本做了大重构——它会读你的 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-skill 走高级感路线——柔对比度、大量留白、高端字体、弹性动效。 brutalist-skill 走工业风——瑞士字体、锐利对比、实验性布局。一个做精致电商，一个做先锋品牌站。
其他
还有 output-skill （确保 AI 不写半成品，不留占位注释）、 stitch-skill （ Google Stitch 兼容规则）、以及保留的 v1 版本。每个 skill 都可以单独安装，按项目需求选。
为什么要现在用
说实话， AI 编程工具今年最大的瓶颈已经不是「能不能写代码」了。 Claude Code 和 Codex 写功能逻辑已经轻车熟路。真正的瓶颈是——它写出来的东西没审美。
这个瓶颈不是靠 prompt engineering 能解决的。你需要一套系统性的设计规则，告诉 AI 「什么好看、什么不好看、每种场景用什么风格」。 taste-skill 做的就是这件事。它不是教你写 CSS ，它是把你的 AI 从「工地施工队」变成「室内设计师」。
而且它免费、开源、 MIT 协议。 21.9k stars 不是白来的——你去翻翻 GitHub 的 Issue 区和 Discussions ，作者的回复质量很高，社区也很活跃。最近 6 小时还有新 commit ，这个项目不会突然死掉。
唯一的问题
也不是没槽点。说实话这项目真挺能打的，但硬要挑的话：
第一，如果你用 Cursor ， taste-skill 的规则有时候会和 Cursor 自带的 rules 打架——优先级得手动调一下，不然两边各说各话，最后出来的东西谁都不像，整挺闹心。
第二， v2 目前还是 experimental ，偶尔会抽风出一些意料之外的输出。好在 v1 作为 legacy 保留着，翻车了随时切回去。不过话说回来——experimental 意味着作者在往里面塞新东西，这态度是对的。
第三，对第一次装 Skill 的用户来说，npx skills add这个命令可能会因为 Node 版本问题报错。解法很简单：确保 Node 18+就完事了。不是项目的问题，是你环境的问题——搁这儿跟你闹呢。
但说真的——这三个问题都不算什么问题。装一下试试， 10 分钟你就知道我在说什么了。
现在打开终端：
npxskillsaddLeonxlnx/taste-skill 然后让你的 AI 给你写一个落地页。你会发现，这次出来的东西，终于不那么丑了。
