本章目的：从需求分析到上线运维，覆盖整个软件开发生命周期（SDLC）。但本文不是给你一堆 Prompt 模板——而是教你把每个研发环节封装成一个 Skill（SKILL.md），然后用一个 Workflow（AGENTS.md）让 AI Agent 按流水线自动执行。Agent 自行决策每一步用什么工具和 MCP，你只需要在关键 Gate 做确认。

2.1 开发生命周期全景

传统开发流程中，AI 往往只被用在”写代码”这个环节。但事实上，每个环节都可以 Skill 化。一旦被 Skill 化，Agent 就能自动识别当前处于什么阶段、该做什么事、用什么工具。

1
2
3
4
5
6
7
8
9
10
11
12

┌──────────────┐    ┌──────────────┐    ┌──────────────┐    ┌──────────────┐    ┌──────────────┐    ┌──────────────┐
│ 需求分析      │ → │ 技术设计      │ → │ 编码实现      │ → │  测试        │ → │ Code         │ → │ 部署运维      │
│ Skill        │    │ Skill        │    │ Skill        │    │ Skill        │    │ Review Skill │    │ Skill        │
│              │    │              │    │              │    │              │    │              │    │              │
│ requirement- │    │ tech-design  │    │ coding       │    │ test-        │    │ code-review  │    │ deploy-ops   │
│ analysis     │    │              │    │              │    │ generation   │    │              │    │              │
└──────┬───────┘    └──────┬───────┘    └──────┬───────┘    └──────┬───────┘    └──────┬───────┘    └──────┬───────┘
       │                   │                   │                   │                   │                   │
       ▼                   ▼                   ▼                   ▼                   ▼                   ▼
  产出：功能点清单      产出：方案文档       产出：实现代码       产出：测试文件      产出：Review 结论   产出：部署完成
  验收标准             API 设计            + 测试通过          + 覆盖率报告       + MR 合并          + 监控告警
  模糊点清单           组件树

不再是你跑过去问 Agent”帮我分析这个需求”——Agent 看到 JIRA Ticket 后，自己就会加载 requirement-analysis Skill，按 Skill 里的步骤执行。

2.2 环节一：需求分析 Skill

AI时代前端工程师实战指南：Agent工作流

本文定位不一样——不是教你怎么给 Agent 写 Prompt，而是教你怎么设计一套能被 Agent 自动执行的 Skill 体系。
把开发流程拆成可复用的指令模块，让 Agent 按工作流自动运转，你从”操作者”变成”设计者”。

5.1 从”写 Prompt”到”设计 Skill”

  上一章我们讲了 Prompt 工程——如何写出结构清晰、约束明确的 Prompt，让 AI 输出更可靠。这是一个巨大的进步，从”随便问两句”到”系统化地写 Prompt”，已经是质的飞跃。

  但用过一段时间后，你会发现一个新问题：每次都要重复写几乎一样的 Prompt。

  比如你有一个开发习惯——写任何代码之前先做需求分析，然后出技术方案，再动手编码，最后加测试。这个流程你每次都要在 Prompt 里重申一遍：

1
2
3
4
5

❌ 每次重复：
"先分析需求，列出所有功能点和边界条件"
"然后出技术方案，考虑组件拆分和数据流"
"再开始编码，遵循项目规范"
"最后加测试，覆盖正常路径和异常路径"

AI时代前端工程师实战指南：避坑篇

深度使用过 AI 才知道的坑，以及对应的防御策略。

7.1 AI 幻觉：它真的知道自己在说什么吗？

AI 的”知识”本质上是对训练数据的模式匹配，它不是真的”知道”某个事实。这会表现为：

常见幻觉类型

防御策略

AI时代前端工程师实战指南：Prompt工程

本文目的：从”随机问 AI”到”系统化地使用 AI”，建立可复用的 Prompt 工程体系。涉及 .cursorrules、CLAUDE.md、AGENTS.md、项目级 Prompt 模板库等多种配置文件的使用。

4.1 为什么需要 Prompt 工程？

一个简单的实验：同样的问题，不同问法，AI 的回答质量天差地别。

1
2
3
4

❌ 差："帮我写一个搜索组件"
    → AI 生成一个最简单的搜索框，大概率不符合项目规范

✅ 好：见下方结构化 Prompt

Prompt 工程就是在系统化地缩小 AI 的”猜测空间”。你给的信息越精确，AI 的”猜测”就越接近你的真实需求。

1
2
3
4
5

AI 的猜测空间：
  无限可能 ──────────────→ 精确匹配需求
     ↑                          ↑
  模糊 Prompt              结构化 Prompt
  （"写个搜索"）         （带约束、上下文、格式）

AI时代前端工程师实战指南：Cursor实战

学会 Cursor 的正确打开方式，从”只会 Tab 补全”到”熟练使用 Agent 模式”。在开始之前，先了解 Cursor 的两个重要配置文件：.cursorrules（项目根目录）和 .cursor/rules/*.mdc（.cursor/rules/ 目录），它们决定了 AI 的行为规范。

3.1 三种模式与使用场景

Cursor 有三种交互模式，分别对应不同场景：

Composer 有两种子模式：Normal（对话式，你一步步引导）和 Agent（自主式，AI 自己规划执行）。

选型决策树

AI 时代前端工程师实战指南：认知篇

从工具使用到 Agent 驱动开发，用 AI 重塑整个软件交付流程

适用读者：初中级、高级前端工程师
对应工具：Cursor · Claude Code · OpenCode · GitHub Copilot

如果要用五句话概括 AI 时代前端工程师需要建立的核心认知，那就是：

1. AI 不是搜索引擎 — 它是你的结对程序员，区别在于你如何描述问题
2. Prompt 是新的编程语言 — 写好 Prompt 和写好代码同样重要
3. Agent 是下一代的 IDE — 不只是代码补全，而是能自主执行任务的开发伙伴
4. AI 提效是全链路的 — 从需求分析到上线运维，每个环节都能看到显著提升
5. 面试考的不是工具 — 是你的方法论：如何判断、如何使用、如何保证质量

这些观点会贯穿整个系列。本文作为开篇，先帮你建立起对 AI 工具的全局认知，理解能力模型的迁移方向，为后续实战打好基础。

1.1 AI 工具分类矩阵

1px适配

  在 Retina 屏（DPR ≥ 2）上，CSS 的 1px 在物理上其实是 2px 或 3px，看起来比设计稿粗一圈。下面是几种常用的解决方案。

方案一：transform scale 模拟

  用伪元素画一条 1px 的线，然后通过 scaleY(0.5) 在垂直方向压缩一半：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.hairline {
  position: relative;
}
.hairline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #ccc;
  transform: scaleY(0.5);
  transform-origin: 0 0;
}

  同理，scale(0.5) 可以做完整的 1px 边框：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.border-1px {
  position: relative;
}
.border-1px::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 200%;
  border: 1px solid #ccc;
  border-radius: 4px;
  transform: scale(0.5);
  transform-origin: left top;
  pointer-events: none;
}

方案二：用 0.5px

项目背景

  项目中有些地方引用了本地的mock数据，这些数据全部在一个mock.js的文件中，由于数据较多，比较占位置，所以想在生产环境下移除该部分代码。具体实现还得靠webpack插件。以这个demo为例进行讲解。

关键点

• webpack.DefinePlugin 定义工程中的全局变量，本项目中定义了ISDEBUG来判断运行环境是否是生产环境
• terser-webpack-plugin 压缩代码，与uglifyjs-webpack-plugin功能一样，甚至参数都相差不大。但是对于ES6的支持程度比后者更好。该插件优化项之一是去除项目中无效代码，这是核心依赖项
• webpack-bundle-analyzer 分析打包结果
• 项目中mock.js的引用方式要使用Commonjs标准的require(‘mock’)

  框架为什么要有生命周期？因为框架就像是组装好的电脑，每个人的电脑里软件都不一样，买来了电脑，需要让用户可以有办法自己装一些软件。也就是实际业务不同，你要借助框架去做一些事，所以需要框架给一些接口让外部业务去调用，去填充数据。从new Vue()开始，这个框架的生命周期(作为一个构造函数函数)就已经开始了，但是我们平时使用的是它在一些特定的时刻的抛出的接口，这个才是定义的生命周期。

Vue构造函数

  这里学习的源码版本是2.6.11，构造函数的定义在src\core\instance\index.js。源码中Vue的构造函数很简单，首先检测是不是作为构造函数使用，然后执行初始化 this._init(options)

1
2
3
4
5
6
7
8
9
10
11
12

function Vue (options) {
  if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue) ) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options)
}

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

  双向绑定一直是一个高频考点，今天就来实现一个简单的Vue双向绑定。设框架名称为Wue，双向绑定指令为w-model。主要方法是observer、watcher、complier。分别用来给属性绑定setter，连接observer与complier，根据模版语法添加对应的watcher并且更新模版中的值

observer思路

1
2
3
4
5
6
7
8
9

start=>start: 开始
end=>end: 结束
op1=>operation: 遍历Wue.data中的所有属性，为每个属性添加getter/setter
op2=>operation: 手动设置data中的属性值，触发setter
op3=>operation: setter触发watcher

start->op1->op2->op3->end

watcher(在本文中更像是writer)相当于中间人。手动设置data属性后，setter触发对应data属性的watcher，watcher更新UI；input等加了双向绑定指令”w-model”的值更新后，触发对应绑定事件，在回调方法中触发watcher，更新data属性