Let your coding agent make the screenshots

The MCP server and CLI run the same rendering engine and the same templates as the editor, headless in Node. Claude Code (or any MCP client) can take simulator screenshots, write the captions and render every store size — no browser needed.

Install

Node.js 20+ and unzip are required. This download contains only Framegrove’s engine and MCP server. No website repository is needed.

curl -fL https://framegrove.bamstudio.dev/downloads/framegrove-mcp.zip -o framegrove-mcp.zip
unzip framegrove-mcp.zip
cd framegrove-mcp/mcp
npm ci
npm run fonts
claude mcp add framegrove -- node "$PWD/server.mjs"

Cursor and other clients: command node, args ["…/mcp/server.mjs"].

View the standalone open-source repository ↗

Tools

list_outputsExact output sizes, family slots and file formats.

inspect_assetsCheck dimensions and PNG transparency before uploading.

list_templatesEvery template with key, categories, theme and screen count.

render_screenshotsTemplate + captions (per language) + screenshot files → PNGs organised as language / size / screen.

build_projectSame input → a project file you can import into the web editor for fine-tuning.

Tell the agent

Take 6 screenshots of the app in the iPhone simulator, put them in store/screenshots/src/,
write the captions in English and Turkish, then use render_screenshots with the "studio-paper" template
for iphone-6.9 and android-phone-tall.

Reusable agent skill

Give your agent the composition workflow as well as the renderer: real screenshots, coherent campaigns, correct Duo slots, truthful copy and visual review.

Download the Framegrove skill ↗ Read the instructions

curl -fL https://framegrove.bamstudio.dev/downloads/framegrove-skill.zip -o framegrove-skill.zip
unzip framegrove-skill.zip -d ./framegrove-skills
# Move framegrove-skills/framegrove into your client's skill folder.
# Codex: ~/.codex/skills/ · Claude Code: .claude/skills/

The skill is separate from the MCP renderer. Install both for the complete workflow. Review any existing skill with the same name before replacing it.

CLI

node cli.mjs templates
node cli.mjs render --template duo-paper-inner --shots ./duo-inner --out ./duo-output
node cli.mjs render --template studio-paper --name "My App" --lang en --lines lines.txt --captions-tr lines.tr.txt \
  --shots ./src --icon icon.png --accent "#12856f" --sizes iphone-6.9,ipad-13,android-phone-tall --out ./out
node cli.mjs project --template studio-paper --name "My App" --lines lines.txt --shots ./src --out my-app.sms.json

Caption file: one screen per line, Headline [highlight] | Subtitle. Add --captions-<lang> for every extra language.