Un bloc de bocetos en el navegador para diseñar pantallas de apps con Material 3 Expressive y convertir los diseños en prompts para herramientas de programación con IA.
9,5 mil1 milTypeScriptMITActualizado hace 4 días
Pawandeep-prog/Snapframe
Creador web de capturas que convierte las pantallas de una app en imágenes listas para promocionarla en Play Store y App Store, con marcos de dispositivos y texto.
Alternativa open source a:Previewed
- Estrellas
- 293
- Forks
- 34
- Issues abiertos
- 8
- Último commit
- hace 4 meses
¿Qué es?
Snapframe es un editor en el navegador para crear capturas de pantalla para tiendas de aplicaciones. Desarrolladores y diseñadores pueden colocar las pantallas de su app dentro de maquetas de dispositivos, como marcos de iPhone, añadir bloques de texto y aplicar plantillas o estilos personalizados a un conjunto completo de diapositivas.
Cada diapositiva puede tener su propio tema, o se puede aplicar un tema global a todo el proyecto. Los cambios se reflejan en tiempo real y el historial de deshacer/rehacer permite iterar sin perder el trabajo. Las capturas terminadas se pueden exportar como PNG o JPG, o como un archivo ZIP que contiene todas las resoluciones.
El proyecto también incluye un editor JSON con una vista previa en vivo, en paralelo. Puedes pegar el JSON de un proyecto, editarlo directamente o pedirle a una herramienta de IA que genere diapositivas y pegar el resultado. La app se ejecuta localmente con npm y hay una demo en vivo alojada en GitHub Pages. Chrome es totalmente compatible; Firefox tiene problemas de renderizado conocidos.
Funciones clave
- 01Marcos de dispositivos, como maquetas de iPhone, para mostrar las pantallas de la app en contexto.
- 02Temas por diapositiva o para todo el proyecto, con estilos seleccionados y personalizados.
- 03Bloques de texto con tipografía y posición ajustables.
- 04Vista previa en tiempo real con historial de deshacer/rehacer.
- 05Exportación a PNG, JPG o un archivo ZIP con todas las resoluciones.
- 06Editor JSON con vista previa en vivo para crear conjuntos de diapositivas mediante código.
Casos de uso
- Preparar conjuntos de capturas para Play Store o App Store para el lanzamiento de una app.
- Crear imágenes promocionales para una app sin una herramienta de diseño específica.
- Generar conjuntos de diapositivas con un asistente de IA y perfeccionarlos visualmente.
Inicio rápido
- 1
Clona el repositorio
git clone https://github.com/Pawandeep-prog/Snapframe.git - 2
Entra en la carpeta del proyecto
cd Snapframe - 3
Instala las dependencias
npm install - 4
Inicia el servidor de desarrollo y abre http://localhost:5173
npm run dev
Antes de usarlo
- Firefox tiene problemas de renderizado conocidos, por lo que el navegador compatible es Chrome.
Temas
Preguntas frecuentes
- ¿Qué es Snapframe?
- Creador web de capturas que convierte las pantallas de una app en imágenes listas para promocionarla en Play Store y App Store, con marcos de dispositivos y texto. Snapframe es un editor en el navegador para crear capturas de pantalla para tiendas de aplicaciones. Desarrolladores y diseñadores pueden colocar las pantallas de su app dentro de maquetas de dispositivos, como marcos de iPhone, añadir bloques de texto y aplicar plantillas o estilos personalizados a un conjunto completo de diapositivas.
- ¿Snapframe es gratuito? ¿Qué licencia tiene?
- Snapframe es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
- ¿Snapframe sigue mantenido?
- Actualizado en los últimos 6 meses. El último commit de Snapframe fue el 1 jul 2026.
- ¿Para qué puedo usar Snapframe?
- Preparar conjuntos de capturas para Play Store o App Store para el lanzamiento de una app. Crear imágenes promocionales para una app sin una herramienta de diseño específica. Generar conjuntos de diapositivas con un asistente de IA y perfeccionarlos visualmente.
- ¿Cómo se instala Snapframe?
- Clona el repositorio: git clone https://github.com/Pawandeep-prog/Snapframe.git Entra en la carpeta del proyecto: cd Snapframe Instala las dependencias: npm install Inicia el servidor de desarrollo y abre http://localhost:5173: npm run dev
- ¿Dónde consigo Snapframe?
- El código fuente y las instrucciones de instalación están en GitHub: https://github.com/Pawandeep-prog/Snapframe
Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.
Proyectos relacionados
Reproductor de música en TypeScript centrado en letras animadas a pantalla completa, compatible con NetEase, QQ, Kugou, Navidrome y bibliotecas locales.
8,1 mil840TypeScriptAGPL-3.0Actualizado ayer
Editor de video multipista que funciona completamente en el navegador, con almacenamiento local de medios, efectos WebGPU y exportación desde el navegador.
2,3 mil354TypeScriptMITActualizado anteayer
Un kit de herramientas basado en React donde los agentes de IA crean presentaciones como aplicaciones web interactivas y adaptables, en lugar de diapositivas estáticas.
1,1 mil137TypeScriptMITActualizado hace 3 meses
Aplicación web autoalojada que audita hasta 500 páginas de un sitio web con 74 métricas de SEO on-page, usando Firecrawl y DataForSEO.
26957TypeScriptMITActualizado hace 5 meses
Aplicación web para practicar mecanografía que combina la memorización de vocabulario en inglés con el entrenamiento de la memoria muscular al teclear, pensada para quienes trabajan en inglés con un teclado.
23,4 mil2,7 milTypeScriptGPL-3.0Actualizado el mes pasado