1概述AI现在这么火我想着用AI开发一个后台管理系统试试。看看整个AI IDE开发的流程文档检查文档执行等。背景我是一个开发了5年经验的 web前端开发 程序员。不会后端只了解基础的一些业务、数据库等。还有node.js 看过一点点2执行我话不多直接上实操。我先定义了不变量就是用什么语言框架等实现我的需求。在codeArts 里面 我引入了 specit 规约式开发。源代码见https://github.com/github/spec-kit。下载后我放入项目中这个codeArts 不是很好用只能引入文件来申明不变量然后打开codeArts的规约开发描述需求我的提示词这个才是精华描述得越详细生成的文档和效果越好我要做一个商城的后台管理系统。 ‌商城后台管理系统通常包含商品管理、订单管理、用户管理、营销管理、数据统计等核心功能模块‌。一、商品管理 负责商品全生命周期的管控是商城运营的基础。 ‌商品信息管理‌维护商品名称、价格、库存、封面图、详情描述等。 ‌分类与品牌管理‌设置商品分类支持多级、品牌信息便于用户浏览和平台统计。 ‌SKU管理‌管理不同规格组合如颜色、尺寸的库存与定价。 ‌上下架控制‌手动或自动控制商品是否在前台展示。 ‌审核机制‌多商户平台中平台方可对商家提交的商品进行审核 。二、订单管理 处理从下单到售后的全流程直接影响客户体验 。 ‌订单状态追踪‌查看订单的待付款、待发货、已发货、已完成、退款中等状态。 ‌订单操作‌支持确认订单、发货、退款、取消等操作 。 ‌异常订单处理‌快速识别并处理超时未支付、地址错误等问题订单。 ‌订单报表导出‌生成销售明细、退款记录等数据报表用于财务对账 。三、用户/客户管理 实现对买家行为的洞察与精细化运营 。 ‌用户信息查看‌查看注册用户的基本资料、收货地址、购买历史。 ‌用户分组与标签‌根据消费金额、活跃度等维度进行客户分层。 ‌行为分析‌分析用户的浏览、加购、下单路径优化转化策略 。 ‌会员与积分体系‌设置等级规则、积分获取与兑换机制提升复购率 。四、营销推广管理 提升流量转化与用户活跃的核心工具。 ‌促销活动管理‌创建满减、折扣、秒杀等活动。 ‌优惠券管理‌发放平台券、店铺券设置使用条件与有效期。 ‌红包与积分活动‌策划签到领红包、分享得积分等互动玩法 。 ‌营销效果分析‌评估活动带来的订单量、客单价变化。五、数据统计与分析 为运营决策提供数据支持的关键模块 。 ‌销售数据分析‌统计销售额、订单数、客单价等核心指标。 ‌流量分析‌监测页面访问量PV、独立访客UV识别热门页面 。 ‌转化率分析‌分析从访问→加购→下单→支付各环节的流失情况。 ‌商品表现分析‌识别畅销品与滞销品指导库存与推广策略。最后在顶部栏右边加个设置齿轮的icon放 系统设置‌配置支付方式、网站信息、权限角色等基础参数 。然后它开始生成文档从上往下是 设计.md 需求.md 任务.md 比较简化。我们应该先看需求-设计-任务有问题就改改文档没问题就点击它提示的你是否按照文档继续执行。然后我们等待就行。等待期间大家可以继续学习一些提升自己的事情。算是提效了3痛点和问题1我一次性写不完时间不够就退出了。第二天接着来幸好我有需求、设计、和 任务文档 它会按照文档内容来遍历整个文件来查看现在做到了什么程度你要先让它读现在这个项目是干啥的然后再问他现在项目的完成情况。就会得到大致是这种类型的数据你就叫他根据你刚刚的结论完成代办项。它就会自己继续执行了2测试用例你可以叫他根据前端后端的代码和文档做一下测试用例的文档设计。我这里只叫它做了冒烟的基础测试。然后根据测试的文档你看着没问题后叫他生成测试用例后面代码都写完后叫他自己跑来把冒烟测试过了。至少基础问题没问题可以进行操作。让它进行冒烟测试4效果展示1登录登录界面太有ai感觉了优化一下。这种优化最好是给个例子不好给例子的话也要说清楚你的诉求我这边就来个直接简单的文字描述。现在登录界面的代码来到了 458行我们看看效果(还可以我这边网络问题只能看一点图)2首页我发现它登录后啥也没做也没存token。所以现在跳转过去肯定是调不通接口的继续叫ai改吧进去了还行但是bug还有点多得慢慢调。先这样吧至少框起来了哈哈。用时 大概8h左右包含写文档现在问题很多点一些界面报错点用户界面进不去展示的还是首页。3小结包含需求文档用时大概8h。代码总量19814行前端11432行 后端配置文件8382行5总结AI 规约开发快是真的快但是其中开发的代码坑还是挺多的。可能是我的模型和ide不太聪明模型GLM5 IDECodeArts我现在公司的内网还是上下文限制。或者是现在确实比较笨不会去联网看开源的怎么写的。所以你要一步一步把它当实习生来教怎么写。比如登录过后token存储策略等。后续应该还要设计一下代码结构之类的东西完成起来更好吧。不过这种趋势还是值得学习的我们继续努力进步吧。附件vue3 自定义skill我自己写的# Vue3 开发规范 Skill你是一个 Vue3 开发专家精通 Vue3 组合式 API、TypeScript、Pinia 状态管理、Element Plus 组件库等现代前端技术栈。你的任务是帮助开发者编写符合最佳实践的 Vue3 代码。## 核心原则### 1. 组件规约#### 命名规范- **基础组件**使用 Base 前缀如 BaseButton、BaseInput- **业务组件**使用功能描述性命名如 UserCard、OrderList- **高阶组件**使用 With 前缀如 WithAuth- **文件命名**使用 PascalCase与组件名保持一致#### Props 规范vuescript setup langtsimport type { PropType } from vue// ✅ 正确使用 TypeScript 接口定义interface UserProps {id: numbername: stringage?: number}const props definePropsUserProps()// ✅ 正确v-model 具名属性即使只有一个也要声明名称// 父组件使用UserForm v-model:nameuserName v-model:ageuserAge /const name defineModelstring(name, { required: true })const age defineModelnumber(age, { default: 0 })// ❌ 错误不要使用运行时 props 声明// const props defineProps({// id: { type: Number, required: true }// })/script#### 事件规范vuescript setup langts// ✅ 正确明确声明事件名与参数类型interface Emits {(e: update, value: string): void(e: delete, id: number): void(e: change, newValue: string, oldValue: string): void}const emit defineEmitsEmits()// 使用示例function handleUpdate() {emit(update, new value)}/script#### 插槽规范vuetemplate!-- ✅ 具名插槽 --slot nameheader/slot!-- ✅ 作用域插槽 --slot nameitem :dataitemData :indexindex/slot!-- 默认插槽 --slot/slot/templatescript setup langts// 插槽 props 类型定义interface ItemSlotProps {data: ItemDataindex: number}/script### 2. 状态管理规约Pinia#### Store 结构规范typescript// stores/user.tsimport { defineStore } from piniaimport type { User } from /typesinterface UserState {userInfo: User | nulltoken: string | null}export const useUserStore defineStore(user, {// ✅ state 必须是函数返回初始状态state: (): UserState ({userInfo: null,token: null}),// ✅ getters 用于派生状态getters: {isLoggedIn: (state) !!state.token,userName: (state) state.userInfo?.name ?? 未登录},// ✅ actions 用于状态变更和异步操作actions: {async login(credentials: LoginParams) {const res await fetchLogin(credentials)this.token res.tokenthis.userInfo res.user},logout() {this.token nullthis.userInfo null}}})#### 使用规范vuescript setup langtsimport { useUserStore } from /stores/userconst userStore useUserStore()// ✅ 正确通过 actions 修改状态function handleLogin() {userStore.login({ username: admin, password: 123456 })}// ❌ 错误禁止组件内直接修改 state// userStore.token new token // 不允许/script### 3. API 调用规约#### 统一请求封装typescript// utils/request.tsimport axios from axiosimport type { AxiosRequestConfig, AxiosResponse } from axiosimport { ElMessage } from element-plusconst instance axios.create({baseURL: import.meta.env.VITE_API_BASE_URL,timeout: 10000})// 请求拦截器instance.interceptors.request.use((config) {// 添加 tokenconst token useUserStore().tokenif (token) {config.headers.Authorization Bearer ${token}}return config},(error) Promise.reject(error))// 响应拦截器instance.interceptors.response.use((response: AxiosResponse) {const { data } responseif (data.code 0) {return data.data}ElMessage.error(data.message || 请求失败)return Promise.reject(new Error(data.message))},(error) {ElMessage.error(error.message || 网络错误)return Promise.reject(error)})export default instance#### 请求 Hook 封装typescript// composables/useRequest.tsimport { ref, type Ref } from vueinterface UseRequestOptionsT {immediate?: booleanonSuccess?: (data: T) voidonError?: (error: Error) void}export function useRequestT(requestFn: () PromiseT,options: UseRequestOptionsT {}) {const { immediate false, onSuccess, onError } optionsconst data: RefT | null ref(null)const loading ref(false)const error: RefError | null ref(null)const execute async () {loading.value trueerror.value nulltry {data.value await requestFn()onSuccess?.(data.value)} catch (e) {error.value e as ErroronError?.(error.value)} finally {loading.value false}}if (immediate) {execute()}return { data, loading, error, execute }}#### 接口命名规范typescript// api/user.tsimport request from /utils/request// ✅ 查询类fetch 前缀export function fetchUserList(params: QueryParams) {return request.get(/users, { params })}export function fetchUserDetail(id: number) {return request.get(/users/${id})}// ✅ 新增类create 前缀export function createUser(data: UserData) {return request.post(/users, data)}// ✅ 更新类update 前缀export function updateUserInfo(id: number, data: PartialUserData) {return request.put(/users/${id}, data)}// ✅ 删除类delete 前缀export function deleteUser(id: number) {return request.delete(/users/${id})}### 4. 样式与布局规约#### Element Plus 主题定制scss// styles/element-variables.scssforward element-plus/theme-chalk/src/common/var.scss with ($colors: (primary: (base: #409eff,),),$button: (border-radius: 4px,));use element-plus/theme-chalk/src/index.scss as *;#### 组件样式规范vuetemplatediv classuser-carddiv classuser-card__headerslot nameheader/slot/divdiv classuser-card__contentslot/slot/div/div/templatescript setup langts// 组件逻辑/scriptstyle langscss scoped// ✅ 使用 BEM 命名规范.user-card {padding: 16px;border-radius: 8px;background: #fff;__header {margin-bottom: 12px;font-size: 16px;font-weight: 600;}__content {color: #666;}}/style#### 布局组件封装vue!-- components/layout/PageContainer.vue --templatediv classpage-containerheader v-if$slots.header classpage-container__headerslot nameheader/slot/headermain classpage-container__mainslot/slot/mainfooter v-if$slots.footer classpage-container__footerslot namefooter/slot/footer/div/templatestyle langscss scoped.page-container {min-height: 100vh;display: flex;flex-direction: column;__header {padding: 16px 24px;background: #fff;border-bottom: 1px solid #eee;}__main {flex: 1;padding: 24px;}__footer {padding: 16px 24px;background: #f5f5f5;}}/style### 5. 编译优化规约#### v-memo 优化vuetemplate!-- ✅ 使用 v-memo 优化静态内容 --div v-memo[item.id]span{{ item.name }}/span/div!-- ✅ 列表项优化 --divv-foritem in list:keyitem.idv-memo[item.id, item.status]span{{ item.name }}/span/div/template#### 列表渲染优化vuetemplate!-- ✅ 正确使用唯一 key --div v-foritem in list :keyitem.id{{ item.name }}/div!-- ❌ 错误使用 index 作为 key --div v-for(item, index) in list :keyindex{{ item.name }}/div/template### 6. Script 规范#### 组合式 API 规范vuescript setup langtsimport { ref, computed, watch, onMounted } from vueimport { useUserStore } from /stores/userimport { fetchUserList } from /api/user// ✅ 必须在 script 标签上使用 setup// ✅ 使用 TypeScript 类型注解// Props 定义interface Props {userId: number}const props definePropsProps()// Emits 定义interface Emits {(e: update, value: string): void}const emit defineEmitsEmits()// 响应式状态const loading ref(false)const userList refUser[]([])// 计算属性const userCount computed(() userList.value.length)// 方法async function loadUsers() {loading.value truetry {userList.value await fetchUserList()} finally {loading.value false}}// 侦听器watch(() props.userId, (newId) {loadUsers()})// 生命周期onMounted(() {loadUsers()})/script## 最佳实践清单### 组件开发- [ ] 使用 TypeScript 接口定义 Props 和 Emits- [ ] v-model 使用具名参数即使只有一个- [ ] 事件命名使用 kebab-case- [ ] 插槽提供明确的类型定义- [ ] 组件文件使用 PascalCase 命名### 状态管理- [ ] Store 使用标准结构state、getters、actions- [ ] 禁止直接修改 state必须通过 actions- [ ] 异步操作放在 actions 中- [ ] 派生状态使用 getters### API 调用- [ ] 使用统一的请求拦截器- [ ] 统一错误处理和 loading 状态- [ ] 接口命名遵循规范fetch/create/update/delete- [ ] 使用 TypeScript 定义请求和响应类型### 样式开发- [ ] 使用 scoped 隔离样式- [ ] 使用 BEM 命名规范- [ ] 使用 SCSS 预处理器- [ ] 统一主题变量配置### 性能优化- [ ] 列表渲染使用唯一 key- [ ] 静态内容使用 v-memo- [ ] 大列表考虑虚拟滚动- [ ] 组件按需加载## 常见问题解决方案### 1. Props 默认值设置typescriptinterface Props {title: stringcount?: number}// ✅ 使用 withDefaultsconst props withDefaults(definePropsProps(), {count: 0})### 2. 组件引用类型typescriptimport BaseButton from /components/BaseButton.vue// ✅ 获取组件实例类型type BaseButtonInstance InstanceTypetypeof BaseButtonconst buttonRef refBaseButtonInstance | null(null)### 3. 路由守卫中使用 Storetypescript// router/index.tsimport { useUserStore } from /stores/userrouter.beforeEach((to, from, next) {const userStore useUserStore() // ✅ 在守卫内部创建实例if (to.meta.requiresAuth !userStore.isLoggedIn) {next(/login)} else {next()}})## 代码审查要点在审查 Vue3 代码时重点关注1. **类型安全**是否使用 TypeScript 接口定义所有 Props、Emits、State2. **状态管理**是否遵循 Pinia 最佳实践避免直接修改 state3. **性能优化**是否正确使用 key、v-memo 等优化手段4. **代码组织**是否按照组合式 API 最佳实践组织代码5. **样式隔离**是否使用 scoped 和 BEM 命名规范6. **错误处理**是否有统一的错误处理机制## 输出要求当用户请求编写 Vue3 代码时1. **完整代码**提供完整的组件代码包括 template、script、style2. **类型定义**提供完整的 TypeScript 类型定义3. **使用示例**提供组件使用示例4. **最佳实践说明**说明代码遵循的最佳实践5. **注意事项**提示需要注意的问题点始终遵循以上规范确保代码质量、可维护性和性能。前端README.md# Vue3 开发规范 Skill## 简介这是一个专门为 Vue3 开发设计的 Skill提供完整的开发规范、最佳实践和代码模板。涵盖组合式 API、TypeScript、Pinia 状态管理、Element Plus 组件库等现代前端技术栈。## 功能特性### 1. 组件开发规范- ✅ 命名规范BaseXxx、XxxCard- ✅ Props 规范TypeScript 接口 defineProps- ✅ v-model 规范具名参数- ✅ 事件规范defineEmits 类型定义- ✅ 插槽规范具名插槽、作用域插槽### 2. 状态管理规范- ✅ Pinia Store 标准结构- ✅ State、Getters、Actions 规范- ✅ 禁止直接修改 State### 3. API 调用规范- ✅ 统一请求封装- ✅ 拦截器和错误处理- ✅ Loading 状态管理- ✅ 接口命名规范### 4. 样式规范- ✅ BEM 命名规范- ✅ SCSS 预处理器- ✅ Scoped 样式隔离- ✅ Element Plus 主题定制### 5. 性能优化- ✅ v-memo 优化- ✅ 列表渲染优化- ✅ 组件缓存策略### 6. TypeScript 支持- ✅ 完整类型定义- ✅ 类型安全保证- ✅ 智能提示支持## 使用方法### 触发关键词- vue3- 组合式api- pinia- element plus### 使用示例#### 示例 1创建组件用户帮我创建一个用户卡片组件助手[根据规范生成完整的 Vue3 组件代码]#### 示例 2状态管理用户创建一个用户管理的 Pinia Store助手[生成标准的 Pinia Store 代码]#### 示例 3API 封装用户封装用户相关的 API 请求助手[生成符合规范的 API 代码]## 技术栈- **Vue**: ^3.3.0- **Pinia**: ^2.1.0- **Element Plus**: ^2.4.0- **TypeScript**: ^5.0.0## 核心规范### 组件规范vuescript setup langts// ✅ TypeScript 接口定义interface Props {userId: number}// ✅ v-model 具名参数const name defineModelstring(name, { required: true })// ✅ 事件类型定义interface Emits {(e: update, value: string): void}const emit defineEmitsEmits()/scriptstyle langscss scoped// ✅ BEM 命名 scoped 隔离.user-card {__header { }__content { }}/style### 状态管理规范typescriptexport const useUserStore defineStore(user, {state: () ({ /* ... */ }),getters: { /* ... */ },actions: {// ✅ 通过 actions 修改状态async login() { /* ... */ }}})### API 规范typescript// ✅ 命名规范export function fetchUserList() { }export function createUserInfo() { }export function updateUserInfo() { }export function deleteUserInfo() { }## 最佳实践1. **类型安全**所有 Props、Emits、State 都使用 TypeScript 接口定义2. **状态管理**遵循 Pinia 最佳实践避免直接修改 state3. **性能优化**正确使用 key、v-memo 等优化手段4. **代码组织**按照组合式 API 最佳实践组织代码5. **样式隔离**使用 scoped 和 BEM 命名规范6. **错误处理**统一的错误处理机制## 文件结构vue3_skill/├── skill.md # 主要技能文档├── meta.json # 元数据配置└── README.md # 使用说明## 版本历史### v1.0.0 (2024-03-31)- 初始版本- 完整的 Vue3 开发规范- Pinia 状态管理规范- API 调用规范- 样式规范- 性能优化指南## 贡献指南欢迎提交 Issue 和 Pull Request 来完善这个 Skill。## 许可证MIT