拒绝机械劳动：我用 Trae + MCP 打造了全自动化的「蓝湖切图流水线」

摘要：

你是否也经历过这样的场景：从蓝湖下载一堆命名随意的中文切图（如"1.图标-线/4.NavBar-关闭.png"），然后手动重命名为英文、压缩图片、上传 CDN、最后再复制链接到代码中？这一套流程繁琐且毫无技术含量。本文将分享如何利用 AI IDE (Trae) 结合 MCP (Model Context Protocol) 协议，构建一个自动化的切图处理 Skill。它能自动下载切图、智能翻译重命名（中文转标准英文）、压缩优化并上传至 COS，并支持自定义上传路径，实现"一键从设计稿到 CDN 链接"的极致体验。

一、问题背景：被切图折磨的日常

在前端开发的工作流中，UI 切图的处理往往是一个被忽视的时间黑洞。

1. 痛点分析

当我们从蓝湖（或其他协作平台）获取切图时，通常面临以下问题：

命名混乱 ：设计师上传的切图往往包含中文、特殊字符、空格，甚至层级目录（例如 1.图标-线/4.NavBar-关闭.png）。直接放入项目会导致路径问题或不仅难以维护。
手动重命名累 ：为了符合代码规范（如 snake_case），我们需要绞尽脑汁把"更多操作"翻译成 more_actions，把"会员特权"翻译成 member_privileges。文件一多，翻译和改名就成了纯体力活。
流程割裂：下载 -> 解压 -> 重命名 -> TinyPNG 压缩 -> 上传对象存储 -> 复制链接。每一步都需要在不同工具间切换。
目录管理混乱：不同项目需要上传到不同的 CDN 目录，手动管理容易出错。

2. 目标

我的目标是创建一个 IDE 内部的 Skill (技能)，只需投喂一个蓝湖链接（并可选指定目标目录），它就能自动完成上述所有步骤，最终直接吐出处理好的 CDN 链接表格。

二、技术选型与架构

为了实现这个自动化流水线，我选择了以下技术栈：

Trae IDE：作为 AI 智能编程环境，负责意图理解和任务编排。
MCP (Model Context Protocol) ：利用开源的 lanhu-mcp 服务，让 AI 能够直接"看懂"蓝湖的项目数据和切图列表。
Python (中间件) ：用于下载切图，并利用 deep-translator 和 python-slugify 进行智能翻译和文件名标准化。
Node.js (后期处理) ：利用 sharp 进行图片压缩，使用 cos-nodejs-sdk-v5 上传至腾讯云 COS。

核心流程图

graph TD A[用户输入蓝湖链接 & 可选路径] --> B(Trae 识别意图); B --> C{是否指定目录?}; C -- 是 --> D[使用用户路径]; C -- 否 --> E[使用默认路径/pages/lanhu]; D & E --> F[调用 lanhu-mcp 获取列表]; F --> G[Python 脚本下载 & 智能重命名]; G --> H[Node.js 脚本压缩 & 上传 COS]; H --> I[生成自定义域名链接]; I --> J[输出 Markdown 表格];

三、核心实现步骤

1. 接入 MCP：打通数据孤岛

首先，我们需要让 AI 能够获取蓝湖的数据。这里使用了 lanhu-mcp 项目。通过配置 MCP Server，Trae 可以直接调用工具函数 lanhu_get_design_slices_info 来获取设计图的详细切图数据（包含下载链接、原始名称等）。

2. 智能下载与重命名 (Python)

这是最关键的一步。为了解决"中文文件名"的问题，我编写了一个 Python 脚本。

关键逻辑：

自动翻译 ：引入 deep-translator 库，调用 Google Translate 接口将中文文件名翻译成英文。
标准化命名 ：引入 python-slugify 库，将翻译后的英文（可能包含空格、大写）转换为标准的 snake_case（下划线分隔小写）格式，并移除特殊字符。
冲突检测 ：使用 Set 记录已存在的文件名，如果翻译后重名（例如两个不同的"返回"图标），自动添加 _1, _2 后缀。

代码片段 (download_slices.py)：

python 复制代码

from deep_translator import GoogleTranslator
from slugify import slugify

def process_filename(original_name, translator, existing_names):
    # 1. 分离扩展名
    name_without_ext = os.path.splitext(original_name)[0]
    ext = os.path.splitext(original_name)[1]
    
    # 2. 智能翻译 (如果是中文)
    if not re.match(r'^[a-zA-Z0-9_\-\.\s]+$', name_without_ext):
        try:
            translated = translator.translate(name_without_ext)
        except Exception:
            translated = name_without_ext
    else:
        translated = name_without_ext
    
    # 3. Slugify 标准化 (转小写，空格变下划线，去特殊符号)
    # 例如: "Member Privileges" -> "member_privileges"
    final_name = slugify(translated, separator='_')
    
    # 4. 冲突解决
    base_name = final_name
    counter = 1
    while final_name in existing_names:
        final_name = f"{base_name}_{counter}"
        counter += 1
    
    existing_names.add(final_name)
    return f"{final_name}{ext}"

3. 图片压缩与动态目录上传 (Node.js)

下载并重命名完成后，使用 Node.js 进行后续处理。为了支持多项目复用，我增加了动态目录参数支持。

关键逻辑：

参数解析 ：使用 yargs 解析命令行参数 --target，支持用户自定义上传目录。
高性能压缩 ：使用 sharp 库对图片进行无损或轻微有损压缩，减小体积。
COS 上传 ：上传到指定 Bucket 的指定目录（默认为 /pages/lanhu/，可被参数覆盖）。
域名替换 ：将默认的 COS 域名替换为我们配置的自定义 CDN 域名 (****.net)。

代码片段 (process_slices.js)：

javascript 复制代码

const argv = yargs(hideBin(process.argv))
  .option('target', {
    alias: 't',
    type: 'string',
    description: 'Target path in COS bucket',
    default: 'pages/lanhu/' // 默认路径
  })
  .argv;

// ...

// 处理目标路径：去除开头的斜杠，确保格式正确
const cleanTarget = argv.target.replace(/^\/+/, '');
const targetKey = path.join(cleanTarget, fileName).replace(/\\/g, '/');

// 读取并压缩
let buffer = await sharp(filePath)
  .toFormat(format, { quality: 80 }) 
  .toBuffer();

// 上传到 COS
await cos.putObject({
  Bucket: process.env.COS_BUCKET,
  Region: process.env.COS_REGION,
  Key: targetKey,
  Body: buffer,
});

// 生成自定义链接
const url = `https://****.net/${targetKey}`;

四、效果验证与使用场景

经过脚本处理，原本杂乱无章的切图瞬间变得井井有条，并且可以灵活应对不同的项目需求。

1. 场景一：标准流程（默认路径）

用户指令："帮我下载这个蓝湖链接的切图"

执行结果：

图片上传至：/pages/lanhu/
文件名：1.图标-线/4.NavBar-关闭.png -> 1_icon_line_4_navbar_close.png

2. 场景二：自定义业务目录（动态路径）

用户指令："下载切图并上传到 /pages/test/"

执行结果：

图片上传至：/pages/test/
文件名：弹窗.png -> pop_up_window.png

3. 最终输出效果

Trae 最终会在对话框中直接返回一个 Markdown 表格，清晰展示处理结果：

Original Name	New Filename	File Path	URL
关闭按钮.png	close_button.png	pages/test/close_button.png	Link
弹窗.png	pop_up_window.png	pages/test/pop_up_window.png	Link
矩形.png	rectangle.png	pages/test/rectangle.png	Link

五、总结与经验

通过这次实践，我深刻体会到了 AI Agent + 工具链 的强大潜力。

自动化是开发体验的第一生产力：原本需要 10-15 分钟的手工切图流程，现在缩短到了 30 秒，而且完全避免了命名错误。
MCP 的连接价值：MCP 协议让 AI 不再只是陪聊，而是真正能够触达我们的业务数据（蓝湖），这是实现自动化的基石。
灵活的意图识别：通过简单的 Prompt 和参数设计，让 Skill 能够理解"上传到指定目录"这样的自然语言指令，极大地提升了工具的复用性。

希望这篇文章能给你带来启发，尝试用手中的工具去优化那些繁琐的日常流程吧！