taste-skill，给 AI 写前端装上审美

AI 写前端一直有个硬伤

你肯定遇到过。

让 AI 写个前端页面，出来的东西能用，但就是那种...说不出的土。居中对齐、默认蓝色、间距混乱，看起来像 2015 年的 WordPress 模板。

我之前一直觉得这是 AI 的能力上限，直到我看到一个项目，1.1 万 star，一千多个 fork，专门解决这一个事。

taste-skill，给 AI 装上审美

taste-skill 的思路很直接。它不改 AI，它改的是 AI 的指令。

本质就是一组 SKILL.md 文件，你装进 Cursor、Claude Code、Codex 这些 AI 编码工具里，AI 就会按这些规则来写前端代码。不再生成那些千篇一律的丑页面，而是带动画、有层次、间距合理、配色考究的现代界面。

一行命令装好。

npx skills add https://github.com/Leonxlnx/taste-skill

不是一招鲜，是九种口味

这个项目最有意思的地方，它不是一个 skill，是一整套工具箱。每个 skill 负责不同的审美方向。

taste-skill 是默认款，万金油，适合大多数场景。gpt-taste 专门给 GPT 和 Codex 模型用的，规矩更严格。images-taste-skill 先让 AI 生成设计图，再照着图写代码，效果最接近设计稿。redesign-skill 针对已有项目做 UI 审计和优化，不用推翻重来。

还有三个风格化 skill。soft-skill 走柔和路线，大留白、低对比度，看起来很贵。minimalist-skill 学 Notion 和 Linear 那种克制干净的编辑器风格。brutalist-skill 还在 beta，走瑞士排版那种硬朗机械风，很实验性。

最后还有 output-skill，专门治 AI 偷懒，逼它把代码写完整不跳步。

三个旋钮调参数

taste-skill 里有个细节我觉得设计得很好。文件顶部三个参数，1 到 10 分，可以调。

DESIGN_VARIANCE 控制布局有多大胆。1-3 是干净居中，8-10 是不对称的现代构图。MOTION_INTENSITY 控制动画量。1-3 简单 hover 效果，8-10 直接上磁性吸附和滚动触发。VISUAL_DENSITY 控制信息密度。1-3 豪华留白，8-10 仪表盘那种塞满屏幕。

这三个旋钮基本覆盖了大部分前端场景的需求。你做落地页就拉低密度提高方差，做后台就反着来。

框架无关，工具通吃

它不绑 React，不绑 Vue，不绑任何框架。规则管的是设计决策，不是代码实现。所以不管你用什么技术栈，都能用。

支持的 AI 工具也够全。Cursor、Claude Code、Codex、Windsurf、Copilot 都行。只要是能读 SKILL.md 的 agent，就能用。

谁适合用

如果你经常让 AI 写前端，但总觉得出来的东西差点意思，taste-skill 值得一试。它不会让 AI 变成设计师，但能把 AI 的输出从"能用"拉到"好看"这个档次。

特别是 images-taste-skill 那个先出图再写代码的流程，效果提升很明显。你明确告诉 AI 先生成设计图，深度分析，再照着实现，出来的东西质感完全不一样。

项目地址在这里，github.com/Leonxlnx/taste-skill，开源免费，MIT 协议。