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 SkillGitHub 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 SkillGitHub 15.9K⭐可能是最受欢迎的设计品味控制技能。它是什么3 个参数调风格像调 EQ 一样参数最小值 (1)最大值 (10)DESIGN_VARIANCE居中、保守不对称、大胆MOTION_INTENSITY简单 hover磁吸、滚动触发动画VISUAL_DENSITY宽松、奢华留白紧凑、仪表盘式内部机制taste-skill 是一个包含 7 个子技能的技能包子技能适用场景design-taste-frontend主默认高级设计minimalist-uiNotion/Linear 式极简industrial-bratist-ui瑞士排版粗野主义redesign-existing-projects改造已有 UIstitch-design-taste拼接风格gpt-tasteGPT 风格image-to-code截图转代码当你说帮我设计一个页面时它会根据你的参数偏好自动应用一套完整的设计风格——从字体、间距、阴影到动画曲线。同时拦截 AI 默认的那些廉价设计。触发方式自动、命令。你说帮我设计一个页面或调一下这个风格时会自动触发也可以手动指定参数值来调风格。安装任何需要从零设计页面的场景觉得 AI 设计太AI 味时想快速尝试不同风格时调 3 个参数即可和 Impeccable 的区别ImpeccableTaste Skill方式审查修复现有设计从零生成设计方案命令20 个斜杠命令3 个参数控制工作流“先做再改”“先定调再做”适合改已有 UI新建 UI两者不冲突可以同时用——Taste Skill 先出方案Impeccable 再做审查。三、Anthony Fu 的 SkillsGitHub 4.8K⭐作者 Anthony Fu 是 Vue/Vite 生态的核心维护者Vite、Vitest、Slidev、VueUse 的作者。它是什么这是一个由 Vue 生态核心开发者维护的技能集包含 5 个子技能子技能作用viteVite 配置优化、插件 API、SSR、Vite 8 Rolldown 迁移vue-router-best-practicesVue Router 路由设计、导航守卫、参数传递piniaPinia 状态管理、store 设计模式vue-testing-best-practicesVitest 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-skill105⭐覆盖地理编码、POI 搜索、多模式路径规划驾车/步行/骑行/公交、距离测量、天气、IP 定位触发方式自动。项目中提到接入地图、“POI 搜索”、路径规划时自动触发。安装项目需要接入高德地图时做地理编码、POI 搜索、路径规划时需要在地图上做数据可视化时适合使用 Vue/React 封装高德地图组件的场景五、UI-UX-Pro-Max-SkillGitHub 上较新的技能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-MaxTaste SkillImpeccable数据驱动✅ BM25 检索❌ 规则驱动❌ 反模式驱动风格预设67 种7 种审查为主调色板161 套无固定无固定CLI✅ npm 包❌❌核心优势快速给出规范品味控制审查修复总结技能⭐触发核心能力安装方式Impeccable25.6K命令前端设计反模式词典审查修复npx skills add pbakaus/impeccableTaste Skill15.9K自动、命令3 参数控风格从零设计方案npx skills add leonxlnx/taste-skillAnthony Fu Skills4.8K自动、命令Vite/Vue/Pinia 框架作者亲写npx skills add antfu/skillsAmap Skills官方自动高德地图 JSAPI 开发npx skills add AMap-Web/amap-skillsUI-UX-Pro-Maxv2.1.0自动、命令67 风格 161 配色知识库npm install -g uipro-cli推荐安装组合核心必装Impeccable Taste Skill设计和审查都覆盖按需选装Vue 项目加 Anthony Fu地图项目加 Amap快速出规范加 UI-UX-Pro-Max 
