CodeKitHubO que é esta ferramenta?
O Gerador de Story do Instagram é uma ferramenta de maquete que roda no navegador e recria a tela vertical de uma Story do Instagram — tiras segmentadas de barra de progresso no topo, um avatar circular com anel em degradê junto a um @usuário e uma marca de tempo relativa, um fundo de foto ou degradê em tela cheia, texto sobreposto centralizado, e uma barra de resposta arredondada "Enviar mensagem" com ícone de coração — para que você digite seu próprio conteúdo e exporte como uma imagem vertical compartilhável.
Apenas para entretenimento e design: esta ferramenta é feita para piadas, memes, slides de apresentação, protótipos de UI/UX e conteúdo para redes sociais. Nunca deve ser usada para fabricar provas fraudulentas, assediar ou difamar alguém, ou se passar pela Story real de uma pessoa de verdade — isso pode ser ilegal dependendo da sua jurisdição e vai totalmente contra o uso pretendido desta ferramenta.
Nada do que você digita sai do seu dispositivo — toda a Story é desenhada com a API de Canvas HTML diretamente no seu navegador, e o PNG é gerado e baixado localmente. Sem envio a servidores, sem conta, sem rastreamento do seu conteúdo.
Por que usar?
- Você está criando um meme em torno de uma Story fictícia que alguém postaria num momento absurdo específico, e a piada só funciona se o layout for idêntico a uma tela real de Story, não texto solto sobre um fundo.
- Vai apresentar um anúncio ou takeover em formato Stories para um cliente e quer mostrar como o texto sobreposto e a barra de resposta ficariam nas dimensões reais 9:16 antes de contratar a criação de verdade.
- Como designer de UX, você quer prototipar como um texto sobreposto de tamanhos diferentes se encaixa entre a barra de progresso e a barra de resposta, sem precisar extrair frames de uma sessão real do Instagram.
- Está montando um slide de tutorial ou curso explicando a anatomia de uma Story (barra de progresso, avatar, marca de tempo, barra de resposta) e precisa de um exemplo limpo e identificado, em vez de um print com o conteúdo real de outra pessoa.
- Quer conferir como uma frase específica de texto sobreposto vai centralizar e quebrar linha contra o fundo antes de publicar de verdade uma Story com ela.
- Renderização 100% local — seu texto nunca toca um servidor.
Como usar
- Defina o nome de usuário (@handle), a marca de tempo, a cor do avatar ou envie uma foto.
- Ative ou desative a imagem de fundo reservada e escolha sua cor base.
- Digite o texto sobreposto exibido centralizado na Story.
- Personalize o texto reservado da barra de resposta na parte inferior.
- Acompanhe a pré-visualização vertical sendo atualizada em tempo real e clique em "Download PNG" para salvar a imagem.
Exemplo
Entrada
Usuário: "@alex.rivera" · Marca de tempo: "4h" · Texto sobreposto: "Clima de fim de semana 🌅" · Barra de resposta: "Send message"Resultado
Uma imagem PNG vertical de 360×640 mostrando uma Story do Instagram: três segmentos de barra de progresso no topo, um avatar com anel em degradê junto a "alex.rivera" e "4h", um fundo em degradê de roxo para rosa, "Weekend vibes 🌅" centralizado na tela, e uma barra de resposta arredondada "Send message" com ícone de coração embaixo.A imagem é gerada instantaneamente no canvas de pré-visualização ao vivo e baixada com um único clique — sem espera, sem envio.
O que você pode personalizar
- Nome de usuário (@handle), marca de tempo, cor do avatar ou foto enviada.
- Uma barra de progresso segmentada no topo, igual ao indicador real de Story com vários slides.
- Texto sobreposto centralizado com sombra projetada, assim como nas legendas reais de Story.
- Uma barra de resposta arredondada na parte inferior com texto reservado editável e ícone de coração.
Uso responsável
Este gerador existe para facilitar a criação de imagens de Story do Instagram claramente fictícias, para fins de humor, storytelling e trabalho de design. Não é uma ferramenta para fabricar provas, orquestrar assédio, ou fazer alguém acreditar que uma Story falsa é real. Se você planeja compartilhar uma imagem criada com esta ferramenta, considere adicionar um contexto (como "fake" ou "maquete") para que quem vir entenda que não é uma Story real do Instagram, especialmente quando o assunto puder ser confundido com uma pessoa ou eventos reais.
Equilíbrio entre tamanho do texto e número de segmentos
Colocar muitos segmentos na barra de progresso sob uma frase curta e isolada pode dar a impressão de que há mais contexto nos slides não exibidos — o que pode enfraquecer a piada ou a mensagem se não era essa a intenção. Ajustar o número de segmentos ao tamanho do conteúdo deixa a maquete mais convincente.
| Nº de segmentos | Tamanho de texto sobreposto que soa natural |
|---|---|
| 1 | Uma palavra curta ou um emoji |
| 2 a 3 | Uma frase, do tamanho de uma legenda comum |
| 4 ou mais | Texto mais curto, sugerindo que faz parte de uma explicação em vários slides |
Perguntas frequentes
É legal ou ético usar esta ferramenta?
A ferramenta em si é legal para uso em entretenimento, maquetes, apresentações e trabalho de design. O que não é legal nem ético é usar a imagem gerada para enganar alguém — por exemplo, apresentando-a como uma Story real para cometer fraude, assediar ou difamar uma pessoa, ou se passar pelo conteúdo real de alguém. Dependendo de onde você mora, esse tipo de uso indevido pode configurar fraude, difamação ou assédio. Use isto apenas para fins claramente fictícios ou ilustrativos.
A ferramenta envia meu texto para algum lugar?
Não. Tudo o que você digita permanece na memória do seu navegador e é desenhado diretamente em um elemento canvas usando JavaScript. O arquivo PNG é gerado e baixado no seu dispositivo — nada é enviado a nenhum servidor.
Posso usar minha própria foto como fundo da Story?
O fundo é, por design, uma cor sólida ou degradê reservado, para manter a ferramenta simples e evitar a tentação de fazer passar a foto real de outra pessoa como sua própria Story. Você ainda pode enviar uma foto real para o avatar circular.
Por que a imagem tem formato vertical?
As Stories do Instagram usam uma proporção vertical de 9:16, então a pré-visualização e o PNG exportado são gerados nesse mesmo formato vertical para parecerem naturais ao compartilhar ou incorporar em uma apresentação.
Devo usar este ou um dos outros geradores de maquete do Instagram?
Se você está criando a maquete de uma Story vertical temporária em tela cheia com texto sobreposto, use este gerador de Story. Se precisar de uma publicação de feed permanente com legenda e contador de curtidas/comentários, use o Gerador de Publicação do Instagram; para uma thread de comentários, use o Gerador de Comentários do Instagram; para uma página de perfil completa, use o Gerador de Perfil do Instagram.
Posso mostrar vários segmentos na barra de progresso para sugerir uma Story de vários slides?
Sim — a barra de progresso segmentada no topo foi feita para imitar o indicador real de múltiplos slides do Instagram, então você pode representar uma Story de vários slides mesmo exportando apenas um frame específico dessa sequência.
Posso personalizar a marca de tempo para mostrar "agora mesmo" em vez de um número específico de horas?
Sim — o campo de marca de tempo aceita qualquer texto que você digitar, igual ao Instagram, que mostra tempo relativo ("4h", "23min", "agora mesmo") em vez de um horário fixo, então você pode ajustar a sensação de "quão recente" a maquete precisa passar.
A barra de resposta realmente funciona ou é só decorativa?
É um elemento visual estático, não um campo funcional — o texto reservado e o ícone de coração são desenhados exatamente como apareceriam numa Story real para completar o visual, mas nada acontece ao clicar, já que isso é uma exportação de imagem estática, não um protótipo interativo.
Posso adicionar mais de uma linha de texto sobreposto, tipo uma legenda mais um rótulo estilo figurinha?
O campo de texto sobreposto foi feito para um único bloco centralizado, que cobre o estilo mais comum de legenda de Story. Se precisar de elementos de texto separados em posições diferentes, seria necessário combinar tudo em um único bloco com quebras de linha, já que a ferramenta atualmente não tem camadas de texto posicionadas separadamente.