Skill 学习篇（十三）| 前端开发必装 Skills 推荐

Slow菜鸟

591人浏览 · 2026-05-08 12:49:44

Slow菜鸟 · 2026-05-08 12:49:44 发布

Skill 学习篇（十三）| 前端开发必装 Skills 推荐

前端是 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 skills add pbakaus/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 skills add antfu/skills --skill vite
npx skills add antfu/skills --skill vue-router-best-practices
npx skills add antfu/skills --skill pinia
npx skills add antfu/skills --skill vue-testing-best-practices

也可以一次装全部：

npx skills add antfu/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 再基于这些规范生成代码

安装

# 先装 CLI
npm install -g uipro-cli

# 然后在项目里初始化
uipro init --ai claude

什么时候用

需要一个具体的 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`