内容
# 商店截图生成工具
**一键生成适用于应用商店和Google Play的截图，由您的AI代理提供支持。**
MCP（模型上下文协议）服务器，能够将原始的应用截图转化为精致、像素完美的商店列表视觉效果：设备框架、醒目的利益驱动标题、品牌颜色和适用于iOS和Android的确切商店尺寸。您的代理编写文案，storeshots渲染像素。
<!-- hero showcase image: assets/showcase.png -->
<p align="center">
<img src="assets/showcase.png" alt="生成的应用商店和Google Play截图展示" width="100%" />
</p>
<p align="center">
<a href="https://www.npmjs.com/package/storeshots-mcp"><img src="https://img.shields.io/npm/v/storeshots-mcp?color=cb3837&label=npm" alt="npm版本" /></a>
<a href="https://github.com/mtbun/storeshots-mcp/actions/workflows/ci.yml"><img src="https://github.com/mtbun/storeshots-mcp/actions/workflows/ci.yml/badge.svg" alt="CI状态" /></a>
<img src="https://img.shields.io/badge/node-%3E%3D18-brightgreen" alt="node版本" />
<img src="https://img.shields.io/badge/license-MIT-blue" alt="MIT许可证" />
<img src="https://img.shields.io/badge/MCP-stdio-8A2BE2" alt="MCP_stdio" />
</p>
## 为什么选择storeshots
制作商店截图是发布应用最不有趣的部分。设计工具是手动的，截图SaaS产品是付费的且模板锁定，而fastlane frameit仅支持iOS设备框架，没有任何营销层。
storeshots采取了不同的方法。它将工作分成两部分：
| 代理（Claude, Cursor等） | 服务器（storeshots） |
|---|---|
| 读取代码库，找到优点 | 渲染文本，像素完美的排版 |
| 编写有力的标题 | 组合设备框架和背景 |
| 将文案翻译成任何语言 | 强制执行确切的商店尺寸 |
| 选择哪张屏幕来展示哪个功能 | 输出确定性的、可审查的PNG |
无需API密钥，无需账户，无需图像生成成本。所有内容都在本地确定性地渲染，因此相同的输入始终产生相同的输出。
## 快速开始
### Claude 代码
```bash
claude mcp add storeshots -- npx -y storeshots-mcp
```
### Claude 桌面版 / Cursor / Windsurf / Antigravity / VS Code
在您的MCP配置文件（`claude_desktop_config.json`、`.cursor/mcp.json`等）中添加：
```json
{
"mcpServers": {
"storeshots": {
"command": "npx",
"args": ["-y", "storeshots-mcp"]
}
}
}
```
### Codex CLI
在`~/.codex/config.toml`中添加：
```toml
[mcp_servers.storeshots]
command = "npx"
args = ["-y", "storeshots-mcp"]
```
storeshots-mcp是一个纯粹的stdio MCP服务器，没有特定的客户端行为，因此它可以在任何支持MCP的代理中运行：Claude Code、Claude Desktop、Cursor、Windsurf、Antigravity、Codex、Gemini CLI、VS Code、Zed，以及下周发布的其他产品。
如果您更喜欢没有服务器？相同的引擎可用作CLI：
```bash
npx storeshots compose --preset ios-phone --bg "#E31837" \
--verb "TRACK" --desc "YOUR DAILY MOOD" \
--screenshot ./raw/home.png --output ./out/en_01.png
```
然后直接询问：
> “将./raw-shots中的截图取出并生成完整的App Store和Play Store截图集。品牌颜色为#E31837，每个平台6张截图，英文和土耳其语。”
## 您将获得
- **5种预设**，具有确切的商店所需尺寸：
| 预设 | 商店 | 尺寸 |
|---|---|---|
| `ios-phone` | App Store，iPhone 6.9" | 1320 × 2868 |
| `android-phone` | Google Play，手机 | 1080 × 1920 |
| `ipad-13` | App Store，iPad Pro 13" | 2064 × 2752 |
| `android-tablet` | Google Play，10" 平板电脑 | 1600 × 2560 |
| `play-feature-graphic` | Google Play，功能图形（横向标题） | 1024 × 500 |
- **设备框架**，适用于iPhone（动态岛）、Pixel风格的Android（打孔）、iPad和Android平板电脑，按精确比例绘制
- **利益优先的标题布局**：一个粗体动词加上一个短描述，大小和位置适合商店货架影响
- **智能对比度**：根据背景亮度，文本颜色在浅色和深色之间切换
- **完整的Unicode排版**：捆绑的OFL许可字体正确渲染İ、Ğ、Ş、Ü、ß和重音字符，全部大写
- **展示合成器**：一张完整的预览图片集，准备好用于您的仓库、推文或客户端演示
## 工具
| 工具 | 描述 |
|---|---|
| `list_presets` | 返回所有平台预设的尺寸和布局指标 |
| `compose_screenshot` | 渲染一个截图：背景、设备框架、标题、源图像 |
| `generate_set` | 为一个平台和语言批量渲染一个完整的有序集 |
| `create_showcase` | 从生成的截图中合成预览条带 |
| `validate_screenshot` | 检查图像是否符合商店尺寸和格式要求 |
每个工具返回文件路径和结构化摘要，以便代理可以审查输出并迭代。
## 多语言集
翻译发生在代理中，而不是服务器中。生成您的英文集，然后要求其他语言：
> “现在用土耳其语和德语生成相同的集合。”
代理用习语翻译标题，storeshots用正确的语言特定大小写和特殊字符渲染它们。输出遵循干净的约定：
```
output/
en/ios-phone/en_01.png … en_06.png
tr/ios-phone/tr_01.png … tr_06.png
de/android-phone/de_01.png … de_06.png
```
## Claude Code技能（可选）
MCP工具本身就可以使用，但捆绑的技能添加了引导工作流：从代码库中发现优点，在渲染前批准标题，每个语言的集合和上传指导。使用以下方法安装：
```bash
mkdir -p ~/.claude/skills/storeshots
curl -o ~/.claude/skills/storeshots/SKILL.md \
https://raw.githubusercontent.com/mtbun/storeshots-mcp/main/skill/SKILL.md
```
然后询问Claude Code“此应用的商店截图”，它会走完整的流程。
## 设计原则
1. **确定性**：渲染路径中没有AI图像生成。相同的输入，每次都产生相同的像素。
2. **零配置**：无需API密钥，无需注册，完全离线工作。
3. **商店正确构建**：输出尺寸被强制执行，而不是建议。
4. **代理原生**：工具公开结构化数据，文案智能保留在模型中。
## 路线图
- [x] Claude Code技能层：基于MCP工具的引导利益发现工作流
- [x] Play Store功能图形预设（1024 × 500）
- [ ] 布局变体：设备底部、设备倾斜、文本底部
- [ ] 自定义设备框架支持
- [ ] 全景集（一张背景贯穿多个截图）
## 贡献
欢迎提出问题和PR。有关架构和约定，请参见[AGENTS.md](AGENTS.md)；它既适用于人类贡献者，也适用于编码代理。
## 许可证
[MIT](LICENSE)
