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. 修改代码时哪些东西不能动
相关推荐
东风破_7 小时前
danci 项目(三):从 JSON 数据到 AI Coding,真实项目里的数据清洗、Prompt 和工程规范
前端·后端·node.js
东风破_7 小时前
danci 项目(一):从需求到架构,一个单词学习系统为什么会这样设计
前端·后端·node.js
Mr数据杨7 小时前
医学影像分类实战复盘 从 Kaggle 竞赛到可落地建模流程
人工智能·数据分析·kaggle竞赛
蒲公英eric8 小时前
从客户端到服务端:DVWA DOM 型 XSS 模块完整漏洞分析教程
前端·web安全·ai·xss·dvwa·ai安全
单线程_018 小时前
从案例分析 Vue3 Tokenizer+Parser 源码三
前端·javascript·vue.js
顶点多余8 小时前
那些在算法中适合巩固的知识点---1
java·前端·算法
Setsuna_F_Seiei8 小时前
前端转型 Agent 开发 03 之 Agent Tools - 给 Agent 装上手脚
前端·agent·ai编程
jay神8 小时前
【计算机毕业设计】基于SpringBoot的程序教学辅助系统
java·前端·vue.js·spring boot·后端·毕业设计·课程设计
AI情绪识别开源9 小时前
检信 ALLEMOTION OS 加密打包可执行程序 — 全面测试报告版本: v1.3功能测试 / 性能测试 /
开发语言·数据结构·人工智能·功能测试
ZGIAI9 小时前
ZGI 迭代节点:批量资料的逐项处理
人工智能·架构