世博资产mcp
本地MCP服务器，用于生成和转换Expo资产。还包括一个CLI脚本，可以直接从终端运行它。
______________________________________________________________________
项目结构
src/
├── expo-assets.ts ← reusable logic (asset definitions, image transformations)
├── index.ts ← MCP server
└── generate.ts ← CLI script
dist/ ← compiled output (generated with npm run build)______________________________________________________________________
安装
npm install
npm run build______________________________________________________________________
Web生成器
这个工具的纯JavaScript版本可以直接在浏览器中使用！打开 index.html 或访问 访问具有以下功能的丰富GUI：
- 交互式裁剪：以1:1的纵横比将图标完美居中。
- 实时图标预览：实时查看您的图标在iOS（方形）和Android（圆形）形状中的外观，背景为透明或实心。
- 高级横幅：通过将世博会资产（如Splash、Icon）放置在自定义分辨率内单独下载，生成App Store模型或促销横幅。
- 自定义ZIP资源：轻松地将额外的自定义大小的资源添加到最终的ZIP中。
- 双语界面：在英语和西班牙语之间无缝切换(
index_es.html).
无需后端或服务器；所有内容都在浏览器中本地处理！
______________________________________________________________________
CLI使用情况
从源图像生成所有Expo资源。在名为的图像旁边创建一个文件夹 -assets/.
node dist/generate.js [options]选项：
| 标志 | 描述 |
|---|---|
--bg "#rrggbb" | 背景颜色。省略透明 |
--no-overwrite | 跳过已存在的文件 |
示例：
# Transparent background
node dist/generate.js /Users/me/logo.png
# With background color
node dist/generate.js /Users/me/logo.png --bg "#E6F4FE"输出：
/Users/me/logo-assets/
├── icon.png
├── android-icon-foreground.png
├── android-icon-background.png
├── android-icon-monochrome.png
├── splash-icon.png
├── favicon.png
├── react-logo.png
├── react-logo@2x.png
├── react-logo@3x.png
└── partial-react-logo.png______________________________________________________________________
MCP使用（克劳德桌面）
复制 claude-config.example.json 到 claude-config.json，填写正确的路径，然后将其合并到：
~/Library/Application Support/Claude/claude_desktop_config.json
{
"mcpServers": {
"expo-assets-mcp": {
"command": "node",
"args": ["/absolute/path/to/expo-assets-mcp/dist/index.js"]
}
}
}使用MCP检查员进行测试
npx @modelcontextprotocol/inspector node dist/index.js______________________________________________________________________
可用的MCP工具
generate_expo_icons
将所有10个Expo资产生成为一个 assets/images/ 文件夹。
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
input_image | string | -- | 源映像的绝对路径 |
output_dir | string | -- | 世博项目的绝对路径 assets/images/ 文件夹 |
background_color | string | 透明 | 十六进制背景颜色（例如。 #E6F4FE).省略透明。 |
overwrite | 布尔值 | true | 覆盖现有文件 |
proportions | object | 见表 | 每项资产的内容比例（0.1-1.0） |
比例：
| 关键字 | 资产 | 默认值 |
|---|---|---|
icon | icon.png | 0.7 |
android_adaptive | android-icon-foreground/background.png | 0.33 |
android_monochrome | android-icon-monochrome.png | 0.33 |
splash | splash-icon.png | 0.5 |
favicon | favicon.png | 0.8 |
react_logo | react-logo.png + @2x + @3x | 0.8 |
partial_logo | partial-react-logo.png | 0.5 |
______________________________________________________________________
transform_image
将图像转换为具有可选内容比例和背景的特定尺寸。
| 参数 | 类型 | 默认值 | 说明 | ||
|---|---|---|---|---|---|
input_image | string | -- | 源图像的路径（PNG、JPEG、WebP、TIFF、AVIF） | ||
output_path | string | -- | 包括文件名和扩展名的完整输出路径（例如。 /path/result.webp) | ||
width | number | -- | 输出画布宽度（像素） | ||
height | number | -- | 输出画布高度（像素） | ||
proportion | 编号 | 1 | 内容填充画布的多少（0.1-1.0，1=填充所有内容） | ||
background_color | string | 透明 | 画布背景颜色（十六进制）。省略透明。 | ||
format | `png\ | jpeg\ | webp` | png | 输出 文件格式 |
quality | 编号 | 95 | 仅适用于jpeg/webp的压缩质量（1=最低，100=最高） |
______________________________________________________________________
convert_svg
按指定尺寸将SVG文件转换为PNG、JPEG或WebP。
| 参数 | 类型 | 默认值 | 说明 | ||
|---|---|---|---|---|---|
input_svg | string | -- | 源SVG文件的绝对路径 | ||
output_path | string | -- | 包括文件名和扩展名的完整输出路径 | ||
width | number | -- | 输出宽度（像素） | ||
height | number | proportional | 输出高度（像素）。省略从宽度按比例缩放。 | ||
format | `png\ | jpeg\ | webp` | png | 输出文件格式 |
background_color | string | 透明 | 背景颜色（十六进制）。省略透明（仅PNG）。 | ||
quality | 编号 | 95 | 仅适用于jpeg/webp的压缩质量（1=最低，100=最高） |
______________________________________________________________________
已生成资产
Expo会自动处理这10个文件中所有特定于平台的大小调整。
源图像要求
- 格式： 便携式网络图形
- 最小尺寸： 1024×1024像素
- 背景 透明 （推荐）
资产表
| 文件 | 画布 | 背景 | 转换 | app.json键 |
|---|---|---|---|---|
icon.png | 1024×1024 | background_color 或透明 | contain，居中，道具0.7 | expo.icon |
android-icon-foreground.png | 512×512 | 始终透明 | contain，居中，道具0.33 | android.adaptiveIcon.foregroundImage |
android-icon-background.png | 512×512 | background_color 或透明 | contain，居中，道具0.33 | android.adaptiveIcon.backgroundImage |
android-icon-monochrome.png | 432×432 | 始终透明 | 白色剪影，道具0.33 | android.adaptiveIcon.monochromeImage |
splash-icon.png | 1024×1024 | 始终透明 | contain，居中，道具0.5 | expo-splash-screen > image |
favicon.png | 48×48 | 始终透明 | contain，居中，支柱0.8 | web.favicon |
react-logo.png | 100×100 | 始终透明 | contain居中，道具0.8 | 装饰UI@1x |
react-logo@2x.png | 200×200 | 始终透明 | contain居中，道具0.8 | 装饰性UI@2x |
react-logo@3x.png | 300×300 | 始终透明 | contain，居中，道具0.8 | 装饰UI@3x |
partial-react-logo.png | 518×316 | 始终透明 | 顶部右侧裁剪，道具0.5 | 装饰性UI局部 |
特殊转换
android-icon-monochrome.png --白色轮廓
每个不透明像素都转换为纯白色。Android 13+使用此功能 *主题图标*，用系统颜色主题为轮廓着色。
pixel (r, g, b, a > 10) → (255, 255, 255, a)
pixel (r, g, b, a ≤ 10) → unchanged (transparent)partial-react-logo.png --剖面裁剪
源图像的一部分被裁剪而没有失真：
- 水平： 右侧（端部）
- 垂直： 从顶部（开始）
- 该部分按比例缩放，以适应518×316画布
partial_logo: 0.5 → 右半部· partial_logo: 0.33 → 右第三
安卓自适应图标——安全区
将重要内容保留在 66%中心 （512×512画布上为338×338像素），以避免被任何Android启动器形状剪切。
┌─────────────────┐ 512×512
│ │
│ ┌───────────┐ │
│ │ safe │ │ 338×338 (66%)
│ │ zone │ │
│ └───────────┘ │
│ │
└─────────────────┘______________________________________________________________________
脚本
npm run build # compile TypeScript
npm start # start MCP server
npm run dev # run with tsx (no compile needed)