Truepane

Generador de capturas de pantalla de aplicaciones para App Store y Google Play.

GitHub
3
Prueba este MCPPatrocinado

Documentación

Truepane

Truepane es un creador gratuito y de código abierto de conjuntos de capturas de pantalla para App Store y Google Play. Compón y localiza un lanzamiento completo visualmente en el navegador, o entrega el mismo proyecto a un agente de IA a través del servidor MCP incluido. Pruébalo en truepane.dev.

Todo se renderiza a <canvas> en el navegador. Las capturas de pantalla permanecen en tu máquina. Los ayudantes opcionales de IA envían solo el texto que les pides procesar (y, cuando se proporciona, tu clave de API de Groq) a la Edge Function y al proveedor de modelos configurados. Las fuentes de Google también se cargan desde el CDN de Google a menos que uses una fuente del sistema o subida.

Truepane editor: compose slides, tune the background, and prepare store-ready exports

Guías

Por qué existe esto

La mayoría de los generadores de capturas de pantalla componen un PNG pre-renderizado de un teléfono. Este dibuja el marco del dispositivo proceduralmente en un lienzo: cuerpo, bisel, botones, cámara y la máscara de pantalla son toda geometría, no mapas de bits. Esa elección impulsa la mayor parte de lo que hace que la herramienta sea pequeña, nítida y económica de ejecutar.

Características

  • Marcos de dispositivo procedurales en tamaños exactos de tienda: iPhone 6.9″ (1320×2868), iPad 13″ (2064×2752), teléfono Android (1080×2400), tableta Android (1600×2560).
  • Fondos = relleno + forma. Una capa de relleno (sólida, o degradado lineal/radial) más una superposición de forma opcional (anillos, manchas, ondas, puntos, malla, arcos, triángulos, cuadrícula, zigzag, burbujas), cada una con colores independientes. Las formas fluyen continuamente a lo largo de la tira y se reproducen exactamente a partir de una semilla almacenada.
  • Imágenes de fondo personalizadas: sube un telón de fondo y luego controla el desenfoque, el ajuste, la opacidad, el velo y si abarca una diapositiva o la tira completa. Las imágenes importadas se redimensionan localmente a un presupuesto de renderizado práctico.
  • Una familia de formas componible. Junto a los diez estilos fijos, Custom… es una superficie de parámetros en lugar de un ajuste preestablecido: elige un primitivo (anillo, disco, arco, triángulo, barra, mancha) y una disposición (dispersión, cuadrícula, fila, radial, onda), luego ajusta el conteo, el tamaño, el espaciado, la rotación, el grosor del trazo y un desvanecimiento a lo largo de la tira. Es datos, no código — doce números acotados y dos enumeraciones cerradas — por lo que un archivo de proyecto compartido permanece inerte, se renderiza idénticamente para siempre y se puede comparar. Eso lo convierte en la superficie prevista para la variación impulsada por agentes a través de MCP: un agente compone un fondo completando números en lugar de enviar código de dibujo. Sus controles viven detrás de Avanzado en el panel de fondo para que el selector permanezca sin desorden.
  • Herramientas de color: extracción de paleta basada en contenido desde tu captura de pantalla, sugerencias de formas armonizadas, un cuentagotas (API nativa EyeDropper + un respaldo de clic en diapositiva para Safari/Firefox) y ajustes preestablecidos de ciencia del color seleccionados.
  • IA de prompt → estilo (opcional): describe una vibra ("tranquilo, cálido, orgánico") y un modelo de Groq devuelve un estilo + paleta. Trae tu propia clave de Groq o usa el endpoint alojado.
  • Tipografía: fuentes de Google seleccionadas (incl. fuentes del sistema de Apple/Android y Noto multi-escritura + CJK) además de carga de .ttf/.otf/.woff(2) personalizado.
  • Composición flexible: elige un ajuste preestablecido o coloca texto y dispositivos directamente, redimensiona, rota dispositivos de −20° a +20° y arrastra o empuja maquetas en el lienzo.
  • Dispositivos entre diapositivas: extiende un dispositivo sincronizado a través de dos diapositivas adyacentes. Ambas mitades recortadas comparten su captura de pantalla, posición, escala y rotación.
  • Exportación: PNG por diapositiva, una tira PNG horizontal o un ZIP de todo. Además de importación/exportación de proyectos JSON. El editor guarda automáticamente documentos y activos binarios direccionados por contenido en IndexedDB, con un respaldo de localStorage cuando IndexedDB no está disponible.
  • Editor responsivo con historial: diseños de escritorio y móvil específicos, temas claro y oscuro, y un historial de deshacer/rehacer de 100 pasos con atajos de teclado estándar.
  • Proyectos multiplataforma: mantén capturas separadas de iPhone, iPad, teléfono Android y tableta Android en las mismas diapositivas ordenadas. Las capturas de pantalla de localización solo recurren a la captura fuente de su propio objetivo; nunca toman prestada la imagen de otra plataforma.
  • Localización: almacena copia traducida, capturas específicas de localización y fuentes por idioma en un proyecto. La traducción se puede ingresar manualmente, generar a través del ayudante de IA opcional o producir mediante un agente conectado a MCP.
  • Importación masiva con vista previa: elige una carpeta o ZIP, revisa las asignaciones deterministas de objetivo/localización/diapositiva, corrige filas y luego aplica una vez. Las rutas explícitas de target/locale/NN-name.png tienen prioridad; los conflictos nunca se sobrescriben silenciosamente.
  • Verificación previa de lanzamiento compartida: el editor y MCP informan los mismos códigos de problema estables para capturas/traducciones faltantes, respaldos de localización, riesgo de recorte, composición, fuentes y contraste de relleno/texto. Las advertencias son informativas y requieren "exportar de todos modos" en el editor web.
  • Kits de marca locales: guarda tipografía, colores de texto, fondo, fuente personalizada y composición predeterminada para reutilizar. Los kits son archivos portátiles .truepane-brand.json y nunca contienen diapositivas, capturas de pantalla, objetivos, traducciones, credenciales o historial.
  • Superficies de salida flexibles: mantén los cuatro tamaños nativos de capturas de tienda, renderiza un gráfico de función de Google Play exactamente a 1024×500 o elige dimensiones personalizadas acotadas. El dispositivo procedural se escala y coloca como una capa; las capturas nunca se estiran.
  • Modo de actualización de lanzamiento: guarda explícitamente firmas de lanzamiento deterministas, compara activos agregados/cambiados/sin cambios/eliminados más tarde y exporta un ZIP solo de cambios con un manifiesto. Las líneas base contienen hashes, no PNG renderizados, y nunca se actualizan implícitamente.

Decisiones de diseño (la parte interesante)

Cada una de estas fue una bifurcación deliberada, elegida por una razón:

  • Marcos procedurales, no maquetas de imagen. El objetivo son capturas de pantalla planas de envío a tienda en resoluciones exactas requeridas — que el dibujo procedural logra: nítido a cualquier escala, sin canal de activos y sin exposición de licencias (la mayoría de los paquetes "gratuitos" de maquetas de dispositivos no son realmente limpios para redistribución comercial). Se admite rotación 2D plana; la perspectiva y las maquetas fotográficas quedan fuera del alcance.
  • Fondos paramétricos, no imágenes de difusión. Los fondos son formas procedurales con semilla que se reproducen exactamente y se mantienen elegantes. Un modelo de imagen rasterizado sería impredecible, costoso por llamada, difícil de mantener consistente en un conjunto y forzaría un backend más pesado. La IA se usa solo como una capa delgada de prompt → parámetros.
  • Paleta basada en contenido se ejecuta completamente en el cliente — sin modelo, sin costo.
  • Arquitectura de $0 de salida. La aplicación es estática y todo el trabajo de imágenes ocurre en el navegador, por lo que el ancho de banda de alojamiento es efectivamente gratuito. El único costo medido es la llamada opcional de prompt de IA, que tiene límite de velocidad y se puede reemplazar con tu propia clave.

Arquitectura

  • src/core/ — lógica de proyecto neutral a la plataforma compartida por el navegador y el servidor MCP: renderizado en lienzo, normalización, composición, validación de salida, verificación previa, importación masiva, kits de marca, comparación de lanzamientos y preparación de imágenes de fondo. src/core/render.ts define los marcos de dispositivo y pinta cada píxel.
    • Invariante de esquinas concéntricas: los rectángulos redondeados BODY / BEZEL / SCREEN comparten un centro de curvatura (x + r igual en los tres; lo mismo para y + r). Romperlo produce torceduras de esquina "en escalera". Los nuevos marcos pasan por defineFrame(), que lanza una excepción ante la violación; el ayudante shell() deriva los rectángulos internos para que el invariante se cumpla por construcción.
    • Los fondos se renderizan en dos capas: un relleno (sólido / degradado lineal / radial) y luego una superposición de forma opcional desde un registro de generadores. Cada forma se distribuye en el espacio de la tira para que fluya a través de las diapositivas; un PRNG con semilla mulberry32 mantiene una tira reproducible.
    • El enmascarado usa lienzos fuera de pantalla con destination-in / destination-out (en lugar de ctx.clip()) para obtener bordes suavizados.
  • src/App.tsx — estado del editor, historial, hidratación, coordinación de persistencia y rutas de exportación web. src/Sidebar.tsx y src/MobileLayout.tsx proporcionan las superficies de control de escritorio y móvil; src/components.tsx contiene controles compartidos y la vista previa del lienzo.
  • src/storage/ — almacenamiento de documentos IndexedDB y activos direccionados por contenido, incluida la migración desde el formato original de localStorage y la limpieza de binarios no referenciados.
  • src/Welcome.tsx y src/GuidePage.tsx — la página de destino pública y las rutas de guía/comparación prerenderizadas. src/ai.ts es el cliente del navegador para los endpoints opcionales de estilo y traducción de IA.
  • server/mcp/ — el servidor MCP de Node y el adaptador de lienzo nativo. Los metadatos publicables del paquete npm viven en packages/truepane-mcp/.
  • supabase/functions/generator-bg-prompt/ — la Edge Function que convierte un prompt en parámetros de estilo validados y limitados (la salida cruda del modelo nunca llega al renderizador).
  • supabase/functions/generator-translate/ — el endpoint opcional de traducción de título/subtítulo.

Ejecución local

npm install
npm run dev        # http://localhost:5173
npm run build      # tsc -b && vite build → dist/
npm run preview    # serve the production build
npm run typecheck
npm test           # vitest (pure-logic suite)

Configuración

La función de prompt de IA es opcional. Sin ella, la aplicación es completamente funcional y los controles de IA están ocultos. Para habilitarlos, copia .env.example a .env y opta por participar:

VITE_ENABLE_AI=true
VITE_PUBLIC_SITE_URL=https://truepane.dev
VITE_BG_PROMPT_URL=https://YOUR-PROJECT.supabase.co/functions/v1/generator-bg-prompt
VITE_SUPABASE_ANON_KEY=your-anon-key
VITE_TRANSLATE_URL=https://YOUR-PROJECT.supabase.co/functions/v1/generator-translate

VITE_ENABLE_AI controla ambos ayudantes. Configura cualquiera de los endpoints de forma independiente; un ayudante no configurado permanece oculto. Las Edge Functions leen GROQ_API_KEY de los secretos de Supabase. El ayudante de fondo también acepta un BG_PROMPT_MODEL opcional (predeterminado llama-3.3-70b-versatile). Despliégalos con:

supabase functions deploy generator-bg-prompt --project-ref YOUR-REF --no-verify-jwt
supabase functions deploy generator-translate --project-ref YOUR-REF --no-verify-jwt

La limitación de velocidad del lado del servidor es actualmente de mejor esfuerzo (en memoria, por aislado). Agrega un limitador duradero antes de un lanzamiento público de alto tráfico.

Puerta beta temporal

Se puede habilitar una puerta de contraseña suave del lado del cliente durante la beta privada configurando VITE_GATE_PASSWORD_HASH al SHA-256 de tu contraseña (sin configurar = sin puerta):

printf '%s' 'your-password' | shasum -a 256   # put the hash in .env

Es un disuasivo, no seguridad real (es una aplicación de cliente estática) — destinada a eliminarse después de la beta.

Uso con agentes de IA (MCP)

Truepane incluye un servidor MCP local, para que un agente de IA (Claude Code, Codex, …) pueda tomar capturas de pantalla del simulador y convertirlas en diapositivas listas para la tienda sin que un humano maneje la interfaz del navegador. Se renderiza con un lienzo nativo (@napi-rs/canvas) — las capturas de pantalla se leen de rutas locales y los PNG se escriben en rutas locales; nada se sube a ningún lugar, y no se necesita configuración ni variables de entorno: el agente es el LLM, por lo que el estilo y la traducción son sus propios juicios (los ayudantes de IA de la aplicación web no están involucrados).

Es un servidor MCP estándar de stdio publicado en npm como truepane-mcp, por lo que cualquier cliente compatible con MCP puede iniciarlo con npx -y truepane-mcp — sin necesidad de clonar. Configuración para los comunes:

Claude Code

claude mcp add --scope user truepane -- npx -y truepane-mcp

Codex CLI

codex mcp add truepane -- npx -y truepane-mcp

O configura Codex manualmente en ~/.codex/config.toml:

[mcp_servers.truepane]
command = "npx"
args = ["-y", "truepane-mcp"]

Cursor, Windsurf, Claude Desktop y otros clientes de configuración JSON — agrega al bloque mcpServers del cliente (p. ej. .cursor/mcp.json, claude_desktop_config.json):

{
  "mcpServers": {
    "truepane": { "command": "npx", "args": ["-y", "truepane-mcp"] }
  }
}

Reinicia el cliente y luego confirma que las herramientas de Truepane estén disponibles.

El servidor vive en packages/truepane-mcp. Para ejecutarlo desde un clon del repositorio en su lugar (para desarrollo), apunta el comando del cliente a npx tsx server/mcp/index.ts, o npm run mcp:build y ejecuta node packages/truepane-mcp/dist/index.js.

Flujo de trabajo que esperan las herramientas

  1. list_options — comienza aquí para descubrir el flujo de trabajo completo, las plataformas (con tamaños exactos de píxeles de las tiendas), las superficies de salida, las fuentes, los rellenos, las formas y los ajustes preestablecidos de composición.
  2. create_project — títulos/subtítulos de diapositivas + rutas absolutas de archivos de captura de pantalla. Pasa targets para iniciar un proyecto multiplataforma.
  3. set_style — colores, fondo, tipografía (fuente, titleScale/subtitleScale, y titleWeight/subtitleWeight de 100–900), elegidos con el propio criterio de diseño del agente (suggest_palette_from_screenshot extrae un acento y un tinte de fondo de una captura de pantalla con matemática local pura si un punto de partida ayuda). Su parche composition controla la posición, el tamaño, la alineación y la rotación plana normalizados del texto/dispositivo. Usa slide_index para una composición específica de diapositiva.
  4. set_screenshots — adjunta cada captura con su target y opcionalmente language. Un destino faltante permanece visiblemente vacío; Truepane nunca estira una captura de una plataforma diferente hacia él. Para un directorio preparado, import_screenshots devuelve un mapeo de prueba por defecto; repite con apply: true, dry_run: false para aplicar solo archivos sin conflictos.
  5. render — escribe PNG de resolución completa (p. ej., iPhone 6.9″ = 1320×2868) en un directorio de salida que tú pases, y devuelve una pequeña vista previa en línea para inspeccionar. Ajusta y vuelve a renderizar hasta que se vea bien. Pasa target: "all" para una carpeta por destino. render resume advertencias preventivas de asesoramiento; llama a validate_project para la matriz completa ordenada de destino/idioma/diapositiva.
  6. set_translations — el agente traduce los textos de las diapositivas por sí mismo y almacena los resultados por idioma; luego render con language: "all" escribe subcarpetas por idioma (source/, es/, …), coincidiendo con el ZIP de todos los idiomas de la aplicación web. Un idioma también puede llevar sus propias capturas de pantalla (para aplicaciones cuya interfaz está localizada): pasa screenshot_path por diapositiva aquí, o set_screenshots con un language; un idioma sin su propia captura reutiliza la base. Cada idioma también puede renderizarse en su propia fuente (font aquí, o set_style con un language) — p. ej., San Francisco para la base y Noto Sans Arabic para ar — ya que el servidor no tiene respaldo por glifo para escrituras que una fuente no cubre.
  7. export_project / load_project — ida y vuelta del JSON del proyecto v2 con la función Importar/Exportar Proyecto de la aplicación web, para que un humano pueda ajustar el trabajo del agente (o viceversa).

Usa span_device_across_slides para colocar un dispositivo a lo largo de un par de diapositivas adyacentes. Las dos mitades recortadas mantienen su captura de pantalla, posición, escala y rotación vinculadas, incluso después de exportar/importar el proyecto y de actualizaciones posteriores de capturas o copias.

export_brand_kit y apply_brand_kit mueven los valores visuales predeterminados actuales entre proyectos sin llevar contenido del proyecto. Aplicar conserva las anulaciones por diapositiva a menos que clear_slide_overrides: true se proporcione explícitamente.

Usa set_output para persistir una salida nativa, play-feature o custom en un proyecto MCP. render también acepta anulaciones temporales de output_id, output_width, output_height y output_frame.

Usa compare_release, set_release_baseline y render changed_only:true para actualizaciones de lanzamiento a través de MCP. Cualquier cambio futuro del renderizador que afecte píxeles debe incrementar RENDERER_SCHEMA_VERSION en src/core/release.ts, marcando intencionalmente cada activo cambiado.

Las fuentes de Google Fonts se obtienen bajo demanda y se almacenan en caché en ~/.cache/truepane/fonts (Inter está incluida, por lo que el renderizado sin conexión funciona de inmediato). La fuente -apple-system se renderiza como San Francisco real en macOS — desde tu propia fuente del sistema instalada, que nunca se incluye ni se redistribuye (la fuente de Apple es propietaria) — y recurre a Inter en Linux/CI. Como SF es una fuente variable, se resuelve todo su rango de pesos (incluido Heavy/Black mediante titleWeight/subtitleWeight), no solo Regular/Bold. Un conjunto seleccionado de fuentes de Google — Inter, Manrope y Fraunces — también se carga como una fuente variable de un solo archivo, por lo que su rango completo de pesos se resuelve; cualquier otra fuente de Google usa sus caras estáticas (típicamente hasta 700). ¿Quieres el rango completo de otra fuente? Abre un issue o PR añadiéndola a VARIABLE_FONT_URLS en server/mcp/fonts.ts. Para idiomas objetivo no latinos, elige una fuente que cubra la escritura (Inter cubre cirílico/griego; Noto Sans JP/KR/SC para CJK; Noto Sans Arabic para árabe, que se forma y diseña de derecha a izquierda automáticamente) — a diferencia de los navegadores, el renderizado del lado del servidor no tiene respaldo de fuente del sistema por glifo, por lo que los glifos que faltan en una fuente aparecen como cajas.

Despliegue

El sitio se compila en dist/ y puede alojarse como una SPA estática en cualquier lugar. Este repositorio está configurado para activos estáticos de Cloudflare Workers mediante wrangler.jsonc; despliégalo con:

npm run deploy

Establece VITE_PUBLIC_SITE_URL en tiempo de compilación para URLs canónicas, robots.txt, el mapa del sitio y metadatos de guía prerenderizados. Establece las variables de IA opcionales anteriores solo cuando esos asistentes deban exponerse.

Licencia

AGPL-3.0. Como esta es una aplicación del lado del cliente, el código fuente se distribuye a cada navegador — por lo que las bifurcaciones, incluidas las alojadas públicamente, deben poner su código fuente a disposición bajo la misma licencia.

Los archivos de fuente Inter incluidos con truepane-mcp se distribuyen bajo la SIL Open Font License 1.1; el aviso de copyright y la licencia viajan con ellos en server/mcp/assets/fonts/LICENSE-Inter.txt y en el paquete npm publicado.

Soporte

Si esto te resulta útil, el patrocinio es bienvenido — consulta .github/FUNDING.yml.