整体研发模式严格遵循 文档驱动、约束先行、人机协作、闭环落地 核心原则，全程适配 Vue3 + Element Plus + Vite + TypeScript 主流前端技术栈中后台项目研发。
所有前端代码生成需在 Trae 框架内，通过特定 Vue 智能体（智脑体） 完成，对该智脑体的描述、配置、使用及维护进行标准化管理，确保智脑体输出符合项目规范、贴合技术栈要求，提升研发效率与交付一致性。
本规范核心落地三大强制工作要求：
第一，基于产品原始 PRD 材料，通过 Trae 框架 Vue 智能体（智脑体）自动分析梳理生成标准化 JSON 格式结构化 PRD 需求文档； 第二，依托后端 Swagger 接口文档，由智脑体自动解析生成前端配套接口请求文件与完整 TS 类型定义； 第三，优先对接 MasterGo 设计稿获取标准页面结构，无团体编辑权限时降级采用 JSON 结构化描述 UI 页面布局与组件，严格按照「UI结构梳理 → 静态页面搭建 → 接口交互绑定 → 报错排查修复 → 人工精细样式调优」标准化闭环流程，通过智脑体完成核心开发工作，同时规范智脑体全流程使用管理。
📖1. 引言
当前前端研发工作中，AI 工具已不再局限于简单代码补全辅助，已深度融入前端需求结构化梳理、接口契约标准化生成、UI 设计稿页面还原、业务交互逻辑编写、线上问题定位排查、版本迭代优化维护等全研发核心环节。
前端工程师引入 AI 协作的核心价值，并非单一提升页面编码编写速度，而是搭建一套 PRD 需求结构化 → 接口契约标准化 → UI 布局结构化 → 页面代码实现 → 交互逻辑绑定 → 联调报错排错 → 视觉样式收口优化 → 版本迭代沉淀复盘 的标准化、可复用、可追溯前端研发闭环体系。
本文档适配企业级中后台管理系统、业务数据平台、职能运维平台等各类前端项目，完整明确 AI 协作工作流程、配套文档规范、工程目录约束、交付产出物标准及实操最佳实践，统一团队前端 AI 协作研发口径，重点规范 Trae 框架 Vue 智能体（智脑体）的描述与管理，杜绝无序开发、重复返工、交付不规范等问题，充分发挥智脑体在前端研发中的核心作用。
🧠2. 前端 AI 开发核心理念
2.1 人机协作职责边界
- Trae 框架 Vue 智能体（智脑体）主要职责
：需求结构化整理归纳、标准化 JSON 文档生成、接口代码及 TS 类型自动生成、页面基础骨架代码搭建、基础交互逻辑编写、配套研发文档补全、控制台错误日志分析、常规代码语法及配置问题修复优化。所有操作需严格遵循智脑体规范化描述及配置要求，同时适配项目技术栈与编码规范，可通过自定义配置优化输出质量，启用 Quality 模式提升代码结构合理性与 TS 类型完整性。 - 前端工程师主要职责
：核心业务逻辑理解、需求边界范围判定、UI 视觉效果定稿把控、用户交互体验决策优化、代码合规性评审校验、页面样式精细调校、研发成果最终验收、版本迭代收口管理，同时负责 Trae 框架 Vue 智能体（智脑体）的规范化描述编写、配置维护、输出校验及优化更新，梳理智脑体核心技能（Skill）矩阵，剔除与项目冲突的通用配置，确保智脑体始终贴合项目规范与团队编码要求。
2.2 文档驱动开发原则
严格执行 先文档、后代码 强制开发准则，所有代码编写工作必须前置完成结构化文档约束，禁止无文档支撑、无需求依据、无接口契约的无序直接编码开发。
固定标准研发链路：结构化 PRD 需求文档 → Swagger 接口契约文档 → UI 页面结构 JSON 文档 → 页面静态结构搭建 → 接口交互逻辑绑定 → 联调测试验证 → 版本交付迭代，全程通过 Trae 框架 Vue 智能体（智脑体）完成代码生成，智脑体操作需符合规范化描述管理，确保输出代码与前置文档高度一致。
2.3 上下文可控与渐进式开发原则
依托项目专属 AGENTS.md 规则文件，统一固化工程开发规则、目录存放规范、代码编码约束及 Trae 框架 Vue 智能体（智脑体）的规范化描述与配置要求，保障智脑体多轮协作输出风格统一、代码结构统一、产出标准统一，无需重复人工解释项目规则与智脑体使用要求。
采用 小步迭代渐进式开发模式，单次研发仅完成单个页面或单个核心功能模块，每一步研发产出均可校验、可追溯、可复盘，同时每一步智脑体调用均需符合规范化管理，杜绝一次性大规模代码生成导致的逻辑混乱、报错频发、难以维护等问题。
⚙️3. 开发环境与项目初始化规范
3.1 标准项目目录结构
统一规范前端项目工程目录结构，适配 Trae 框架 Vue 智能体（智脑体）自动识别、代码自动生成、文档统一管理需求，目录职责划分清晰、层级分明，无职责耦合、无文件杂乱存放情况，同时新增智脑体相关配置目录。
（此处通常会有具体的目录树结构示意图，文档中已提及需包含智脑体配置目录）
3.2 AGENTS.md 协作配置规范
AGENTS.md 为 AI 协作核心基础配置文件，核心作用是统一告知 Trae 框架 Vue 智能体（智脑体）项目技术栈版本、目录存放规则、代码编码规范、自动生成约束及禁止修改范围，确保智脑体多轮对话协作过程中，代码输出风格统一、文件结构统一、编码标准统一，无需重复人工解释项目规则与智脑体使用要求。
文档核心强制约束内容包含：项目技术栈及对应版本说明、页面/组件/接口固定存放路径规则、TypeScript 类型强制编写要求、Element Plus 组件库使用规范、样式 scoped 隔离编写约束（禁止全局样式污染）、新增文件及目录修改审批规则；同时需补充 Trae 框架 Vue 智能体（智脑体）的规范化描述约束，明确智脑体的功能定位、配置标准、触发规则、输出要求及技能（Skill）矩阵，纳入 AGENTS.md 统一管理，确保所有成员使用统一规范的智脑体开展开发工作，避免智脑体无序调用导致的输出偏差。
3.3 项目前置依赖准备工作
项目正式启动 AI 协作开发前，必须完成四项前置基础准备工作，缺一不可：
第一，后端输出标准化 Swagger 接口文档，统一导出为 api-spec.json文件；第二，产品提供完整原始 PRD 文档、业务流程说明、页面交互原型； 第三，UI 设计提供 MasterGo 设计稿或页面截图 + 组件字段标注说明； 第四，前端工程已完成 Vite + Vue3 + Element Plus + TypeScript 基础环境封装配置，同时在 Trae 框架中完成特定 Vue 智能体（智脑体）的配置、描述校准及测试，梳理智脑体核心技能（Skill）并完成适配，确保智脑体可正常调用、输出符合项目规范，同时完成智脑体规范化描述文档的编写与归档。
🗺️4. 前端 AI 完整开发流程总览
整体标准化流程链路：原始产品 PRD 材料 → Trae 框架 Vue 智能体（智脑体）分析生成 prd.json 结构化需求文档 → 导入后端 swagger.json → 智脑体自动生成前端模块接口层代码 → 解析 MasterGo 设计稿 / 编写 ui-structure.json 页面结构 → 智脑体生成页面静态结构 Vue 代码 → 绑定接口与交互逻辑、处理 Loading/空数据/异常提示 → 运行项目排查控制台及页面报错、智脑体协助定位修复问题 → 人工精细调校页面样式、对齐 UI 视觉标准 → 项目自测联调、代码评审、提交归档 → 需求迭代 / Bug 修复同步更新三份核心 JSON 文档及智脑体相关描述配置。
4.1 研发流程角色分工表
📝5. 阶段一：PRD 分析生成 JSON 结构化需求文档
5.1 输入基础物料
产品提供的原始 PRD 材料，包含文字文档、纯文本需求描述、业务流程图、页面交互原型及相关业务补充说明。
5.2 文档生成执行规则
第一步，将完整原始 PRD 材料全部提交 Trae 框架 Vue 智能体（智脑体）； 第二步，按照智脑体规范化描述要求，使用固定标准化提示词，约束智脑体仅输出纯标准 JSON 格式内容，无多余文字解释、无冗余备注，提示词需包含技术栈、功能需求等核心要素，避免模糊指令； 第三步，智脑体生成文档统一命名为 prd.json，存放于项目根目录；第四步，前端工程师人工校验文档内页面信息、功能点、业务字段、交互规则完整性及准确性，修正无误后纳入 Git 版本管理，同时校验智脑体输出是否符合规范化描述要求，若存在偏差则优化智脑体配置及提示词。
5.3 prd.json 标准核心结构字段
项目基础信息（项目名称、版本号、项目描述）、页面列表（页面唯一标识、页面名称、路由路径、页面功能描述）、功能点列表（所属页面、功能类型、操作执行说明）、业务字段清单（字段标识、展示标签、数据类型、是否必填、所属关联页面）、交互规则清单（触发条件、执行动作、业务逻辑详细说明）。智脑体生成的文档需严格遵循该结构，确保字段完整、格式规范。
🔌6. 阶段二：基于 Swagger 自动生成前端接口文件
6.1 输入基础物料
后端导出的 OpenAPI 规范 swagger.json 文件、项目根目录已完成校验的 prd.json 结构化需求文档。
6.2 代码生成执行步骤
第一步，将后端 Swagger 接口规范文档保存为 api-spec.json存入项目根目录；第二步，交由 Trae 框架 Vue 智能体（智脑体）读取接口规范内容，结合 prd.json需求文档，精准过滤当前业务模块所需关联接口，智脑体调用需遵循规范化描述及配置；第三步，智脑体自动生成接口请求函数、请求参数 TS 类型、返回数据 TS 类型，统一调用项目全局封装的 axios 请求实例，禁止出现 any 类型，确保代码结构清晰； 第四步，生成的接口代码自动存放至 src/modules/对应业务模块/api/目录下。
6.3 接口生成校验标准
接口请求方式、请求路径、请求参数必须与后端 Swagger 规范完全一致；代码禁止出现 any 类型，全量数据严格添加 TS 类型约束；接口按页面及业务功能分组归类，代码结构清晰规整；本地可正常调用接口，基础联调无参数结构报错、请求异常问题；智脑体生成的代码需符合规范化描述中关于接口生成的相关要求，若存在不符合团队编码规范的情况，需优化智脑体提示词及配置。
🎨7. 阶段三：UI 页面结构解析生成 ui-structure.json
7.1 两种 UI 适配工作模式
7.1.1 方案一：MasterGo 插件最优模式
前端具备 MasterGo 团体编辑权限时优先使用该模式，安装 MasterGo 研发模式官方插件，授权 Trae 框架 Vue 智能体（智脑体）访问设计稿资源，同时对设计稿中的各功能组件进行明确标注（如输入框区域、表单区域等），插件结合组件标注直接自动解析页面布局、组件属性、层级结构、样式参数，智脑体基于规范化描述及配置，导出标准化页面结构 JSON 文件，研发效率最高、还原度最精准，同时可有效避免智脑体误将前端代码块识别为图片。若智脑体未准确调用项目定制组件，需优化智脑体技能（Skill）的触发词权重。
7.1.2 方案二：降级 JSON 描述通用模式
无 MasterGo 团体编辑权限时启用降级模式，前端工程师根据 UI 页面截图、组件标注、字段说明整理页面基础结构描述，重点对各功能组件进行明确标注（如输入框区域、表单区域、表格区域等），提交 Trae 框架 Vue 智能体（智脑体）后，智脑体按照规范化描述及配置要求，生成标准化 ui-structure.json 结构化文档，通过组件标注提升智脑体对前端实际代码块的识别准确性，避免其误将代码块识别为图片。
7.2 ui-structure.json 标准核心结构
关联页面唯一标识（与 prd.json 页面标识严格对齐）、页面整体布局类型（上下布局/左右布局/卡片流式布局）、页面分块信息（搜索区、列表区、弹窗区、详情区）、每个区块内部组件信息（组件标签类型、组件属性、绑定事件、展示文案、表格列配置），完整覆盖表格、表单、按钮、弹窗等所有页面核心组件结构化定义；
关键优化点：对页面各功能组件进行明确标注（如输入框区域、表单区域、表格区域、按钮操作区域等），通过精准的组件标注，可大大提高 Trae 框架 Vue 智能体（智脑体）对前端实际代码块的正确识别率，避免智脑体误将代码块识别为图片，确保生成的静态页面结构与实际代码实现精准匹配，减少后续代码修改成本，同时标注规范需同步纳入智脑体规范化描述管理。
🏗️8. 阶段四：基于 UI 结构生成静态页面
8.1 输入基础物料
已校验完成的 ui-structure.json 页面结构文档、prd.json 结构化需求文档、AGENTS.md AI 协作规则配置文档（含智脑体规范化描述）。
8.2 页面生成核心要求
第一，Trae 框架 Vue 智能体（智脑体）仅生成纯静态页面结构代码，不包含任何接口请求逻辑与业务交互代码，智脑体输出需严格遵循规范化描述； 第二，严格使用 Element Plus 官方组件，页面结构层级与 ui-structure.json文档完全匹配；第三，采用 Vue3 setup + TS 标准语法编写，代码添加必要业务注释，保障代码可读性，组件命名采用 PascalCase，工具函数命名采用 camelCase，禁止使用魔法值； 第四，自动生成 scoped 隔离基础样式，保障页面基础布局正常渲染； 第五，生成的 Vue 页面文件统一输出至对应业务模块 views 目录； 第六，页面生成需保持项目风格统一性，参考项目（如融汇）规范，列表页面、编辑页面、详情页面需具备功能实现一致性，统一页面布局结构、组件使用规范、交互逻辑风格及视觉呈现，确保不同页面间操作体验连贯、代码可读性强、风格统一无差异，智脑体需按照规范化描述输出符合项目风格的代码。
8.3 静态页面验收标准
页面结构与 UI 结构化描述完全一致，浏览器控制台无代码报错、无组件渲染异常，页面基础布局展示正常，所有组件完整渲染无缺失、无错乱；智脑体生成的代码符合规范化描述及项目编码规范，代码结构合理、注释完整，可直接进行后续交互绑定开发。
🔗9. 阶段五：绑定接口与动态交互、修复报错
9.1 核心工作执行步骤
第一步，在静态页面中引入 Trae 框架 Vue 智能体（智脑体）自动生成的模块接口文件； 第二步，前端获取接口对应的数据结构后，使用伪数据进行 mock，无需等待后端接口开发完成，即可提前完成大部分联调功能，提升研发效率； 第三步，由智脑体完成核心交互逻辑编写，遵循规范化描述及配置要求，包含页面加载自动查询、查询按钮点击触发、分页切换操作、弹窗显隐控制等基础功能； 第四步，统一处理接口请求的 Loading 加载状态、空数据展示提示、接口异常错误提示； 第五步，运行项目，查看控制台报错、页面渲染效果及接口请求状态； 第六步，智脑体根据报错日志及代码上下文，自动定位语法错误、TS 类型错误、引用路径错误、参数不匹配等问题并完成修复，修复过程需符合智脑体规范化管理要求，同时可通过连续按 Tab 键触发上下文敏感补全，提升修复效率。
9.2 代码修改约束规则
仅新增业务交互逻辑代码，禁止修改已成型的页面静态结构；所有数据流向、状态管理严格遵循项目统一编码规范，不随意新增全局变量、不破坏原有工程结构；智脑体修改代码需严格遵循规范化描述，禁止修改项目核心配置及已验收的代码模块，若需调整智脑体修改范围，需同步更新 AGENTS.md 中的智脑体配置。
🎨10. 阶段六：人工精细样式调校
AI 仅能完成页面基础布局结构搭建与简易样式适配，无法精准匹配 UI 视觉设计细节，页面精细样式调校必须由前端工程师人工收尾优化，核心调校内容包含：组件内外间距统一调校、字体大小/颜色/行高对齐 UI 设计规范、表格列宽/表单布局/弹窗尺寸精细适配、组件 hover/active/禁用态样式统一优化、不同屏幕尺寸的基础响应式适配调整，保障页面最终视觉效果完全贴合设计稿标准；
调校完成后，需同步更新 Trae 框架 Vue 智能体（智脑体）的规范化描述及样式配置，确保智脑体后续生成的样式更贴合项目视觉标准，同时可对接 UI 设计规范，确保设计与开发的一致性。
🔄11. 需求迭代与 Bug 修复规范
第一，需求变更迭代时，必须优先同步更新 prd.json、ui-structure.json两份核心结构化文档，文档更新校验无误后，再修改业务代码，同时同步更新 Trae 框架 Vue 智能体（智脑体）的相关描述及配置，优化智脑体技能（Skill）矩阵，确保智脑体输出适配需求变更；第二，接口变更需同步替换 api-spec.json文件，重新通过智脑体生成配套的前端接口层代码，智脑体调用需遵循规范化管理；第三，Bug 修复需先确认问题现象与复现条件，由智脑体协助定位问题根因、提供修复方案、生成补丁代码，智脑体操作符合规范化描述； 第四，所有结构化 JSON 文档、业务代码及智脑体相关描述、配置文件同步纳入 Git 版本管理，做到研发过程可追溯、问题可复盘、迭代可回滚； 第五，定期测试智脑体输出质量，若存在输出偏差，及时优化智脑体规范化描述及配置。
📦12. 标准交付物清单（迭代必交付）
prd.json结构化标准化需求文档（智脑体生成） api-spec.json后端接口契约规范文件 ui-structure.jsonUI 页面结构描述文档（智脑体生成/辅助生成） AI 自动生成的模块接口 TS 代码文件（智脑体生成） 静态页面 + 完整交互逻辑 Vue 页面源码（智脑体生成 + 人工优化） 人工样式调优定稿最终页面源码 项目 AGENTS.mdAI 协作规则配置文档（含 Trae 框架 Vue 智能体（智脑体）规范化描述及配置）.trae/skills/智脑体核心技能（Skill）配置文件
🌟13. 最佳实践总结
第一，严格坚持文档先行原则，未完成三份核心结构化 JSON 文档的编写与校验，绝不启动代码编码工作； 第二，依托 AGENTS.md固化项目研发规则及 Trae 框架 Vue 智能体（智脑体）规范化描述，梳理精简且高权重的智脑体技能（Skill）矩阵，剔除与项目冲突的通用配置，减少重复沟通解释，稳定智脑体输出质量；第三，智脑体专职负责结构化、模板化、重复性工作，前端工程师专职把控业务逻辑、视觉效果与最终交付决策，同时负责智脑体描述、配置的维护与更新； 第四，采用小步迭代、逐页验收模式，避免一次性大规模代码生成导致研发失控，每一步智脑体调用后均需校验输出质量； 第五，所有结构化研发文档、智脑体相关配置及描述文件统一纳入 Git 版本管理，保障项目迭代、复盘、工作交接全流程可追溯； 第六，使用 Trae 框架及智脑体时，禁止粘贴项目敏感信息（如 Token、接口密钥），避免信息泄露； 第七，定期优化智脑体规范化描述及配置，结合项目迭代持续提升智脑体输出的准确性与效率。
✅规范核心总结
本规范通过标准化 文档驱动 与 人机协作 机制，将 AI（Trae Vue 智能体/智脑体）深度融入前端研发全生命周期，确立了从需求、设计、开发、联调到迭代维护的闭环标准。
核心在于通过 prd.json、api-spec.json、ui-structure.json三大结构化文档锁定需求与契约，依托 AGENTS.md 与 Skill 配置统一智脑体行为，最终实现研发效率的显著提升与交付质量的稳定可控。
相关文章
