Skip to content

Skill 速览 ​

按任务类型快速选择合适的 Skill。先选领域,再在提示词中显式写出 use xxx skill,可以让 AI 更稳定地加载对应上下文。

如果需要国内服务与团队工作流,先看国内生态 Skills:官方优选;该列表按官方归属、实际用途和仓库级 Stars 快照筛选,不把 MCP 或 CLI 冒充为 Skill。

快速选择 ​

分类Skill适合任务典型提示
UI 设计Design.md给页面统一视觉风格、参考成熟品牌设计系统、生成设计约束use design.md skill, 参考 Stripe 风格重做这个定价页
UI 组件Ant Design Vue Next使用 Antdv Next 组件、表单、表格、主题 Token 和组件 APIuse antdv-next skill, 实现带筛选和分页的数据表格
前端框架Vue编写 Vue 3 SFC、拆分组件、提取 composable、处理路由和测试use vue skill, 重构这个页面并提取 composable
构建工具Vite修改 vite.config.ts、配置插件、代理、环境变量、构建和 SSRuse vite skill, 添加本地 API 代理和路径别名

分类说明 ​

UI 设计 ​

  • Design.md: 适合先确定页面视觉方向,例如参考 Claude、Vercel、Stripe、Nike 等公开网站的 DESIGN.md,让 AI 按颜色、字体、布局、组件状态和响应式规则生成页面。
  • Ant Design Vue Next: 适合已经确定使用 Antdv Next 组件库时,让 AI 按真实组件 API、示例、主题 Token 和语义结构实现界面。

前端开发 ​

  • Vue: 适合 Vue 3、Composition API、<script setup lang="ts">、组件拆分、Vue Router、Vitest 和 VueUse 相关任务。
  • Vite: 适合 Vite 项目配置、插件开发、HMR、环境变量、资源导入、库模式、SSR 和构建排查。

组合使用 ​

复杂页面通常需要组合多个 Skill:

text
use design.md skill and vue skill, 参考 Claude 风格实现一个文档详情页
text
use design.md skill, antdv-next skill and vue skill, 参考 Vercel 风格实现一个项目管理后台列表页
text
use vue skill and vite skill, 将当前 Vue 项目整理为 Vite library mode 并补充构建验证

选择建议 ​

  • 先做视觉方向:优先用 Design.md。
  • 已经确定组件库:同时用 Ant Design Vue Next。
  • 涉及 .vue、组件边界、状态和路由:用 Vue。
  • 涉及 dev server、构建、插件和配置:用 Vite。
  • 项目有固定规范时,把必须遵守的约束写入 AGENTS.md / CLAUDE.md,再在任务中点名对应 Skill。