教你快速看懂Agent、Skill 和Vibe Coding 三个常用AI概念！

一、全文速览图

前面分享了 AI 应用的底层逻辑，以及在 UI 行业中使用的主要工具有哪些，今天则要解释 AI 应用中更进阶的概念，AI 工具 Agent与 Skill 和 Harness。

二、AI 工具中的 Agent

认识 AI 工具就肯定离不开 Agent 智能体这个概念，虽然前面我们简单把它也作为 AI 工具的一种，但并不是所有 AI 工具都是 Agent。

简单解释，Agent 就是 —— 面向大模型被封装好的工作步骤。

理解它就要从 AI 执行任务的方式说起，比如我直接面向 AI 输入指令：“帮我生成一个当日 A 股的复盘总结”，这实际上是一个非常复杂的任务，AI 要完成它就可能会执行下面这些任务步骤：

1. 理解问题并定义要输出的结果
2. 接入数据源获取相关数据信息
3. 查找相关文章和资讯进行总结
4. 根据获取材料完成对应的总结

这里的每个大步骤还可以拆分成若干的小步骤，每个小步骤都由 AI 随机现想现做，虽然最终也能输出结果，但不代表这个执行步骤能让我们满意。比如获取的数据、资讯来源不可信，没有综合对比不同券商研报的观点，输出的格式不是自己想要的等等。

AI 每次在执行复杂任务时创建的步骤都是随机的，而我们往往不想要 AI 自由发挥，那就要给它套上枷锁，指定它先做什么，后做什么，每个步骤具体的执行方法和逻辑有哪些，这样 AI 就能依据规划好的路线来完成任务。

而 Agent，就是用来实现这个目标的方案，将任务步骤和执行方法预设好，用户只要输入一个指令，AI 就能按这套预设好的标准来执行并生成最终的结果。

比如 FigmaMake 就是一个 Agent，我们输入指令后生成的是直接设计并开发好的网页，而不是只返回一段文本或是图片。

一个 Agent 就是专注于执行一种任务类型的 AI 工具，但有些 AI 工具的能力并不止于此，所以它们往往聚合了多种 Agent，或者是允许用户自己创建（文字描述要求），来完成更复杂的组合任务。

比如 Kimi 官方客户端，就允许我们创建并运行多个 Agent。举个简单的例子，当我们要设计一个个人的主页时，可以先创建一个任务管理者 Agent，再创建出文案、设计、开发、测试四个角色 Agent。

管理者负责制定并分配任务给下级角色，下级角色再根据自身的定位去完成各自的任务，最后再由管理者进行验收，按它的标准确认无误后，再把最终结果输出出来，如果验收不通过，它就会自己再要求对应 Agent 进行修改后重新验收，直到通过为止。这个闭合的循环流程也就是所谓的 “Agent Loop”。

在 UI 工作流中，结合 AI 来完成特定的工作就必然要使用或创建特定的 Agent。比如在获取需求以后我们要生成多种风格的设计，那么可以创建擅长不同设计风格的设计师 Agent，让它们分别输出不同的设计供我们筛选，而不是通过多次对话去实现。

AI 就像一头喜欢随机漫步的大象，而 Agent 就是牵引它的神奇缰绳，让我们骑到它身上时可以更好的操控它，而不是让它拉着我们走。

Agent 作为一种控制 AI 的指令，包含两种形式，一种是由 AI 工具编写好的固定软件程序，另一种是由用户自己创建出来的文字要求。多数 AI 工具都是编写好的固定 Agent，有少部分工具允许用户进行自定义。

通常我们会根据自己的需求选择具有固定功能的 Agent，在这些产品无法满足我们需求时，再通过其它工具创建特定的 Agent 来拓展它们能力的边界和上限，尽可能完成更多更复杂的任务。

虽然自定义 Agent 有很多可以挖掘的地方，但并不代表它是万能的，因为 Agent 只是更好地控制大模型的方式，大模型本身的上限就是它的上限，大模型做不到的事情，使用 Agent 也做不到。

三、AI 中的 Skill 与 UI 设计

接着介绍 Skill，这是一个非常简单的概念，就是为用户每次输入的指令添加预设的信息。

为什么需要这么做？原因就是如果用户想要获得尽可能精确的结果，就必须变身“话唠”，要尽可能详尽、细致的去描述任务的要求与相关信息。

比如生成一个 APPUI 界面，如果我们的指令里没有画布尺寸、规范类型、字号标准等等，那么生成的结果往往就会有各种基本错误，完全无法使用。而这些描述信息又多又长，如果每次生成界面都要输入一遍，那么可以把键盘都敲出火花来。

所以聪明的用户，就会把一些固定的指令给保存到本地笔记中，需要使用的时候从里面复制出来即可，节省大量的时间精力。而聪明的开发者们自然也注意到了这点，所以干脆做了一个直接让用户保存固定指令文本的功能，也就是 —— Skill。

用户只要开启对应的 Skill，每次给大模型发送命令时，这条命令就会附带上 Skill 中的信息一起发出，帮助我们节省时间……

在 UI 设计中，Skill 之所以重要，就是因为项目通常会有固定的设计规范和标准，但 AI 的生成却不在意这点，且有很大的随机性，我们必须要通过严格的指令来约束它的行为（和 Agent 逻辑是一样的），满足项目界面的统一性要求。

除了设计规范外，Skill 在界面的前端开发部分也同样重要，因为AI很容易不按照原设计稿进行“自由发挥”，所以我们往往要添加大量的条件来警示它，尽可能提高它的执行质量。

Skill 是一种命令的补丁，既有对我们指令的补充，也有对大模型本身缺陷的修饰。

而每个项目都有各自的要求和特征，Skill 的创建需要我们足够了解项目设计的要求与大模型本身的缺陷（自己大量测试过），才能有效制定出来。而这个制定 Skill 的过程也可以称为  “提示词工程 Prompt Engineering”。

四、Vibe Coding 与 UI 设计

最后就是 Vibe Coding 氛围编程这个概念的介绍了，这个其实更好理解，就是 —— 使用 AI 编程……原来的古法代码开发是程序员逐行编写的，AI 编程则是用户输入指令或需求后 AI 直接生成代码。

而UI设计师需要应用 Vibe Coding 的主要场景包含两个：

1. 快速生成可交互原型进行测试
2. 直接完成项目设计的前端开发

第一个目标就是让设计稿能动起来并直接进行操作，方便团队来测试设计方案的可用性与真实体验。过去要实现这个目标主要通过两种形式，一种是使用  Axure 来制作可交互原型，另一种就是使用 Figma 连线或 Protopie 这种正经动效工具来实现。

这些工具虽然准确，但主要的问题是效率极低，每做一次原型就要耗费大量的时间，所以现在既然有了 Vibe Coding，就可以直接让 AI 生成 DEMO，即使不能做到完全还原设计稿，也足够测试方案的可行性了。

第二个目标则是直接让 UI 设计师完成对页面的前端代码的生成，这其实是古早网页 UI 设计师的基本工作，但后来因为增加了前端岗（早年没有这个岗位）才把这部分工作划分出去。

现在因为 AI 的进步，企业为了降本增效就希望重新“精简”团队，要不然让前端跳过 UI 直接根据设计规范开发界面，要不然让设计直接用 AI 工具生成前端代码。

这种工作流通常就是基于 FigmaMCP 来对接 Cursor 或 Codex，让它们完成前端代码的开发。

对于外行来说，使用 AI 完成界面开发的逻辑很通顺，难度也很低。而这也恰恰也是我们要面对的主要行业问题之一。因为前端开发并不是命令 AI 生成完就行了，而是需要一系列的准备（包括 Skill）和校对（看代码），这往往会超出目前UI设计师的能力范畴。

可以肯定的给大家一个观点，Vibe Coding 应用的瓶颈并不在于对AI的使用，而是对 Coding 的理解。一个不了解编程的人是很难真正让 AI 严格根据自己的需要完成编程的。

五、结尾

AI 是一种基于概率去完成任务的工具，任务步骤越多，它输出目标结果的概率也就越低。而不管是 Agent、Herness、Skill、提示词工程还是上下文工程，本质上都是优化 AI 指令以管理输出结果的方法，逻辑并不复杂，门槛也并不高。

使用这些工具只是帮助我们驾驭 AI 这头大象，而目的地在哪，就要靠骑象人自己来决定了。

我们下篇再贱~

欢迎关注作者的微信公众号：「超人的电话亭」