Snapframe

Pawandeep-progMIT更新放缓

本地生成 Play Store 和 App Store 所需的应用商店截图，免去手动排版和上传素材的麻烦。

Local Screenshot generator for play store and app store

暂无版本292star32fork同步于 2026-11-07 07:33 UTC

应用商店截图截图生成本地生成 TypeScript

对比 GitHub 官网 generator screenshot snapframe

怎么上手

由 README 提炼，执行前请确认

原文

git clone https://github.com/Pawandeep-prog/Snapframe.git
cd Snapframe
npm install
npm run dev

硬件要求按 README 说明

纯浏览器端运行，README 未提及显存或 GPU 要求；本地开发需 Node.js 环境，浏览器建议用 Chrome，Firefox 存在已知渲染问题

下载：源码 zip·GitHub Releases（安装包）本站不镜像安装包

项目说明

由 README 自动翻译提炼

没人工点评？写下你的经验

本地运行的网页版应用商店截图生成器，帮开发者快速做出上架用的营销截图

本地生成 Play Store 和 App Store 所需的应用商店截图，免去手动排版和上传素材的麻烦。

核心能力

提供精选主题模板与 iPhone 等设备外框
支持单页独立主题或全局统一主题
实时预览编辑效果并支持撤销重做
导出 PNG、JPG 或打包 ZIP 多分辨率图
内置 JSON 编辑器，可粘贴 AI 生成的项目配置

容易踩的坑

Firefox 存在已知渲染问题，建议用 Chrome；本地开发服务器默认端口为 5173；JSON 编辑器字段需参照 JSON_SCHEMA.md，格式错误会导致校验失败

内容由模型根据 README 生成，可能不完整或不准确，以官方文档为准。看原文 README

用户点评

登录用户的真实使用记录，可按版本和硬件筛选

共 0 条

还没有人点评。第一个说出真实体验的人最有价值。

README 原文

未翻译

在 GitHub 打开

Snapframe 🖼️

A professional web-based screenshot builder designed for app developers and designers. Create stunning, marketing-ready screenshots for your apps with ease.

Snapframe Demo

✨ Features

Professional Templates: Choose from curated themes or create your own custom styles.
Device Frames: High-quality device mockups (iPhone, etc.) to showcase your app in context.
Per-Slide Theming: Customize individual slides or apply global themes across your entire project.
Dynamic Text Blocks: Add professional typography with customizable layouts and positioning.
Real-time Preview: See your changes instantly as you edit.
High-Quality Export: Export your screenshots as PNG, JPG, or a compressed ZIP archive for all resolutions.
Undo/Redo Support: Full history management to iterate quickly without fear.
Offline First: Fast and responsive UI with local state management.
JSON Editor: Build entire screenshot sets programmatically — paste JSON directly and see a live preview side by side. Perfect for AI-assisted workflows.

🚀 Tech Stack

Framework: React 19
Build Tool: Vite
Styling: Tailwind CSS 4
State Management: Zustand
Icons: Lucide React
Export Engine: html-to-image & jszip

🤖 JSON Editor & AI Workflow

The JSON Editor (toolbar → JSON button) lets you create and edit projects entirely in JSON — no clicking through the UI required.

Split-panel interface:

Left — editable JSON with live validation and a status bar showing error details
Right — live ScreenshotCard preview that updates as you type, with slide navigation for multi-slide projects

Typical AI-powered flow:

Open the JSON Editor and click Copy to grab the current project JSON
Paste it into Claude, ChatGPT, or any AI tool with a prompt like:

"Add 3 slides for a meditation app using a calm green theme"
Paste the AI response back into the editor — the live preview updates instantly
Click Apply & Close to load it into the project, then export as usual

See JSON_SCHEMA.md for the full field reference, all valid values, and copy-paste examples.

⚠️ Browser Compatibility

Browser	Status
Chrome	Fully supported
Firefox	Known rendering issues — investigation in progress

🌐 Live Demo

No install needed — just open it in your browser:

https://pawandeep-prog.github.io/Snapframe/

🛠️ Local Setup

Getting started with Snapframe locally is simple:

Clone the repository:

git clone https://github.com/Pawandeep-prog/Snapframe.git
cd Snapframe

Install dependencies:
```
npm install
```
Run the development server:
```
npm run dev
```
Open in browser: Navigate to http://localhost:5173

📦 Building for Production

To create an optimized production build:

npm run build

The output will be in the dist/ directory.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

Built with ❤️ by Pawandeep Singh