每日一种热门AI工具|Taste-Skill:让AI写的前端从此告别＂俗套＂

每日一种热门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 （设计差异度）	1-10	低=安全居中，高=不对称/现代
MOTION_INTENSITY （动效强度）	1-10	低=简单悬停，高=滚动磁性/弹簧动画
VISUAL_DENSITY （视觉密度）	1-10	低=大量留白，高=密集仪表盘

默认值：8, 6, 4（偏艺术、有动效、留白多）

后台管理系统推荐：3, 3, 7（稳、克制、信息密集）

3. 多个专业变体

根据不同场景，Taste-Skill提供多个技能版本：

技能	适用场景
taste-skill（v2）	通用最佳选择，全新重写版
gpt-taste	GPT/Codex专用，更严格的布局变化
image-to-code	图像优先：先出设计图，再生成代码
redesign-existing	改进现有项目，先审核再修复
soft-skill	高端精致风格，柔和对比度
minimalist-skill	Notion/Linear风格，克制配色
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辅助写页面，但受不了输出太丑
产品经理	想快速出原型，不需要设计师
独立开发者	自己写全栈，需要好看的界面撑门面
AI工具爱好者	想看看"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趋势。