AI时代的超级个体:利用AI编程拓展能力边界

多客科技

作者：微信文章
前言：AI编程时代已来，意图编程模式正在引领互联网时代变革。Cursor、Trace、Gemini-Cli等AI编程IDE工具正在改变我们的编程方式。

一、Cursor CEO：氛围编程只适用小型团队，AI编程工具的护城河在于快速迭代

Cursor 的终极目标： 彻底革新编程范式，实现编码自动化，让描述需求即可自动构建功能。

AI 编程的演进阶段： 当前 AI 尚处助手阶段，未来将发展至 AI 端到端完成部分专业开发工作，并最终颠覆编程语言的编写与使用方式。“凭感觉编程”的局限性： 不适用于需要长期维护的代码，主要适用于早期探索阶段的小型团队。看待大型语言模型的两种视角： 可视为类人界面/助手，亦可视为编译/解释器技术的演进。超级智能体面临的瓶颈： 上下文窗口大小、持续学习能力、跨模态交互能力（如执行代码、处理数据日志）。编码用户界面亟待创新： 传统文本框输入不够精确，需要更高级别的编程语言或直接的用户界面操控。“品味”的极致重要性： 定义构建目标与核心逻辑，是不可替代的核心竞争力。意图驱动编程的深远影响： 专业开发者效率将极大提升，小众软件市场机遇涌现，复杂系统构建速度加快。Cursor 的起源： 源于一次雄心勃勃的思维实验，早期尝试机械工程领域的 CAD 辅助设计，最终聚焦于编程领域。遵循“缩放定律”： 坚信模型将持续进化，并以此指导产品决策。早期产品决策的关键： 打造编辑器而非扩展程序，为未来编程方式的根本性变革奠定基础。GitHub Copilot 的启示： Copilot 的成功经验凸显了编辑器层面创新的必要性。PMF（产品市场契合度）之路： 历经长时间的产品迭代与细节打磨，在发布九至十二个月后方迎来加速增长。关注的核心指标： 每周使用 AI 编程四到五天的付费“高级用户”。内部测试（Dogfooding）的重要性： 注重实验，苹果式的内部深度测试是核心驱动力。最初的10名员工： 招募具备跨学科背景、快速构建能力和饱满热情的“多面手”通才至关重要。AI 时代工程师的评估标准： 传统编程能力依然重要，同时需重视无 AI 工具经验的优秀程序员，从其“初学者视角”中汲取产品洞察。保持黑客精神： 招募充满激情的人才，鼓励自下而上的实验创新，赋予工程师团队充分自由。AI 编程工具的护城河： 目标是颠覆编码，产品潜力巨大；用户规模（分发）对产品迭代至关重要；快速迭代，引领前沿。未来展望： 创造力将被极大释放，不仅惠及专业开发者，更能赋能广泛人群。

---

二、Cursor
2.1 理解Cursor的工作方式

Cursor 是基于项目文件夹的 AI 编程工具。和Word、PPT这些单文件编辑器不同，Cursor的设计理念是以整个文件夹（项目）为工作单位。因为Cursor会扫描整个项目结构，理解文件之间的关系，这样AI才能更准确地帮助你。

❌ 错误方式：直接打开单个文件✅ 正确方式：打开整个项目文件夹

2.2 Cursor如何用好

（1）Prompt基本结构与原则

[img=696,419.23125]https://mmbiz.qpic.cn/mmbiz_jpg/Z6bicxIx5naLvNcABFoAwPLUyia9gdSwFRPoU8mS4bJXHU7KKlYofKShP3dVxB8nQfoyG4lR6aTNykzWARA1mfsg/640?wx_fmt=other&from=appmsg&tp=wxpic&wxfrom=5&wx_lazy=1[/img]

目标：明确Cursor到底是写技术方案、生成代码还是理解项目；

上下文信息：必要的背景信息。

要求：

Cursor要做的事：拆解任务，让Cursor执行的步骤；

Cursor的限制。

项目理解
# 目标请你深入分析当前代码库，生成项目梳理文档。
# 要求1. 你生成的项目梳理文档必须严格按照项目规则中的《项目文档整理规范》来生成。（在rules使用不规范的情况下可以明确指出）
# 输出请你输出项目梳理文档，并放到项目的合适位置。（梳理的文档要落到规定的位置,eg:.cursor/docs中）方案设计

# 目标请你根据需求文档，生成技术方案。注意你只需要输出详细的技术方案文档，现阶段不需改动代码。（此时需求文档已经以文档的形式放到了我们的项目中）
# 背景知识为了帮助你更好的生成技术方案，我已为你提供：（1）项目代码（2）需求文档：《XX.md》（上下文@文件的方式给到也可以）（3）项目理解文档:《XX.md》（上下文@文件给到也是同样的效果）
# 核心任务## 1. 文档分析与理解阶段  在完成方案设计前完成以下分析：  - 详细理解需求：    - 请确认你深刻理解了《需求.md》中提到的所有需求描述、功能改动。    - 若有不理解点或发现矛盾请立即标记并提交备注。  - 代码架构理解：    - 深入理解项目梳理文档和现有代码库的分层结构，确定新功能的插入位置。    - 列出可复用的工具类、异常处理机制和公共接口（如`utils.py`、`ErrorCode`枚举类）。 ## 2. 方案设计阶段请你根据需求进行详细的方案设计，并将生成的技术方案放置到项目docs目录下。该阶段无需生成代码。
# 要求1. 你生成的技术方案必须严格按照项目规则中的《技术方案设计文档规范》来生成，并符合技术方案设计文档模板。
# 输出请你输出技术方案，并将生成的技术方案放到项目的合适位置，无需生成代码。根据技术方案生成代码

# 目标请你按照设计好的方案，生成代码。
# 背景知识为了帮助你更好的生成代码，我已为你提供：（1）项目代码（2）需求文档：《XX.md》（3）技术方案：《XX.md》（4）项目理解文档:《XX.md》
# 核心任务## 1. 文档分析与理解阶段  在动手编写代码前完成以下分析：  - 需求匹配度检查：    - 深入理解需求文档和方案设计文档，确认《方案设计.md》与《需求.md》在功能点、输入输出、异常场景上的完全一致性。    - 若发现矛盾请立即标记并提交备注。  - 代码架构理解：    - 深入理解项目梳理文档和现有代码库的分层结构，确定新功能的插入位置。    - 列出可复用的工具类、异常处理机制和公共接口（如`utils.py`、`ErrorCode`枚举类）。  
## 2. 代码生成阶段如果你已明确需求和技术方案，请你完成代码编写工作。
# 要求1. 你必须遵循以下核心原则：（1）你生成的代码必须参考当前项目的代码风格。（2）如项目已有可用方法，必须考虑复用、或在现有方法上扩展、或进行方法重载，保证最小粒度改动，减少重复代码。2. 你生成的代码必须符合《Java统一开发编程规范》中定义的规范。
# 输出请你生成代码，并放到代码库的合适位置。
（2）好用的Rules

在Cursor的v0.49版本支持自动生成rules，直接输入/，即可看到生成规则模式；自动生成规则可以有效的把自己的习惯或者项目的开发规范通过Rules的形式落地而不是每次反复在Prompt中提醒约束。
项目梳理Rule# 代码分析规则## 目标根据代码入口深入分析完整业务流程，生成详细的业务流程文档，便于团队理解和维护代码。## 关键规则- **必须生成分析文档保存到项目的docs目录下**- **必须使用sequential-thinking辅助分析**- **必须深入方法内部逻辑，因此你可能需要检索代码**- **建议使用sequential-thinking辅助检索代码**### 1. 聚焦业务核心逻辑- 忽略日志打印、参数基础校验等次要逻辑- 忽略异常处理中的技术细节，只关注业务异常处理逻辑- 忽略与业务无关的工具方法调用（如字符串处理、集合操作等）- 聚焦业务状态转换、流程分支、核心计算等关键逻辑### 2. 深入方法调用链- 追踪每个关键方法的内部实现，不仅停留在方法调用层面- 对调用链上的每个重要方法都分析其内部业务逻辑- 对于外部依赖的服务（如HSF、RPC调用），说明其功能和业务意义- 深入分析每个关键业务分支的条件和处理逻辑### 3. 结合已有文档- 优先使用已有文档中的描述，避免重复分析- 如果已有文档对某个方法有详细描述，直接引用该内容- "站在巨人的肩膀上"，基于已有文档进行补充和完善- 对已有文档与代码实现不一致的地方进行标注### 4. 文档输出规范- 分析结果保存到 `/docs` 目录下，使用 Markdown 格式- 文档命名格式：`业务名称-流程分析.md`（如：`订单创建-流程分析.md`）- 文档需包含方法调用树，清晰展示调用层级关系- 使用分步业务流程描述完整处理过程## 文档结构模板```markdown# 业务名称流程分析## 功能概述[简要描述该业务功能的目的和作用]## 入口方法`com.example.Class.method`## 方法调用树```入口方法├─ 一级调用方法1│  ├─ 二级调用方法1.1│  ├─ 二级调用方法1.2├─ 一级调用方法2   ├─ 二级调用方法2.1   └─ 二级调用方法2.2      └─ 三级调用方法```## 详细业务流程1. [步骤1：业务逻辑描述]2. [步骤2：业务逻辑描述]   - [子步骤2.1：详细逻辑]   - [子步骤2.2：详细逻辑]3. [步骤3：业务逻辑描述]## 关键业务规则- [规则1：描述业务规则及其条件]- [规则2：描述业务规则及其条件]## 数据流转- 输入：[描述方法输入及其业务含义]- 处理：[描述关键数据处理和转换]- 输出：[描述方法输出及其业务含义]## 扩展点/分支逻辑- [分支1：触发条件及处理逻辑]- [分支2：触发条件及处理逻辑]## 外部依赖- 标注对外部系统的依赖## 注意事项- [列出实现中需要特别注意的点]```## 系统交互图- 如果业务流程包含多个系统模块，请使用PlantUML画出时序图## 代码分析技巧### 步骤1：明确业务入口- 确定代码分析的起点（通常是Controller、Facade或Service层的公开方法）- 了解该方法的调用场景和业务背景### 步骤2：构建方法调用树- 从入口方法开始，追踪所有重要的方法调用- 使用缩进表示调用层级，清晰展示调用关系- 忽略非核心方法调用（如日志、参数校验等）### 步骤3：分析业务流程- 按照代码执行顺序分析业务处理步骤- 重点关注业务状态转换和分支逻辑- 提取关键业务规则和数据处理逻辑### 步骤4：整理业务规则- 总结条件判断中隐含的业务规则- 分析不同场景下的处理差异- 提炼业务逻辑的核心决策点### 步骤5：描述数据流转- 分析关键数据的来源、处理和去向- 说明数据模型转换和业务含义- 关注核心业务实体的状态变化## 示例分析参考 [订单查询.md](/docs/订单查询.md) 文档了解完整的分析示例:该示例展示了订单查询业务的完整分析，包括:- 方法调用树展示了完整调用链- 详细业务流程按步骤拆解- 关键业务规则清晰列出- HSF接口等外部依赖明确说明- 特殊处理逻辑如推广通退款按钮透出详细解释## 好的分析的特征1. **完整性**：覆盖所有核心业务逻辑和分支2. **层次性**：清晰展示处理流程的层次结构3. **业务性**：以业务视角描述，而非技术实现细节4. **精确性**：准确反映代码的实际处理逻辑5. **可理解性**：业务人员也能理解的表述方式6. **实用性**：帮助读者快速理解业务流程和规则
（3）结合mcp工具使用

---

三、前端发展历程以及AI对前端的影响

3.1 2005左右   前端青铜时代：标准缺失与浏览器兼容性噩梦

当时 IE6 占据着超过 90% 的浏览器市场份额， Firefox 刚刚崭露头角，Chrome 还未诞生。这种一家独大的市场格局导致开发者不得不围绕 IE6 的特性进行开发，可 IE6 对 W3C 标准的支持度极低，这为前端开发埋下了无数隐患。

那时候布局也是个大问题，IE 的 hasLayout 机制导致 inline-block 行为异常，只能依靠 float 来模拟行内块级元素，浮动布局是那个时代唯一能实现复杂布局的布局方式。而浮动又带来了脱离文档流的副作用，还需要通过“清除浮动”进行修复。一个简单的三栏布局（圣杯和双飞翼），往往要写几十行 CSS，还要为不同浏览器准备不同的 hack 代码。

3.2 2010到2025年 前端黄金时代：十年的技术跃迁

（1）HTML5的革命性影响

HTML5 带来了一系列革命性特性：原生多媒体（video/audio）支持让网页告别了 Flash 插件，Canvas 开创了网页图形新纪元，本地存储实现了离线应用的可能，语义化标签让代码结构更加清晰，设备 API 则打通了网页与硬件的连接通道……这些特性共同掀起了一场 Web 技术的范式革命。

（2 CSS3带来的设计革命

CSS3 的横空出世彻底解放了前端开发者的设计桎梏。曾经需要复杂切图的圆角效果，如今只需一行 border-radius 即可实现；盒阴影和渐变背景不再依赖图片资源，通过 CSS 代码就能轻松搞定。更令人振奋的是，动画效果不再完全依赖 JavaScript —— transition 和 animation 属性让流畅的交互效果变得触手可及。

Flexbox 和 Grid 布局系统的出现，则从根本上改变了页面的排版方式。这些新技术让响应式设计从理论变为现实，对后来的移动互联网时代产生了深远影响。我们也终于可以告别浮动布局的“清除浮动”噩梦，用更直观的方式构建适应各种设备的页面结构。
（3）JavaScript的现代化演进

ES6 标准的发布堪称 JavaScript 发展史上的里程碑。类语法、模块化、箭头函数等新特性，让这门原本被视为“玩具”的语言焕发新生。TypeScript 强大的类型系统将 JavaScript 的开发体验提升到全新高度。

（4）Node.js与全栈革命

Node.js 的出现让 JavaScript 突破了浏览器的限制。它基于谷歌的 V8 引擎，采用非阻塞 I/O 模型，使得 JavaScript 也能高效地运行在服务器端。它还实现了一个重大突破：使用同一种语言编写前后端代码成为现实。

Node.js 的意义远不止于此，它彻底改变了前端开发的工具链。现在我们常用的构建工具如 Webpack、Rollup、Vite 等，都是运行在 Node.js 环境下的。我们平时使用的开发服务器，也大多基于 Node.js 搭建。

npm 包管理器的快速发展为这一变革提供了强大支持。现在有数百万个现成的模块可以直接使用，开发者不需要重复造轮子，可以像搭积木一样快速构建应用，大大提高了开发效率。
  (5）工程化工具的成熟

前端工程化工具的发展让开发变得更高效。以前需要手动处理的模块打包、代码转换等工作，现在通过 Vite、 Webpack、Babel 这些工具就能自动完成。特别是热更新功能，修改代码后页面会自动刷新，省去了手动刷新的麻烦。
(6)前端框架的范式转移

过去用 jQuery/JavaScript 直接操作 DOM 的方式，在开发复杂应用时越来越难以维护。React、Vue这些现代框架采用了组件化开发的思想，让开发者可以更专注于业务逻辑。虚拟 DOM 技术也让页面渲染更加高效。

为了解决组件之间的数据共享问题，Redux、Vuex等状态管理工具应运而生。它们让大型应用的状态管理变得井井有条。

(7)移动互联网的冲击

智能手机普及后，前端开发也发生了很大变化。响应式设计让网页能自动适应不同尺寸的屏幕；小程序则开创了新的应用形式。2015 年移动页面流量首超 PC。

这些新技术不仅拓展了前端开发的应用范围，也改变了开发者的工作方式。现在做前端开发，必须要考虑移动端适配和跨平台方案。

(8)跨平台开发

React Native、Taro3、Uniapp、Weex 这样的框架让前端开发者也能开发原生 App。跨平台技术如同神奇的“语言翻译器”，让同一套代码能在不同设备上完美运行。这种“编写一次，处处运行”的能力正在改变移动开发格局：

用 Web 技术开发原生级 App。

同时覆盖 iOS/Android/Web 三端。

保持多平台体验一致性。

大幅降低维护成本。

3.3 AI时代前端最具颠覆性的变革

    现在的 AI 工具已经不只是简单的代码补全了，它们正在变成真正的开发助手。比如 Cursor 这样的智能编辑器，不仅能看懂项目结构，还能实时查看运行日志。当代码报错时，AI 不仅能找到错误位置，还能分析出错原因，给出具体的修改建议。重构代码时，它能发现代码中的问题，告诉你该怎么优化。就连代码审查这种需要经验的工作，AI 也能给出不错的改进意见。根据 2024 年 Gartner 报告显示，虽然基础页面搭建工作的自动化率已达 70%，但用户体验设计、复杂状态管理等高阶任务的 AI 辅助率仍低于 20%。现实情况是，AI 正在重构而非消除前端开发的技术门槛，它把技术栈的难度曲线整体下移。

   AI 不仅推动前端技术向纵深发展，也在帮助开发者横向拓展能力的边界。全栈能力曾是开发者的终极梦想，如今在 AI 的帮助下，这一梦想正逐渐变为现实。全栈开发者能够独立打造从用户界面到后台服务的完整系统，这种能力在实际开发中具有巨大优势：创业公司快速验证产品原型、中小企业高效构建完整应用、个人开发者实现全流程掌控、团队协作打破前后端壁垒。但要成为真正的全栈开发者，至少需要跨越三道分水岭：同时驾驭前后端技术栈、掌握系统架构设计精髓、精通数据库优化之道。AI 正在让这一过程变得更顺畅——智能生成 API 接口规范、推荐最优数据模型、提供全链路调试支持，助力快速成长为全能型开发者。

（1）WebAssembly技术

WebAssembly（WASM）是面向 Web 的二进制格式，2017 年起主流浏览器逐步支持。它能把 C/C++、Rust 等编译为字节码，通过堆栈虚拟机在沙箱内执行，启动快、体积小、速度近原生。模块支持导入导出函数和线性内存，可与 JavaScript 互调共享数据。已广泛用于图形渲染、音视频编解码、在线 IDE、云游戏等应用场景。WebAssembly 就像是给网页装上了涡轮增压引擎。这个神奇的二进制格式能让浏览器以接近原生应用的速度运行复杂程序，彻底打破了 JavaScript 的性能天花板。

Photoshop 网页版通过 WebAssembly 将桌面版 C++ 代码库直接移植到 Web 端，避免重写核心逻辑，大幅降低开发成本，向用户提供轻量化、无需安装的云端设计工具。

过去的 Figma 使用 Asm.js 来加快文件读取速度，现在改用 WebAssembly 技术后，这套多功能 UI 设计工具的运行速度又再飙升 3 倍。

可以预见的是，随着 WebAssembly 2.0 和 WASI 的完善，在 AI 助力下 浏览器将逐步取代部分原生开发场景。

（2）WebGL/WebGPU

WebGL 和 WebGPU 技术让网页拥有了强大的 3D 图形处理能力，就像给浏览器装上了专业显卡，实现硬件级加速。这项技术正在彻底改变网页内容的呈现方式，从简单的图文展示升级到沉浸式的 3D 体验。

WebGL 基于 OpenGL ES 2.0，将 GPU 渲染能力暴露给 JavaScript。开发者上传顶点、纹理并用 GLSL 编写顶点与片元着色器，经 gl.drawArrays() 或 gl.drawElements() 在 Canvas 实时绘制。广泛用于 Web 游戏、数据可视化与地图。

WebGPU 借鉴 Vulkan/Metal/DX12，提供显式命令缓冲、管线对象与绑定组，除高级渲染外还原生支持计算着色器。着色语言 WGSL 语法现代易分析。2023 年起主流浏览器已基本支持，可精细控制显存与同步，性能接近原生，适合机器学习推理、物理仿真与次世代 Web 游戏，被视为未来 Web 高性能基石。

借助这些技术，我们可以在网页上实现很多令人惊叹的效果。比如数据平台的实时 3D 可视化，可以直观呈现复杂的数据关系、电商平台可以用 3D 展示商品细节、网页游戏能达到主机级别的画面效果、在线教育可以创建虚拟实验场景……这些过去需要专业团队开发的效果，现在都能在浏览器中流畅运行。

---

四、豆包AI编程和MiniMaxAgent编程工具

AI 编程（AI coding）是眼下的热点，我们可以用DeepSeek拿到一封详细的需求文档，然后再交给一些AI编程工具去开发，在过程中不断Prompt进行完善。

---

参考链接：

国产 AI 网页开发工具：豆包 AI 编程简单测评

160行需求文档，32分钟变成可玩游戏，我见证了AI开发的恐怖实力

前端变天了？20年前端老兵眼中的前端技术演进与AI革命

深入解析｜Cursor编程实践经验分享

新手必备！Cursor 1.0 完全上手指南：从零开始用 AI 玩MCP

AI编程神器Cursor，保姆级教程来了！

万字长文： 仅花7天，利用AI编程神器Cursor 从0到1开发上线个人网站，保姆级教程！

Cursor CEO：氛围编程只适用小型团队，AI编程工具的护城河在于快速迭代