logoloom

LogoLoom

一条命令。完整品牌套件。零成本。 不用再为 Logo 来回切换 5 个工具。

问题所在

为你的个人项目制作 Logo，不应该花费 $96（Looka），也不该要求你在 Canva、favicon 生成器、OG 图像制作工具和手动导出 PNG 之间来回切换。Logo 是独立开发者发布项目时最大的阻碍——不是因为它很难，而是因为工具太难用。

解决方案

AI 将你的 Logo 设计为简洁的 SVG 代码（而不是杂乱的自动描摹路径），然后进一步处理，生成完整的品牌套件——31 个文件，一条命令即可完成：

• SVG — 完整 Logo、仅图标、仅字标（浅色／深色／单色变体）
• PNG — 10 种标准尺寸（16px favicon → 1024px App Store）
• ICO — 浏览器 favicon
• WebP — 针对 Web 优化
• 社交媒体 — OG 图像（1200×630）、GitHub 预览图（1280×640）、Twitter 横幅（1500×500）
• BRAND.md — 颜色代码、字体排版、使用指南

API 成本为零。所有操作都在本地运行。永久免费。

为什么不使用现有工具？

工具	价格	SVG？	完整品牌套件？	MCP？	本地运行？
LogoLoom	免费	✅ 简洁代码	✅ 31 个文件	✅	✅
Looka	$65-96	✅	✅（模板）	❌	❌
Brandmark	$35-95	✅	✅（$95）	❌	❌
Canva	SVG 需 $15/mo	免费版仅支持栅格图像	✅（Pro）	❌	❌
Recraft V3	免费版不可商用	✅	❌	❌	❌
SVGMaker MCP	点数（$）	✅ 云端	❌	✅	❌

功能

1. AI 设计你的 Logo — Claude 阅读你的代码库，了解你的品牌并编写 SVG
2. 文本 → 路径 — 将 <text> 转换为 <path>，确保字体能在任何地方正确显示（opentype.js）
3. 优化 — 清理 SVG、移除冗余内容、压缩路径（SVGO）
4. 导出品牌套件 — 3 类共 31 个文件（完整 Logo + 仅图标 + 仅字标）×（浅色／深色／单色）+ 所有 PNG 尺寸 + 社交媒体尺寸 + BRAND.md

快速开始

npx @mcpware/logoloom

Claude Code / Cursor .mcp.json

{
  "mcpServers": {
    "logoloom": {
      "command": "npx",
      "args": ["-y", "@mcpware/logoloom"]
    }
  }
}

然后向 Claude 提出请求：“为我的项目设计一个 Logo”

工具

工具	功能
text_to_path	使用字体轮廓将 SVG <text> 元素转换为 <path>。渲染不受字体影响。
optimize_svg	清理并压缩 SVG（缩小 30-60%）。移除元数据、合并路径。
export_brand_kit	导出完整品牌套件：PNG 尺寸、ICO、WebP、OG 图像、单色变体、BRAND.md。
image_to_svg	将 PNG/JPG 转换为 SVG 矢量图（vtracer）。最适合 Logo 和扁平图形。

输出示例

brand/
├── logo-full-light.svg      # Primary logo
├── logo-full-dark.svg       # Dark mode variant
├── icon-light.svg           # Icon only
├── icon-mono-black.svg      # Single-color (print)
├── icon-mono-white.svg      # White on dark
├── icon-256.png             # Small
├── icon-512.png             # Medium
├── icon-1024.png            # Large (app stores)
├── icon-512.webp            # Web optimized
├── favicon.ico              # Browser favicon
├── favicon-16.png           # 16px favicon
├── favicon-48.png           # 48px favicon
├── og-image.png             # Social share (1200×630)
└── BRAND.md                 # Colors, typography, usage rules

工作原理

You: "Design a logo for mcpware"

Claude:
  1. Reads your README + package.json
  2. Asks brand questions (audience, feel, color)
  3. Generates 6-8 SVG concepts in HTML preview
  4. You pick → Claude iterates → you approve

LogoLoom MCP:
  5. text_to_path → font-independent SVG
  6. optimize_svg → clean, compressed
  7. export_brand_kit → all sizes, all formats, brand guidelines

Output: brand/ folder, ready to use everywhere

为什么不直接使用 Recraft / SVGMaker？

	LogoLoom	Recraft V3	SVGMaker
价格	免费	免费（不可商用）／$10/mo	$8+
商业用途	可以	仅付费版	可以
本地运行	可以	不可以（云端）	不可以（云端）
原生支持 MCP	可以	不可以	可以
完整品牌套件	可以	不可以（仅 SVG）	不可以
感知代码库	可以	不可以	不可以

技术栈

全部开源，全部在本地运行：

• opentype.js — 字体解析、文本 → SVG 路径转换
• SVGO — SVG 优化与压缩
• sharp — SVG → PNG/WebP/ICO 栅格化
• vtracer — 位图 → SVG 矢量化（可选，需要系统安装）

要求

• Node.js 18+
• 对于 image_to_svg：安装 vtracer（cargo install vtracer）或 potrace（apt install potrace）

更多来自 @mcpware 的项目

项目	功能	安装
Instagram MCP	23 个 Instagram Graph API 工具——帖子、评论、私信、快拍、分析	npx @mcpware/instagram-mcp
Claude Code Organizer	用于管理 Claude Code 记忆、技能、MCP 服务和钩子的可视化仪表板	npx @mcpware/claude-code-organizer
UI Annotator	在任意网页上悬停显示标签——AI 可按名称引用元素	npx @mcpware/ui-annotator
Pagecast	通过 MCP 将浏览器会话录制为 GIF 或视频	npx @mcpware/pagecast

许可证

MIT