AI 前端没审美？这 21 个设计 Skill 一键反 AI 模板化

有没有发现一个怪现象:Claude Code 越用越熟练,产出的界面却越来越”塑料味”——清一色 Inter 字体、紫蓝渐变、三等分卡片、再加一句 “Elevate your workflow”。看一个还行,看十个就开始反胃。

这不是你的问题,是 AI 编程助手的通病。它们没有审美,只有”看起来差不多就行”的默认模板。要破局,光靠 prompt 是不够的,你得给它喂一套”硬规则”。今天聊一个我个人刚装上的反 slop 神器:UIUX High Taste Skill——一个由 Payoss 整理的 21 个高端 UI/UX 设计技能合集。

它到底是什么

不是一个 Skill,而是 21 个。这套合集把目前 GitHub 上最硬核的设计类 Skill 全部打包到了一起,作者把它们归成四组:

• Leonxlnx/taste-skill 阵营 (7 个)——扛把子的 anti-slop 设计系统,核心是 taste-skill、redesign-skill,加上 minimalist、brutalist、soft、stitch、output 等风格专项。
• mrgoonie/ui-ux-pro-max 阵营 (7 个)——把 nextlevelbuilder 那套 90 分设计的全套最佳实践抄进来,从品牌规范到 banner 设计全包。
• Anthropic 官方技能 (4 个)——frontend-design、canvas-design、theme-factory、algorithmic-art,光 frontend-design 在 skills.sh 就有 27 万+ 安装量。
• 社区补充 (3 个)——frontend-slides、d3js-viz、web-asset-generator,负责演示、数据可视化、favicon 这些边角。

为什么它值得装

它的哲学只有一句话:”Every pixel matters.” 落地到具体规则,就是几个非常硬的负面清单:

• 不要用 Inter 字体(给个 Geist、Outfit、Cabinet Grotesk、Satoshi 都行)
• 不要紫色渐变
• 不要三等分卡片
• 不要写 “Elevate your workflow” 这种文案
• 段落宽度别超 65 字

每一个看起来琐碎,但合起来就让 AI 输出”不像 AI 写”。

三种典型用法

装完之后,实际工作流有三种最常见:

1. 新项目开局:跑 taste-skill,让它先写一份 DESIGN.md,把排版、调色板、间距、动效先定死,再开始动 React 代码。比直接让 Claude 写组件再返工改设计,省至少 2 小时。

2. 老项目审计:跑 redesign-existing-projects,它会按 anti-slop checklist 一项项打分,告诉你哪些地方”塑料感重”,直接给改造方案。

3. 风格实验:切 brutalist-skill / minimalist-skill / soft-skill,一键换整套视觉语言,做不同方向的 A/B 提案不用重写。

安装一行搞定

直接走 npx,全自动装到 ~/.claude/skills/:

npx skills add https://github.com/Payoss/UIUX-high-taste-skill

想只装一个就加 –skill,比如 --skill taste-skill。或者嫌 npx 麻烦,直接 git clone 把单个 SKILL.md 复制进 .claude/skills/ 也行。每个子技能保留各自原仓库的 License(MIT/Apache 居多),商业项目随便用。

谁最该装

独立开发者和产品经理——平时用 AI 写前端,但又受不了”AI 味”重的,装这套就是给自己买一个审美守门员。设计师转开发的反向也合适——你本来就懂设计,这套帮你把”懂设计”这件事翻译成 AI 能听懂的规则。

GitHub:Payoss/UIUX-high-taste-skill (12 ⭐,持续更新中,上次 commit 是 9/26)

GitHub: https://github.com/Payoss/UIUX-high-taste-skill