君子性非异也，善假于物也
前言
现如今 AI 已是足以改变开发者工作流程的革新力量。
时代的浪潮正在滚滚向前，或许以后程序员的工作形态会大相径庭，更像是产品和开发的结合。
希望本文能帮助你了解AI的发展和相关术语的认知。
演进
1. Chat - 辅助开发
对 AI 的认知，大多始于 ChatGPT，它对应着一种很 基础且重要的方式 ------ 提问 & 回答
一次提问流程中包含了：用户信息（User Prompt 用户提示词） + AI模型的定位、背景 （SystemPrompt 系统提示词）
大模型结合 User Prompt + System Prompt 返回一个准确的回答。
但缺点是：
- Chat 形式只能局限在对话，无法结合项目上下文，生成的代码不够贴切项目
- 对
Prompt要求较高， 无论是User Prompt还是SystemPrompt的不准确都会导致回答的偏失 - 相关代码需要自己手动调整才能集成到项目
2. AI Toolkit - 协同开发
后来 Copilot 横空出世，伴随着免费的 Codeium(现Windsurf)，AI Toolkit的风头一时无两。
它们以新的方式 ------ 建议 & 采纳，进一步推进了AI开发的发展。
它们通过上下文感知，动态学习用户习惯与历史决策等能力，提供了 代码补全 / 代码生成 / 问答 ... 等能力。
缺点：存在上下文理解的局限性，难以理解项目的整体架构和特定业务逻辑，对于涉及多模块的项目扩展较弱。
3. AI Agent - 自主开发
能否用户制定目标，AI实施？
这种 "能自主 理解/规划/执行任务 并与外部工具交互 形成闭环" 的AI，被称为 AI Agent（智能体）。
个人喜欢把 Agent理解为代理人
最早提供这个效果的是 AutoGPT，它的使用流程如下：
-
用户提供 tools函数（list_files列目录 & read_file读文件）
-
将函数+功能描述+使用方法 注册到
AutoGPT -
AutoGPT 生成一个
system prompt， 表示该用户提供了哪些工具、有什么用、怎么使用 -
将system prompt + user prompt 发给AI模型
-
AI模型按照格式返回调用函数的消息
-
autoGPT解析并调用函数，再将调用结果发给AI
- AI模型决定下一步怎么操作，重复过程到任务完成为止
负责在模型、工具和用户之间通信的程序称为Ai Agent
提供给ai调用的函数或者说服务 被称为 agent tools
缺点：不同的工具函数和回调没有统一的描述，传给相同的AI 调用结果都无法统一。
4. 小结
从最开始的 GPT，到 IDE 插件 ，再到现在独立的Agent。
开发者 跟 AI 的之间的关系也在转变 （提问 - 回答）-> (建议 - 采用) -> （制定 - 实施）。
- Embedding - 传统问答 ： 手动编码 + 检索查询 （GPT/Claude）
- Copilot - AI辅助 ： Tab自动补全 + 简单代码生成 （codeium/copilot）
- Agent - 智能开发 ： Agent + PRD生成完整代码（AutoGPT/AgentGPT）
MCP
相关资源：mcp.so / Awesome MCP Servers
简介：
MCP(Model Context Protocol)作为与AI模型通信协议，被视为"AI领域的HTTP协议"。
不管数据源是什么外部的平台/产品/工具，只要按照协议提供数据，就能在Agent的帮助下与AI模型交互。
推动AI从静态推理向动态执行转型，构建跨工具协作生态
效果：
帮助Agent管理 tools、resource和prompt。
MCP 会组成系统提示词 + 提供处理函数，大语言模型根据系统提示词来精准执行函数生成更相关的回复
架构
- MCP 服务器 (Server) ：提供工具和资源的服务端，可以使用任何编程语言实现，只要能够通过 stdout/stdin 或 HTTP 通信。
- 工具 (Tools)：可执行的函数，允许 AI 执行特定操作
- 资源 (Resources)：提供给 AI 的上下文信息，如文件内容、数据库结构等
- MCP 客户端 (Client) ：使用 MCP 服务器提供的工具和资源的 AI 应用，如 Claude Desktop、Cursor 编辑器等。
- 读取所有的 MCP 的 Tools、Prompt、Resource 描述当做大语言模型的系统提示词
- 根据模型返回的内容判断调用对应的 MCP 获取函数返回内容
- 将用户输入 + 函数返回内容发送给大语言模型，大语言模型根据用户的问题生成更相关的回复
实践
以Curosr、Figma MCP为例
1. 配置MCP服务（⚙️）-> Tools & Integrations -> MCP Tools
2. 使用Cursor Agent + MCP
3. 生成code
4. 优化prompt
这时候大体已经很像了，稍微调整一下即可使用
总结
AI的发展从单一模型的"聊天"模式，升级为由Agent调度、MCP提供能力、LLM进行思考的"行动"模式。三者优势互补，缺一不可，共同构成了能够解决复杂现实问题的智能系统。
💬 prompt（提示词）= 可以是一个问题、一段文字描述，甚至是带有一堆参数的文字描述。可以让AI模型更准确地生成相关的文本、图片或表格等内容。
🤖 agent（智能体） = 能自主决策、执行任务并与其他实体协作的AI实体
🔌 mcp（模型上下文协议） = 万能插头，标准化外部工具/数据与AI模型的连接方式
一个简单的prompt模板:
less
@https://www.figma.com/design/xx/xx?node-id=xx
调用MCP服务读取上述Figma链接获取设计信息，然后根据信息生成XX组件，注意以下要求：
1. 优先复用@/ui @/components目录里封装的组件
2. 注意对齐字体，border，间距，icon等样式
3. 直接写入代码，不要修改已有文件
4. 字段要与设计图一致
5. 如果有重复的代码，尽量在代码里进行封装和复用
6. 支持传入标题/邮箱/用户名/角色...等参数
7. 样式属性超过3个且使用次数大于等于2的sx进行封装复用，如果封装出的sx超过3个，单独放到同目录的styles.ts文件下进行引用
8. backGroundColor/color等颜色，优先复用customPalette/palette
9. 实现代码可以参考 xxx/xx.tsx在 AI 时代，提出问题比解决问题更重要。知道要解决什么问题、如何定义问题。
在各种约束条件下找到最优解，会思考、会设计、会解决复杂问题的程序员，会变得更有价值。
本文只简单讨论了前端范围的AI使用，更多功能还需要探索，新知识需要讨论和交流才能更好的学习与应用。