前端工程师的 AI Skill：别再重复告诉 AI“项目应该怎么写”

一、为什么需要 Skill？

很多前端工程师使用 AI 时都会遇到：

我们项目使用 Vue3。
使用 script setup。
不要使用 Options API。
组件使用 Ant Design Vue。
状态管理使用 Pinia。
不要随便创建新的组件。
优先复用已有组件。
接口统一放在 src/api。
……

第一次告诉 AI 可以。

第二次告诉 AI 可以。

第三次……

你会发现：

自己正在变成 AI 的说明书。

二、Skill 是什么？

可以简单理解成：

Skill = 给 Agent 使用的一套可复用工作方法。

例如：

skills/
├── vue3/
│   └── SKILL.md
├── code-review/
│   └── SKILL.md
├── testing/
│   └── SKILL.md
└── frontend-design/
    └── SKILL.md

Skill 不只是告诉 AI“Vue3 怎么写”，还可以告诉它：

• 什么时候使用
• 应该遵循什么规则
• 应该检查什么
• 最终应该输出什么

三、一个前端 Vue Skill

# Vue3 Development Skill

## 技术栈

- Vue 3
- TypeScript
- Vite
- Pinia
- Vue Router

## 规则

1. 使用 script setup
2. 所有组件必须使用 TypeScript
3. Props 使用 interface 定义
4. API 请求统一放在 api 目录
5. 优先复用现有组件
6. 禁止重复创建相同 UI
7. 完成后运行 type-check
8. 完成后运行 lint

以后 AI 接收到：

开发一个用户管理页面

就可以按照项目规范执行，而不需要每次重新解释。

四、Skill 和 Prompt 的区别

Prompt：

帮我写一个 Vue3 页面，
使用 TypeScript，
使用 script setup……

Skill：

Vue3 项目的开发规范

可以理解成：

Prompt
一次性指令

Skill
可复用能力

五、前端最值得建立的 Skill

1. frontend-development

负责：

• Vue3
• TypeScript
• 组件规范
• 目录规范
• 状态管理

2. design-system

负责：

• Color
• Typography
• Spacing
• Button
• Form
• Table
• Modal

3. code-review

负责：

• Bug
• 安全
• 性能
• 可维护性
• 类型问题

4. testing

负责：

• Unit Test
• E2E
• 边界条件
• Mock

5. responsive-review

负责：

• PC
• Tablet
• Mobile
• 不同 Breakpoint

六、Skill + MCP

可以简单理解：

Skill
告诉 AI：
“应该怎么做”

MCP
告诉 AI：
“我可以做什么”

例如：

Skill
  ↓
告诉 AI：
需要检查移动端

MCP
  ↓
提供 Browser

Agent
  ↓
打开页面
  ↓
截图
  ↓
检查 UI
  ↓
发现问题
  ↓
修改代码
  ↓
再次截图

这时候 AI 才真正开始像一个前端开发 Agent。