Truepane

Truepane

Truepane é um construtor de conjuntos de capturas de tela gratuito e de código aberto para a App Store e o Google Play. Componha e localize um lançamento completo visualmente no navegador, ou entregue o mesmo projeto a um agente de IA por meio do servidor MCP incluído. Experimente em truepane.dev.

Tudo é renderizado para <canvas> no navegador. As capturas de tela permanecem na sua máquina. Os auxiliares opcionais de IA enviam apenas o texto que você pedir para processar (e, quando fornecida, sua chave de API Groq) para a Edge Function e o provedor de modelo configurados. As fontes do Google também são carregadas do CDN do Google, a menos que você use uma fonte do sistema ou enviada.

Guias

• Criar capturas de tela da App Store com Codex ou Claude Code
• Atualizar capturas de tela localizadas da App Store sem enviá-las

Por que isso existe

A maioria dos geradores de capturas de tela compõe um PNG pré-renderizado de um telefone. Este desenha o quadro do dispositivo proceduralmente em um canvas — corpo, moldura, botões, câmera e a máscara da tela são toda geometria, não bitmaps. Essa escolha impulsiona a maior parte do que torna a ferramenta pequena, nítida e barata de executar.

Recursos

• Quadros de dispositivo procedurais em tamanhos exatos da loja: iPhone 6,9″ (1320×2868), iPad 13″ (2064×2752), telefone Android (1080×2400), tablet Android (1600×2560).
• Fundos = preenchimento + forma. Uma camada de preenchimento (sólida ou gradiente linear/radial) mais uma sobreposição de forma opcional (anéis, manchas, ondas, pontos, malha, arcos, triângulos, grade, zigue-zague, bolhas), cada uma com cores independentes. As formas fluem continuamente pela faixa e se reproduzem exatamente a partir de uma semente armazenada.
• Imagens de fundo personalizadas: envie um fundo e controle desfoque, ajuste, opacidade, véu e se ele abrange um slide ou a faixa inteira. As imagens importadas são redimensionadas localmente para um orçamento de renderização prático.
• Uma família de formas componíveis. Ao lado dos dez looks fixos, Custom… é uma superfície de parâmetros, não um preset: escolha um primitivo (anel, disco, arco, triângulo, barra, mancha) e um arranjo (dispersão, grade, linha, radial, onda) e ajuste contagem, tamanho, espaçamento, rotação, espessura do traço e um desvanecimento ao longo da faixa. São dados, não código — doze números limitados e duas enumerações fechadas — para que um arquivo de projeto compartilhado permaneça inerte, renderize de forma idêntica para sempre e possa ser comparado. Isso o torna a superfície pretendida para variação orientada por agente via MCP: um agente compõe um fundo preenchendo números em vez de enviar código de desenho. Seus controles ficam atrás de Avançado no painel de fundo para que o seletor permaneça limpo.
• Ferramentas de cor: extração de paleta baseada em conteúdo da sua captura de tela, sugestões de formas harmonizadas, um conta-gotas (API EyeDropper nativa + um fallback de clique no slide para Safari/Firefox) e predefinições de ciência da cor selecionadas.
• IA de prompt → estilo (opcional): descreva uma vibe ("calmo, quente, orgânico") e um modelo Groq retorna um estilo + paleta. Traga sua própria chave Groq ou use o endpoint hospedado.
• Tipografia: fontes do Google selecionadas (incluindo fontes do sistema Apple/Android e Noto multiescrita + CJK) além de upload de .ttf/.otf/.woff(2) personalizado.
• Composição flexível: escolha um preset ou coloque texto e dispositivos diretamente, redimensione-os, gire dispositivos de −20° a +20° e arraste ou ajuste maquetes no canvas.
• Dispositivos entre slides: abranja um dispositivo sincronizado em dois slides adjacentes. Ambas as metades recortadas compartilham captura de tela, posição, escala e rotação.
• Exportação: PNG por slide, um PNG de faixa horizontal ou um ZIP de tudo. Além de importação/exportação de projeto JSON. O editor salva automaticamente documentos e ativos binários endereçados por conteúdo no IndexedDB, com fallback para localStorage quando o IndexedDB não está disponível.
• Editor responsivo com histórico: layouts dedicados para desktop e mobile, temas claro e escuro e um histórico de desfazer/refazer de 100 etapas com atalhos de teclado padrão.
• Projetos multiplataforma: mantenha capturas separadas de iPhone, iPad, telefone Android e tablet Android nos mesmos slides ordenados. As capturas de tela de localidade recorrem apenas à captura de origem do próprio alvo; nunca pegam emprestada a imagem de outra plataforma.
• Localização: armazene texto traduzido, capturas específicas de localidade e fontes por idioma em um projeto. A tradução pode ser inserida manualmente, gerada pelo auxiliar de IA opcional ou produzida por um agente conectado via MCP.
• Importação em massa com pré-visualização: escolha uma pasta ou ZIP, revise os mapeamentos determinísticos de alvo/localidade/slide, corrija linhas e aplique uma vez. Caminhos explícitos de target/locale/NN-name.png têm prioridade; conflitos nunca são sobrescritos silenciosamente.
• Pré-lançamento compartilhado: o editor e o MCP relatam os mesmos códigos de problema estáveis para capturas/traduções ausentes, fallbacks de localidade, risco de corte, composição, fontes e contraste de preenchimento/texto. Os avisos são consultivos e exigem "exportar mesmo assim" no editor web.
• Kits de marca locais: salve tipografia, cores de texto, fundo, fonte personalizada e composição padrão para reutilização. Os kits são arquivos .truepane-brand.json portáteis e nunca contêm slides, capturas de tela, alvos, traduções, credenciais ou histórico.
• Superfícies de saída flexíveis: mantenha os quatro tamanhos nativos de captura de tela da loja, renderize um gráfico de recurso do Google Play em exatamente 1024×500 ou escolha dimensões personalizadas limitadas. O dispositivo procedural é dimensionado e posicionado como uma camada; as capturas nunca são esticadas.
• Modo de atualização de lançamento: salve explicitamente assinaturas de lançamento determinísticas, compare ativos adicionados/alterados/inalterados/removidos depois e exporte um ZIP apenas com alterações e um manifesto. As linhas de base contêm hashes, não PNGs renderizados, e nunca são atualizadas implicitamente.

Decisões de design (a parte interessante)

Cada uma destas foi uma bifurcação deliberada, escolhida por um motivo:

• Quadros procedurais, não maquetes de imagem. O alvo são capturas de tela planas de envio à loja em resoluções exatas exigidas — o que o desenho procedural resolve: nítido em qualquer escala, sem pipeline de ativos e sem exposição de licenciamento (a maioria dos pacotes "gratuitos" de maquetes de dispositivos não é realmente limpa para redistribuição comercial). Rotação 2D plana é suportada; perspectiva e maquetes fotográficas permanecem fora do escopo.
• Fundos paramétricos, não imagens de difusão. Os fundos são formas procedurais semeadas que se reproduzem exatamente e permanecem elegantes. Um modelo de imagem raster seria imprevisível, caro por chamada, difícil de manter consistente em um conjunto e forçaria um backend mais pesado. A IA é usada apenas como uma camada fina de prompt → parâmetros.
• Paleta baseada em conteúdo roda inteiramente no lado do cliente — sem modelo, sem custo.
• Arquitetura de $0 de saída. O aplicativo é estático e todo o trabalho de imagem acontece no navegador, então a largura de banda de hospedagem é efetivamente gratuita. O único custo medido é a chamada opcional de prompt de IA, que é limitada por taxa e pode ser substituída pela sua própria chave.

Arquitetura

• src/core/ — lógica de projeto neutra de plataforma compartilhada pelo navegador e pelo servidor MCP: renderização em canvas, normalização, composição, validação de saída, pré-lançamento, importação em massa, kits de marca, comparação de lançamentos e preparação de imagem de fundo. src/core/render.ts define os quadros de dispositivo e pinta cada pixel.
  • Invariante de cantos concêntricos: os retângulos arredondados CORPO / MOLDURA / TELA compartilham um centro de curvatura (x + r igual nos três; o mesmo para y + r). Quebrá-lo produz dobras de canto "em escada". Novos quadros passam por defineFrame(), que lança erro em violação; o auxiliar shell() deriva os retângulos internos para que o invariante seja mantido por construção.
  • Os fundos são renderizados em duas camadas: um preenchimento (sólido / gradiente linear / radial) e depois uma sobreposição de forma opcional de um registro de geradores. Cada forma é disposta no espaço da faixa para fluir entre slides; um PRNG mulberry32 semeado mantém uma faixa reproduzível.
  • A máscara usa canvases fora da tela com destination-in / destination-out (em vez de ctx.clip()) para obter bordas com antialiasing.
• src/App.tsx — estado do editor, histórico, hidratação, coordenação de persistência e caminhos de exportação web. src/Sidebar.tsx e src/MobileLayout.tsx fornecem as superfícies de controle para desktop e mobile; src/components.tsx contém controles compartilhados e a pré-visualização do canvas.
• src/storage/ — armazenamento de documentos IndexedDB e ativos endereçados por conteúdo, incluindo migração do formato original de localStorage e limpeza de binários não referenciados.
• src/Welcome.tsx e src/GuidePage.tsx — a página de destino pública e as rotas pré-renderizadas de guia/comparação. src/ai.ts é o cliente de navegador para os endpoints opcionais de IA de estilo e tradução.
• server/mcp/ — o servidor MCP Node e o adaptador de canvas nativo. Os metadados publicáveis do pacote npm ficam em packages/truepane-mcp/.
• supabase/functions/generator-bg-prompt/ — a Edge Function que transforma um prompt em parâmetros de estilo validados e limitados (a saída bruta do modelo nunca chega ao renderizador).
• supabase/functions/generator-translate/ — o endpoint opcional de tradução de título/subtítulo.

Executando localmente

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)

Configuração

O recurso de prompt de IA é opcional. Sem ele, o aplicativo é totalmente funcional e os controles de IA ficam ocultos. Para ativá-los, copie .env.example para .env e opte 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 os auxiliares. Configure qualquer endpoint de forma independente; um auxiliar não configurado permanece oculto. As Edge Functions leem GROQ_API_KEY dos segredos do Supabase. O auxiliar de fundo também aceita um BG_PROMPT_MODEL opcional (padrão llama-3.3-70b-versatile). Implante-os com:

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

A limitação de taxa no lado do servidor é atualmente de melhor esforço (em memória, por isolado). Adicione um limitador durável antes de um lançamento público de alto tráfego.

Portão beta temporário

Um portão de senha suave no lado do cliente pode ser ativado durante o beta privado definindo VITE_GATE_PASSWORD_HASH para o SHA-256 da sua senha (não definido = sem portão):

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

É um impedimento, não segurança real (é um aplicativo cliente estático) — destinado a ser removido após o beta.

Uso com agentes de IA (MCP)

O Truepane inclui um servidor MCP local, para que um agente de IA (Claude Code, Codex, …) possa tirar capturas de tela do simulador e transformá-las em slides prontos para a loja sem um humano dirigindo a interface do navegador. Ele renderiza com um canvas nativo (@napi-rs/canvas) — as capturas de tela são lidas de caminhos locais e os PNGs são gravados em caminhos locais; nada é enviado a lugar algum, e nenhuma configuração ou variável de ambiente é necessária: o agente é o LLM, então estilo e tradução são seus próprios julgamentos (os auxiliares de IA do aplicativo web não estão envolvidos).

É um servidor MCP stdio padrão publicado no npm como truepane-mcp, para que qualquer cliente compatível com MCP possa iniciá-lo com npx -y truepane-mcp — sem necessidade de checkout. Configuração para os comuns:

Claude Code

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

Codex CLI

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

Ou configure o Codex manualmente em ~/.codex/config.toml:

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

Cursor, Windsurf, Claude Desktop e outros clientes de configuração JSON — adicione ao bloco mcpServers do cliente (por exemplo, .cursor/mcp.json, claude_desktop_config.json):

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

Reinicie o cliente e confirme que as ferramentas do Truepane estão disponíveis.

O servidor fica em packages/truepane-mcp. Para executá-lo a partir de um checkout do repositório (para desenvolvimento), aponte o comando do cliente para npx tsx server/mcp/index.ts, ou npm run mcp:build e execute node packages/truepane-mcp/dist/index.js.

Fluxo de trabalho que as ferramentas esperam

1. list_options — comece aqui para descobrir o fluxo de trabalho completo, as plataformas (com tamanhos exatos de pixels da loja), superfícies de saída, fontes, preenchimentos, formas e predefinições de composição.
2. create_project — títulos/subtítulos dos slides + caminhos absolutos de arquivos de captura de tela. Passe targets para iniciar um projeto multiplataforma.
3. set_style — cores, fundo, tipografia (fonte, titleScale/subtitleScale, e titleWeight/subtitleWeight de 100–900), escolhidas com o próprio julgamento de design do agente (suggest_palette_from_screenshot extrai um tom de destaque + fundo de uma captura de tela com matemática local pura se um ponto de partida ajudar). Seu patch composition controla posição, tamanho, alinhamento e rotação plana normalizados do texto/dispositivo. Use slide_index para uma composição específica do slide.
4. set_screenshots — anexe cada captura com seu target e language opcional. Um destino ausente permanece visivelmente vazio; o Truepane nunca estica uma captura de uma plataforma diferente para preenchê-lo. Para um diretório preparado, import_screenshots retorna um mapeamento de simulação por padrão; repita com apply: true, dry_run: false para aplicar apenas arquivos sem conflitos.
5. render — grava PNGs em resolução total (ex.: iPhone 6,9″ = 1320×2868) em um diretório de saída que você informa e retorna uma pequena pré-visualização inline para inspeção. Ajuste e renderize novamente até ficar correto. Passe target: "all" para uma pasta por destino. render resume avisos preventivos de pré-verificação; chame validate_project para a matriz completa ordenada de destino/idioma/slide.
6. set_translations — o agente traduz os textos dos slides por conta própria e armazena os resultados por idioma; então render com language: "all" grava subpastas por idioma (source/, es/, …), correspondendo ao ZIP de todos os idiomas do aplicativo web. Um idioma também pode carregar suas próprias capturas de tela (para aplicativos cuja interface é em si localizada): passe screenshot_path por slide aqui, ou set_screenshots com um language; um idioma sem captura de tela própria reutiliza a base. Cada idioma também pode renderizar em sua própria fonte (font aqui, ou set_style com um language) — ex.: San Francisco para a base e Noto Sans Arabic para ar — já que o servidor não tem fallback por glifo para scripts que uma fonte não cobre.
7. export_project / load_project — ida e volta do JSON do projeto v2 com o recurso Importar/Exportar Projeto do aplicativo web, para que um humano possa ajustar o trabalho do agente (ou vice-versa).

Use span_device_across_slides para posicionar um dispositivo em um par adjacente de slides. As duas metades recortadas mantêm sua captura de tela, posição, escala e rotação vinculadas, inclusive após exportação/importação do projeto e atualizações posteriores de captura ou cópia.

export_brand_kit e apply_brand_kit movem os padrões visuais atuais entre projetos sem carregar o conteúdo do projeto. A aplicação preserva as substituições por slide, a menos que clear_slide_overrides: true seja fornecido explicitamente.

Use set_output para persistir uma saída nativa, play-feature ou custom em um projeto MCP. render também aceita substituições temporárias de output_id, output_width, output_height e output_frame.

Use compare_release, set_release_baseline e render changed_only:true para atualizações de versão pelo MCP. Qualquer mudança futura no renderizador que afete pixels deve aumentar RENDERER_SCHEMA_VERSION em src/core/release.ts, marcando intencionalmente cada ativo alterado.

As fontes do Google Fonts são buscadas sob demanda e armazenadas em cache em ~/.cache/truepane/fonts (Inter é incluída, então a renderização offline funciona de imediato). A fonte -apple-system renderiza como San Francisco real no macOS — a partir da fonte do sistema instalada em sua máquina, que nunca é incluída ou redistribuída (a fonte da Apple é proprietária) — e usa Inter como fallback em Linux/CI. Como a SF é uma fonte variável, toda a sua faixa de pesos é resolvida (incluindo Heavy/Black via titleWeight/subtitleWeight), não apenas Regular/Bold. Um conjunto selecionado de fontes do Google — Inter, Manrope e Fraunces — também é carregado como uma fonte variável de arquivo único, então toda a sua faixa de pesos é resolvida; todas as outras fontes do Google usam seus faces estáticos (normalmente até 700). Quer a faixa completa de outra fonte? Abra uma issue ou PR adicionando-a a VARIABLE_FONT_URLS em server/mcp/fonts.ts. Para idiomas-alvo não latinos, escolha uma fonte que cubra o script (Inter cobre cirílico/grego; Noto Sans JP/KR/SC para CJK; Noto Sans Arabic para árabe, que é moldado e disposto da direita para a esquerda automaticamente) — ao contrário dos navegadores, a renderização no servidor não tem fallback de fonte do sistema por glifo, então glifos que uma fonte não possui aparecem como caixas.

Implantação

O site compila para dist/ e pode ser hospedado como um SPA estático em qualquer lugar. Este repositório está configurado para ativos estáticos do Cloudflare Workers por meio de wrangler.jsonc; implante com:

npm run deploy

Defina VITE_PUBLIC_SITE_URL no momento da compilação para URLs canônicos, robots.txt, o sitemap e metadados de guia pré-renderizados. Defina as variáveis de IA opcionais acima somente quando esses auxiliares devem ser expostos.

Licença

AGPL-3.0. Como este é um aplicativo do lado do cliente, o código-fonte é distribuído a cada navegador — então forks, incluindo os hospedados publicamente, devem disponibilizar seu código-fonte sob a mesma licença.

Os arquivos de fonte Inter incluídos com truepane-mcp são distribuídos sob a SIL Open Font License 1.1; o aviso de direitos autorais e a licença acompanham-os em server/mcp/assets/fonts/LICENSE-Inter.txt e no pacote npm publicado.

Suporte

Se isso for útil para você, patrocínios são bem-vindos — veja .github/FUNDING.yml.