❧ 常用 Skills 使用指南

本文整理了日常开发中常用的 Agent Skills，按功能方向进行分类，方便按需取用。

关于 Skills 基础概念与 CLI 安装方式，参见 Skills 权威使用指南。

一、前端 UI 设计类

本类 Skill 的共同目标是对抗 AI 生成的”模板化”烂审美——避免千篇一律的 Inter 字体、紫色渐变背景、套中套卡片等 AI slop 风格，生成真正有设计感的界面。

1.1 frontend-design — 前端设计 Skill（Anthropic 官方）

描述（官方）： 创建独特的、生产级的前端界面，具有高设计质量。当用户需要构建 Web 组件、页面、海报或应用（网站、落地页、Dashboard、React 组件、HTML/CSS 布局，或对任何 Web UI 进行美化时）触发此 Skill，生成有创意的、经过精细打磨的代码与 UI 设计，避免通用的 AI 审美。

npx skills add https://github.com/anthropics/skills --skill frontend-design

核心指导原则：

设计思维优先：编码前先确定审美方向（极简主义、复古未来、奢华精致、暴力美学等），并执行到底
排版：拒绝通用字体（Arial、Inter、system fonts），选择有个性的展示字体搭配精致正文字体
色彩：选定内聚的调色板，使用 CSS 变量保持一致，主色突出 + 锐利强调色
动效：CSS 动画为主，页面加载时的错落显现比散乱的微交互更有冲击力
空间构图：非对称、叠层、对角线流向、打破网格，或者精心控制的高密度布局
反模式（NEVER）：Inter/Roboto/Arial、白底紫色渐变、可预测的布局和组件套路

1.2 impeccable — AI 前端设计语言

来源： pbakaus/impeccable（⭐ 36.3k）

描述（官方）： 面向 AI 编程 Agent 的设计指导工具。1 个 Skill、23 条命令、实时浏览器迭代、41 条确定性检测规则，专门解决 AI 生成前端设计的质量问题。从 Anthropic 的 frontend-design Skill 演进而来。

推荐安装方式（自动识别当前工具）：

npx impeccable skills install

然后在 AI 工具内执行初始化：

/impeccable init

也可通过通用 CLI 安装：

npx skills add https://github.com/pbakaus/impeccable --skill impeccable

/impeccable init 做了什么：
询问项目类型（品牌营销页 or 产品 App），写入 PRODUCT.md 和 DESIGN.md，此后所有命令都会读取这两个文件作为项目上下文。

23 条核心命令（均通过 /impeccable <命令> 调用）：

命令	作用
`init`	一次性设置：收集设计上下文，写入 PRODUCT.md / DESIGN.md
`craft`	完整的”规划 → 构建”流程，含视觉迭代
`shape`	编码前先规划 UX/UI
`critique`	UX 设计评审：层级、清晰度、情感共鸣
`audit`	技术质量检查（无障碍、性能、响应式）
`polish`	最终打磨、与设计系统对齐，上线前收尾
`bolder`	让平淡的设计更有冲击力
`quieter`	让过于张扬的设计回归克制
`distill`	去除多余，提炼核心
`harden`	补全错误处理、i18n、文本溢出等边界情况
`animate`	添加有目的性的动效
`live`	浏览器内实时视觉变体迭代
`typeset`	修正字体选择、层级和尺寸
`layout`	修正布局、间距、视觉节奏
…	等 23 条

用法示例：

/impeccable audit blog        # 审计博客页面
/impeccable polish checkout   # 上线前打磨结账流程
/impeccable bolder landing    # 让首页更有视觉冲击

独立 CLI 检测（无需 AI）：

npx impeccable detect src/          # 扫描目录
npx impeccable detect index.html    # 扫描 HTML 文件
npx impeccable detect https://example.com  # 扫描线上 URL

可检测 41 类确定性问题（AI slop 侧边框、紫色渐变、弹跳缓动、暗色光晕等）。

1.3 ui-ux-pro-max — 多平台 UI/UX 设计智能 Skill

来源： nextlevelbuilder/ui-ux-pro-max-skill（⭐ 89k）

描述（官方）： 为多个平台和框架构建专业 UI/UX 提供设计智能的 AI Skill。

v2.0 核心特性——智能设计系统生成器：根据项目需求（产品类型），自动在 5 个维度进行并行搜索，秒级生成完整的定制设计系统（布局模式、UI 风格、配色方案、字体组合、关键效果、反模式清单）。

数据规模：

67 种 UI 风格（Glassmorphism、Claymorphism、Minimalism、Brutalism 等）
161 个行业专属配色方案
57 套字体组合
99 条 UX 最佳实践
161 条行业推理规则（覆盖 SaaS、医疗、电商、金融、创意等）
支持 15 种技术栈（React、Next.js、Vue、Nuxt、Svelte、Astro、SwiftUI、Flutter 等）

安装方式（推荐：专用 CLI）：

npm install -g uipro-cli
uipro init --ai claude      # Claude Code
uipro init --ai cursor      # Cursor
uipro init --ai copilot     # GitHub Copilot
uipro init --ai all         # 全部工具

或通过通用 CLI：

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max

注意：设计系统搜索脚本依赖 Python 3.x。

用法示例：

Build a landing page for my SaaS product
Create a dashboard for healthcare analytics
Design a portfolio website with dark mode

Skill 自动激活，根据产品类型匹配最佳设计方案，无需指定风格。

1.4 taste-skill — Anti-Slop 前端框架

来源： Leonxlnx/taste-skill（⭐ 38.6k）

描述（官方）： 给 AI 配上”品味”，阻止 AI 生成无聊、千篇一律的烂界面。这是一套可移植的 Agent Skills，升级 AI 生成界面的布局、排版、动效和间距，摆脱样板化 UI。同时包含图像生成 Skills，可生成设计参考图（Web、移动端、品牌套件），再配合代码实现工具落地。

安装全套（推荐）：

npx skills add https://github.com/Leonxlnx/taste-skill

安装指定 Skill：

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

子 Skills 一览：

Skill 名	安装名（`--skill`）	用途
taste-skill (v2)	`design-taste-frontend`	默认推荐：读取需求 → 推断设计语言 → 调节三个拨盘
taste-skill-v1	`design-taste-frontend-v1`	原版 v1，行为固定，用于依赖旧版的项目
gpt-tasteskill	`gpt-taste`	GPT/Codex 专用：更严格的布局变化和 GSAP 动效
image-to-code	`image-to-code`	先生成设计参考图，再分析，再实现前端代码
redesign-skill	`redesign-existing-projects`	改造已有项目：先审计 UI，再修复布局/间距/风格
soft-skill	`high-end-visual-design`	柔和精致风：留白、高级字体、弹簧动效
minimalist-skill	`minimalist-ui`	极简产品 UI（Notion/Linear 风格）
brutalist-skill	`industrial-brutalist-ui`	工业粗犷风：瑞士字体、强对比、实验性布局
output-skill	`full-output-enforcement`	强制模型输出完整代码，不留占位注释
imagegen-frontend-web	`imagegen-frontend-web`	生成网页设计参考图（仅图像，不输出代码）

taste-skill v2 的三个可调拨盘（在 SKILL.md 顶部修改数值 1-10）：

DESIGN_VARIANCE：布局实验程度（低：居中整洁 / 高：不对称现代）
MOTION_INTENSITY：动画深度（低：仅 hover / 高：滚动+磁性）
VISUAL_DENSITY：信息密度（低：宽松 / 高：高密度 Dashboard）

如何选择子 Skill：

默认用 taste-skill（v2）
项目依赖 v1 旧行为 → taste-skill-v1
用 GPT/Codex → gpt-tasteskill
已有项目改版 → redesign-skill
先出设计图再实现 → image-to-code-skill
风格已确定（柔和/极简/粗犷）→ 对应主题 Skill

二、Vue 专项开发类

2.1 vue-skills — Vue 3 开发技能套件

来源： vuejs-ai/skills（⭐ 2.5k）

描述（官方）： 面向 Vue 3 开发的 Agent Skills 集合。Skills 来源于真实问题，分为两类：

Capability：AI 没有该 Skill 则无法解决（版本特定问题、未文档化行为、训练数据之外的边缘案例）
Efficiency：AI 可以解决但做得不够好（最优模式、最佳实践、一致性方法）

每个规则均经过自动化评测验证（无 Skill 基线 vs 有 Skill）。

npx skills add vuejs-ai/skills

包含的子 Skills：

Skill	适用场景
`vue-best-practices`	Vue 3 + Composition API + TypeScript 最佳实践、常见陷阱、SSR 指导、性能优化
`vue-options-api-best-practices`	Options API 写法、`this` 上下文、生命周期、TypeScript 集成
`vue-router-best-practices`	导航守卫、路由参数、路由-组件生命周期
`vue-pinia-best-practices`	Pinia Store 设置、响应性、状态管理模式
`vue-testing-best-practices`	Vitest、Vue Test Utils、Playwright 测试编写
`vue-jsx-best-practices`	Vue 中的 JSX 语法（与 React JSX 的差异）
`vue-debug-guides`	调试 Vue 3 运行时错误、警告、异步错误处理、Hydration 问题
`create-adaptable-composable`	创建可复用 Composable（MaybeRef/MaybeRefOrGetter 输入模式）

安装单个 Skill：

npx skills add vuejs-ai/skills --skill vue-best-practices

使用方式： 在提示词前加 use vue skill 可显式触发（否则可能因关键词匹配不准而不触发）：

Use vue skill, create a todo app with Pinia

三、工具构建类

3.1 mcp-builder — MCP Server 构建指南 Skill

来源： anthropics/skills

描述（官方）： 创建高质量 MCP（Model Context Protocol）Server 的指导 Skill，让 LLM 通过精心设计的工具与外部服务交互。适用于使用 Python（FastMCP）或 Node/TypeScript（MCP SDK）构建 MCP Server 时调用。

npx skills add https://github.com/anthropics/skills --skill mcp-builder

推荐技术栈：

语言：TypeScript（SDK 支持好，AI 代码质量高，静态类型 + 优质 lint 工具）
传输：远程 Server 用 Streamable HTTP，本地 Server 用 stdio
输入校验：Zod（TypeScript）/ Pydantic（Python）
输出：outputSchema + structuredContent

四阶段开发流程：

深度调研与规划：理解 MCP 设计原则（工具命名、上下文管理、错误消息）、研读 MCP 协议文档和框架文档、规划 API 覆盖范围
实现：搭建项目结构 → 实现基础设施（API 客户端、错误处理、分页）→ 为每个工具定义输入/输出 Schema
评审与测试：代码质量检查（DRY、类型覆盖、工具描述清晰度）→ 用 MCP Inspector 测试
创建评测集：生成 10 道复杂、真实、可验证的问答题，测量 Server 的实际可用性

适用场景：

从零构建对接第三方 API 的 MCP Server
为现有服务添加 MCP 接口，让 AI 具备调用能力

四、写作辅助类

4.1 writing-skills — 中文写作套件

来源： simonwong/writing-skills

描述（官方）： 一套围绕「收集 → 分析 → 创作 → 打磨」流程设计的中文写作辅助技能组。

npx skills add simonwong/writing-skills

包含的子 Skills：

Skill	用途
`rewrite-en2zh`	将英文内容重写为地道简体中文（deverbalization 技巧：理解原意后脱离英文外壳，保留 AI/技术专有名词）
`style-extract`	分析文章写作风格，提取风格维度存入风格素材库，融合多篇生成主力风格档案
`material-ingest`	拆解文章，提取可复用素材（观点、数据、案例、金句、类比、方法论），分类入库
`material-retrieve`	从素材库按主题/标签/类型检索写作素材
`compose`	基于主题或参考文章进行中文创作，自动检索素材库 + 加载主力风格档案
`rewrite`	润色改写，去除 AI 感，按主力风格档案调整文风（先诊断再改写）
`title-gen`	为文章生成多个候选标题，覆盖不同策略（悬念、数字、痛点、观点等），标注适用平台

推荐使用流程：

style-extract：分析 3-5 篇文章，建立主力风格档案
material-ingest：积累素材库
compose：基于主题创作
rewrite：润色去 AI 感
title-gen：生成标题候选

所有子 Skill 共享 ./writing-workspace/ 数据目录。

五、Skill 开发 / 项目规范类

5.1 skill-creator — 创建并迭代 Skill 的元 Skill

来源： anthropics/skills

描述（官方）： 创建新 Skill、修改和改进现有 Skill，以及评测 Skill 性能。适用于从头创建 Skill、编辑或优化现有 Skill、运行评测验证 Skill、基准测试 Skill 性能（含方差分析），或优化 Skill 的 description 字段以提升触发准确率时调用。

npx skills add https://github.com/anthropics/skills --skill skill-creator

完整工作流程：

捕获意图：理解用户想封装的工作流（也可从当前对话中提取已有流程）
访谈与调研：主动询问边界情况、输入/输出格式、成功标准、依赖项
编写 SKILL.md：填写 name、description（兼顾触发条件和功能描述）及正文指令
测试用例：生成 2-3 个真实提示词，运行评测（含 Skill vs 无 Skill 基线对比）
可视化评审：通过 eval-viewer/generate_review.py 在浏览器中展示定性输出 + 定量基准
迭代改进：根据用户反馈改写 Skill，重新测试，循环直到满意
Description 优化（可选）：运行自动化 trigger 优化脚本，提升 Skill 的触发准确率

Skill 文件结构：

skill-name/
├── SKILL.md          # 必须（YAML frontmatter + Markdown 指令）
└── 可选资源
    ├── scripts/      # 可执行脚本（确定性/重复性任务）
    ├── references/   # 按需加载的参考文档
    └── assets/       # 输出中使用的文件（模板、图标等）

5.2 andrej-karpathy-skills — Karpathy 风格 Claude 行为改进指南

来源： multica-ai/andrej-karpathy-skills（⭐ 171k）

描述（官方）： 一个用于改善 Claude Code 行为的 CLAUDE.md 文件，源自 Andrej Karpathy 对 LLM 编程痛点的观察。

安装方式 A：Claude Code Plugin（推荐）：

# 在 Claude Code 内执行
/plugin marketplace add forrestchang/andrej-karpathy-skills
/plugin install andrej-karpathy-skills@karpathy-skills

安装方式 B：直接下载 CLAUDE.md（按项目生效）：

# 新项目
curl -o CLAUDE.md https://raw.githubusercontent.com/forrestchang/andrej-karpathy-skills/main/CLAUDE.md

# 已有项目（追加）
echo "" >> CLAUDE.md
curl https://raw.githubusercontent.com/forrestchang/andrej-karpathy-skills/main/CLAUDE.md >> CLAUDE.md

Cursor 支持： 仓库内置 .cursor/rules/karpathy-guidelines.mdc，直接在 Cursor 中打开项目即可生效。

四项核心原则：

原则	解决的问题	核心做法
编码前先思考	AI 默默做假设、不说出困惑、不给出权衡	明确说出假设；有歧义时给出多种解读；简单方案存在时主动说；遇到困惑先问再做
简洁优先	AI 过度设计、臃肿抽象、200 行能做的写 1000 行	只写被要求的功能；不为一次性代码建抽象；不加没有要求的灵活性；如果 50 行能解决就别写 200 行
外科手术式改动	AI 改了不该改的代码、注释、格式	只改与需求直接相关的代码；不”顺手改”相邻代码；匹配现有风格；发现无关死代码只提不删
目标驱动执行	”让它工作”这种指令导致反复返工	把命令式指令转化为可验证的成功标准（先写测试再实现）；多步任务写出计划 + 验证方法

效果指标（如果奏效你会看到）：

diff 中只有被要求的改动
代码第一次就是简洁的
实现前先问问题，而不是做错了再改
PR 干净，没有顺手重构

六、快速参考

Skill	分类	一句话描述	Stars
`frontend-design`	前端设计	生成有个性的生产级前端，避免 AI slop 审美	Anthropic 官方
`impeccable`	前端设计	23 条设计命令 + 41 条检测规则的前端设计语言	36.3k
`ui-ux-pro-max`	前端设计	161 条行业推理规则，秒生成定制设计系统	89k
`taste-skill`	前端设计	Anti-Slop 框架，含多个风格变体和图生成 Skills	38.6k
`vue-skills`	Vue 开发	8 个子 Skill 覆盖 Vue 3 全开发场景	2.5k
`mcp-builder`	工具构建	四阶段流程指导构建高质量 MCP Server	Anthropic 官方
`writing-skills`	写作辅助	「收集→分析→创作→打磨」中文写作全流程	simonwong
`skill-creator`	Skill 开发	创建、测试、迭代、优化 Skill 的元 Skill	Anthropic 官方
`andrej-karpathy-skills`	项目规范	改善 Claude 编码行为的 CLAUDE.md 四原则	171k