# AI 原生应用案例展示
> **演示主题**：MCP 工具与 Skills 技能实战案例
> **面向人群**：公司 AI 小组、技术团队
> **更新日期**：2026-03-18
> **案例数量**：3 个（MCP 案例 1 个 + Skills 案例 2 个）
---
## 目录
- [案例一：FastLog 日志查询 MCP 工具](#案例一fastlog-日志查询-mcp-工具)
- [需求背景](#需求背景)
- [技术方案](#技术方案)
- [实现细节](#实现细节)
- [使用示例](#使用示例)
- [关键价值](#关键价值)
- [案例二：Tailwind Builder 技能](#案例二tailwind-builder-技能)
- [需求背景](#需求背景-1)
- [技术方案](#技术方案-1)
- [实现细节](#实现细节-1)
- [使用示例](#使用示例-1)
- [关键价值](#关键价值-1)
- [案例三：Chart.js Localizer 技能](#案例三chartjs-localizer-技能)
- [需求背景](#需求背景-2)
- [技术方案](#技术方案-2)
- [实现细节](#实现细节-2)
- [使用示例](#使用示例-2)
- [关键价值](#关键价值-2)
---
## 案例一：FastLog 日志查询 MCP 工具
### 需求背景
在企业级应用开发中，日志查询和性能分析是日常运维的核心需求。传统方式存在以下痛点：
**传统方式的问题：**
- 需要手动登录日志平台
- 复杂的查询界面，学习成本高
- 多个系统之间切换（日志系统 + 性能分析系统）
- 无法通过自然语言查询
- 结果格式不统一，分析困难
**AI 原生应用的解决方案：**
- 通过自然语言描述查询需求
- 自动调用日志 API 和性能分析 API
- 智能格式化输出结果
- 一次对话完成日志查询和性能分析
---
### 技术方案
#### 架构设计
```
┌─────────────────────────────────────────────────┐
│ 用户交互层 │
│ "帮我查一下最近一小时的错误日志" │
└─────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────┐
│ Agent 理解层 │
│ 1. 理解意图（日志查询 vs 性能分析） │
│ 2. 提取参数（时间范围、关键词、环境） │
│ 3. 选择 MCP 工具 │
└─────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────┐
│ MCP 工具层 │
│ ├─ fastlog_query_logs (日志查询) │
│ └─ fastlog_query_pyroscope (性能分析) │
└─────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────┐
│ 外部 API 层 │
│ ├─ FastLog API (https://fast.mypaas.com) │
│ └─ Pyroscope API (https://fast.mypaas.com) │
└─────────────────────────────────────────────────┘
```
#### MCP 工具定义
```typescript
// 工具 1：fastlog_query_logs
{
"name": "fastlog_query_logs",
"description": "查询 FastLog 日志数据，支持关键词搜索、时间范围过滤和环境过滤",
"parameters": {
"type": "object",
"properties": {
"keyword": {
"type": "string",
"description": "搜索关键词"
},
"from_time": {
"type": "string",
"description": "开始时间（格式：YYYY-MM-DD HH:MM:SS）"
},
"to_time": {
"type": "string",
"description": "结束时间（格式：YYYY-MM-DD HH:MM:SS）"
},
"env_code": {
"type": "string",
"description": "环境代码",
"default": "xc-syzhkj-idc"
},
"page_size": {
"type": "number",
"description": "每页记录数（默认：20）"
},
"page_index": {
"type": "number",
"description": "页码（默认：1）"
}
},
"required": ["keyword", "from_time", "to_time", "env_code"]
}
}
// 工具 2：fastlog_query_pyroscope
{
"name": "fastlog_query_pyroscope",
"description": "查询 Pyroscope 性能分析数据，支持 CPU、内存、锁等多种性能指标",
"parameters": {
"type": "object",
"properties": {
"profile_type": {
"type": "string",
"description": "性能分析类型（cpu_time, memory_alloc_tlab_bytes 等）"
},
"application_code": {
"type": "string",
"description": "应用代码"
},
"service_code": {
"type": "string",
"description": "服务代码"
},
"from_time": {
"type": "string",
"description": "开始时间"
},
"to_time": {
"type": "string",
"description": "结束时间"
},
"env_code": {
"type": "string",
"description": "环境代码"
}
},
"required": ["profile_type", "application_code", "service_code", "env_code"]
}
}
```
---
### 实现细节
#### 日志类型智能识别
```python
# 日志类型检测逻辑
def detect_log_type(log_entry):
if any(key in log_entry for key in ['_container_name_', '_pod_name_', '_namespace_']):
return 'container'
elif any(key in log_entry for key in ['logger', 'level', 'thread', 'serviceName']):
return 'application'
else:
return 'generic'
# 格式化输出
def format_container_log(log_entry):
return f"""
【时间信息】
事件时间: {log_entry.get('__event_time__')}
记录时间: {log_entry.get('_time_')}
【日志内容】
{log_entry.get('content')}
【容器信息】
容器名称: {log_entry.get('_container_name_')}
容器IP: {log_entry.get('_container_ip_')}
"""
def format_application_log(log_entry):
return f"""
【基本信息】
时间: {log_entry.get('date')}
日志级别: {log_entry.get('level')}
线程: {log_entry.get('thread')}
【日志消息】
{log_entry.get('message')}
【服务信息】
服务名称: {log_entry.get('serviceName')}
主机名: {log_entry.get('hostName')}
"""
```
#### 性能分析指标支持
| 短名称 | 完整值 | 用途 | 使用场景 |
|--------|--------|------|----------|
| `cpu_time` | `process_cpu:cpu:nanoseconds` | CPU 使用时间 | CPU 性能瓶颈分析 |
| `memory_alloc_tlab_bytes` | `memory:alloc_in_new_tlab_bytes` | TLAB 内分配字节数 | 内存分配热点检测 |
| `memory_alloc_outside_tlab_bytes` | `memory:alloc_outside_tlab_bytes` | TLAB 外分配字节数 | 大对象分配分析 |
| `mutex_contentions` | `mutex:contentions:count` | 锁冲突次数 | 锁竞争问题检测 |
| `mutex_delay` | `mutex:delay:nanoseconds` | 锁等待时间 | 锁等待耗时分析 |
---
### 使用示例
#### 场景 1：查询错误日志
**用户输入：**
```
帮我查一下最近一小时的错误日志
```
**Agent 处理流程：**
1. 理解意图：查询日志 + 时间范围（最近一小时）
2. 提取参数：keyword="error", from_time="2026-03-18 10:00:00", to_time="2026-03-18 11:00:00"
3. 选择工具：`fastlog_query_logs`
4. 执行查询
5. 格式化输出
**输出结果：**
```
====================================================================================================
FASTLOG 查询结果
====================================================================================================
查询状态: OK (代码: 2000)
总记录数: 25
当前页: 1 | 每页记录数: 20
本页返回: 20 条记录
────────────────────────────────────────────────────────────────────────────────────────────────────
[日志 #1] - 应用日志
────────────────────────────────────────────────────────────────────────────────────────────────────
【基本信息】
时间: 2026-03-18T10:15:23.456+0800
日志级别: ERROR
线程: http-nio-80-exec-7
【日志消息】
数据库连接超时，无法获取连接
【日志记录器】
Logger: com.example.db.ConnectionPool
行号: 42
【服务信息】
服务名称: order-service
主机名: order-service-7d4f8c9b9d-abc123
【异常信息】
java.sql.SQLException: Connection timeout
at com.mysql.cj.jdbc.ConnectionImpl.createNewConnection(ConnectionImpl.java:827)
...
```
#### 场景 2：性能分析
**用户输入：**
```
帮我分析一下 jmpt-j-multi-jcsj_java 应用的内存分配情况
```
**Agent 处理流程：**
1. 理解意图：性能分析 + 内存分配
2. 提取参数：profile_type="memory_alloc_tlab_bytes", application_code="jmpt-j-multi-jcsj_java"
3. 选择工具：`fastlog_query_pyroscope`
4. 执行查询
5. 格式化输出
**输出结果：**
```
====================================================================================================
PYROSCOPE 性能分析结果
====================================================================================================
查询状态: 成功 (代码: 2000)
【元数据】
格式: single
采样率: 100%
单位: bytes
指标名称: alloc_in_new_tlab_bytes
【时间线】
开始时间: 2026-03-18 10:00:00
时间间隔: 15 秒
采样点数: 20
采样值范围: 0 - 592,720,400
总计: 1,142,780,616
【火焰图数据】
总采样数: 1,078,903,032
最大自身耗时: 29,239,168
堆栈层级数: 2002
【热点方法 Top 10】
1. org.apache.skywalking.apm.agent.core.context.ContextManager.createEntrySpan
2. java.lang.String.replaceAll
3. java.util.regex.Pattern.matcher
4. com.alibaba.fastjson.parser.JSONScanner.scanString
...
```
---
### 关键价值
✅ **降低使用门槛**：自然语言查询，无需学习复杂 API
✅ **提升效率**：一次对话完成日志查询和性能分析
✅ **智能格式化**：自动识别日志类型，输出结构化结果
✅ **跨平台集成**：统一日志系统和性能分析系统的访问方式
✅ **可扩展性**：易于添加新的日志源和性能指标
---
## 案例二：Tailwind Builder 技能
### 需求背景
**问题场景：**
开发者在使用 Tailwind CSS 时，经常会遇到以下问题：
**开发阶段：**
- 为了快速开发，使用 Tailwind Play CDN 引入样式
- 每次访问页面都需要从 CDN 下载 3.5MB 的样式文件
- 页面加载速度慢，用户体验差
**生产部署时：**
- CDN 在国内访问不稳定
- 需要将 CDN 改为本地构建的静态 CSS
- 手动配置 Tailwind CLI，步骤繁琐
**传统解决方案的问题：**
1. 手动初始化项目（npm init, npm install）
2. 手动创建配置文件（tailwind.config.js）
3. 手动创建 input.css
4. 手动运行编译命令
5. 手动修改 HTML 中的 CDN 引用
6. 步骤多，容易出错
**AI 原生应用的解决方案：**
- 自然语言描述需求
- 自动完成所有配置和编译步骤
- 智能检测 CDN 引用并自动替换
- 支持监听模式和压缩模式
---
### 技术方案
#### 架构设计
```
┌─────────────────────────────────────────────────┐
│ 用户交互层 │
│ "帮我优化这个 HTML 页面，它使用了 CDN" │
└─────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────┐
│ Agent 理解层 │
│ 1. 检测 HTML 文件中的 Tailwind CDN 引用 │
│ 2. 理解需求（标准构建/监听模式/压缩模式） │
│ 3. 触发 Tailwind Builder Skill │
└─────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────┐
│ Skill 执行层 │
│ ├─ 检测环境（Node.js, npm） │
│ ├─ 初始化项目 │
│ ├─ 生成配置文件 │
│ ├─ 编译 CSS │
│ └─ 替换 CDN 引用 │
└─────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────┐
│ Shell 脚本层 │
│ ├─ tailwind-build.sh (主构建脚本) │
│ └─ tailwind-watch.sh (监听模式脚本) │
└─────────────────────────────────────────────────┘
```
#### Skill 触发条件
```markdown
# SKILL.md Frontmatter
---
name: tailwind-builder
description: 自动化 Tailwind CSS 构建工具，将使用 Tailwind CDN 的 HTML 项目转换为本地静态构建，提升页面加载性能
read_when:
- 用户提到 Tailwind CDN
- 用户需要优化 HTML 页面性能
- 用户提到 "tailwind build"
- 用户提到 "cdn.tailwindcss.com"
---
```
---
### 实现细节
#### 工作流程
```bash
# Step 1: 环境检测
check_environment() {
if ! command -v node &> /dev/null; then
echo "❌ Node.js 未安装"
exit 1
fi
if ! command -v npm &> /dev/null; then
echo "❌ npm 未安装"
exit 1
fi
}
# Step 2: 项目初始化
init_project() {
if [ ! -f "package.json" ]; then
npm init -y
fi
if ! npm list tailwindcss &> /dev/null; then
npm install -D tailwindcss@^3.4.0
fi
}
# Step 3: 生成配置文件
generate_config() {
# tailwind.config.js
cat > tailwind.config.js << EOF
module.exports = {
content: ["./index.html"],
theme: {
extend: {},
},
plugins: [],
}
EOF
# input.css
cat > input.css << EOF
@tailwind base;
@tailwind components;
@tailwind utilities;
EOF
}
# Step 4: 编译 CSS
compile_css() {
npx tailwindcss -i ./input.css -o ./output.css $WATCH $MINIFY
}
# Step 5: 替换 CDN 引用
replace_cdn() {
# 检测并替换 CDN 引用
sed -i 's|||g' index.html
}
# 主流程
main() {
check_environment
init_project
generate_config
compile_css
replace_cdn
show_stats
}
```
#### 性能对比
| 模式 | 文件大小 | CDN 大小 | 提升比例 |
|------|----------|----------|----------|
| 标准构建 | 19KB | ~3.5MB | 98.5% ⚡ |
| 压缩构建 | 8KB | ~3.5MB | 99.8% ⚡⚡ |
---
### 使用示例
#### 场景 1：标准构建
**用户输入：**
```
帮我优化这个 HTML 页面，它使用了 Tailwind CDN
```
**Agent 处理流程：**
1. 读取 HTML 文件，检测到 CDN 引用
2. 触发 Tailwind Builder Skill
3. 执行构建脚本
4. 替换 HTML 中的 CDN 引用
5. 显示性能提升数据
**输出结果：**
```
✅ 环境检查通过：Node.js v22.22.0, npm v10.9.4
✅ 项目初始化完成
✅ Tailwind CSS v3.4.0 已安装
✅ 配置文件生成完成
✅ CSS 编译完成：output.css (19.2KB)
✅ HTML 更新完成：已替换 CDN 引用
─────────────────────────────────────────────
📊 性能提升
─────────────────────────────────────────────
构建模式：标准构建
输出大小：19.2KB
CDN 大小：~3.5MB
提升比例：98.5%
加载时间减少：约 2.5 秒（国内网络）
```
#### 场景 2：监听模式（开发时）
**用户输入：**
```
我正在开发这个页面，帮我开启监听模式，这样修改后会自动编译
```
**Agent 处理流程：**
1. 使用 `--watch` 参数启动脚本
2. 保持监听进程运行
3. 用户修改 HTML 时自动重新编译
**输出结果：**
```
✅ 启动监听模式
⏳ 监听文件：index.html, input.css
🔄 任何修改都会自动触发重新编译
─────────────────────────────────────────────
提示：按 Ctrl+C 停止监听
─────────────────────────────────────────────
[Watching for file changes...]
```
#### 场景 3：生产环境构建（压缩）
**用户输入：**
```
帮我构建生产版本，要压缩 CSS
```
**Agent 处理流程：**
1. 使用 `--minify` 参数
2. 生成压缩后的 CSS
3. 备份原始 HTML（可选）
**输出结果：**
```
✅ 构建生产版本（压缩模式）
✅ CSS 编译完成：output.css (8.1KB)
✅ HTML 备份完成：index.html.backup.20260318-105823
✅ HTML 更新完成：已替换 CDN 引用
─────────────────────────────────────────────
📊 性能提升
─────────────────────────────────────────────
构建模式：压缩构建
输出大小：8.1KB
CDN 大小：~3.5MB
提升比例：99.8%
加载时间减少：约 2.8 秒（国内网络）
```
---
### 关键价值
✅ **自动化**：一键完成所有配置和编译步骤
✅ **智能化**：自动检测 CDN 引用并替换
✅ **灵活性**：支持标准、监听、压缩三种模式
✅ **性能提升**：加载速度提升 98%+
✅ **开发体验**：监听模式实现实时编译
---
## 案例三：Chart.js Localizer 技能
### 需求背景
**问题场景：**
在开发数据可视化项目时，开发者经常使用 Chart.js 库来创建图表。
**开发阶段：**
- 为了快速开发，使用 CDN 引入 Chart.js
- 从 cdn.jsdelivr.net 加载 chart.js 文件（约 200KB）
**生产部署时：**
- CDN 在国内访问不稳定，影响页面加载速度
- 某些企业网络环境不允许访问外部 CDN
- 需要将 CDN 文件本地化
**传统解决方案的问题：**
1. 手动从 unpkg.com 下载 chart.js
2. 手动计算相对路径
3. 手动更新所有 HTML 文件中的 CDN 引用
4. 多级目录结构下路径计算复杂
5. 容易遗漏某些 HTML 文件
**AI 原生应用的解决方案：**
- 自然语言描述需求
- 自动扫描项目中所有 HTML 文件
- 下载指定版本的 Chart.js
- 自动计算相对路径并更新所有引用
---
### 技术方案
#### 架构设计
```
┌─────────────────────────────────────────────────┐
│ 用户交互层 │
│ "帮我将 Chart.js CDN 改为本地文件" │
└─────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────┐
│ Agent 理解层 │
│ 1. 理解需求（本地化 Chart.js） │
│ 2. 提取参数（版本号、目录） │
│ 3. 触发 Chart.js Localizer Skill │
└─────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────┐
│ Skill 执行层 │
│ ├─ 扫描项目中所有 HTML 文件 │
│ ├─ 下载 Chart.js 到指定目录 │
│ ├─ 计算相对路径 │
│ └─ 更新所有 HTML 文件的引用 │
└─────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────┐
│ Shell 脚本层 │
│ chartjs-localize.sh │
│ ├─ HTML 扫描逻辑 │
│ ├─ 文件下载逻辑 │
│ └─ 路径计算和替换逻辑 │
└─────────────────────────────────────────────────┘
```
#### Skill 触发条件
```markdown
# SKILL.md Frontmatter
---
name: chartjs-localizer
description: 将 HTML 中的 Chart.js CDN 引用替换为本地文件，下载 chart.js 到项目目录并更新所有 HTML 引用
read_when:
- 用户提到 Chart.js CDN
- 用户需要本地化 chart.js 依赖
- 用户提到 "cdn.jsdelivr.net/npm/chart.js"
- 用户提到 "chart.js 本地化"
---
```
---
### 实现细节
#### 工作流程
```bash
# Step 1: 扫描 HTML 文件
scan_html_files() {
local dir=$1
# 查找所有包含 chart.js CDN 引用的 HTML 文件
grep -rl "cdn\.jsdelivr\.net/npm/chart\.js" "$dir" | while read -r file; do
echo "$file"
done
}
# Step 2: 下载 Chart.js
download_chartjs() {
local version=$1
local output_dir=$2
local url="https://unpkg.com/chart.js@${version}/dist/chart.umd.min.js"
echo "⬇️ 下载 Chart.js v${version}..."
curl -s -o "${output_dir}/chart.min.js" "$url"
if [ -f "${output_dir}/chart.min.js" ]; then
echo "✅ 下载完成：$(du -h "${output_dir}/chart.min.js" | cut -f1)"
else
echo "❌ 下载失败"
exit 1
fi
}
# Step 3: 计算相对路径
calculate_relative_path() {
local html_file=$1
local chartjs_dir=$2
# 使用 Python 计算相对路径
python3 << EOF
import os
html_dir = os.path.dirname("$html_file")
chartjs_dir = "$chartjs_dir"
relative_path = os.path.relpath(chartjs_dir, html_dir)
print(os.path.join(relative_path, "chart.min.js"))
EOF
}
# Step 4: 更新 HTML 引用
update_html_reference() {
local file=$1
local relative_path=$2
# 替换 CDN 引用为本地路径
sed -i "s|https://cdn\.jsdelivr\.net/npm/chart\.js@[^\"']*|${relative_path}|g" "$file"
echo "✅ 更新完成：$file"
echo " 新路径：${relative_path}"
}
# 主流程
main() {
echo "🔍 扫描 HTML 文件..."
html_files=$(scan_html_files "$PROJECT_DIR")
if [ -z "$html_files" ]; then
echo "❌ 未找到包含 Chart.js CDN 引用的 HTML 文件"
exit 1
fi
echo "✅ 找到 $(echo "$html_files" | wc -l) 个 HTML 文件"
echo ""
echo "⬇️ 下载 Chart.js v${VERSION}..."
download_chartjs "$VERSION" "$OUTPUT_DIR"
echo ""
echo "🔄 更新 HTML 引用..."
echo "$html_files" | while read -r file; do
relative_path=$(calculate_relative_path "$file" "$OUTPUT_DIR")
update_html_reference "$file" "$relative_path"
done
echo ""
echo "✅ 完成！Chart.js 已成功本地化"
}
```
#### 多级目录处理
**目录结构示例：**
```
project/
├── index.html (根目录)
├── pages/
│ ├── dashboard.html (pages/)
│ └── reports/
│ └── analytics.html (pages/reports/)
└── lib/ (Chart.js 存放目录)
└── chart.min.js
```
**相对路径计算结果：**
- `index.html` → `lib/chart.min.js`
- `pages/dashboard.html` → `../lib/chart.min.js`
- `pages/reports/analytics.html` → `../../lib/chart.min.js`
---
### 使用示例
#### 场景 1：标准本地化
**用户输入：**
```
帮我将 Chart.js CDN 改为本地文件
```
**Agent 处理流程：**
1. 扫描项目目录，查找所有包含 Chart.js CDN 的 HTML 文件
2. 下载默认版本的 Chart.js（4.5.1）
3. 将文件保存到项目根目录
4. 计算相对路径并更新所有 HTML 文件
**输出结果：**
```
🔍 扫描 HTML 文件...
✅ 扫描完成：找到 5 个 HTML 文件引用 Chart.js
⬇️ 下载 Chart.js v4.5.1...
✅ 下载完成：208KB
🔄 更新 HTML 引用：
✅ 更新完成：index.html
新路径：./chart.min.js
✅ 更新完成：pages/dashboard.html
新路径：../chart.min.js
✅ 更新完成：pages/reports/analytics.html
新路径：../../chart.min.js
✅ 更新完成：reports/overview.html
新路径：../../chart.min.js
✅ 更新完成：reports/details.html
新路径：../../chart.min.js
─────────────────────────────────────────────
✅ 完成！Chart.js 已成功本地化
─────────────────────────────────────────────
下载版本：4.5.1
文件大小：208KB
更新文件：5 个
```
#### 场景 2：指定版本
**用户输入：**
```
帮我下载 Chart.js 4.4.1 版本，替换项目中的 CDN
```
**Agent 处理流程：**
1. 使用 `-v 4.4.1` 参数指定版本
2. 下载指定版本的 Chart.js
3. 更新所有引用
**输出结果：**
```
🔍 扫描 HTML 文件...
✅ 扫描完成：找到 3 个 HTML 文件引用 Chart.js
⬇️ 下载 Chart.js v4.4.1...
✅ 下载完成：205KB
🔄 更新 HTML 引用：
✅ 更新完成：index.html
新路径：./chart.min.js
✅ 更新完成：stats.html
新路径：./chart.min.js
✅ 更新完成：charts.html
新路径：./chart.min.js
─────────────────────────────────────────────
✅ 完成！Chart.js v4.4.1 已成功本地化
─────────────────────────────────────────────
```
#### 场景 3：自定义目录
**用户输入：**
```
帮我将 Chart.js 下载到 lib 目录，并更新所有引用
```
**Agent 处理流程：**
1. 创建 `lib` 目录（如果不存在）
2. 下载 Chart.js 到 `lib/chart.min.js`
3. 更新所有引用，计算正确的相对路径
**输出结果：**
```
🔍 扫描 HTML 文件...
✅ 扫描完成：找到 4 个 HTML 文件引用 Chart.js
⬇️ 下载 Chart.js v4.5.1...
✅ 下载完成：208KB
📍 保存位置：lib/chart.min.js
🔄 更新 HTML 引用：
✅ 更新完成：index.html
新路径：lib/chart.min.js
✅ 更新完成：dashboard.html
新路径：../lib/chart.min.js
✅ 更新完成：analytics/charts.html
新路径：../../lib/chart.min.js
✅ 更新完成：reports/summary.html
新路径：../lib/chart.min.js
─────────────────────────────────────────────
✅ 完成！Chart.js 已成功本地化到 lib 目录
─────────────────────────────────────────────
```
---
### 关键价值
✅ **自动化**：一键完成扫描、下载、更新所有步骤
✅ **智能路径计算**：自动处理多级目录结构
✅ **全面覆盖**：确保不遗漏任何 HTML 文件
✅ **版本控制**：支持指定 Chart.js 版本
✅ **灵活性**：可自定义下载目录
---
## 总结
### 三个案例的共同特点
1. **自然语言交互**：用户无需学习复杂的 API 或命令行工具
2. **自动化流程**：多步骤任务一键完成，减少人为错误
3. **智能决策**：Agent 自动理解需求，选择合适的工具和参数
4. **结果可视化**：清晰的输出格式，方便用户理解结果
5. **可扩展性**：易于添加新的功能和场景
### MCP 工具 vs Skills 的选择
| 特性 | MCP 工具 | Skills |
|------|---------|--------|
| **适用场景** | 调用外部 API、数据库、服务 | 封装特定领域的工作流 |
| **复杂度** | 相对简单（单一功能） | 可以包含多个步骤 |
| **可复用性** | 跨项目复用 | 跨项目、跨用户复用 |
| **维护成本** | 低 | 中等 |
| **示例** | FastLog 日志查询 | Tailwind Builder、Chart.js Localizer |
### 最佳实践建议
**使用 MCP 工具时：**
- 保持工具的单一职责
- 参数设计要清晰、简洁
- 提供详细的描述信息
- 错误处理要完善
**使用 Skills 时：**
- 遵循 AgentSkills 规范
- 保持 SKILL.md 简洁（<150 行）
- 使用 references/ 分割详细内容
- 脚本要经过充分测试
---
## 附录：案例文件清单
### FastLog 案例
- `fastlog/SKILL.md` - 技能说明文档
- `fastlog/scripts/query_logs.py` - 日志查询脚本
- `fastlog/scripts/query_pyroscope.py` - 性能分析脚本
- `fastlog/scripts/config.json` - API 配置文件
- `fastlog/scripts/requirements.txt` - Python 依赖
### Tailwind Builder 案例
- `tailwind-builder/SKILL.md` - 技能说明文档（需重构）
- `tailwind-builder/scripts/tailwind-build.sh` - 主构建脚本（待添加）
- `tailwind-builder/scripts/tailwind-watch.sh` - 监听模式脚本（待添加）
### Chart.js Localizer 案例
- `chartjs-localizer/SKILL.md` - 技能说明文档
- `chartjs-localizer/scripts/chartjs-localize.sh` - 本地化脚本（待移入 scripts/）
---
*本案例展示文档由 AI 助手达达自动生成* ⚡