AI读取前端项目生成skill.md

可以,你的目标不是让 Trae CN 直接"乱总结",而是让它读取整个前端项目后,沉淀一份以后 AI 修改代码必须遵守的项目说明书 ,也就是 skill.md

你可以按这个流程做:

一、先用 Trae CN 打开前端项目

在项目根目录打开 Trae CN,例如你的前端项目一般会有这些文件:

复制代码
复制代码
package.json
src/
vue.config.js 或 vite.config.js
.env.development
.env.production
public/

然后切换到 Agent 模式,让它能读取项目文件。


二、先让 Trae CN 扫描项目,不要马上生成

第一步先发这个:

复制代码
复制代码
请你先完整分析当前前端项目结构,但不要修改任何代码。

重点分析:
1. 项目使用的是 Vue2 还是 Vue3
2. 使用的是 Vue CLI 还是 Vite
3. 路由结构在哪里
4. 接口请求封装在哪里
5. 权限、菜单、字典、枚举是怎么处理的
6. 页面一般放在哪里
7. 公共组件放在哪里
8. 样式规范是什么
9. 表格、弹窗、查询表单、分页一般怎么写
10. 新增/编辑/详情页面的通用写法
11. 这个项目里 AI 修改代码时最容易踩坑的地方

只分析,不生成文件。

这样做的好处是:先让它"读懂项目",避免直接生成一堆空泛内容。


三、确认它分析没问题后,再让它生成 skill.md

然后继续发这个:

复制代码
复制代码
基于你刚才对当前前端项目的分析,请帮我生成一份专属于本项目的 skill.md 文件。

这个 skill.md 的用途是:
以后我使用 Trae CN、Claude Code、ChatGPT、DeepSeek 等 AI 工具修改这个前端项目时,让 AI 先读取 skill.md,再按照本项目的规范改代码。

要求:
1. 内容必须基于当前项目真实代码,不要编造不存在的目录、组件、方法。
2. 用中文编写,方便团队成员阅读。
3. 重点写清楚本项目的技术栈、目录结构、接口请求方式、页面开发规范、组件使用规范、样式规范、字典使用规范、权限处理规范。
4. 要写清楚"AI 修改代码时必须遵守的规则"。
5. 要写清楚"禁止事项",例如不要随意重构、不要改动无关逻辑、不要删除原有注释、不要擅自改变接口字段。
6. 要结合项目里的真实示例文件路径。
7. 输出为 Markdown 格式。
8. 最后给我一个完整的 skill.md 文件内容,我可以直接复制保存。

请按照下面结构生成:

# 项目 AI 开发 Skill

## 1. 项目概述
## 2. 技术栈
## 3. 目录结构说明
## 4. 启动与构建命令
## 5. 路由规范
## 6. 接口请求规范
## 7. 页面开发规范
## 8. 组件使用规范
## 9. 表格、查询、分页规范
## 10. 新增、编辑、详情弹窗规范
## 11. 字典与枚举使用规范
## 12. 权限控制规范
## 13. 样式规范
## 14. AI 修改代码必须遵守的规则
## 15. 禁止事项
## 16. 常见任务处理方式
## 17. 修改代码后的自检清单

四、让 Trae CN 直接创建文件

如果你希望它直接创建文件,可以接着说:

复制代码
复制代码
请将上面生成的内容保存到项目根目录下的 skill.md 文件中。

注意:
1. 不要修改其他任何文件。
2. 如果项目根目录已经存在 skill.md,请先读取原文件内容,然后在不丢失原内容的基础上进行完善。
3. 保存完成后告诉我文件路径。

五、以后每次让 AI 改代码前,先加一句

以后你让 Trae CN 改项目代码时,开头加一句:

复制代码
复制代码
请先读取项目根目录下的 skill.md,并严格按照其中的项目规范修改代码。
本次只修改和需求相关的文件,不要改动无关逻辑。

比如:

复制代码
复制代码
请先读取项目根目录下的 skill.md,并严格按照其中的项目规范修改代码。

需求:
搜索框与复选框需要联动。
当搜索框已有内容时,重新勾选复选框,需要带上搜索框内容一起查询。
其他逻辑不要改动。
请分析相关页面后给出完整修改代码。

六、skill.md 里面最重要的是这几类内容

你这个前端项目建议重点让它总结这些:

复制代码
复制代码
1. 项目是 Vue2 还是 Vue3
2. 使用 Element UI 还是 Element Plus
3. request 请求封装文件位置
4. api 文件统一写法
5. router 路由文件位置
6. views 页面目录结构
7. components 公共组件目录
8. 字典接口怎么调用
9. 表格分页参数怎么传
10. 新增、编辑、详情弹窗怎么写
11. 权限按钮怎么控制
12. 样式是 scoped、scss 还是全局样式
13. 修改代码时哪些东西不能动
相关推荐
IT_陈寒1 分钟前
Vue这个特性差点让我加班到凌晨,谁懂啊
前端·人工智能·后端
kyriewen5 分钟前
我让AI改一个bug——它偷偷动了5个我没让它碰的地方
前端·javascript·ai编程
D2aZXN3FhrDa7e21219 分钟前
佛山AI智能获客系统适配性:工厂门店如何挑选工具
人工智能·美诚科技有限公司
机器之心21 分钟前
WAIC现场,这家公司让一群不同的机器人共用一个大脑
人工智能·openai
小白巨白22 分钟前
玫瑰花园管理系统:AI识病+3D可视化,一套面向中小型玫瑰种植园的数字化管理工具
css·人工智能·计算机视觉·html5
遇乐的果园35 分钟前
前端学习笔记-vue加载渲染优化
前端·笔记·学习
延凡科技43 分钟前
多场景落地复盘:端边云架构无人机智能巡检系统设计与实践
大数据·数据结构·人工智能·科技·架构·无人机·能源
科技圈观察1 小时前
壹沓科技WAIC全球首发小沓OS与小沓KE,重塑供应链AI基础设施
人工智能·科技
CV-Climber1 小时前
检索技术的实际应用
人工智能·算法
用户985033593281 小时前
OpenLayers 热力图从原理到 Vue 组件一键接入
前端