AI工具辅助编程

聊AI提效

一、国内大厂前端领域 AI 的真实落地程度

面试官说“只靠 vibe coding 不够”，本质是在考察你对 AI 的认知是否还停留在“随便写个需求让 AI 出代码”的初级阶段。当前头部大厂的 AI 已经深度嵌入研发全流程，是标准化、流程化、带规范约束的提效工具，而非零散的个人用法。

按研发全流程拆解，核心落地场景如下：

1. 需求与设计阶段

需求结构化与方案预研：AI 将自然语言需求转化为结构化 PRD、功能清单，辅助输出前端技术方案、模块拆分、选型对比，大幅缩短技术评审前期的准备工作。
设计稿转代码（Design to Code）：这是面试官明确提到的场景。大厂内部已普遍应用，将 Figma/即时设计稿一键转化为带样式的前端组件代码，支持对齐内部设计系统的设计令牌（Design Token），自动适配响应式规范。
- 现状：静态样式还原度可达 80% 以上，能节省 50% 以上的切图写样式时间，但复杂交互、业务逻辑、极致性能优化仍需人工处理。

2. 编码开发阶段（核心提效场景）

这是 AI 应用最深的环节，也是“规范优先”的体现，绝非无约束的 vibe coding。

带规范的代码生成：将团队的编码规范、ESLint 规则、组件库 API、项目目录结构、接口约定全部注入 AI，生成的代码直接符合项目标准，无需大规模返工。
高频业务场景批量生成：针对后台管理系统 CRUD 页面、表单页、列表页等高度同质化的场景，封装专属生成能力，开发效率可提升 60% 以上。
IDE 实时代码补全与重构：全员使用编码助手插件，支持行级补全、函数生成、代码重构、注释补充、Bug 快速修复，和代码库深度打通。
自定义技能（Skill）调用：也就是面试中提到的 skill 创建与修改，把重复任务封装成可复用的 AI 技能，团队全员调用，统一输出标准。

3. 测试与质量保障阶段

自动化测试用例生成：根据业务代码自动生成单元测试、组件测试用例，覆盖核心逻辑与边界场景，补充人工遗漏的用例。
AI 辅助代码评审（CR）：CR 系统集成大模型，自动检查代码规范、性能隐患、安全漏洞、逻辑缺陷，输出标准化评审意见，减少人工 CR 的重复工作量。
兼容性与缺陷检测：自动分析代码的浏览器兼容性、可访问性问题，并给出修复方案。

4. 运维与知识沉淀阶段

线上问题排查：AI 分析前端错误日志、性能监控数据，快速定位根因并给出修复建议，缩短故障响应时间。
文档自动生成：自动生成组件文档、接口文档、项目 README、复杂逻辑注释，保证文档和代码同步更新。
团队知识库问答：将技术规范、业务文档、历史问题沉淀为 AI 知识库，新人可直接问答，降低沟通和培训成本。

关键认知

大厂的 AI 定位始终是**“人主导、AI 辅助”**，核心逻辑、架构设计、质量把控永远由人负责。尤其是华为这类对代码质量、可维护性、安全性要求极高的企业，AI 生成的代码必须经过人工审核、规范校验、完整测试，绝不可能直接上线。

二、大厂 AI 工具选型与面试表述建议

1. 大厂是不是都用国外 AI 工具？

完全不是，国内头部大厂核心研发场景几乎不使用境外通用大模型，核心原因是数据安全与合规要求：

代码、业务数据、设计稿都属于企业核心资产，严禁上传到境外服务器，这是很多大厂的红线。
国内大厂普遍采用自研大模型+内网私有化部署的方案：
- 华为：盘古研发大模型、盘古代码助手，全量内网部署，和内部研发流程深度打通。
- 阿里：通义灵码、通义千问企业版。
- 腾讯：混元大模型研发版。
- 字节：豆包编程助手企业版。
设计场景多使用国内工具的企业版（如即时设计、MasterGo 的 AI 功能），出海业务才会有限使用 Figma 相关 AI 插件。

2. 你提到的工具能不能在面试里说？

可以说，但必须区分场景、强调合规，表述得当反而加分，绝对不能说“用公共大模型写公司代码”。

正确表述框架

个人学习与业余项目场景：可以坦诚说用 DeepSeek、豆包、Codex、Work Buddy 等工具，比如用它们学习新技术、写个人 Demo、刷算法题、做技术预研、探索 AI 编码的最佳实践，体现你主动拥抱 AI 的意识。
工作场景的合规原则（重点强调，华为非常看重）：工作中严格遵守公司数据安全规定，公司内部代码、业务数据、涉密信息绝不传入公共大模型；如果团队有内部私有化 AI 工具就优先使用，没有的话也只在通用技术问题、非涉密场景下谨慎使用公共工具。
加分补充：自己也会基于开源代码模型（如 DeepSeek-Coder、CodeLlama）在本地部署，做一些自定义编码技能的尝试，既保证数据安全，又能适配个人开发习惯。

三、AI Skill 的创建与修改：步骤、原理与前端实例

1. 什么是 AI Skill

面试中提到的「Skill（技能）」，本质是针对特定任务的、可复用的 AI 能力封装——把“完成某一类任务的角色定义、输出规范、知识库、调用规则、示例”打包成一个独立技能，调用时无需重复写大段提示词，直接触发就能得到标准化的输出。

前端场景的 Skill，核心目标是解决“AI 生成的代码不符合团队规范、返工成本高”的问题，让输出结果直接适配团队技术栈与业务习惯。

2. 核心底层原理

不用深入算法细节，但面试要能讲清逻辑：

Prompt 工程：绝大多数业务 Skill 的核心，通过系统提示词定义角色、约束、输出格式，搭配少样本示例（Few-shot）让 AI 学习输出风格。
RAG（检索增强生成）：挂载团队内部知识库（组件库文档、编码规范、历史代码、接口文档），AI 生成前先检索知识库内容，保证结果符合内部标准，减少幻觉。
函数调用（Function Calling）：让 Skill 可以调用外部工具，比如查询代码库组件、获取接口字段、拉取设计令牌，提升结果准确性。
模型微调：仅针对极高频、标准化的场景，用团队历史代码微调专用小模型，大厂内部会做，普通场景用 Prompt+RAG 完全足够。

3. 创建与修改的完整步骤（前端场景）

需求定义与边界划定 明确技能解决的具体问题、适用场景、输入输出标准，界定清楚“什么能做、什么不能做”。例：做一个「后台列表页生成 Skill」，输入是功能描述+接口地址，输出是符合 Vue3 + Element Plus 规范的完整列表页代码，包含搜索、分页、增删改查逻辑。
基础能力搭建：规则与示例定义 编写系统提示词，定义 AI 角色、输出要求、命名规范、禁止项，再放入 1-2 个真实的标准代码作为少样本示例，让 AI 学习输出格式和风格。这一步决定了技能输出的基础质量，也是面试官说“给 AI 规范再写”的核心体现。
知识库挂载（RAG 接入） 把团队编码规范、组件库文档、接口约定、请求封装文档向量化后接入知识库。AI 生成时会先检索对应规则，保证代码和现有项目风格一致，比如接口请求必须用封装好的 request 方法、分页参数必须和后端约定对齐。
测试与效果调优 用多个真实需求测试输出，排查问题（命名不规范、逻辑缺失、组件用法错误等），针对性优化提示词、补充知识库内容，反复迭代直到代码人工修改率降到可接受范围。
集成发布与使用 将技能集成到 IDE 插件、内部 AI 平台或 CLI 工具中，提供给团队使用，配套使用说明与适用场景说明。
迭代修改 收集使用反馈，跟随组件库升级、规范更新、业务模式变化，同步更新提示词与知识库，持续优化生成效果。

4. 面试可直接用的两个前端实例

实例 1：Vue3 业务表单组件生成 Skill

输入：组件功能描述、Props 定义、字段校验规则
能力：自动生成符合团队 ESLint 规范的 Vue3 单文件组件，包含 script setup、TypeScript 类型定义、scoped 样式，自动引用内部组件库的表单项组件。
价值：原来写一个复杂表单需要 40 分钟，用 Skill 生成后仅需 10 分钟调整特殊业务逻辑。

实例 2：代码规范修复 Skill

输入：不符合规范的代码片段
能力：按照团队 ESLint、Stylelint 规则自动修复代码，优化可读性、补充注释，且不改变原有业务逻辑。
价值：代码评审前自动执行，减少 70% 以上的规范类评审意见，大幅提升 CR 效率。

四、华为OD前端面试 AI 方向应对策略

核心答题原则

AI 是工具，你是主人。重点体现**「会用、善用、能管控」**，而不是“依赖 AI 写代码”。面试官否定 vibe coding，本质是担心你只会无规范地让 AI 出代码，缺乏质量意识和工程化思维。

高频问题应答思路

1. 你平时怎么用 AI 辅助前端开发？

不要只说“让 AI 写代码”，按流程分层表述，体现规范化：

我主要把 AI 用在全流程的提效上，核心是减少重复劳动，把时间放在核心逻辑上：
开发前期：用 AI 梳理需求、做技术选型对比、辅助输出技术方案框架。
编码阶段：通用的工具函数、CRUD 页面、基础组件这类模式化代码，让 AI 按规范生成，我来做审核和业务逻辑补充；复杂逻辑我先拆解实现思路，再让 AI 补全细节代码、处理边界情况；重构时用 AI 辅助优化结构、补充注释。
测试阶段：用 AI 生成单元测试用例，补充我没考虑到的边界场景。
问题排查：线上报错或性能问题，把错误日志和相关代码给 AI，辅助定位根因。另外我会把团队的编码规范整理成自定义提示词，让 AI 生成的代码直接符合规范，减少后续返工。

2. 有没有用过设计图转代码？效果怎么样？

用过即时设计和 Figma 的 AI 转代码功能，它的优势是静态样式还原速度很快，简单的展示页能省大量写 CSS 的时间。但缺点也很明显：复杂交互、响应式适配、业务逻辑都处理不好，生成的代码结构也比较冗余，不符合项目规范。我的用法是用它生成基础的 DOM 结构和样式，然后我来重构组件结构、接入业务逻辑、适配响应式、对齐设计规范，相当于把“从0到1写页面”变成“从1到1.5优化”，整体效率提升很明显。如果团队有统一的设计系统，我还会把设计令牌喂给 AI，让生成的代码直接使用规范变量。

3. 怎么保证 AI 生成代码的质量？

这是华为的核心考察点，务必答出全流程管控：

我主要从四个层面把控：
前置约束：生成前就给 AI 输入明确的规范，包括技术栈版本、编码规则、组件库使用要求、性能和安全红线，从源头减少劣质输出。
自动校验：生成后先用 ESLint、Stylelint、TypeScript 类型检查做自动校验，过滤语法和规范问题。
人工审核：核心业务逻辑我会逐行确认，保证和需求一致、没有逻辑漏洞；同时检查性能隐患，比如不必要的重渲染、内存泄漏、XSS 风险。
流程兜底：AI 生成的代码和人工写的代码走完全一样的自测、CR 流程，接受团队评审，不会因为是 AI 生成的就降低标准。

4. 有没有创建/修改过 AI 技能？说说怎么做的

结合上面的步骤，用一个真实感强的案例表述，重点讲价值和优化思路：

做过。之前做后台管理项目时，大量列表页逻辑高度重复，每次开发都要花很多时间复制修改。我就基于 DeepSeek 的自定义智能体做了一个列表页生成技能。首先我整理了团队 Vue3 + Element Plus 列表页的标准模板，把编码规范、接口请求封装、分页和搜索逻辑都写成系统提示词，再放了两个真实页面代码作为示例。初期生成的代码经常出现接口参数和后端约定不一致的问题，后来我把后端接口规范文档做成知识库挂载进去，生成时自动检索对应字段，准确率提升了很多。最终用下来，一个常规列表页的开发时间从 40 分钟降到了 10 分钟左右，大部分时间只需要调整特殊业务逻辑。

5. 你觉得 AI 会替代前端开发吗？

我认为不会替代，但会淘汰不会用 AI 的前端开发。 AI 擅长的是重复、模式化、有固定答案的工作，比如写基础样式、通用工具函数，这些是前端工作里的“体力活”。但前端的核心价值——理解业务、做技术选型与架构设计、实现复杂交互、打磨用户体验、排查疑难问题，这些需要深度思考和业务理解的工作，AI 做不了。未来的前端一定是“人+AI”的协作模式，用好 AI 能大幅提升效率，让我们有更多时间深耕核心能力。

面试避坑红线

不要吹嘘全靠 AI 写代码：会让面试官认为你基础薄弱、核心能力不足，过度依赖工具。
不要提及用境外公共工具处理公司代码：信息安全是华为的红线，一定要主动强调合规意识。
不要只停留在 vibe coding 认知：全程要围绕“规范、流程、质量管控”展开，体现工程化思维。
不要不懂装懂：RAG、微调这些概念了解多少说多少，重点讲自己实操过的内容，避免被追问细节露馅。

skill 是一个md文件吗

一、先给结论：Skill 不是纯 MD 文件，但 Markdown 是核心载体

面试里提到的「创建/修改 Skill」，90% 以上指的是基于提示工程的业务技能，它的核心逻辑几乎都用 Markdown 格式来编写，但完整的 Skill 不只是一个 md 文件。

本质拆解

最小可用的 Skill：就是一份结构化的 Markdown 提示词文件，把角色、规则、格式、示例全部写在 md 里，调用时直接作为系统提示词注入给大模型。这也是前端开发最常接触、最容易上手的形式。
完整的企业级 Skill：是一套配置集合，md 文件只是其中最核心的「指令部分」，除此之外还包括：
1. 元信息配置（技能名称、图标、适用场景、权限）
2. 知识库挂载配置（RAG 检索的文档范围、检索策略）
3. 工具/函数调用配置（是否允许查接口、调组件库 API、执行代码）
4. 版本管理记录（迭代日志、效果指标）

常见落地形式

可视化 AI 平台（豆包企业版、DeepSeek 智能体、Coze、华为内部 AI 平台）：后台是表单化配置，核心的「角色设定 + 规则指令」区域就是 Markdown 编辑器，最终平台会把所有配置打包成一个技能。
团队代码化管理：把提示词单独存为 .md 文件，和项目代码一起提交 Git，配合 YAML 配置文件定义挂载的知识库和工具，支持版本追踪、多人协作迭代。
本地/开源框架（LangChain、Dify）：技能通常以「YAML 配置 + Markdown 提示词模板」的形式存在，md 负责指令内容，yaml 负责参数和链路。

面试里你可以直接说：我日常会把 Skill 的核心规则沉淀为 Markdown 文件，和代码一起纳入 Git 管理，方便团队迭代和版本回溯，既真实又符合大厂工程化习惯。

二、Skill 核心 MD 文件的标准结构与内容

一份合格的前端代码生成 Skill，Markdown 里一定会按层级写清楚以下 7 个模块，大模型对 Markdown 的结构化指令识别准确率远高于纯文本，能更严格地遵守规则。

模块	作用	核心内容
1. 角色定义	给 AI 定身份，划定能力边界	你是谁、擅长什么、不做什么
2. 任务说明	明确输入输出，界定任务范围	接收什么输入、最终产出什么结果
3. 强制规范	面试官说的「给规范再写」的核心	编码规范、技术栈要求、组件库用法、禁止项
4. 输出格式	固定输出结构，避免结果混乱	先写什么、后写什么、代码块格式
5. 知识库使用规则	配合 RAG 生效	优先使用知识库内容，冲突时以知识库为准
6. 少样本示例（Few-shot）	让 AI 快速对齐风格	1-2 个完整的、符合规范的真实代码示例
7. 异常处理	兜底边界场景	输入不全、超出范围时怎么回应

三、完整示例：前端列表页生成 Skill 的 MD 文件

下面是一份可以直接使用的、对应「Vue3 + Element Plus 后台列表页生成」Skill 的 Markdown 内容，也是你面试时可以拿来举例的真实素材：

# 技能：后台管理系统列表页代码生成
## 1. 角色定义
你是一名资深前端开发工程师，精通 Vue 3.4 + TypeScript + Element Plus 技术栈，严格遵循团队前端编码规范。你只负责生成符合规范的列表页代码，不解答无关技术问题，不生成超出后台列表页范围的内容。

## 2. 任务说明
- 输入：页面功能描述、接口路径、核心字段说明
- 输出：完整的 Vue 单文件组件代码，包含搜索区、表格区、分页区、新增/编辑弹窗、删除确认逻辑
- 要求：代码可直接放入项目中运行，仅需补充业务特殊逻辑

## 3. 强制编码规范（必须严格遵守）
### 3.1 语法规范
- 使用 `<script setup lang="ts">` 语法，禁止使用 Options API
- 所有变量、Props、Emits 必须声明 TypeScript 类型，禁止使用 `any`
- 响应式数据优先使用 `ref`，复杂对象使用 `reactive`
- 命名规范：组件名大驼峰，变量/函数小驼峰，常量全大写下划线分隔

### 3.2 业务规范
- 接口请求必须使用项目封装的 `request` 方法，禁止直接使用 axios
- 分页参数统一为 `{ pageNum: number, pageSize: number }`，返回格式统一为 `{ total: number, list: [] }`
- 删除操作必须弹出二次确认弹窗，操作成功后自动刷新列表
- 搜索区包含「查询」「重置」两个按钮，重置后自动触发查询

### 3.3 禁止项
- 禁止引入未在 Element Plus 中的第三方组件
- 禁止写死业务数据，所有数据通过接口获取
- 禁止修改和添加本规范未声明的依赖

## 4. 输出格式
1. 先输出一段简短的实现说明，标注需要人工确认的点
2. 再输出完整的代码块，语言标记为 `vue`
3. 代码内关键逻辑必须添加单行注释

## 5. 知识库使用规则
生成代码前必须先检索挂载的知识库：
- 优先使用组件库 API 文档中的组件用法
- 接口字段定义以后端接口文档为准
- 若知识库内容与本规范冲突，以本规范为准

## 6. 参考示例
以下是标准列表页的精简示例，请严格对齐代码风格和结构：

```vue
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '@/utils/request'

const loading = ref(false)
const total = ref(0)
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  keyword: ''
})
const tableData = ref<any[]>([])

const getList = async () => {
  loading.value = true
  try {
    const res = await request.get('/api/user/list', { params: queryParams.value })
    tableData.value = res.data.list
    total.value = res.data.total
  } finally {
    loading.value = false
  }
}

const handleReset = () => {
  queryParams.value = { pageNum: 1, pageSize: 10, keyword: '' }
  getList()
}

const handleDelete = async (id: number) => {
  await ElMessageBox.confirm('确认删除该条数据？', '提示', { type: 'warning' })
  await request.delete(`/api/user/${id}`)
  ElMessage.success('删除成功')
  getList()
}

onMounted(() => {
  getList()
})
</script>

<template>
  <div class="user-list">
    <!-- 搜索区 -->
    <el-form :inline="true" :model="queryParams">
      <el-form-item label="关键词">
        <el-input v-model="queryParams.keyword" placeholder="请输入" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格区 -->
    <el-table v-loading="loading" :data="tableData">
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column label="操作" width="180">
        <template #default="{ row }">
          <el-button link type="primary" size="small">编辑</el-button>
          <el-button link type="danger" size="small" @click="handleDelete(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区 -->
    <el-pagination
      v-model:current-page="queryParams.pageNum"
      v-model:page-size="queryParams.pageSize"
      :total="total"
      @size-change="getList"
      @current-change="getList"
    />
  </div>
</template>

<style scoped>
.user-list {
  padding: 20px;
}
</style>

7. 异常处理

如果输入缺少接口路径或核心字段，主动询问用户补充，不要编造字段
如果需求超出普通列表页范围，明确告知用户本技能的能力边界


---

## 四、面试补充：Skill 的修改迭代怎么说
Skill 不是写完就不变了，修改过程本质就是**迭代这份 Markdown 文件 + 补充知识库**，面试可以这么讲：
1. **新增规范**：比如团队升级了组件库、新增了权限控制要求，直接在「强制规范」模块补充对应条款。
2. **修复问题**：比如发现 AI 总写错分页参数，就在规范里加粗强调，同时在示例里补充对应写法，必要时增加反例说明。
3. **扩展能力**：比如要支持导出功能，就在任务说明里新增场景，在示例里补充导出逻辑的代码。
4. **效果验证**：每次修改后，用历史测试用例回归，统计人工修改率，确认优化效果。

AI工具辅助编程 ​

聊AI提效 ​

一、国内大厂前端领域 AI 的真实落地程度 ​

1. 需求与设计阶段 ​

2. 编码开发阶段（核心提效场景） ​

3. 测试与质量保障阶段 ​

4. 运维与知识沉淀阶段 ​

关键认知 ​

二、大厂 AI 工具选型与面试表述建议 ​

1. 大厂是不是都用国外 AI 工具？ ​

2. 你提到的工具能不能在面试里说？ ​

正确表述框架 ​

三、AI Skill 的创建与修改：步骤、原理与前端实例 ​

1. 什么是 AI Skill ​

2. 核心底层原理 ​

3. 创建与修改的完整步骤（前端场景） ​

4. 面试可直接用的两个前端实例 ​

实例 1：Vue3 业务表单组件生成 Skill ​

实例 2：代码规范修复 Skill ​

四、华为OD前端面试 AI 方向应对策略 ​

核心答题原则 ​

高频问题应答思路 ​

1. 你平时怎么用 AI 辅助前端开发？ ​

2. 有没有用过设计图转代码？效果怎么样？ ​

3. 怎么保证 AI 生成代码的质量？ ​

4. 有没有创建/修改过 AI 技能？说说怎么做的 ​

5. 你觉得 AI 会替代前端开发吗？ ​

面试避坑红线 ​

skill 是一个md文件吗 ​

一、先给结论：Skill 不是纯 MD 文件，但 Markdown 是核心载体 ​

本质拆解 ​

常见落地形式 ​

二、Skill 核心 MD 文件的标准结构与内容 ​

三、完整示例：前端列表页生成 Skill 的 MD 文件 ​

7. 异常处理 ​