[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-27":3,"comments-27":22},{"id":4,"title":5,"summary":6,"cover":7,"author":8,"tags":13,"viewCount":14,"likeCount":15,"collectCount":15,"commentCount":15,"status":16,"publishedAt":17,"contentMd":18,"contentHtml":19,"likedByMe":20,"collectedByMe":20,"updatedAt":21},27,"前端工程师的 AI Skill：别再重复告诉 AI“项目应该怎么写”","Prompt 是临时沟通，Skill 是给 AI 建立长期工作方法。","https:\u002F\u002Fdevshare-assets.oss-cn-guangzhou.aliyuncs.com\u002Fuploads\u002F2026\u002F09\u002F2738f3cc-e6fe-4908-bada-80045a9d56eb.png",{"id":9,"username":10,"avatar":11,"bio":12},1,"DevShareAdmin","https:\u002F\u002Fdevshare-assets.oss-cn-guangzhou.aliyuncs.com\u002Fuploads\u002F2026\u002F09\u002F98609a86-e08d-437b-b921-1291fc5a1b4d.jpg","DevShare（技享）官方账号",[],19,0,"published","2026-09-16T15:49:26.480Z","一、为什么需要 Skill？\n\n很多前端工程师使用 AI 时都会遇到：\n\n```text\n我们项目使用 Vue3。\n使用 script setup。\n不要使用 Options API。\n组件使用 Ant Design Vue。\n状态管理使用 Pinia。\n不要随便创建新的组件。\n优先复用已有组件。\n接口统一放在 src\u002Fapi。\n……\n```\n\n第一次告诉 AI 可以。\n\n第二次告诉 AI 可以。\n\n第三次……\n\n你会发现：\n\n> **自己正在变成 AI 的说明书。**\n\n## 二、Skill 是什么？\n\n可以简单理解成：\n\n> **Skill = 给 Agent 使用的一套可复用工作方法。**\n\n例如：\n\n```text\nskills\u002F\n├── vue3\u002F\n│   └── SKILL.md\n├── code-review\u002F\n│   └── SKILL.md\n├── testing\u002F\n│   └── SKILL.md\n└── frontend-design\u002F\n    └── SKILL.md\n```\n\nSkill 不只是告诉 AI“Vue3 怎么写”，还可以告诉它：\n\n- 什么时候使用\n- 应该遵循什么规则\n- 应该检查什么\n- 最终应该输出什么\n\n## 三、一个前端 Vue Skill\n\n```md\n# Vue3 Development Skill\n\n## 技术栈\n\n- Vue 3\n- TypeScript\n- Vite\n- Pinia\n- Vue Router\n\n## 规则\n\n1. 使用 script setup\n2. 所有组件必须使用 TypeScript\n3. Props 使用 interface 定义\n4. API 请求统一放在 api 目录\n5. 优先复用现有组件\n6. 禁止重复创建相同 UI\n7. 完成后运行 type-check\n8. 完成后运行 lint\n```\n\n以后 AI 接收到：\n\n```text\n开发一个用户管理页面\n```\n\n就可以按照项目规范执行，而不需要每次重新解释。\n\n## 四、Skill 和 Prompt 的区别\n\nPrompt：\n\n```text\n帮我写一个 Vue3 页面，\n使用 TypeScript，\n使用 script setup……\n```\n\nSkill：\n\n```text\nVue3 项目的开发规范\n```\n\n可以理解成：\n\n```text\nPrompt\n一次性指令\n\nSkill\n可复用能力\n```\n\n## 五、前端最值得建立的 Skill\n\n### 1. frontend-development\n\n负责：\n\n- Vue3\n- TypeScript\n- 组件规范\n- 目录规范\n- 状态管理\n\n### 2. design-system\n\n负责：\n\n- Color\n- Typography\n- Spacing\n- Button\n- Form\n- Table\n- Modal\n\n### 3. code-review\n\n负责：\n\n- Bug\n- 安全\n- 性能\n- 可维护性\n- 类型问题\n\n### 4. testing\n\n负责：\n\n- Unit Test\n- E2E\n- 边界条件\n- Mock\n\n### 5. responsive-review\n\n负责：\n\n- PC\n- Tablet\n- Mobile\n- 不同 Breakpoint\n\n## 六、Skill + MCP\n\n可以简单理解：\n\n```text\nSkill\n告诉 AI：\n“应该怎么做”\n\nMCP\n告诉 AI：\n“我可以做什么”\n```\n\n例如：\n\n```text\nSkill\n  ↓\n告诉 AI：\n需要检查移动端\n\nMCP\n  ↓\n提供 Browser\n\nAgent\n  ↓\n打开页面\n  ↓\n截图\n  ↓\n检查 UI\n  ↓\n发现问题\n  ↓\n修改代码\n  ↓\n再次截图\n```\n\n这时候 AI 才真正开始像一个前端开发 Agent。","\u003Cp>一、为什么需要 Skill？\u003C\u002Fp>\n\u003Cp>很多前端工程师使用 AI 时都会遇到：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-text\">我们项目使用 Vue3。\n使用 script setup。\n不要使用 Options API。\n组件使用 Ant Design Vue。\n状态管理使用 Pinia。\n不要随便创建新的组件。\n优先复用已有组件。\n接口统一放在 src\u002Fapi。\n……\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>第一次告诉 AI 可以。\u003C\u002Fp>\n\u003Cp>第二次告诉 AI 可以。\u003C\u002Fp>\n\u003Cp>第三次……\u003C\u002Fp>\n\u003Cp>你会发现：\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>\u003Cstrong>自己正在变成 AI 的说明书。\u003C\u002Fstrong>\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Ch2>二、Skill 是什么？\u003C\u002Fh2>\n\u003Cp>可以简单理解成：\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>\u003Cstrong>Skill = 给 Agent 使用的一套可复用工作方法。\u003C\u002Fstrong>\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>例如：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-text\">skills\u002F\n├── vue3\u002F\n│   └── SKILL.md\n├── code-review\u002F\n│   └── SKILL.md\n├── testing\u002F\n│   └── SKILL.md\n└── frontend-design\u002F\n    └── SKILL.md\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Skill 不只是告诉 AI“Vue3 怎么写”，还可以告诉它：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>什么时候使用\u003C\u002Fli>\n\u003Cli>应该遵循什么规则\u003C\u002Fli>\n\u003Cli>应该检查什么\u003C\u002Fli>\n\u003Cli>最终应该输出什么\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>三、一个前端 Vue Skill\u003C\u002Fh2>\n\u003Cpre>\u003Ccode class=\"language-md\"># Vue3 Development Skill\n\n## 技术栈\n\n- Vue 3\n- TypeScript\n- Vite\n- Pinia\n- Vue Router\n\n## 规则\n\n1. 使用 script setup\n2. 所有组件必须使用 TypeScript\n3. Props 使用 interface 定义\n4. API 请求统一放在 api 目录\n5. 优先复用现有组件\n6. 禁止重复创建相同 UI\n7. 完成后运行 type-check\n8. 完成后运行 lint\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>以后 AI 接收到：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-text\">开发一个用户管理页面\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>就可以按照项目规范执行，而不需要每次重新解释。\u003C\u002Fp>\n\u003Ch2>四、Skill 和 Prompt 的区别\u003C\u002Fh2>\n\u003Cp>Prompt：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-text\">帮我写一个 Vue3 页面，\n使用 TypeScript，\n使用 script setup……\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Skill：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-text\">Vue3 项目的开发规范\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>可以理解成：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-text\">Prompt\n一次性指令\n\nSkill\n可复用能力\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>五、前端最值得建立的 Skill\u003C\u002Fh2>\n\u003Ch3>1. frontend-development\u003C\u002Fh3>\n\u003Cp>负责：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Vue3\u003C\u002Fli>\n\u003Cli>TypeScript\u003C\u002Fli>\n\u003Cli>组件规范\u003C\u002Fli>\n\u003Cli>目录规范\u003C\u002Fli>\n\u003Cli>状态管理\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>2. design-system\u003C\u002Fh3>\n\u003Cp>负责：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Color\u003C\u002Fli>\n\u003Cli>Typography\u003C\u002Fli>\n\u003Cli>Spacing\u003C\u002Fli>\n\u003Cli>Button\u003C\u002Fli>\n\u003Cli>Form\u003C\u002Fli>\n\u003Cli>Table\u003C\u002Fli>\n\u003Cli>Modal\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>3. code-review\u003C\u002Fh3>\n\u003Cp>负责：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Bug\u003C\u002Fli>\n\u003Cli>安全\u003C\u002Fli>\n\u003Cli>性能\u003C\u002Fli>\n\u003Cli>可维护性\u003C\u002Fli>\n\u003Cli>类型问题\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>4. testing\u003C\u002Fh3>\n\u003Cp>负责：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Unit Test\u003C\u002Fli>\n\u003Cli>E2E\u003C\u002Fli>\n\u003Cli>边界条件\u003C\u002Fli>\n\u003Cli>Mock\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>5. responsive-review\u003C\u002Fh3>\n\u003Cp>负责：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>PC\u003C\u002Fli>\n\u003Cli>Tablet\u003C\u002Fli>\n\u003Cli>Mobile\u003C\u002Fli>\n\u003Cli>不同 Breakpoint\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>六、Skill + MCP\u003C\u002Fh2>\n\u003Cp>可以简单理解：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-text\">Skill\n告诉 AI：\n“应该怎么做”\n\nMCP\n告诉 AI：\n“我可以做什么”\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>例如：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-text\">Skill\n  ↓\n告诉 AI：\n需要检查移动端\n\nMCP\n  ↓\n提供 Browser\n\nAgent\n  ↓\n打开页面\n  ↓\n截图\n  ↓\n检查 UI\n  ↓\n发现问题\n  ↓\n修改代码\n  ↓\n再次截图\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>这时候 AI 才真正开始像一个前端开发 Agent。\u003C\u002Fp>\n",false,"2026-10-09T12:00:00.195Z",{"items":23,"nextCursor":24},[],null]