写在前面#

这是「100 个 Agent Skills 盘点」系列的最后一篇。十篇下来，我们从代码审查、数据库、浏览器、搜索、云服务、知识管理、版本控制、文档处理、通信通知，一路走到了最后这个轻松的话题：创意与可视化。

如果说前面的 Skills 让 Agent 变得”能干”，那创意 Skills 让 Agent 变得”好看”——能画图、能做表、能生成演示文稿、能创造视觉内容。同时，我们还深入探讨了多 Agent 编排和记忆系统，这两个让 Agent 从”单兵作战”进化为”团队协作”的关键能力。

1. Mermaid 图表 🧜‍♀️#

类别： 文本图表 适用工具： Mermaid.js

Mermaid 用简单的文本语法就能生成各种图表——流程图、时序图、甘特图、类图等。它是文档中嵌入图表的最佳选择。

能力说明：

流程图（Flowchart）
时序图（Sequence Diagram）
类图（Class Diagram）
甘特图（Gantt Chart）
状态图（State Diagram）
饼图（Pie Chart）

Agent 使用场景：

# Agent 生成系统架构图 graph TB Client[客户端] --> LB[负载均衡] LB --> API1[API 服务器 1] LB --> API2[API 服务器 2] LB --> API3[API 服务器 3] API1 --> Cache[Redis 缓存] API2 --> Cache API3 --> Cache API1 --> DB[(PostgreSQL)] API2 --> DB API3 --> DB API1 --> Queue[消息队列] Queue --> Worker1[Worker 1] Queue --> Worker2[Worker 2] Worker1 --> S3[S3 存储] Worker2 --> S3

# Agent 生成时序图 sequenceDiagram participant U as 用户 participant A as API participant D as 数据库 participant C as 缓存 U->>A: 请求数据 A->>C: 检查缓存 alt 缓存命中 C-->>A: 返回缓存数据 else 缓存未命中 A->D: 查询数据库 D-->>A: 返回数据 A->>C: 写入缓存 end A-->>U: 返回响应

# Agent 生成甘特图 gantt title 项目开发计划 dateFormat YYYY-MM-DD section 需求阶段需求分析 :done, des1, 2026-06-01, 5d 需求评审 :done, des2, after des1, 2d section 开发阶段后端开发 :active, dev1, 2026-06-08, 10d 前端开发 : dev2, 2026-06-10, 8d section 测试阶段集成测试 : test1, after dev1, 5d 验收测试 : test2, after test1, 3d

典型指令：

1
根据这段代码的调用关系，生成一个 Mermaid 时序图，
2
展示 API 请求从前端到数据库的完整流程。

2. Chart.js 图表 📊#

类别： 数据可视化 适用工具： Chart.js / ECharts / D3.js

数据可视化让枯燥的数字变得直观。Agent 可以生成各种图表——折线图、柱状图、饼图、散点图等。

能力说明：

折线图（趋势）
柱状图（对比）
饼图（占比）
散点图（相关性）
热力图（分布）
仪表盘（指标）

Agent 使用场景：

1
// Agent 生成数据可视化 HTML
2
function generateChart(data) {
3
  return `
4
    <html>
5
    <head>
6
      <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
7
      <style>
8
        body { font-family: sans-serif; padding: 20px; }
9
        .chart-container { max-width: 800px; margin: 0 auto; }
10
      </style>
11
    </head>
12
    <body>
13
      <h2>${data.title}</h2>
14
      <div class="chart-container">
15
        <canvas id="chart"></canvas>
16
      </div>
17
      <script>
18
        new Chart(document.getElementById('chart'), {
19
          type: '${data.type}',
20
          data: {
21
            labels: ${JSON.stringify(data.labels)},
22
            datasets: [{
23
              label: '${data.datasetLabel}',
24
              data: ${JSON.stringify(data.values)},
25
              backgroundColor: [
26
                '#2563eb', '#10b981', '#f59e0b',
27
                '#ef4444', '#8b5cf6', '#06b6d4'
28
              ],
29
              borderWidth: 1
30
            }]
31
          },
32
          options: {
33
            responsive: true,
34
            plugins: {
35
              legend: { position: 'top' },
36
              title: { display: true, text: '${data.title}' }
37
            }
38
          }
39
        });
40
      </script>
41
    </body>
42
    </html>
43
  `;
44
}

常用图表类型：

图表类型	适用场景	示例
折线图	趋势变化	用户增长趋势
柱状图	数量对比	各部门销售额
饼图	占比分析	市场份额
散点图	相关性	价格 vs 销量
热力图	分布密度	用户活跃时段

3. SVG 绘制 🎨#

类别： 矢量图形 适用工具： SVG 语法

SVG 是矢量图形的标准格式，可以无限缩放而不失真。Agent 可以直接生成 SVG 代码，创建图标、图表、插画。

能力说明：

基础形状（矩形、圆形、线条）
路径绘制
渐变和滤镜
动画
交互

Agent 使用场景：

1
<!-- Agent 生成的项目进度图 -->
2
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400">
3
  <!-- 背景 -->
4
  <rect width="800" height="400" fill="#f8fafc" rx="12"/>
5

6
  <!-- 标题 -->
7
  <text x="400" y="40" text-anchor="middle"
8
        font-size="24" font-weight="bold" fill="#1e293b">
9
    项目进度概览
10
  </text>
11

12
  <!-- 进度条 - 需求分析 -->
13
  <text x="50" y="100" font-size="14" fill="#475569">需求分析</text>
14
  <rect x="200" y="85" width="400" height="24" rx="12" fill="#e2e8f0"/>
15
  <rect x="200" y="85" width="400" height="24" rx="12" fill="#10b981"/>
16
  <text x="620" y="102" font-size="14" fill="#10b981" font-weight="bold">100%</text>
17

18
  <!-- 进度条 - 后端开发 -->
19
  <text x="50" y="150" font-size="14" fill="#475569">后端开发</text>
20
  <rect x="200" y="135" width="400" height="24" rx="12" fill="#e2e8f0"/>
21
  <rect x="200" y="135" width="280" height="24" rx="12" fill="#2563eb"/>
22
  <text x="620" y="152" font-size="14" fill="#2563eb" font-weight="bold">70%</text>
23

24
  <!-- 进度条 - 前端开发 -->
25
  <text x="50" y="200" font-size="14" fill="#475569">前端开发</text>
26
  <rect x="200" y="185" width="400" height="24" rx="12" fill="#e2e8f0"/>
27
  <rect x="200" y="185" width="200" height="24" rx="12" fill="#f59e0b"/>
28
  <text x="620" y="202" font-size="14" fill="#f59e0b" font-weight="bold">50%</text>
29

30
  <!-- 进度条 - 测试 -->
31
  <text x="50" y="250" font-size="14" fill="#475569">测试</text>
32
  <rect x="200" y="235" width="400" height="24" rx="12" fill="#e2e8f0"/>
33
  <rect x="200" y="235" width="80" height="24" rx="12" fill="#ef4444"/>
34
  <text x="620" y="252" font-size="14" fill="#ef4444" font-weight="bold">20%</text>
35

36
  <!-- 图例 -->
37
  <circle cx="200" cy="330" r="6" fill="#10b981"/>
38
  <text x="215" y="335" font-size="12" fill="#475569">已完成</text>
39
  <circle cx="300" cy="330" r="6" fill="#2563eb"/>
40
  <text x="315" y="335" font-size="12" fill="#475569">进行中</text>
41
  <circle cx="400" cy="330" r="6" fill="#f59e0b"/>
42
  <text x="415" y="335" font-size="12" fill="#475569">部分完成</text>
43
  <circle cx="500" cy="330" r="6" fill="#ef4444"/>
44
  <text x="515" y="335" font-size="12" fill="#475569">刚开始</text>
45
</svg>

典型指令：

1
生成一个 SVG 格式的项目状态看板，
2
用不同颜色表示各模块的完成进度，
3
包含图例和百分比标注。

4. 多 Agent 编排 🤖🤝🤖#

类别： Agent 架构 适用工具： CrewAI / LangGraph / AutoGen

单个 Agent 能力再强，面对复杂任务也会力不从心。多 Agent 编排让多个专业 Agent 各司其职、协同作战，像一支训练有素的团队一样完成任务。

能力说明：

任务分解与分配
Agent 角色定义（研究员、编码者、审核者等）
工作流编排（顺序、并行、条件分支）
Agent 间通信与状态传递
结果聚合与冲突解决

为什么需要多 Agent？

单 Agent 模式存在天然瓶颈：上下文窗口有限、角色混乱导致输出质量下降、无法并行处理子任务。多 Agent 架构通过”分而治之”解决这些问题——每个 Agent 专注一个角色，拥有独立的上下文和工具集，由编排器协调它们的工作。

Agent 使用场景：

1
# 使用 CrewAI 编排多 Agent 协作
2
from crewai import Agent, Task, Crew
3

4
# 定义专业 Agent
5
researcher = Agent(
6
    role="技术研究员",
7
    goal="深入调研技术方案的可行性和最佳实践",
8
    backstory="你是一位资深技术研究员，擅长分析技术趋势和评估方案。",
9
    tools=[web_search, arxiv_search],
10
    verbose=True
11
)
12

13
architect = Agent(
14
    role="系统架构师",
15
    goal="设计高可用、可扩展的系统架构",
16
    backstory="你是一位经验丰富的架构师，擅长微服务和分布式系统设计。",
17
    tools=[diagram_tool, code_analysis],
18
    verbose=True
19
)
20

21
developer = Agent(
22
    role="高级开发者",
23
    goal="编写高质量、可维护的代码实现",
24
    backstory="你是一位全栈开发者，精通 Python/TypeScript，注重代码质量。",
25
    tools=[code_editor, terminal, test_runner],
26
    verbose=True
27
)
28

29
reviewer = Agent(
30
    role="代码审核者",
31
    goal="确保代码质量、安全性和最佳实践",
32
    backstory="你是一位严格的代码审核者，关注安全漏洞和性能问题。",
33
    tools=[lint_tool, security_scanner],
34
    verbose=True
35
)
36

37
# 定义任务链
38
research_task = Task(
39
    description="调研 OAuth 2.0 + PKCE 的最新最佳实践，分析安全性要求",
40
    agent=researcher,
41
    expected_output="详细的技术调研报告，包含方案对比和推荐"
42
)
43

44
design_task = Task(
45
    description="基于调研结果，设计认证系统的整体架构",
46
    agent=architect,
47
    expected_output="系统架构图和详细设计文档",
48
    context=[research_task]  # 依赖调研结果
49
)
50

51
implement_task = Task(
52
    description="根据架构设计，实现核心认证模块",
53
    agent=developer,
54
    expected_output="完整的代码实现和单元测试",
55
    context=[design_task]  # 依赖架构设计
56
)
57

58
review_task = Task(
59
    description="审核代码实现，检查安全漏洞和代码质量",
60
    agent=reviewer,
61
    expected_output="审核报告和改进建议",
62
    context=[implement_task]  # 依赖代码实现
63
)
64

65
# 编排执行
66
crew = Crew(
67
    agents=[researcher, architect, developer, reviewer],
68
    tasks=[research_task, design_task, implement_task, review_task],
69
    verbose=True
70
)
71

72
result = crew.kickoff()

1
# 使用 LangGraph 构建带条件分支的工作流
2
from langgraph.graph import StateGraph, END
3
from typing import TypedDict
4

5
class WorkflowState(TypedDict):
6
    task: str
7
    research_result: str
8
    code: str
9
    review_result: str
10
    approved: bool
11

12
# 定义节点函数
13
def research_node(state: WorkflowState) -> WorkflowState:
14
    """研究员 Agent 执行调研"""
15
    result = researcher_agent.invoke({
16
        "task": state["task"]
17
    })
18
    return {"research_result": result}
19

20
def code_node(state: WorkflowState) -> WorkflowState:
21
    """开发者 Agent 编写代码"""
22
    result = developer_agent.invoke({
23
        "task": state["task"],
24
        "research": state["research_result"]
25
    })
26
    return {"code": result}
27

28
def review_node(state: WorkflowState) -> WorkflowState:
29
    """审核者 Agent 审查代码"""
30
    result = reviewer_agent.invoke({
31
        "code": state["code"]
32
    })
33
    approved = "LGTM" in result
34
    return {"review_result": result, "approved": approved}
35

36
def route_review(state: WorkflowState) -> str:
37
    """条件路由：审核通过则结束，否则返回修改"""
38
    return "approved" if state["approved"] else "revise"
39

40
def revise_node(state: WorkflowState) -> WorkflowState:
41
    """开发者 Agent 根据审核意见修改"""
42
    result = developer_agent.invoke({
43
        "code": state["code"],
44
        "feedback": state["review_result"]
45
    })
46
    return {"code": result}
47

48
# 构建工作流图
49
workflow = StateGraph(WorkflowState)
50

51
# 添加节点
52
workflow.add_node("research", research_node)
53
workflow.add_node("code", code_node)
54
workflow.add_node("review", review_node)
55
workflow.add_node("revise", revise_node)
56

57
# 添加边
58
workflow.set_entry_point("research")
59
workflow.add_edge("research", "code")
60
workflow.add_edge("code", "review")
61
workflow.add_conditional_edges(
62
    "review",
63
    route_review,
64
    {"approved": END, "revise": "revise"}
65
)
66
workflow.add_edge("revise", "review")
67

68
# 编译并运行
69
app = workflow.compile()
70
result = app.invoke({"task": "实现用户认证系统"})

典型指令：

1
用 CrewAI 编排一个多 Agent 团队来完成这个任务：
2
1. 研究员 Agent 调研竞品的技术方案
3
2. 架构师 Agent 设计我们的系统架构
4
3. 开发者 Agent 实现核心功能
5
4. 测试者 Agent 编写测试用例并验证
6
确保每个 Agent 的输出会传递给下一个 Agent 作为输入。

5. 演示文稿生成 📽️#

类别： 演示工具 适用工具： reveal.js / Slidev / Marp

Agent 可以自动生成演示文稿——从 Markdown 创建幻灯片，支持代码高亮、动画、主题。

能力说明：

Markdown 转幻灯片
代码高亮
动画效果
主题定制
导出 PDF

Agent 使用场景：

1
<!-- Agent 生成的 Slidev 演示文稿 -->
2
---
3
theme: default
4
title: AI Agent Skills 技术分享
5
---
6

7
# AI Agent Skills 技术分享
8

9
让 AI 成为你的开发伙伴
10

11
---
12
layout: two-cols
13
---
14

15
# 什么是 Agent Skills？
16

17
Agent Skills 是 AI Agent 的能力模块：
18

19
- 🔍 搜索与信息获取
20
- 💾 数据库操作
21
- 🌐 浏览器自动化
22
- 📄 文档处理
23
- ☁️ 云服务管理
24

25
::right::
26

27
```mermaid
28
graph TD
29
    A[AI Agent] --> B[Skills]
30
    B --> C[Search]
31
    B --> D[Database]
32
    B --> E[Browser]
33
    B --> F[Documents]
34
    B --> G[Cloud]

核心架构#

1
interface Agent {
2
  skills: Skill[];
3
  memory: Memory;
4
  tools: Tool[];
5

6
  async execute(task: Task): Promise<Result> {
7
    const plan = await this.plan(task);
8
    for (const step of plan.steps) {
9
      const skill = this.selectSkill(step);
10
      await skill.execute(step);
11
    }
12
  }
13
}

Demo#

让我们看一个实际的 Demo…

1
**典型指令：**

根据这篇文章的内容，生成一个 10 页的 Slidev 演示文稿，主题是 “AI Agent Skills 入门”，包含代码示例和架构图。

1
---
2

3
## 6. 思维导图 🧠
4

5
**类别：** 知识可视化
6
**适用工具：** Markmap / Mermaid mindmap
7

8
> 思维导图是组织和展示知识结构的最佳方式。Agent 可以从文本自动生成思维导图。
9

10
**能力说明：**
11
- Markdown 转思维导图
12
- 自动层级识别
13
- 交互式展开/折叠
14
- 导出为图片
15

16
**Agent 使用场景：**
17

18
```markdown
19
<!-- Agent 生成的 Markmap 思维导图 -->
20

21
# AI Agent 技术栈
22

23
## 基础能力
24
- 代码生成
25
  - 函数编写
26
  - 类设计
27
  - 测试生成
28
- 代码理解
29
  - 代码阅读
30
  - Bug 定位
31
  - 架构分析
32

33
## 数据能力
34
- 数据库
35
  - PostgreSQL
36
  - Redis
37
  - MongoDB
38
- 文件处理
39
  - PDF 解析
40
  - Excel 处理
41
  - 图片识别
42

43
## 自动化能力
44
- 浏览器
45
  - 网页抓取
46
  - 表单填写
47
  - 截图
48
- DevOps
49
  - Docker
50
  - CI/CD
51
  - 监控
52

53
## 协作能力
54
- 版本控制
55
  - Git 操作
56
  - PR 管理
57
- 通信
58
  - Slack
59
  - 邮件
60
  - 通知

典型指令：

1
把这篇技术文章的内容整理成思维导图，
2
用 Markmap 格式，层级不超过 3 层。

7. 表格美化 📋#

类别： 数据展示 适用工具： Markdown / HTML

好的表格能让数据一目了然。Agent 可以生成各种格式的美化表格。

能力说明：

Markdown 表格
HTML 表格（带样式）
ASCII 表格（终端）
条件格式

Agent 使用场景：

1
Agent 生成的终端表格：
2

3
┌──────────────┬──────────┬──────────┬──────────┐
4
│     服务     │   状态   │  延迟    │  错误率  │
5
├──────────────┼──────────┼──────────┼──────────┤
6
│ API 服务器   │ 🟢 正常  │  45ms    │  0.01%   │
7
│ 数据库       │ 🟢 正常  │  12ms    │  0.00%   │
8
│ Redis 缓存   │ 🟢 正常  │  3ms     │  0.00%   │
9
│ 消息队列     │ 🟡 警告  │  120ms   │  0.50%   │
10
│ 文件存储     │ 🔴 异常  │  2000ms  │  5.20%   │
11
└──────────────┴──────────┴──────────┴──────────┘

1
<!-- Agent 生成的 HTML 美化表格 -->
2
<table style="width: 100%; border-collapse: collapse; font-family: sans-serif;">
3
  <thead>
4
    <tr style="background: #2563eb; color: white;">
5
      <th style="padding: 12px; text-align: left;">产品</th>
6
      <th style="padding: 12px; text-align: right;">销量</th>
7
      <th style="padding: 12px; text-align: right;">收入</th>
8
      <th style="padding: 12px; text-align: right;">增长率</th>
9
    </tr>
10
  </thead>
11
  <tbody>
12
    <tr style="background: #f0fdf4;">
13
      <td style="padding: 10px;">产品 A</td>
14
      <td style="padding: 10px; text-align: right;">1,234</td>
15
      <td style="padding: 10px; text-align: right;">¥89,000</td>
16
      <td style="padding: 10px; text-align: right; color: #10b981;">+23%</td>
17
    </tr>
18
    <tr>
19
      <td style="padding: 10px;">产品 B</td>
20
      <td style="padding: 10px; text-align: right;">856</td>
21
      <td style="padding: 10px; text-align: right;">¥45,000</td>
22
      <td style="padding: 10px; text-align: right; color: #ef4444;">-5%</td>
23
    </tr>
24
  </tbody>
25
</table>

典型指令：

1
把这个数据对比结果做成一个漂亮的表格，
2
增长率超过 10% 的标绿，下降的标红。

8. 代码高亮展示 💡#

类别： 代码美化 适用工具： Shiki / Prism.js / highlight.js

好的代码展示能让技术文档更专业。Agent 可以生成带语法高亮的代码片段。

能力说明：

语法高亮
行号显示
代码对比
主题定制

Agent 使用场景：

1
<!-- Agent 生成的代码展示组件 -->
2
<div style="background: #1e1e1e; border-radius: 8px; padding: 16px; overflow-x: auto;">
3
  <div style="display: flex; align-items: center; margin-bottom: 12px;">
4
    <span style="color: #ff5f57; margin-right: 6px;">●</span>
5
    <span style="color: #febc2e; margin-right: 6px;">●</span>
6
    <span style="color: #28c840; margin-right: 12px;">●</span>
7
    <span style="color: #888; font-size: 12px;">example.ts</span>
8
  </div>
9
  <pre style="margin: 0; font-family: 'Fira Code', monospace; font-size: 14px; line-height: 1.6;">
10
<code><span style="color: #569cd6;">interface</span> <span style="color: #4ec9b0;">Agent</span> {
11
  <span style="color: #9cdcfe;">skills</span>: <span style="color: #4ec9b0;">Skill</span>[];
12
  <span style="color: #9cdcfe;">execute</span>(<span style="color: #9cdcfe;">task</span>: <span style="color: #4ec9b0;">string</span>): <span style="color: #4ec9b0;">Promise</span>&lt;<span style="color: #4ec9b0;">Result</span>&gt;;
13
}
14

15
<span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">agent</span>: <span style="color: #4ec9b0;">Agent</span> = {
16
  <span style="color: #9cdcfe;">skills</span>: [<span style="color: #ce9178;">'search'</span>, <span style="color: #ce9178;">'database'</span>, <span style="color: #ce9178;">'browser'</span>],
17
  <span style="color: #569cd6;">async</span> <span style="color: #dcdcaa;">execute</span>(<span style="color: #9cdcfe;">task</span>) {
18
    <span style="color: #c586c0;">return</span> <span style="color: #569cd6;">await</span> <span style="color: #dcdcaa;">process</span>(<span style="color: #9cdcfe;">task</span>);
19
  }
20
};</code>
21
  </pre>
22
</div>

9. 信息图表 (Infographic) 📈#

类别： 数据叙事 适用工具： SVG / HTML + CSS

信息图表把复杂的数据和信息用视觉化的方式呈现，让读者一眼就能理解核心信息。

能力说明：

数据卡片
流程信息图
对比图表
统计可视化

Agent 使用场景：

1
<!-- Agent 生成的信息卡片 -->
2
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; font-family: sans-serif;">
3
  <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 24px; border-radius: 12px;">
4
    <div style="font-size: 14px; opacity: 0.8;">活跃用户</div>
5
    <div style="font-size: 36px; font-weight: bold; margin: 8px 0;">12,847</div>
6
    <div style="font-size: 12px; color: #a7f3d0;">↑ 23% vs 上月</div>
7
  </div>
8

9
  <div style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; padding: 24px; border-radius: 12px;">
10
    <div style="font-size: 14px; opacity: 0.8;">月收入</div>
11
    <div style="font-size: 36px; font-weight: bold; margin: 8px 0;">¥89.5K</div>
12
    <div style="font-size: 12px; color: #a7f3d0;">↑ 15% vs 上月</div>
13
  </div>
14

15
  <div style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white; padding: 24px; border-radius: 12px;">
16
    <div style="font-size: 14px; opacity: 0.8;">转化率</div>
17
    <div style="font-size: 36px; font-weight: bold; margin: 8px 0;">3.2%</div>
18
    <div style="font-size: 12px; color: #a7f3d0;">↑ 0.5% vs 上月</div>
19
  </div>
20

21
  <div style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); color: white; padding: 24px; border-radius: 12px;">
22
    <div style="font-size: 14px; opacity: 0.8;">NPS 评分</div>
23
    <div style="font-size: 36px; font-weight: bold; margin: 8px 0;">72</div>
24
    <div style="font-size: 12px; color: #a7f3d0;">↑ 8 vs 上月</div>
25
  </div>
26
</div>

典型指令：

1
把这份运营数据做成一套信息卡片，
2
用渐变背景和大数字展示关键指标，
3
每个卡片显示同比变化。

10. Agent 记忆系统 🧠💾#

类别： Agent 记忆 适用工具： Memory MCP Server / Mem0 / 自定义

没有记忆的 Agent 每次对话都是”初次见面”。记忆系统让 Agent 能记住用户偏好、历史交互和学到的知识，从”无状态工具”进化为”有记忆的伙伴”。

能力说明：

短期记忆（对话上下文，当前会话的工作记忆）
长期记忆（跨会话持久化的用户偏好、知识积累）
工作记忆（任务执行中的中间状态和决策记录）
记忆检索与遗忘（按相关性检索，自动清理过时信息）

为什么记忆如此重要？

想象你每天都要向同事重新介绍自己——这就是没有记忆的 Agent 的处境。记忆系统解决了三个核心问题：

连续性 —— 记住之前的对话，不用用户反复解释背景
个性化 —— 学习用户偏好，提供定制化的服务
效率 —— 避免重复计算和重复检索，提升响应速度

Agent 使用场景：

1
# 使用 Mem0 实现 Agent 长期记忆
2
from mem0 import Memory
3

4
class AgentMemory:
5
    def __init__(self, user_id: str):
6
        self.user_id = user_id
7
        self.memory = Memory()
8
        # 短期记忆：当前会话的上下文
9
        self.short_term: list[dict] = []
10
        # 工作记忆：当前任务的中间状态
11
        self.working: dict = {}
12

13
    def add_conversation(self, role: str, content: str):
14
        """添加对话到短期记忆"""
15
        self.short_term.append({
16
            "role": role,
17
            "content": content,
18
            "timestamp": datetime.now().isoformat()
19
        })
20
        # 短期记忆保留最近 20 轮
21
        if len(self.short_term) > 40:
22
            self.short_term = self.short_term[-40:]
23

24
    def extract_and_store(self, conversation: str):
25
        """从对话中提取关键信息存入长期记忆"""
26
        # 使用 LLM 提取值得记住的信息
27
        extraction_prompt = f"""
28
        从以下对话中提取值得长期记住的信息：
29
        - 用户偏好（编程语言、代码风格、工具选择）
30
        - 项目信息（技术栈、架构决策）
31
        - 个人习惯（工作时间、沟通偏好）
32

33
        对话内容：
34
        {conversation}
35

36
        返回 JSON 格式的记忆条目。
37
        """
38
        memories = llm.extract(extraction_prompt)
39

40
        for memory in memories:
41
            self.memory.add(
42
                memory["content"],
43
                user_id=self.user_id,
44
                metadata={"category": memory["category"]}
45
            )
46

47
    def recall(self, query: str, limit: int = 5) -> list[str]:
48
        """根据查询检索相关记忆"""
49
        # 同时检索短期和长期记忆
50
        short_term_hits = [
51
            m["content"] for m in self.short_term
52
            if query.lower() in m["content"].lower()
53
        ]
54
        long_term_hits = self.memory.search(
55
            query, user_id=self.user_id, limit=limit
56
        )
57
        return short_term_hits + [m["memory"] for m in long_term_hits]
58

59
    def update_working_memory(self, key: str, value: any):
60
        """更新工作记忆（当前任务状态）"""
61
        self.working[key] = {
62
            "value": value,
63
            "updated_at": datetime.now().isoformat()
64
        }
65

66
    def get_context_summary(self) -> str:
67
        """生成当前上下文摘要，注入到 Agent 的系统提示中"""
68
        recent_chat = self.short_term[-6:]  # 最近 3 轮对话
69
        relevant_memories = self.memory.search(
70
            "user preferences and project context",
71
            user_id=self.user_id, limit=3
72
        )
73
        return f"""
74
## 用户上下文
75
{chr(10).join(f'- {m["memory"]}' for m in relevant_memories)}
76

77
## 最近对话
78
{chr(10).join(f'{m["role"]}: {m["content"]}' for m in recent_chat)}
79

80
## 当前任务状态
81
{json.dumps(self.working, ensure_ascii=False, indent=2)}
82
        """

1
# 使用 Memory MCP Server 的简洁方式
2
# 在 MCP 配置中添加 memory server，Agent 即可直接使用
3

4
{
5
  "mcpServers": {
6
    "memory": {
7
      "command": "npx",
8
      "args": ["-y", "@modelcontextprotocol/server-memory"],
9
      "env": {
10
        "MEMORY_FILE_PATH": "/path/to/memory.json"
11
      }
12
    }
13
  }
14
}
15

16
# Agent 使用 memory 工具的典型流程：
17
# 1. 创建记忆
18
memory_create({
19
    "content": "用户偏好使用 TypeScript 而非 JavaScript",
20
    "category": "preferences",
21
    "importance": "high"
22
})
23

24
# 2. 检索记忆
25
results = memory_search({
26
    "query": "用户的编程语言偏好",
27
    "limit": 5
28
})
29

30
# 3. 更新记忆
31
memory_update({
32
    "id": "mem_001",
33
    "content": "用户偏好 TypeScript，项目已迁移到 Deno 运行时"
34
})

记忆系统架构：

1
┌─────────────────────────────────────────────┐
2
│                Agent 记忆系统                 │
3
├──────────┬──────────┬───────────┬───────────┤
4
│ 短期记忆  │ 工作记忆  │ 长期记忆   │ 情景记忆  │
5
│ (对话)    │ (任务)    │ (知识)    │ (事件)    │
6
├──────────┴──────────┴───────────┴───────────┤
7
│              记忆管理层                       │
8
│   编码 → 存储 → 检索 → 遗忘 → 整合          │
9
├─────────────────────────────────────────────┤
10
│              存储后端                         │
11
│   向量数据库 / KV 存储 / 图数据库             │
12
└─────────────────────────────────────────────┘

典型指令：

1
请记住以下关于我的信息：
2
- 我是一个全栈开发者，主要用 TypeScript 和 Python
3
- 我偏好函数式编程风格，不喜欢 class 写法
4
- 我的项目使用 Next.js + PostgreSQL + Redis 技术栈
5

6
以后给我代码建议时，请基于这些偏好来回答。

本篇小结#

#	Skill	类别	难度	价值
1	Mermaid 图表	文本图表	⭐	⭐⭐⭐⭐⭐
2	Chart.js 图表	数据可视化	⭐⭐	⭐⭐⭐⭐
3	SVG 绘制	矢量图形	⭐⭐⭐	⭐⭐⭐⭐
4	多 Agent 编排	Agent 架构	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
5	演示文稿	演示工具	⭐⭐	⭐⭐⭐⭐
6	思维导图	知识可视化	⭐⭐	⭐⭐⭐⭐
7	表格美化	数据展示	⭐	⭐⭐⭐⭐
8	代码高亮	代码美化	⭐	⭐⭐⭐⭐
9	信息图表	数据叙事	⭐⭐⭐	⭐⭐⭐⭐
10	Agent 记忆系统	Agent 记忆	⭐⭐⭐	⭐⭐⭐⭐⭐

核心观点： 创意与可视化 Skills 让 Agent 的输出从”能用”变成”好看”，而多 Agent 编排和记忆系统则让 Agent 从”单兵作战”进化为”团队协作”。一个能画图表、做演示、编排多 Agent、记住用户偏好的 Agent，才是真正的智能伙伴。

系列完结 🎉#

至此，「100 个 Agent Skills 盘点」系列全部完成！

全系列回顾#

篇	主题	核心能力
第一篇	代码审查与质量守护	Lint、测试、安全、格式化
第二篇	数据库与数据存储	PostgreSQL、Redis、MongoDB
第三篇	浏览器自动化与爬虫	Puppeteer、Playwright、抓取
第四篇	搜索与信息获取	Web 搜索、RSS、API
第五篇	云服务与 DevOps	Docker、K8s、CI/CD
第六篇	知识管理与 RAG	向量数据库、Embedding
第七篇	版本控制与协作	Git、GitHub、PR
第八篇	文档与文件处理	PDF、Excel、图片
第九篇	通信与通知集成	Slack、邮件、Webhook
第十篇	创意与可视化	图表、SVG、演示文稿、多 Agent 编排、记忆系统

关键洞察#

Skills 决定 Agent 的能力边界 —— 一个 Agent 能做什么，取决于它有什么 Skills
MCP 是 Skills 的标准协议 —— 越来越多的 Skills 通过 MCP 协议提供
组合使用 > 单独使用 —— Skills 的真正价值在于组合，比如”搜索 + 数据库 + 通知”实现自动化监控
安全永远是第一位 —— 给 Agent 权限的同时，必须做好权限控制和审计

感谢阅读！希望这个系列能帮助你更好地理解和使用 Agent Skills。

音乐

音乐

写在前面#

1. Mermaid 图表 🧜‍♀️#

2. Chart.js 图表 📊#

3. SVG 绘制 🎨#

4. 多 Agent 编排 🤖🤝🤖#

5. 演示文稿生成 📽️#

核心架构#

Demo#

7. 表格美化 📋#

8. 代码高亮展示 💡#

9. 信息图表 (Infographic) 📈#

10. Agent 记忆系统 🧠💾#

本篇小结#

系列完结 🎉#

全系列回顾#

关键洞察#

支持与分享

音乐

文章目录

音乐

音乐

100 个 Agent Skills 盘点（十）：创意与可视化

写在前面#

1. Mermaid 图表 🧜‍♀️#

2. Chart.js 图表 📊#

3. SVG 绘制 🎨#

4. 多 Agent 编排 🤖🤝🤖#

5. 演示文稿生成 📽️#

核心架构#

Demo#

7. 表格美化 📋#

8. 代码高亮展示 💡#

9. 信息图表 (Infographic) 📈#

10. Agent 记忆系统 🧠💾#

本篇小结#

系列完结 🎉#

全系列回顾#

关键洞察#

支持与分享

音乐

文章目录