夜雨聆风每日一种热门AI工具｜Taste-Skill：让AI写的前端从此告别"俗套"
你有没有这种感觉——让AI写一个落地页，它出来的永远是这样的：
紫色渐变背景 + 居中大标题 + 三列等宽卡片网格 + 鼠标悬停上浮4像素。
换一个工具写，出来的还是这套。
好像AI们都在用同一套模板，只是把颜色换了一下。
问题不在AI不会设计，而在没人告诉它什么叫"好看"。
今天这个工具，就是来解决这个问题的。
什么是 Taste-Skill
Taste-Skill 是一个面向AI编程工具的"反俗套前端框架"（Anti-Slop Frontend Framework），本质是一个.md格式的指令文件。
GitHub：github.com/Leonxlnx/taste-skillStars：28.1K（今日+2,062，GitHub Trending上榜） 支持工具：Claude Code / Cursor / Codex / Gemini CLI
它的工作逻辑很简单——你把这个skill装进AI编程工具里，以后AI在生成前端代码时，就会自动遵循一套设计规范，而不是输出那套万年不变的模板。
它能做什么
1. 消灭"AI味"界面
没有Taste-Skill，AI生成的页面是这样的：
紫色渐变Hero区 居中大标题 + 灰色副标题 四列等宽卡片网格，间距一致得像Excel表格 悬停效果：上浮4像素 + 阴影加深
有Taste-Skill，同一个需求出来的页面是这样的：
非对称布局，卡片宽窄交替 搜索框 + 数据指标 + 页面纹理 渐变光球 + 滚动淡入 + 鼠标跟随光晕 杂志感节奏设计，不是堆砌，是呼吸
这是同一个AI，差距怎么就这么大？
因为Taste-Skill告诉它："不要生成无聊的模板代码。"
2. 三个旋钮控制设计风格
Taste-Skill提供三个可调节参数，让你可以精确控制输出风格：
| DESIGN_VARIANCE | ||
| MOTION_INTENSITY | ||
| VISUAL_DENSITY |
默认值：8, 6, 4（偏艺术、有动效、留白多）
后台管理系统推荐：3, 3, 7（稳、克制、信息密集）
3. 多个专业变体
根据不同场景，Taste-Skill提供多个技能版本：
| taste-skill（v2） | |
| gpt-taste | |
| image-to-code | |
| redesign-existing | |
| soft-skill | |
| minimalist-skill | |
| brutalist-skill |
怎么安装
方式一：一键安装（推荐）
# 安装全部技能
npx skills add https://github.com/Leonxlnx/taste-skill
# 安装单个技能
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
方式二：固定使用v1版本
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend-v1"
方式三：复制skill文件
直接把SKILL.md文件内容复制到AI对话中，粘贴即可使用。
怎么用
基础用法
安装完成后，在Claude Code/Cursor/Codex中直接提需求即可，skill会自动生效：
/project 新做一个AI工具导航页面，要有搜索、分类筛选、工具卡片展示
AI会自动按照Taste-Skill的设计规范输出，而不是那套千年不变的模板。
指定设计风格
在需求中声明旋钮参数：
做一个仪表盘页面，DESIGN_VARIANCE=3, MOTION_INTENSITY=3, VISUAL_DENSITY=7
适合后台管理系统
图像优先工作流
如果你有设计稿想要AI实现：
follow the skill: generate images, then analyze, then code
先帮我生成一个落地页的设计参考图
配合imagegen-frontend-web技能，AI会先出设计图，你满意后再生成代码。
改进现有项目
帮我用redesign-existing-projects技能审核并改进这个页面的UI
AI会先审核现有UI的问题，然后逐一修复布局、间距、层级、样式。
国内能不能用
可以。
npx skills add是npm官方工具，国内使用完全没有问题。
Skills CLI由Vercel Labs维护，安装源稳定，不需要梯子。
支持Claude Code、Cursor、Codex这些主流工具在国内都可以正常访问和订阅（Claude Code需Pro账号，Cursor有免费额度）。
适合谁用
| 前端开发者 | |
| 产品经理 | |
| 独立开发者 | |
| AI工具爱好者 |
如果你经常用Cursor、Claude Code写前端，但总觉得AI输出的东西"差点意思"，Taste-Skill值得一试。
我的看法
Taste-Skill解决的不只是界面丑的问题，而是AI缺乏设计约束的问题。
现在的AI编程工具，代码能力已经很强，但设计输出几乎都是一个模子刻出来的。不是AI不会设计，而是没有人把"什么是好设计"讲清楚。
Taste-Skill的本质，是把设计师的经验工程化为一段指令。这让我想到一个趋势——
未来设计师的价值，不是手绘原型，而是写出能让AI执行的设计规范。
就像之前Taste-Skill的作者说的那句话：
“"AI不是不会写好看的代码，它只是缺一个好的设计标准。一个几十KB的Markdown文件，就能把AI的前端输出质量拉到一个完全不同的级别。"
这个工具目前是v2实验版，功能已经比较完善，但也可能有些小bug。遇到问题可以用v1版本，或者去GitHub提Issue。
评论区聊一聊：
你用AI写前端遇到过"千篇一律"的问题吗？你觉得AI的设计能力现在处于什么水平？
我是凡哥，关注我看AI趋势。