使用说明
世博资产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 或访问 https://elber-code.github.io/expo-assets-mcp/ 访问具有以下功能的丰富GUI：
- 交互式裁剪：以1:1的纵横比将图标完美居中。
- 实时图标预览：实时查看您的图标在iOS（方形）和Android（圆形）形状中的外观，背景为透明或实心。
- 高级横幅：通过将世博会资产（如Splash、Icon）放置在自定义分辨率内单独下载，生成App Store模型或促销横幅。
- 自定义ZIP资源：轻松地将额外的自定义大小的资源添加到最终的ZIP中。
- 双语界面：在英语和西班牙语之间无缝切换(
index_es.html).
无需后端或服务器；所有内容都在浏览器中本地处理！
CLI使用情况
从源图像生成所有Expo资源。在名为的图像旁边创建一个文件夹 <image>-assets/.
node dist/generate.js <image-path> [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)
