{"id":"75d0980a-eebf-44f8-819b-75c8e84ddffa","slug":"hyunsang-coder-auto-image","kind":"mcp","name":"auto-image","summary":"Free, open-source App Store screenshot studio — design, localize, and export App Store Connect-ready iPhone/iPad screenshots in the browser. No backend, images never leave your machine.","owner":"Hyunsang-coder","repoUrl":"https://github.com/Hyunsang-coder/auto-image","license":"MIT","licenseTier":"permissive","trust":"community","stars":9,"match":null,"fewStars":false,"format":"mcp","createdAt":"2026-05-28T04:35:57.000Z","addedAt":"2026-10-14T11:22:58.948Z","logoUrl":"https://avatars.githubusercontent.com/u/80999682?u=a3b55c2bae1f4a7ee66e7a50dabfaf5f602daba4&v=4","linkOnly":false,"collection":null,"skillPath":null,"categories":["design-media","browser-web"],"tags":["app-store","app-store-connect","aso","fabricjs","fastlane","localization","react","screenshot-generator"],"runtime":"node","local":true,"cloudCapable":false,"cloudCapability":"unknown","cloudReadyOnPlatform":false,"needsApiKey":false,"reviewed":false,"syncedAt":"2026-10-25T17:14:18.076Z","sample":false,"url":"https://conduits.dev/tools/hyunsang-coder-auto-image","language":"TypeScript","transports":["stdio"],"install":{"npm":"screenshot-studio-mcp"},"requirements":{"env":[],"upstreamMayCharge":false},"tools":null,"readme":"# Screenshot Studio\n\nGenerate a full set of localized App Store / iPad screenshots — device frames, headlines, highlight call-outs, badges, gradients — at exact Apple resolutions, ready to drop into App Store Connect.\n\n**Try it now:** [screenshotstudio.dev](https://screenshotstudio.dev/)\n\n**The idea:** you shouldn't be dragging text boxes around for every language. Let an AI agent build the whole set from your raw simulator screenshots, then open it in the editor and nudge anything you want. Most people let the AI do ~95% and just tweak a headline or two.\n\n**Private by default.** No backend, no API keys, nothing uploaded. Your screenshots never leave your machine — in the Mac app a project is a `.studio.zip` file in your own Documents folder; on the web, images stay in the browser (IndexedDB) and project data in `localStorage`. Use the hosted site, self-host it, or [download the Mac app](https://github.com/Hyunsang-coder/auto-image/releases/latest).\n\n**Guides** (English & Korean): [how to use](https://screenshotstudio.dev/guides/how-to-use.html) · [screenshot sizes](https://screenshotstudio.dev/guides/app-store-screenshot-sizes.html) · [localization](https://screenshotstudio.dev/guides/app-store-screenshot-localization.html) · [fastlane upload](https://screenshotstudio.dev/guides/upload-app-store-screenshots-fastlane.html) · [simulator capture](https://screenshotstudio.dev/guides/take-ios-simulator-screenshots.html) · [writing captions](https://screenshotstudio.dev/guides/app-store-screenshot-captions.html)\n\n---\n\n## Two ways to use it\n\n### 1. Just ask your AI agent (recommended)\n\nOpen this repo in Claude Code (or any AI coding agent), point it at your raw simulator screenshots, and say what you want — *\"build a localized App Store screenshot set from these shots, English and Korean.\"* That's the whole interaction. You stay in plain language; the agent does everything:\n\n- picks a layout per slide and writes the project **manifest**,\n- names and places your **screenshots**,\n- writes the **captions** in each language,\n- renders the final PNGs and auto-fixes any layout problems (text overlapping the device, anything past the safe margins),\n- optionally packages them for direct App Store Connect upload.\n\nNo terminal, no config — you describe the result and review what comes back. The agent already knows the format from [docs/project-import.md](./docs/project-import.md); it just reads that file and runs the commands for you.\n\nAn **MCP server** ships with the repo ([docs/mcp-server.md](./docs/mcp-server.md)) so the agent drives the whole loop as tool calls instead of shell commands — author → validate → render → *see the result inline* → surgically patch one field → re-render, plus a searchable [Lucide](https://lucide.dev/) icon set it can drop onto slides. Claude Code auto-registers it from the repo's `.mcp.json`; other MCP clients run `npm run mcp`.\n\n<details>\n<summary>The commands the agent runs (in case you want to run them yourself)</summary>\n\n```bash\nnpm run headless:export -- ./my-screenshots ./out --report   # folder → final PNGs + layout check\nnpm run layout:loop      -- ./my-screenshots ./out --write    # auto-fix layout issues and re-render\n```\n\nThe folder holds a `manifest.json`, screenshots named `{number}-{description}.{locale}.png` (e.g. `01-home.en.png`), and a captions CSV/JSON. Full reference: [docs/project-import.md](./docs/project-import.md); the MCP wrapper around these: [docs/mcp-server.md](./docs/mcp-server.md).\n\n</details>\n\n### 2. Want to tweak by hand?\n\nWhen you do want to touch something, ask the agent for an **editable project file** instead of flat PNGs, and it hands you a `.studio.zip`. Open it in the editor (**Open Project File** on the setup step), change whatever you like on the canvas, then export.\n\nThe bundle round-trips *every* edit losslessly — highlights, badges, ornaments, per-language screenshots — so you can bounce between the AI workflow and the visual editor freely. You can also start from scratch in the editor (**Setup → Edit → Localize → Export**) and skip AI entirely. Both paths produce the same App Store Connect-ready output.\n\n**On the Mac app that file *is* the project.** New, imported, or template-started, it lands in `~/Documents/Screenshot Studio/` immediately, and ⌘N / ⌘O / ⌘S / ⇧⌘S, a recent-projects list, and the usual \"save before closing?\" prompt all behave as they do in any Mac app. Unsaved work is mirrored to disk as you type and offered back if the app was quit unexpectedly. An MCP agent drives the same document — `live_save` is its ⌘S ([docs/mcp-server.md](./docs/mcp-server.md), design notes in [docs/document-model.md](./docs/document-model.md)).\n\n---\n\n## From screenshots to the App Store\n\nThe whole pipeline, end to end:\n\n```\nraw simulator shots  →  AI builds manifest + captions  →  render  →  PNGs (or fastlane upload)\n                                                            ↑\n                                            open .studio.zip in editor to tweak\n```\n\nAsk the agent to package for **fastlane** and the export comes out the way fastlane `deliver` expects — complete with an `Appfile`, `Deliverfile`, and `upload.sh` — so the finished screenshots go straight to App Store Connect with a single script. You provide your own App Store Connect credentials in the generated config; they're never part of this app.\n\n---\n\n## What you get\n\n- **iPhone & iPad, correct sizes automatically.** Exports at the exact App Store Connect upload resolutions — iPhone 6.9″ / 6.5″ and iPad 13″ / 11″. The device type is detected from each screenshot's shape; you don't pick it.\n- **Localization without an API.** Translate captions in *your own* AI tool. Export a template, copy the built-in translation prompt, paste both into any LLM, re-import the filled file. Screenshots and captions can both differ per language.\n- **A real visual editor** when you want it — gradients, device frames, headlines, magnified highlight call-outs, badges, emoji accents, device tilt, two-page panoramic spreads.\n- **One-click PNG export** — every slide rendered and packaged as a ZIP grouped by `{locale}/{device}/`, or as a fastlane-ready bundle.\n- **Portable project files** (`.studio.zip`) you can save, reopen, move, back up, and hand back and forth between the CLI and the editor — one file holding the project and every screenshot in it.\n\n---\n\n## The four steps (visual editor)\n\n1. **Setup** — a launcher: continue a recent project, start a new one, import an AI-built folder, or reopen a saved `.studio.zip` and skip ahead.\n2. **Edit** — compose each slide on the canvas.\n3. **Localize** — manage languages, export/import the translation template, bulk-import per-language screenshots.\n4. **Export** — render to PNG and download.\n\nTotal PNGs = `slides × languages`; each slide exports to the one device its screenshot belongs to.\n\n---\n\n## Run it yourself\n\n```bash\nnpm install\nnpm run dev      # landing: http://localhost:5173 · app: http://localhost:5173/app/\n```\n\nBuild a static bundle you can host anywhere (GitHub Pages, Cloudflare Pages, Vercel, Netlify, your own server):\n\n```bash\nnpm run build    # → dist/\nnpm run preview  # preview the production build\n```\n\nThe included GitHub Actions workflow deploys to GitHub Pages on push to `main` (enable Settings → Pages → Source: GitHub Actions). A native macOS build is also available via Tauri:\n\n```bash\nnpm run tauri:dev\nnpm run tauri:build\n```\n\n---\n\n## Under the hood\n\nReact + TypeScript, Vite, Tailwind v4, Fabric.js, Zustand, IndexedDB (`idb-keyval`), JSZip + FileSaver. Everything runs client-side.\n\n```bash\nnpm run lint\nnpm run test:unit\nnpm run test:headless  # smoke-renders a fixture through the headless pipeline\nnpm run test:mcp       # smoke-checks the MCP server's tool wiring\nnpm run test:e2e\n```\n\n## License\n\n[MIT](./LICENSE)\n"}