主题
Skill 速览
按任务类型快速选择合适的 Skill。先选领域,再在提示词中显式写出
use xxx skill,可以让 AI 更稳定地加载对应上下文。
快速选择
| 分类 | Skill | 适合任务 | 典型提示 |
|---|---|---|---|
| UI 设计 | Design.md | 给页面统一视觉风格、参考成熟品牌设计系统、生成设计约束 | use design.md skill, 参考 Stripe 风格重做这个定价页 |
| UI 组件 | Ant Design Vue Next | 使用 Antdv Next 组件、表单、表格、主题 Token 和组件 API | use antdv-next skill, 实现带筛选和分页的数据表格 |
| 前端框架 | Vue | 编写 Vue 3 SFC、拆分组件、提取 composable、处理路由和测试 | use vue skill, 重构这个页面并提取 composable |
| 构建工具 | Vite | 修改 vite.config.ts、配置插件、代理、环境变量、构建和 SSR | use 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。