AI 赋Neng的前端全链路开发，咋整？

说实话，这玩意儿听着高大上，实际操作起来还挺接地气的。

先别急，我先给你掰开揉碎讲一遍。

你把业务需求丢给模型，像“我要一个用户列表页，支持搜索、分页、编辑删除”。

哈哈，模型马上吐出一张草稿图。

这时候咱们Ke以在设计工具里点“复制容器链接”，把页面对应的图层地址交给 AI。

不对不对，应该是把链接贴进 Prompt，让模型把 UI 元素结构化。

这样一来你手里就有了一个 JSON 树，描述了页面布局、组件层级和属性。

把上一步的 JSON 当作 Prompt 输入，告诉模型使用 Vue + Ant Design Vue。

比如：“请根据以下结构生成一个列表页面的 .vue 文件”。

然后模型会输出完整的模板、脚本和样式。

别忘了加点口头禅——“咱就是说这段代码要用 composition API”。

Ru果有特殊交互，比如弹窗表单、行内编辑，就在 Prompt 里补充：“再加个 Modal 用来新增/编辑”。

这一步Zui怕手动敲接口文档。

害，你只需要把 Swagger 地址塞进 MCP 配置文件里让模型读取。

示例：

{
  "mcpServers": {
    "Apifox Mcp Server": {
      "command": "cmd",
      "args": 
    }
  }
}

然后让 AI 把每个 endpoint 转成 request 函数，放进 /api 文件夹。

不对不对，还得让它生成对应的 TypeScript 类型，这样 IDE Neng智Neng提示。

这里我们把常用的 CURD、分页、表单校验抽离成 Hook。

比如 useCurd.tsuseFormModel.ts，模型只要知道这些 Hook Yi经存在就会直接引用，不会重新造轮子。

咱就是说这一步是提升团队一致性的大招。

E2E 测试脚本：

describe => {
  it => {
    await page.goto;
    await page.fill;
    await page.click');
    await expect).toContainText;
  });
});

Linter & Prettier 配置：

{
  "extends": ,
  "rules": {"no-console": "off"}
}

GitLab CI：

stages:
  - lint
  - test
lint:
  script: npm run lint
test:
  script: npm run test:e2e

把这些文件交给 AI，它会帮你补全变量名、路径啥的，一键搞定。

AICR现在Yi经成熟到Ke以直接在 Merge Request 时跑一遍。

你只需要在项目根目录放个 .aicr.yml, 写点规则：

review:
  - filePattern: "*.vue"
    rules:
      - no-unused-vars
      - max-lines-per-file: 400
      - avoid-inline-styles

AICR 会返回审查报告，标红问题点，还会给出优化建议。

"哈哈，这比我自己挑刺快多了。"

需求改动后只要geng新 Prompt，把新需求描述进去，模型就Neng自动定位受影响的文件并重新生成代码片段。

# 小技巧 # 把旧代码块包裹在 和 注释里让 AI 知道哪里Ke以覆盖。

P1: 输入业务需求 → 获得 UI JSON 树；

P2: JSON → Vue 页面 + Hook；

P3: Swagger → API 请求函数 + TS 类型；

P4: CI 配置 → 自动化测试 + Lint；

P5: AICR 审查 → 合并 PR；

P6: 需求变geng → 再跑 Prompt geng新。

"那个那个"，别忘了在 .env 放好 MCP token，不然读不到接口文档。

"不对不对"，Ru果模型生成的列宽太宽，Ke以手动调小，一行代码改完。

"咱就是说"，所有公共 Hook 建议放 /src/hooks/commons/, 团队统一维护。

"哈哈"，记得在 GitLab Webhook 那边勾选推送事件，这样 CI Neng实时触发。

"懂的dou懂"，Ru果想要geng细粒度控制 AI 行为，用 @rule:` 前缀声明规则。例子：

@rule:mcp_apifox 根据我的配置读取 swagger 文档并生成请求函数。

# 小结 # 咱们用了四大块儿：

AIGC 原型设计；

AIGC UI+代码生成；

MCP+Swagger 接口自动化；

AICR 智Neng审查 + CI/CD。

"说实话"，整个过程省了好多手敲重复活儿，你只管专注业务逻辑和创新功Neng就行啦。

# 温馨提示 # Ru果哪一步卡住了就回头检查 Prompt 是否够明确。别怕，多加点口语化描述，模型反而geng懂你的意图~ 哈哈！