mcpField
L
LogoLab

LogoLab

本地服务
logolab.fabraham.dev媒体与设计22 天前更新
代码仓库访问官网

关于 LogoLab

LogoLab 是面向编码 Agent 的 MCP 服务，可将栅格图像转换为可编辑 SVG，并导出应用图标集。它在本机追踪形状而非嵌入原图，直接读写磁盘文件，不会上传图像。

主要功能

  1. 01将图像追踪为可编辑 SVG
  2. 02导出应用及平台图标集
  3. 03拆分图标网格为独立 SVG
  4. 04转换前检查追踪结果
  5. 05通过 stdio 在本机运行

适用场景

  1. 01从栅格 Logo 制作 favicon
  2. 02生成 PWA 或移动应用图标集
  3. 03将图标网格转换为多个 SVG

MCP 相关

LogoLab 向 MCP 客户端提供图像追踪、图标导出、图标网格拆分和检查工具。它作为本地 stdio 服务运行，并在磁盘上读写文件。

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置
{
  "mcpServers": {
    "blaxzter-logolab": {
      "command": "npx",
      "args": [
        "-y",
        "logolab"
      ]
    }
  }
}
启动命令npx -y logolab

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包
npmlogolab0.8.0

工具

5

收录的工具列表 · 更新于 4 天前

参数类型必填说明
modeenum否auto（默认）会统计颜色数量：纸面上的单色图像采用单色追踪，这对线稿更干净；其他情况采用彩色追踪。auto | color | mono
imagestring是PNG、JPEG、WebP、GIF、BMP 或 SVG 文件的路径。相对路径以工作目录为基准解析。
detailenum否high 会将扁平图稿的栅格上限从 2048 提高到 4096：更清晰，工作量约为 4 倍。balanced | high
strokesboolean否将线稿作为中心线描边进行追踪，并测量描边宽度（生成可重新调整权重的开放和闭合描边路径），而不是将每条线转换为填充轮廓。没有描边的墨迹对象（如圆点、音符符头）仍会转换为填充。在彩色模式下，每条描边会使用其经过区域的颜色绘制。默认关闭。
fidelitynumber否形状美化容差，单位为 px；0 表示禁用圆形／直线吸附。
layeringenum否彩色模式。stacked（默认）：形状绘制在其前方形状的下层——节点更少，颜色之间没有细缝，并且形状在设计工具中保持完整。tiled：形状边缘彼此贴合，其他形状嵌入的位置会留空。两种模式的边缘相同；单色模式会忽略此选项。tiled | stacked
despecklenumber否0 表示保留所有斑点，100 表示强力去斑。默认值为 25。
gradientsenum否auto（默认）会检测真实的颜色渐变。flat 强制使用纯色填充（适用于大多数图标）。rich 强制拟合渐变。auto | flat | rich
smoothingnumber否0 表示边缘清晰且节点密集，100 表示平滑且稀疏。默认值为 50。
flattenOntostring否描摹前，将透明源图合成到此颜色上，例如 "#ffffff"。省略则保留 alpha。（不是卡片颜色，卡片颜色由 appearance.background 设置。）
strokesOnlyboolean否使用 `strokes`：完全不生成填充路径——没有描边的墨迹（如圆点、音符符头、实心形状）也会沿自身中线绘制为圆头描边，宽度与该处形状相同；圆点会绘制为圆头点。不会丢弃任何内容，但非线条形状会被近似处理（方形会变成圆头）。适用于绘图仪和仅描边图标集。默认关闭。
removeBackgroundboolean否移除検出的背景图层，使返回的 SVG 具有透明背景。

详细介绍

logolab

在你的计算机上，通过编码 Agent 将图像转换为简洁的 SVG 和完整的应用图标集。

一个 MCP 服务，封装了 LogoLab 的矢量化工具和图标导出器。模型会生成一张边缘柔和、带有类似 JPEG 光晕的 1024px PNG；必须把它转换成在 16px 尺寸下仍清晰可辨的 favicon。手动处理意味着放大栅格图像，得到模糊的图标。此工具会进行真正的描摹——区域分割和曲线拟合，而非嵌入图像——因此结果可以缩放。

不会上传任何内容。这是一个 stdio 服务：你的 Agent 会将其作为子进程启动，它会读取和写入你磁盘上的文件，并且绝不会打开套接字。

安装

claude mcp add logolab -- npx -y logolab       # Claude Code

或者让它自行写入配置，写入你想要生成图标的项目：

npx -y logolab install                   # .mcp.json here (Claude Code)
npx -y logolab install --scope user      # every project
npx -y logolab install --client cursor   # .cursor/mcp.json
npx -y logolab install --client vscode   # .vscode/mcp.json
npx -y logolab install --client print    # print the JSON, change nothing

其他任何客户端只需要常见的三项信息：

{ "mcpServers": { "logolab": { "command": "npx", "args": ["-y", "logolab"] } } }

然后对你的 Agent 说：“描摹 icon.png，并将 PWA 图标集导出到 public/。”

……或作为技能使用

完全无需服务：一个运行此软件包 CLI 的 Agent Skill。

/plugin install logolab --marketplace Blaxzter/LogoLab   # Claude Code plugin
npx -y logolab install --skill                           # .claude/skills/logolab/ (--scope user: every project)
npx -y logolab install --skills-dir <dir>                # any agent that reads skills from a folder

它所调用的 CLI 也可以手动使用：

npx -y logolab tools                      # the tools, or `tools <name>` for one tool's inputs
npx -y logolab call trace_icon image=icon.png strokes=true

工具

工具功能
make_app_icons图像 → 描摹后的 SVG → 完整图标集。一次调用即可完成所有工作。
trace_icon仅执行矢量化：生成简洁、可编辑的 SVG。
export_icons将现有 SVG/PNG → PWA、favicon、Tauri、Electron、Android、iOS 或扩展图标。
split_icon_sheet将单张画布上的图标网格 → 每个图标生成一个描摹后的 SVG，即可用于图标集：grid 提示、names、normalize: 24、ink: "currentColor"、透明图块。
inspect_icon在描摹前查看描摹器会如何处理图像。

预设：pwa、favicon、web、tauri、electron、android、ios、extension。

无需客户端即可试用

npx -y logolab try ./icon.png ./out

说明

  • 需要 Node ≥ 22.18。
  • WebP 输入需要可选的 sharp 解码器；它是可选的 peer 依赖项，默认不会安装——它会拉取特定平台的 libvips 二进制文件，体积远超此服务的其他部分。如果需要，请运行 npm install sharp，或者转换为 PNG。其他所有格式（PNG、JPEG、GIF、BMP、SVG）开箱即用。
  • 工具调用中的相对路径会相对于你的 Agent 工作目录解析，而非此软件包——因此 ./public/ 指的是你正在处理的项目。

MIT © Frederic Abraham

评论

支持 Markdown

第一次接触 MCP？

从协议是什么，到在客户端里装上第一个服务，这几条回答覆盖了大多数入门问题。

一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。