前言
过去，我们聊前端开发范式、工程化更多是在聊各种工具、扩展、以及插件的配置。如今，随着 AI Coding 的流行，开发范式也逐渐变成 AI Agent 编排。
这篇文章就来聊一聊我理解的前端开发新范式。
Agent/Model
Agent 和 Model 是相辅相成的，所以就不分开聊了，下面也统称为 Agent
首先需要记住一点，你现在已经不是一名开发者了，而是一个团队的 Leader ，并且这个团队的成员可以我自己来招募。有国外的伙伴，比如 Claude Code 、Codex ，也有很多国内的伙伴，比如 GLM 、Deepseek 、MiMo 等等。
我的建议是尽可能都试用一下，直观感受一下每个Agent的能力，因为未来开展工作中，不会只用到一个。比如我自己目前就是 Codex + MiMo + Deepseek ，复杂的任务会交给 Codex ，而繁琐且难度不高的任务则会交给国产的模型。
这里我推荐安装 CC Switch 。
它内置了超级多的供应商，通常只需要选择供应商，然后填入 API Key 就好了，完全不需要手动去维护各种配置文件。
另外推荐一个工具就是 Codex++，如果你也和我一样是通过API接入 Codex 使用的话，默认基本是用不了它的“插件”功能的，而 Codex++ 则可以解锁所有插件。
MCP
如果说 Agent 是大脑，那么 MCP 就是它的感官，不过对于前端开发来说，MCP 并不是那么重要。我目前用到的 MCP 只有：
Figma MCP
如果你是做 C 端开发，并且设计师提供的设计稿是在 figma 上，那这个可以让 Agent 直接读取设计稿的 Token 和图层信息，告别手动测量。
Chrome DevTools MCP
让 AI 可以实时读取浏览器的 Console 报错或网络请求，自动根据报错信息修复代码。
Skill
Skill 就是 Agent 时代的“函数库”，我不定期会上 skill.sh 这个网站看看最近又有哪些热门的 skill
下面几个是我开发中常用的几个 skills ：
antfu/skills
涵盖了 vue/nuxt/pinia/vite/vitepress/vitest/unocss/pnpm/... 的官方 skill 合集，写 Vue 开发必装。
安装：
pnpx skills add antfu/skills --skill='*'
Leonxlnx/taste-skill
提高AI审美品味，生成精美页面的 skill 合集。
安装：
npx skills add https://github.com/Leonxlnx/taste-skill
我自己的几个产品官网，基本都是用这个 skill 先出一份初稿，然后再精雕细琢出来的。
案例：
frontend-design
也是提高AI审美品味的 skill，我通常用于优化页面，比如管理后台功能已经完成，会用这个 skill 将某个模块整个风格进行优化。
安装：
npx skills add https://github.com/anthropics/skills --skill frontend-design
grill-me
出设计方案用的，这个skill会不断向我进行深入细致的询问，直到产出一份详细的设计方案。
安装：
npx skills add https://github.com/mattpocock/skills --skill grill-me
比如我想开发一个组件，让它帮我设计一份 API 情况，然后它就开始不断“拷问”我，问了30个问题后，给出了一份 API 清单方案：
skill-creator
帮助你编写 skill 的 skill ，这个不多说了，告别手写 skill ，你只需要把你的工作流程描述清楚，它就会写出一份可复用的 skill
安装：
npx skills add https://github.com/anthropics/skills --skill skill-creator
这几个 skills 我会安装在全局，因为各个项目都会用到。但是要注意，全局 skill 不建议安装太多，因为会影响 Agent 在使用时的响应速度，也直接关系到 token 的消耗。
如果你确实有十几个，甚至几十个 skill 是在各种项目中都会使用到，那建议你将部分 skill 安装到项目内，减少全局 skill 的数量。
还有一种方法可以减少全局 skill 数量，比如 grill-me 这个 skill 功能相对独立，可以单独建一个文件夹，把这个 skill 安装在这个文件夹里，这样就变成了一个局部的 skill。使用的时候进到这个文件夹里使用，结束后把方案再复制到需要用到的项目里去使用就行。
这种办法非常适合独立功能的 skill，比如一些图片压缩、制作PPT、word转pdf的 skill 。
Rule
AI 生成代码很快，但如果不加约束，它会产生大量的技术债。所以完善 Rule 的核心在于：显式约束。
不过 Skill 盛行后，Rule 的作用就简化了，只需要保留“原则与约束”，也就是做什么、不做什么、目录/命名/契约等规范。
桌面布局
当软件层面的 Agent、MCP、Skill 全部跑起来时，我发现工作时的信息密度爆炸了。不仅要在 Agent 里和 AI 沟通需求，还要在 IDE 里审查代码，最后要在浏览器里看效果，并且这3个动作需要频繁切屏，大大影响了开发效率。
我的解决办法是用更大的显示器，并做好桌面分区。比如我现在用的这款是 明基RD270Q 27寸/2K/144hz高刷显示器，通过配套的软件，可以轻松实现桌面分区，刚好能把 Codex 、VSCode 和浏览器放到一个屏幕内。
而且当我需要审查代码的时候，显示器下方的编程按钮还能一键切换到编程模式。
左图是未开启；右图是开启编程模式
明基RD270Q 作为首款专业编程显示器，这个编程模式会智能调节显示色彩，代码中的函数名、变量能更加清晰易辨，特别适合 Vibe Coding ，因为大部分时候审查代码也不会一行行全部看一遍，主要也就是看核心的一些函数实现方式是否符合我的期望。
同时得益于它的144hz高刷，在滚屏浏览代码时，视觉感受也会更刷丝滑顺畅。
另外还有一个痛点相信大家多多少少都遇到过，就是在公司工位靠窗的，屏幕时不时就会反射头顶的灯光或者窗外的日光，导致工作心流被打断。但它是自带抗反射涂层，不用担心各种光线。
还有一点就是支持65W反向充电，在家使用时，一根Type-C线就搞定了。
结尾
AI 时代开发范式的改变，本质上是效率的跃迁。
当我们在软件层面通过 MCP、Skill、Rule 将 AI 驯化成得力助手时，物理环境就有可能成为你的瓶颈。所以对我来说，一款好的显示器是“Agent 协作工作站”的最后一块拼图。
2026 年的前端开发，早已不是一场手速的比赛，而是一场算力编排与环境掌控的博弈。
愿大家都能跑通属于自己的那套“丝滑工作流”，从繁琐中解脱，去创造更有趣的东西。
