Skill 学习篇（十一）| 前端开发必装 Skills 推荐
- 一、Impeccable（原 AI Coding Frontend Skill）
- 它是什么
- 内部机制
- 典型反模式（AI 最常犯的）
- 触发方式
- 安装
- 什么时候用
- 二、Taste Skill
- 它是什么
- 内部机制
- 触发方式
- 安装
- 和 Impeccable 的区别
- 三、Anthony Fu 的 Skills
- 它是什么
- 触发方式
- 为什么值得装
- 安装
- 什么时候用
- 四、高德地图 Amap Skills
- 它是什么
- 触发方式
- 安装
- 五、UI-UX-Pro-Max-Skill
- 它是什么
- 触发方式
- 运行机制
- 安装
- 什么时候用
- 和其他技能的区别
- 总结
前端是 AI 编程最容易"翻车"的领域——生成的东西能用但丑，功能对了但设计一塌糊涂。以下 5 个技能专为前端场景设计，从设计品味到技术栈全覆盖。
一、Impeccable（原 AI Coding Frontend Skill）
GitHub 25.6K⭐，是目前前端设计类技能里社区认可度最高的。作者 Paul Bakaus 是资深前端开发者，前 Google 工程师。
它是什么
与其说是一个技能，不如说是一个前端设计反模式词典。它不教你"怎么写代码好看"，而是明确告诉 AI“不要做什么”——把常见的 AI 生成前端页面的廉价感、模板感、AI 味全部列成黑名单。
内部机制
Impeccable 的核心是一套20 个斜杠命令：
| 命令 | 作用 |
|---|---|
/impeccable audit | 审查现有 UI 的问题 |
/impeccable polish | 打磨细节 |
/impeccable critique | 设计批判 |
/impeccable animate | 添加动画 |
/impeccable colorize | 重新配色 |
/impeccable harden | 加固设计一致性 |
/impeccable distill | 简化过度设计 |
/impeccable normalize | 规范化 |
| …等 20 个 |
它还内置了7 份设计参考文件：排版、色彩对比、空间设计、动效设计、交互设计、响应式设计、UX 写作。每份都明确列出了"禁止"清单。
典型反模式（AI 最常犯的）
| AI 默认会做的 | Impeccable 要求替代为 |
|---|---|
| 紫蓝渐变 | oklch色彩空间的纯色 |
| Inter / Roboto 字体 | Plus Jakarta Sans、Sora 等 |
| 用 emoji 当图标（🚀⚡✨） | [icon]占位标记 |
| 卡片套卡片 | 间距+排版层次 |
| 纯黑 #000 / 纯白 #fff | 带色调的中性色 |
| 动画 width/height | 只用 transform + opacity |
| 编造假数据（“10,000+ 用户”） | 要用户提供真实数据 |
触发方式
命令（纯手动）。安装后不会自动触发，需要主动输入斜杠命令调用，例如/impeccable audit、/impeccable polish等。
安装
npx skillsaddpbakaus/impeccable什么时候用
- 设计做完后，用
/impeccable audit审查 - 觉得设计不对但说不清时，用
/impeccable critique - 想让 UI 更高级，用
/impeccable polish
二、Taste Skill
GitHub 15.9K⭐，可能是最受欢迎的设计品味控制技能。
它是什么
3 个参数调风格，像调 EQ 一样：
| 参数 | 最小值 (1) | 最大值 (10) |
|---|---|---|
| DESIGN_VARIANCE | 居中、保守 | 不对称、大胆 |
| MOTION_INTENSITY | 简单 hover | 磁吸、滚动触发动画 |
| VISUAL_DENSITY | 宽松、奢华留白 | 紧凑、仪表盘式 |
内部机制
taste-skill 是一个包含 7 个子技能的技能包：
| 子技能 | 适用场景 |
|---|---|
| design-taste-frontend（主） | 默认高级设计 |
| minimalist-ui | Notion/Linear 式极简 |
| industrial-bratist-ui | 瑞士排版+粗野主义 |
| redesign-existing-projects | 改造已有 UI |
| stitch-design-taste | 拼接风格 |
| gpt-taste | GPT 风格 |
| image-to-code | 截图转代码 |
当你说"帮我设计一个页面"时，它会根据你的参数偏好自动应用一套完整的设计风格——从字体、间距、阴影到动画曲线。同时拦截 AI 默认的那些"廉价设计"。
触发方式
自动、命令。你说"帮我设计一个页面"或"调一下这个风格"时会自动触发，也可以手动指定参数值来调风格。
安装
- 任何需要从零设计页面的场景
- 觉得 AI 设计太"AI 味"时
- 想快速尝试不同风格时，调 3 个参数即可
和 Impeccable 的区别
| Impeccable | Taste Skill | |
|---|---|---|
| 方式 | 审查+修复现有设计 | 从零生成设计方案 |
| 命令 | 20 个斜杠命令 | 3 个参数控制 |
| 工作流 | “先做再改” | “先定调再做” |
| 适合 | 改已有 UI | 新建 UI |
两者不冲突，可以同时用——Taste Skill 先出方案，Impeccable 再做审查。
三、Anthony Fu 的 Skills
GitHub 4.8K⭐，作者 Anthony Fu 是 Vue/Vite 生态的核心维护者（Vite、Vitest、Slidev、VueUse 的作者）。
它是什么
这是一个由 Vue 生态核心开发者维护的技能集，包含 5 个子技能：
| 子技能 | 作用 |
|---|---|
| vite | Vite 配置优化、插件 API、SSR、Vite 8 Rolldown 迁移 |
| vue-router-best-practices | Vue Router 路由设计、导航守卫、参数传递 |
| pinia | Pinia 状态管理、store 设计模式 |
| vue-testing-best-practices | Vitest + Vue Test Utils 组件测试 |
| skills（主入口） | 通用的前端开发指导 |
触发方式
自动、命令。你提到"Vite 配置"、“Vue 路由”、“Pinia store"时自动触发，也可直接问"Vite 最佳实践”。
为什么值得装
因为这是框架作者本人写的技能。当 AI 在写 Vite 配置或 Vue 组件时，它会引用 Anthony Fu 本人认可的写法，而不是随便从网上扒的模式。
安装
npx skillsaddantfu/skills--skillvite npx skillsaddantfu/skills--skillvue-router-best-practices npx skillsaddantfu/skills--skillpinia npx skillsaddantfu/skills--skillvue-testing-best-practices也可以一次装全部：
npx skillsaddantfu/skills什么时候用
- 写 Vite 配置时
- 做 Vue 3 + TypeScript 项目时
- 设计 Vue Router 路由结构时
- 用 Pinia 管理状态时
- 写 Vue 组件测试时
四、高德地图 Amap Skills
高德官方和社区共同维护的技能集。
它是什么
高德开放平台推出的JSAPI 2.0 官方技能+ 社区开发的 Web Service API 技能。
有两个主要来源：
1. 官方 JSAPI Skills（推荐）
- 仓库：
github.com/AMap-Web/amap-skills - 覆盖：地图初始化、POI 搜索、路径规划、数据可视化
- 包含最佳实践、代码模板、安全规范
2. 社区 Web Service API Skill
- 仓库：
github.com/kaichen/amap-skill（105⭐） - 覆盖：地理编码、POI 搜索、多模式路径规划（驾车/步行/骑行/公交）、距离测量、天气、IP 定位
触发方式
自动。项目中提到"接入地图"、“POI 搜索”、"路径规划"时自动触发。
安装
- 项目需要接入高德地图时
- 做地理编码、POI 搜索、路径规划时
- 需要在地图上做数据可视化时
- 适合使用 Vue/React 封装高德地图组件的场景
五、UI-UX-Pro-Max-Skill
GitHub 上较新的技能（v2.1.0），和前几个不同，它走的是"知识库检索"路线。
它是什么
它是一个特化的 UI/UX 知识库，包含：
| 数据 | 数量 |
|---|---|
| UI 风格 | 67 种（玻璃拟态、新拟物、极简、粗野主义、AI-Native 等） |
| 调色板 | 161 套（按行业分类：SaaS、电商、医疗、金融科技） |
| 字体搭配 | 57 组（Google Fonts 组合） |
| UX 指南 | 99 条（无障碍、响应式、性能） |
| 技术栈 | 16 套（React、Next.js、Vue、Svelte、SwiftUI、Flutter、Tailwind、shadcn/ui 等） |
| 图表类型 | 25 种 |
触发方式
自动（大部分平台）、命令（部分平台）。Claude Code、Cursor、Windsurf 上描述 UI 任务时自动触发；Kiro、Copilot 上需手动输入/ui-ux-pro-max。
运行机制
当你说"做一个 SaaS 仪表盘"时，它会：
- 用BM25 搜索算法在你的描述中提取关键词
- 从本地的 CSV 数据库里匹配对应的风格、配色、字体、排版
- 把匹配结果作为设计规范注入 AI 的上下文
- AI 再基于这些规范生成代码
安装
# 先装 CLInpminstall-guipro-cli# 然后在项目里初始化uipro init--aiclaude什么时候用
- 需要一个具体的 UI 风格参考时（“我要玻璃拟态的卡片”）
- 不知道用什么配色时，让它根据行业推荐
- 快速出设计规范而不是靠自己描述
和其他技能的区别
| 维度 | UI-UX-Pro-Max | Taste Skill | Impeccable |
|---|---|---|---|
| 数据驱动 | ✅ BM25 检索 | ❌ 规则驱动 | ❌ 反模式驱动 |
| 风格预设 | 67 种 | 7 种 | 审查为主 |
| 调色板 | 161 套 | 无固定 | 无固定 |
| CLI | ✅ npm 包 | ❌ | ❌ |
| 核心优势 | 快速给出规范 | 品味控制 | 审查修复 |
总结
| 技能 | ⭐ | 触发 | 核心能力 | 安装方式 |
|---|---|---|---|---|
| Impeccable | 25.6K | 命令 | 前端设计反模式词典，审查修复 | npx skills add pbakaus/impeccable |
| Taste Skill | 15.9K | 自动、命令 | 3 参数控风格，从零设计方案 | npx skills add leonxlnx/taste-skill |
| Anthony Fu Skills | 4.8K | 自动、命令 | Vite/Vue/Pinia 框架作者亲写 | npx skills add antfu/skills |
| Amap Skills | 官方 | 自动 | 高德地图 JSAPI 开发 | npx skills add AMap-Web/amap-skills |
| UI-UX-Pro-Max | v2.1.0 | 自动、命令 | 67 风格 + 161 配色知识库 | npm install -g uipro-cli |
推荐安装组合：
- 核心必装：Impeccable + Taste Skill（设计和审查都覆盖）
- 按需选装：Vue 项目加 Anthony Fu，地图项目加 Amap，快速出规范加 UI-UX-Pro-Max
