<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/">
    <channel>
        <title>Ediaewu's Blog</title>
        <link>https://www.ediaewu.cn</link>
        <description>一个前端工程师的技术与生活</description>
        <lastBuildDate>Tue, 19 May 2026 11:30:17 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/jpmonette/feed</generator>
        <language>zh-CN</language>
        <copyright>All rights reserved 2026</copyright>
        <item>
            <title><![CDATA[前端“已死”，AI当立]]></title>
            <link>https://www.ediaewu.cn/posts/frontend-is-dead-ai-rises</link>
            <guid isPermaLink="false">https://www.ediaewu.cn/posts/frontend-is-dead-ai-rises</guid>
            <pubDate>Wed, 13 May 2026 00:00:00 GMT</pubDate>
            <description><![CDATA[一个应届生前端的求职独白——投了上百份简历石沉大海，AI 十分钟干完我三天的活。前端真的死了吗？我们该怎么办？]]></description>
            <content:encoded><![CDATA[
投了三个月的简历，面了十来家，还没有拿到一个前端 offer。

昨天在牛客看到一条帖子，说他们公司已经用 AI 写后台页面了。不是辅助，是直接生成。产品经理画个原型丢进去，AI 十分钟出代码、能跑、能上线。人力？一个中级前端审一下就行。

我在大研究生期间里学了三年——HTML、CSS、JavaScript、React、Vue、Webpack、Node。跟着自己的导师做了几个横向课题。我以为自己准备好了。

然后 DeepSeek V4 Pro 出来了。Cursor 出来了。Claude Code 出来了。

我练了一年的切图和组件封装，AI 三秒钟写完。我背的八股文，AI 回答得比我还流利。我花三天写的毕业设计，AI 十分钟给出完整方案。

我不是不努力。我只是不知道，努力的方向对不对。

---

## 一、前端行业，真的变天了

2024 年以前，前端还是一个能有口饭吃的职业，大多公司还是需要前端人员的。你只要会用 React 写组件、会CRUD，会调接口、会把设计稿还原到 80%，就能拿到一份还不错的 offer。

2025 年之后，游戏规则变了。

**初级岗位断崖式减少。** 根据脉脉、牛客上的招聘数据，初/中级前端的岗位数量比两年前少了将近一半。不是经济不好——公司还在招人，但招的是"能用 AI 的全栈"，不是你这种"只会写页面的前端"。

**AI 直接吃掉了一大块工作。** 后台管理系统的表格、表单、列表页，这些占前端日常工作量 60% 的东西，现在 AI 能直接生成。一个需要两天开发的 CRUD 页面，Cursor 十分钟搞定。你告诉我，为什么要招一个应届生花两周去学？

**企业期望以肉眼可见的速度拔高。** 现在的 JD 不再写"熟悉 React/Vue"，而是写"能用 AI 工具提升效率""有全栈思维""理解业务"。但回到现实——一个应届生，哪来的全栈经验？

现在真的就很现实一句话：前端已经没什么壁垒了！！！

---

## 二、AI 到底有多强

不想贩卖焦虑，但事实摆在那里。

### 代码生成

拿一个典型的后台页面举例——用户列表、搜索、分页、增删改查。

以前：查 UI 框架文档 → 手写 JSX → 联调接口 → 处理分页 → 写表单校验 → 调样式 → 前后端联调。一个有经验的初级前端大概需要一天。

现在：把 Figma 截图拖进 Cursor，一句话「帮我实现这个页面」，五分钟后代码跑起来了。接口自动 Mock，表单校验写好，分页逻辑正确。

### 代码审查

Claude Code 读 PR 比大多数三年以下的工程师仔细。它不会漏掉边界情况，不会因为跟同事关系好就放水，不会因为下班累了就跳过某一段。你说这是好事还是坏事？

### 知识获取

以前程序员卡 bug 要 Google → Stack Overflow → 中文翻译帖 → 试错 → 解决，短则半小时，长则半天。现在把报错信息丢给 AI，十秒内给你分析原因加修复方案。那种「我是组里唯一知道这个坑怎么解决」的护城河没了。AI 知道所有坑。

### 文档和需求

产品经理写的 PRD，AI 能直接转化成技术方案和项目结构。Axure 画的原型图，AI 能直接出 React 组件。翻译过来就是：从需求到代码的距离在无限缩短，而中间环节需要的从来都是人。以前这个人是前端，以后可能不是了。

这不是危言耸听。如果你去看 GitHub Trending 和 ProductHunt 上过去半年排名前十的开发者工具，一半都是 AI 辅助编程相关。这波浪潮和以前 jQuery 换 React 完全不同——那次是工具链升级，这次是生产力本身被替代。

---

## 三、前端程序员该怎么办

说了这么多，不是为了散播悲观。作为一个还在找工作的应届生，我想清楚了几件事。

### 第一，写页面不再是核心竞争力

听起来残酷，但换个角度想：如果我们花两年学会的东西 AI 十分钟就能做完，那说明这个技能本身就不应该值那么多钱。真正的价值在页面之上——在页面还没写出来之前，就已经被决定了。

你能不能理解业务场景？能不能从用户视角发现问题？能不能跟产品经理和交互设计师讨论「这个需求到底在解决什么问题？」这些是 AI 不擅长的事。

AI 的输出质量正相关于你的输入质量。你对业务理解得越深，Prompt 写得越精准，AI 生成的代码越接近预期。这个时代需要的不是「会写代码的人」，而是「能用 AI 写出正确代码的人」。这两件事看起来差不多，但实际上完全不同。

### 第二，往深走，或者往宽走

**往深走**：不要再满足于"会用 React"。去理解 Rust 写的打包器为什么快，去搞清楚 Bun 为什么能替代 Node，去读浏览器渲染引擎的源码。你需要成为那个「审 AI 代码的人」，而不是那个「被 AI 替代的人」。

**往宽走**：不要只写前端。用 Next.js 写全栈应用，用 Node 写中间层，用 Supabase 搭后端，用 Vercel 部署，用 Docker 做容器化。你得能自己打通整条链路。以后不是「前端岗位少了」，而是「纯前端岗位少了，全栈岗位依然在增长」。

### 第三，找到自己不可替换的价值

代码可以被生成，但判断力不行。会写代码的人很多，但知道该写什么的人很少。能写出一个功能的人很多，但能让这个功能上线后不出事的人很少。能模仿设计稿的人很多，但能把产品做「对」的人很少。

这些都需要经验、审美、对用户的感知——AI 暂时还没有这些。你现在要做的不是跟 AI 比赛写代码的速度，而是**建立那些 AI 短期内拿不走的能力**：

- 沟通清楚一个模糊的需求到底要实现什么
- 能评估一个技术方案的长期维护成本
- 能判断一个架构选择的边界条件
- 在研发、产品、设计的拉锯中找到一个大家都接受的平衡点

说白了：**写代码只是手段，用代码创造对用户有价值的东西才是目的。** AI 替代的是手段，不是目的。

---

我还没找到工作。但我不觉得前端死了。

死的是「只会写页面的前端」。活的将是「用 AI 写代码、用人脑做判断、用产品思维创造价值」的新一代工程师。只是这条路比之前难走，门槛更高，需要的东西学校里没教过。

我们这一届是历史的过渡带——入学时学的是 jQuery 都不算过时，毕业时 AI 已经能写完整项目。但想清楚了：AI 翻过了写代码的山，那我们就去做翻山之后的事。
]]></content:encoded>
            <category>tech</category>
        </item>
        <item>
            <title><![CDATA[浅谈 Prompt、Skills、MCP、Agent 之间的关系]]></title>
            <link>https://www.ediaewu.cn/posts/prompt-skills-mcp-agent</link>
            <guid isPermaLink="false">https://www.ediaewu.cn/posts/prompt-skills-mcp-agent</guid>
            <pubDate>Tue, 12 May 2026 00:00:00 GMT</pubDate>
            <description><![CDATA[用生活化的比喻把 Prompt、Skills、MCP、Agent 四个概念串起来，一次性讲清楚它们到底有什么区别、是怎么协作的。]]></description>
            <content:encoded><![CDATA[
这四个词在 AI 圈子里出现频率越来越高，但很多朋友跟我说——"好像都差不多？都是让 AI 干活的东西？"

不是差不多。它们各自在不同层级上解决问题，而且配合起来才真正强大。我试着用生活化的比喻把它们串起来。

---

## 一句话区分

| 概念       | 一句话                      |
| ---------- | --------------------------- |
| **Prompt** | 你对 AI 说的一句话          |
| **Skills** | 你教 AI 的一套固定流程      |
| **MCP**    | AI 连接外部世界的 USB 接口  |
| **Agent**  | 能自己规划、执行、反思的 AI |

---

## Prompt - 你给AI发一条消息

Prompt 是最基础的东西。你就把它理解成：**你对 AI 说了一句话**。

```
"帮我写一个上传功能"
"把这段代码重构一下，用 async/await"
```

每一次和 AI 的对话，都在发 Prompt。它简单、直接、一次性的。

Prompt 的问题也正在于此——**太简单了**。你没办法通过一句话把一整套复杂的流程教给 AI。就像你没法用一条微信让一个新人完全掌握你的工作。

于是有了 Skills。

---

## Skills - 你给 AI 写的一份 SOP

Skills 本质上是**一组预制好的 Prompt 和规则的集合**。

Skills 的核心价值，就是把这些隐性规则变成显性的文档（SOP），让 AI 能够自主阅读、理解并执行

举个生活例子。你家楼下咖啡馆的新员工培训：

- **没有 SOP**：老板说"你去招呼客人"——新人不知所措
- **有 SOP**：老板写了一个流程——"客人进门说欢迎光临 → 问几个人 → 引到空位 → 递菜单 → 问要不要推荐今日特调"

这个 SOP 就是 Skill。

在 AI 世界里，Skill 把你常用的、重复的工作流程固化下来。从结构上看，Skill 很简单，核心就是一个 SKILL.md 文件，包含元数据（描述什么时候用）和正文（具体的执行 SOP）。

设计上的亮点是“渐进式披露”：

元数据常驻上下文，AI 知道有哪些技能可用。正文按需加载，只有触发时才读取，避免挤占 Token。复杂点的 Skill，还会有附加的资源目录、脚本和参考文档。Skill 的完整目录结构是这样的：

```textplain

skill-name/
├── SKILL.md          # 必需：元数据（何时使用）+ 正文（指令、流程、示例）
├── scripts/          # 可选：可执行脚本（Python/Bash），按需调用
├── references/       # 可选：参考文档，按需读取
└── assets/           # 可选：模板、图片等资源

```

有了这个 Skill，你不用每次都从零开始写 Prompt。一句"帮我写周报"，AI 就知道该怎么做。

**Prompt 是单条消息，Skill 是一套流程。Skill 里面包含了很多 Prompt。Skils中的这些流程完全可以包含调用多个 MCP 工具**

---

## MCP — AI 的外接设备接口

Prompt 和 Skill 解决的是"怎么说"的问题。但还有一个更根本的问题：**AI 能接触到什么信息？**

默认情况下，AI 能看到的只有你发给它的文字。它不知道今天的天气，不知道你的 GitHub 仓库长什么样，不知道数据库里有什么。

MCP（Model Context Protocol）就是解决这个的。你可以把它理解成 **USB 接口**：

```
你的电脑 ──USB── 键盘
        ──USB── 鼠标
        ──USB── U盘
```

同理：

```
AI ──MCP── 连接 GitHub
   ──MCP── 连接数据库
   ──MCP── 连接日历
   ──MCP── 连接文件系统
```

MCP 是一个**标准协议**，定义了 AI 怎么和外部工具/数据源通信。在 MCP 之前，每个 AI 应用都要自己写一套对接逻辑。MCP 出来之后，就像 USB 统一了外设接口一样——一套标准，所有设备都能用。

**MCP 不写流程，不写提示词。它只管一件事：让 AI 能"看到"和"操作"外面的世界。**

---

## Agent — 能自己拿主意的 AI

Prompt 是你告诉 AI 每一步做什么。Skill 是预制好的流程。MCP 是 AI 的手和眼睛。

那 Agent 是什么？

**Agent 是有了手和眼睛之后，能自己规划、执行、反思的 AI。**

用搬家来比喻：

| 层级       | 类比                                                                                                        |
| ---------- | ----------------------------------------------------------------------------------------------------------- |
| **Prompt** | "帮我把这个箱子搬到车上"                                                                                    |
| **Skill**  | "搬家标准流程：打包→搬箱→装车→清洁"                                                                         |
| **MCP**    | 你给了 AI 一个搬运机器人（能搬东西）+ 一把车钥匙（能开车）                                                  |
| **Agent**  | AI 自己看了一圈屋子，说："先把书装进小箱子，大衣柜太重最后搬，沙发拆成三块运，车太小得分两趟——我现在开始。" |

Agent 不需要你一步步指挥。你给它一个目标，它自己：

1. **拆解任务**——"要搬完这个屋子，需要先做什么、后做什么"
2. **选择工具**——"搬书用小箱子，拆沙发需要螺丝刀"
3. **执行**——调用 Skills + MCP 工具完成任务
4. **检查 + 调整**——"第一次装不下？那我重新规划路线"

---

## 四者关系：一张图说清楚

```
Agent（大脑）
 ├─ 想问题：分解任务、制定计划
 ├─ 调用 Skills（经验）
 │   ├─ Skill A：周报流程
 │   ├─ Skill B：代码审查流程
 │   └─ Skill C：部署流程
 │
 └─ 调用 MCP（手脚）
     ├─ 连接 GitHub：读代码、提 PR
     ├─ 连接数据库：查数据
     └─ 连接文件系统：读写文件

所有 Skill 由多个 Prompt 组成
所有 MCP 连接由 Agent 调配
```

一层层往上走：

```
Prompt  → 一句话
Skill   → 用 Prompt 组装出的流程
MCP     → 让 AI 能碰到外部世界
Agent   → 用 Skill 和 MCP，自己思考和执行
```

理解了这个关系，再去看 Claude Code、Cursor、Copilot 这些工具，它们的架构就一目了然了。
]]></content:encoded>
            <category>tech</category>
        </item>
        <item>
            <title><![CDATA[在 Claude Code 中使用 CC Switch 接入 DeepSeek V4 Pro]]></title>
            <link>https://www.ediaewu.cn/posts/deepseek-claude</link>
            <guid isPermaLink="false">https://www.ediaewu.cn/posts/deepseek-claude</guid>
            <pubDate>Sat, 09 May 2026 00:00:00 GMT</pubDate>
            <description><![CDATA[通过 CC Switch 中转服务，在 Claude Code 中无缝接入 DeepSeek V4 Pro 模型，享受更低成本和高性能推理。]]></description>
            <content:encoded><![CDATA[
Claude Code 默认使用 Anthropic 的模型，能力很强但成本不低。DeepSeek V4 Pro 是 DeepSeek 最新的推理模型，在代码生成、逻辑推理等任务上表现优异，且价格远低于同等能力的闭源模型。在这个五月不得不感谢梁总的格局哈哈哈， 直接让大模型的价格起飞，人人都能用的舒坦！下面我就来说一下我是怎么去接入的。
![模型细节](/images/模型细节.png)

**CC Switch** 是一个模型中转服务，它的作用是：

- 提供一个兼容 Anthropic API 的接口
- 背后转发到 DeepSeek V4 Pro（或其他模型）
- Claude Code 无需任何代码改动，只需配置环境变量即可切换

简单说：**Claude Code 以为自己还在和 Anthropic 对话，实际上你的请求已经发到了 DeepSeek。**

---

## 步骤一：安装 CC Switch

直接去github 上面下载cc switch的压缩包然后本地安装即可，传送门[cc switch](https://github.com/farion1231/cc-switch)

---

## 步骤二：创建 API Key

登录deepsek， 在左侧菜单找到「API Keys」，点击创建新的 API Key。当然了，在创建之前是要充值后才能正常使用的。创建完成后把这个key添加到cc switch中，注意key要妥善保管，不要外泄！！！

![创建 API key](/images/创建api%20key.png)

---

## 步骤三：添加 DeepSeek V4 Pro/DeepSeek V4 flash 模型

启动cc switch如下，选中claude后点击红色+号进入添加供应商页面添加供应商

![CC Switch 首页](/images/ccswitch指引.png)

![添加供应商](/images/添加供应商.png)

然后输入api key（后续在deepseek中创建的key填入这里即可）

![输入KEY](/images/添加key.png)

接着输入自己喜欢的模型（例如deepseek-v4-pro[1m]），最后保存即可

![添加模型](/images/手动添加模型.png)

配好之后，你的 API Key 就与 DeepSeek V4 Pro 模型关联了。

CC Switch 支持多种模型，你可以后续根据需要添加其他模型。

---

## 步骤四：安装claude

安装claude，deepseek接口文档中给出了详细的说明，这里就不多赘述了

![安装claude code](/images/安装cc.png)

然后你就可以干你想干的事了~

## 步骤五：用量与充值

在 deepseek 管网用量页面可以查看 API 调用次数和余额。

![充值](/images/用量充值.png)
![用量](/images/用量信息.png)

DeepSeek V4 Pro 的计费按 token 计算，相比 Anthropic 的官方模型，费用约为 **十分之一甚至更低**。
]]></content:encoded>
            <category>tech</category>
        </item>
        <item>
            <title><![CDATA[我的第一篇技术博客]]></title>
            <link>https://www.ediaewu.cn/posts/hello-world</link>
            <guid isPermaLink="false">https://www.ediaewu.cn/posts/hello-world</guid>
            <pubDate>Fri, 01 May 2026 00:00:00 GMT</pubDate>
            <description><![CDATA[搭建个人博客的第一篇文章，聊聊为什么选择 Markdown + Next.js 来写博客。]]></description>
            <content:encoded><![CDATA[
## 为什么要写博客

作为一名前端工程师，我一直想找个地方记录自己学到的东西。不是发在掘金或知乎，而是**完全属于自己**的一亩三分地。

## 技术选型

选技术栈时主要考虑了三个因素：

1. **写作体验**：用 Markdown 写作，在 VS Code 里写，舒服
2. **部署成本**：不要服务器，不要数据库，最好免费
3. **代码展示**：技术文章少不了代码块，语法高亮要好

最终选了这套组合：

| 工具     | 用途               |
| -------- | ------------------ |
| Next.js  | 框架，负责页面渲染 |
| Markdown | 写作格式           |
| Vercel   | 免费部署           |

## 一个简单的 React 组件

写博客离不开展示代码，下面是一个计数器组件：

```tsx
import { useState } from "react";

export function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div className="flex items-center gap-4">
      <span className="text-2xl font-bold">{count}</span>
      <button
        className="rounded bg-blue-500 px-4 py-2 text-white"
        onClick={() => setCount((c) => c + 1)}
      >
        +1
      </button>
    </div>
  );
}
```

组件的核心逻辑：

- `useState(0)` 初始化计数为 `0`
- 点击按钮时 `setCount` 更新状态
- React 自动重新渲染新的计数值

## 写作流程

我给自己定的写文章流程很简单：

1. 在 `content/tech/` 下新建 `.md` 文件
2. 写完 → `git commit`
3. `git push` → Vercel 自动部署

从写完到上线，不超过两分钟。

## 后续计划

接下来我会写更多关于 React、TypeScript 和前端工程化的内容。这篇文章只是一个开始。
]]></content:encoded>
            <category>tech</category>
        </item>
        <item>
            <title><![CDATA[周末骑行记]]></title>
            <link>https://www.ediaewu.cn/posts/my-first-post</link>
            <guid isPermaLink="false">https://www.ediaewu.cn/posts/my-first-post</guid>
            <pubDate>Mon, 20 Apr 2026 00:00:00 GMT</pubDate>
            <description><![CDATA[春天来了，骑着车在城市里溜达了一整天，记录一些随手拍到的有趣瞬间。]]></description>
            <content:encoded><![CDATA[
## 出发

周六早上起来，天气意外地好。窗外的阳光打在阳台上，温度不高不低。连着加了两周班，决定给自己放一天假。

背上包，灌一瓶水，骑上车，没有目的地。

城市里的春天比想象中来得更快。路边的树已经绿了大半，风吹过来是带着泥土味的那种，不是尾气味。

## 路过的菜市场

骑到城东，碰巧看到一个露天菜市场。不是超市那种整整齐齐的，是农民拉了车来卖的那种。

有位大爷在卖草莓，装在小竹篮里。他看我在拍照，笑着问我"小伙子吃不吃，新鲜摘的"。我买了一篮，坐在路沿上吃完了才走。

这大概是今年吃到最甜的草莓。

## 一个小发现

路过一条从没走过的巷子，墙上画满了涂鸦。不是那种"到此一游"的乱写，是真的有人花时间画的：

- 一面墙画的是一只猫，在追一只蝴蝶
- 另一面墙是一个宇航员，手里抱着一盆花
- 角落里写着一行小字："别忘了生活"

蹲在墙根底下看了半天。这种地方在地图上没有标记，只能靠瞎转才能碰到。

## 总结

没干什么大事，就是骑了车、吃了草莓、看了涂鸦。但回来的路上心情特别轻松。可能这就是偶尔放空的意义——不是偷懒，是让自己恢复一点感知力，去注意到那些平时匆匆路过时不会看的东西。

下个周末如果天气好，我大概还会出门。
]]></content:encoded>
            <category>life</category>
        </item>
    </channel>
</rss>