Criar um clone do Canva no Gemini: o desafio do aplicativo HTML em 1 hora
Quem nunca teve a vontade de ter o seu próprio Canva? Um editor visual onde as imagens pudessem ser descarregadas na qualidade máxima, sem restrições de funcionalidades pagas, e desenhado à medida do seu projeto.
O custo de desenvolver uma aplicação web de edição de imagem do zero envolve meses de trabalho com equipes de front-end, designers de interface e engenheiros de software. No entanto, com a evolução das inteligências artificiais generativas, a barreira deixou de ser o código e passou a ser a qualidade das instruções que fornece.
Para provar a capacidade real do modelo Pro, desenhamos uma missão extrema: recriar as funções base do Canva num editor de imagens e design gráfico funcional (o Pixora Studio). A regra de ouro? O resultado tem de ser um único arquivo HTML puro, criado no máximo em 1 prompt inicial e 3 alterações. Copie os comandos exatos que usamos e perceba como programar aplicações visuais com IA.
Gemini Pro é o LLM avançado do Google, projetado para raciocínio complexo e programação de alto nível. Diferencia-se pela capacidade de processar grandes blocos de contexto, permitindo injetar arquiteturas de software inteiras num único prompt.
Neste desafio, forçamos a IA a criar uma aplicação usando exclusivamente HTML5, CSS3 e Vanilla JavaScript (Canvas API), proibindo bibliotecas externas para garantir que o arquivo roda em qualquer computador sem dependências.
Neste guia: entenda a lógica de iteração de software, copie os 4 mega prompts originais e baixe o código fonte final do seu novo editor de imagens.
Resposta curta:
É possível criar um editor gráfico viável no Gemini em menos de 1 hora. O segredo é ditar regras estritas no prompt inicial para garantir o funcionamento do Canvas API e usar iterações cirúrgicas focadas na correção de bugs isolados (como distorção de proporção ou bloqueios na exclusão de elementos).
Como este guia foi montado: Submetemos o Gemini Pro a um teste rigoroso de desenvolvimento web. O código gerado foi testado no navegador a cada etapa. Os prompts documentados abaixo são as versões reais criadas e validadas pela nossa equipe de engenharia de prompts durante a experiência.
⚡ TL;DR
- Tempo: 12 min (ou pule para os prompts)
- Nível: Avançado
- O que você vai copiar: 4 mega prompts de arquitetura web front-end
- Resultado: O seu próprio editor de design gráfico (Pixora Studio) em HTML
Índice
- As regras do desafio de 1 hora
- Anatomia do mega prompt de desenvolvimento
- Os 4 prompts mestres e a evolução visual
- O resultado: Baixe o Pixora Studio
- Amanda aconselha: como evitar que a interface quebre
- SOS: As ferramentas pararam de funcionar!
- FAQ
As regras do desafio de 1 hora
Regra 1: Arquivo único (zero bibliotecas)
Para que esta ferramenta seja 100% sua e funcione em modo offline, a regra inquebrável foi: toda a interface, painéis de propriedades, cálculos matemáticos de rotação e lógicas de exportação de imagem devem habitar um único arquivo .html independente.
Regra 2: Originalidade forçada (o Pixora Studio)
Pedir à IA para “clonar o Canva” resulta num bloqueio por direitos autorais ou num código preguiçoso que tenta invocar imagens estáticas da web. O prompt forçou a construção de uma marca própria — o Pixora Studio — obrigando a IA a programar nativamente todos os ícones em SVG e a estrutura visual.
Regra 3: Limite de alterações
Construir software modular com IA requer disciplina. Estipulamos um prompt de fundação (a engine do editor) e apenas 3 prompts de evolução (correção e adições cirúrgicas de novas funções). Se não focar o pedido, a IA destrói o que estava funcionando.
Anatomia do mega prompt de desenvolvimento web
| Elemento do prompt | O que faz | O que acontece por dentro | Impacto real | Erro se ignorado |
|---|---|---|---|---|
| Proibição de backend | Impede o uso de servidores ou bases de dados. | A IA usa FileReader para uploads e localStorage para guardar projetos. | A app funciona instantaneamente no navegador local. | A app pede ligações a bases de dados (ex: Node.js/PHP) e não arranca. |
| Regra anti-fake | Exige que botões visíveis funcionem de verdade. | A IA constrói apenas as funções matemáticas que consegue fechar num arquivo. | Evita uma interface cheia de botões que não fazem nada. | O usuário clica em “Exportar” ou “Filtro” e a IA apenas mostra um alert() a dizer “Em breve”. |
| Eventos pointer unificados | Exige suporte touch e mouse na mesma lógica. | Usa a API nativa pointerdown/move/up. | A edição flui perfeitamente no celular e no mouse. | Criar conflitos no JavaScript, bloqueando as ações de mover e redimensionar no celular. |
💡 O segredo dos especialistas: Num editor visual, o cálculo da proporção e do zoom (a prancheta) dita o sucesso. Se o *canvas* deformar as imagens ao redimensionar a janela, todo o projeto é inútil para a exportação final.
Os 4 prompts para construir e debugar o editor gráfico 📌
Abaixo estão os prompts estruturais. Este não é um pedido simples; é o equivalente a um documento de especificações para desenvolvimento de software. Veja a evolução do código a cada interação.
👾 Série dev — O projeto Pixora Studio
📸 Prompt 01 — A fundação do app
Este prompt injeta as capacidades fundamentais (texto, formas, imagens, camadas e propriedades) num arquivo limpo.
CRIE UM EDITOR DE IMAGENS E DESIGN GRÁFICO COMPLETO EM UM ÚNICO ARQUIVO HTML. A aplicação web chamará PIXORA STUDIO (Crie ideias. Transforme imagens). O conceito é um editor gráfico online moderno para posts, thumbnails e stories. IMPORTANTE: Código, interface e SVGs devem ser 100% originais. NÃO copie layouts de plataformas existentes. REGRA ABSOLUTA: Entregue todo o projeto no arquivo pixora-studio.html (HTML5, CSS3, JS puro e Canvas API). SEM servidor, banco de dados, login, ou bibliotecas/CDNs externos. Use FileReader para uploads e localStorage para salvar projetos. FUNCIONALIDADE É PRIORIDADE: Não crie ferramentas visuais que não funcionem. O que aparecer, tem de funcionar. TELA INICIAL: Botão de Novo Design e opções de Tamanhos Rápidos (Post Quadrado 1080x1080, Story 1080x1920, Thumb 1280x720) + Personalizado. INTERFACE DO EDITOR: Ferramentas à esquerda, Prancheta central (sombra, proporção mantida, zoom funcional de 25% a 200%), Propriedades à direita. MECÂNICAS EXIGIDAS: 1. Elementos: Textos, Imagens, Formas, SVGs gerados por código. 2. Seleção e Touch unificados: Tocar/clicar para selecionar, alças para redimensionar, controle para girar (Pointer Events). 3. Texto: Alterar conteúdo, fonte local, cor, alinhamento. 4. Imagem local: Upload via botão (NÃO enviar pra servidor). Filtros via CSS ou Canvas (Brilho, Contraste, Saturação, Desfoque). 5. Fundo: Cor sólida, gradiente direcional ou imagem. 6. Gerenciamento: Painel de Camadas (subir/descer, bloquear, ocultar), Atalhos de Histórico (CTRL+Z/Y), Duplicar, Excluir. Alinhamento automático e guias de centro. 7. Exportar: Salvar projeto no localStorage. Exportar design da prancheta em PNG e JPG nas escalas 1x e 2x. NÃO crie códigos incompletos. Entregue o HTML final 100% jogável.
O que aconteceu no teste 1: O resultado foi incrível. A interface era idêntica a um estúdio profissional, com ferramentas laterais e tela de boas-vindas. Problemas a resolver: A prancheta estava esticando (deformava o conteúdo conforme a janela da tela), ao enviar imagens não conseguíamos recortá-las (apenas esticar) e as opções de exportação limitavam a qualidade.
📸 Prompt 02 — O conserto da matemática e renderização
Aqui atuamos no núcleo técnico. Pedimos à IA para refazer a matemática que escala as imagens na prancheta.
PIXORA STUDIO - CORREÇÃO DE PROPORÇÃO + RECORTE + NOVAS EXPORTAÇÕES. Você está trabalhando no código existente. NÃO REFAÇA O EDITOR DO ZERO. Preserve o que funciona. Corrija problemas identificados: PROBLEMA 1 - PRANCHETA DISTORCIDA: Um projeto 1080x1080 deve manter proporção 1:1, e não esticar para preencher a tela. O zoom deve ser apenas visual, sem alterar as coordenadas reais dos elementos. Imagens inseridas também devem preservar a sua própria proporção (Ex: 16:9 não pode virar quadrado automático). O redimensionamento deve bloquear a proporção por padrão. PROBLEMA 2 - FALTA DE RECORTE (CROP): Crie uma ferramenta para recortar partes externas da imagem (com botão APLICAR e CANCELAR). O recorte não deve esticar a imagem remanescente, apenas isolar os pixels corretos, com controles adequados para toque no celular. PROBLEMA 3 - MAIS EXPORTAÇÕES: Na janela Exportar, garanta suporte a PNG (com fundo transparente), JPG (com cor de fundo forçada), WEBP (várias qualidades) e, se conseguir gerar usando código nativo sem bibliotecas, crie uma opção simples de PDF. Adicione também as escalas de exportação (1x, 2x, 3x reais). A interface do app nunca pode sair na imagem exportada. Entregue o código atualizado, preservando toda a base.
O que aconteceu no teste 2 (90% resolvido): O nosso “Canva pessoal” começou a ganhar músculo de produção. As imagens inseridas mantiveram a proporção original, o aspecto dos painéis de edição ficou mais limpo, e as ferramentas de recorte real e exportação avançada em WebP funcionaram sem dependências externas. O produto já era perfeitamente utilizável no dia a dia.
📸 Prompt 03 — A injeção criativa (grids e templates)
Um editor precisa de velocidade. O pedido agora é construir “a alma do Canva”: os templates e as molduras (grids).
PIXORA STUDIO - GRANDE ATUALIZAÇÃO: TEMPLATES + GRADES + FONTES. Você está trabalhando no código existente. NÃO REFAÇA A BASE DO ZERO. Preserve o sistema de coordenadas, upload, camadas, etc. 1. TEMPLATES: Crie uma biblioteca de 12 templates originais (posts, stories, negócios, frases) criados proceduralmente com elementos do próprio app. O usuário pode aplicá-los; os elementos devem permanecer 100% editáveis no canvas (não podem ser chapados como imagem única). 2. GRADES (FRAMES/MOLDURAS): Crie no mínimo 10 layouts de grade (ex: 2 linhas, 1 imagem grande + 2 pequenas). O usuário arrasta uma imagem para a grade, e ela preenche a área em modo COVER (sem esticar, corta as sobras proporcionais). Permita ajustar o espaçamento entre quadros e arredondar as bordas das imagens na grade. 3. NOVAS FONTES: Adicione fontes como Poppins, Montserrat e Sora, através de fallbacks seguros de fontes web (para não quebrar a regra de sem internet, crie fallbacks e seletor amigável com pesos Medium/Bold/etc). 4. EXPERIÊNCIA E CAMADAS: As grades e templates aplicados devem ser salvos no localStorage, respeitar o histórico Ctrl+Z e serem listados adequadamente no menu de camadas. Entregue o arquivo atualizado.
O que aconteceu no teste 3 (novos bugs): Os templates e as grades (frames de fotografias) entraram brilhantemente, e o Pixora assumiu oficialmente a aparência de um verdadeiro Canva nativo! Mas esbarramos em dois problemas críticos: Subitamente, os botões de exclusão (delete) deixaram de funcionar nos elementos, e os templates tornavam-se inúteis porque, dependendo do formato do documento criado, as imagens ficavam desajustadas nas margens.
📸 Prompt 04 — A refinação final (delete e templates adaptáveis)
O último prompt foi focado exclusivamente em reparar as lógicas em conflito e criar usabilidade avançada.
PIXORA STUDIO - CORREÇÃO DE EXCLUSÃO + TEMPLATES ADAPTÁVEIS. Você está trabalhando no código existente. O jogo de ferramentas está muito bom. PRESERVE o que existe. Foco apenas em duas soluções: 1. CORRIGIR EXCLUSÃO: O usuário perdeu a capacidade de deletar elementos ou camadas. Revise o loop de deleção para remover os elementos definitivamente do Canvas, Layers e localStorage (Delete key, Backspace e Botão de Lixeira), exceto quando digitando texto ativo. 2. TEMPLATES ADAPTÁVEIS: Mude o fluxo inicial. O usuário deve "Escolher Template" e SÓ DEPOIS "Escolher Formato" (ex: Post 1:1, Story 9:16). O código deve escalar, centralizar e redistribuir proporcionalmente os elementos daquele template no canvas novo, sem deformar os blocos originais. Crie sliders visuais temporários (antes de confirmar a aplicação) para Ajuste Fino de Layout (escala, posição X e Y). Entregue o código completo finalizado. Esta é a versão de lançamento.
📊 O resultado final (sucesso absoluto): Funcionou. O botão de apagar voltou a purgar os elementos corretamente através das *arrays* e da interface UI. O mais impressionante? A lógica de “Ajuste de Formato Automático” provou que o modelo entende geometria vetorial: ele redistribui com sucesso um banner horizontal numa tela vertical de *story*, sem esticar a tipografia ou esmagar fotografias. Temos uma ferramenta premium completa!
O resultado: Baixe o Pixora Studio agora 🎨
Esta experiência desmistifica o complexo mundo da programação web front-end baseada em Canvas API. A IA gerou toda a base matemática de gestão de camadas, detectou cliques nos painéis do mouse e exportação final num bloco imaculado de HTML puro.
Abaixo encontra a versão final da ferramenta hospedada, sem dependências e totalmente grátis para explorar o código ou até mesmo produzir conteúdo gráfico prático.
PIXORA STUDIO: O seu editor de imagem nativo
Quer analisar como a IA construiu esta ferramenta de edição ou apenas testar o design de miniaturas livres de marca d’água? Baixe e abra no seu navegador.
👉 Amanda aconselha: ferramentas não vivem de interface
- Se pretende gerar *SaaS* (software) com IA: Não gaste linhas de prompt a descrever pormenores cosméticos ou as cores dos botões inicialmente. Obrigue a IA a provar primeiro a “matemática”, neste caso, a geometria do canvas, do zoom e do recorte. O visual final de um botão não interessa se a ferramenta esmaga e distorce a sua imagem central.
- Sobre lógicas embutidas (grids): Pedir à IA para “fazer grids de fotos” requer atenção especial ao comando `object-fit: cover` (no CSS) e ao seu equivalente matemático no Canvas. Evitar deformações esticadas é sempre o ponto crítico em geradores visuais com Gemini e ChatGPT.
- Versionamento seguro: Durante os 4 mega prompts listados, cada um deve ser injetado testando sempre a funcionalidade anterior. Se pedir templates de raiz, garanta com uma diretiva de segurança (“NÃO QUEBRE O EDITOR E PRESERVE…”) para manter o painel de propriedades que já obteve no prompt de base.
🚨 SOS: As minhas fontes não estão carregando
- Causa: Ao construirmos um arquivo completamente independente da internet, não inserimos bibliotecas como o Google Fonts. Quando seleciona “Poppins” ou “Montserrat” no editor, o navegador tentará encontrar a tipografia guardada internamente no seu computador.
- Correção prática: Se precisar especificamente que uma tipografia de *web font* especial apareça na sua edição, e se quiser alterar ligeiramente o HTML: abra o bloco de notas, encontre as tags “ e adicione o link padrão do Google Fonts.
- Resultado: A ferramenta deixará de ser perfeitamente offline, mas importará todas as fontes artísticas do catálogo da web e exibirá as letras imediatamente no painel Canvas.
FAQ: dúvidas reais a serem respondidas 🔍
O Pixora Studio recolhe os meus dados?
Não. Um dos aspectos fundamentais exigidos pelo nosso mega prompt base foi proibir qualquer base de dados ou *backend*. Ele usa localStorage (memória passiva nativa) apenas para guardar as grades sem acessar dados sensíveis.
O que acontece se uma aplicação quebrar pela janela de contexto?
Volte à versão anterior do arquivo (ou retorne ao chat 2 passos antes) e isole a seção que quebrou num prompt novo de “Fixação” (“A ferramenta de Eliminar Layers deixou de invocar o splice na matriz, corrija especificamente essa funcionalidade…”).
Posso monetizar um script HTML que gerei com o Gemini?
Absolutamente. Se forçou a estrita originalidade e não violou interfaces de código aberto de outras empresas de design gráfico (Regra 2 do nosso desafio), esse novo ecossistema tem código e arquitetura de sua pertença autoral livre de *royalties*.
Onde guardo os meus designs exportados em alta resolução?
Ao carregar no botão Exportar (selecionando WebP ou PNG HD), o arquivo é baixado nativamente para a pasta principal de Transferências (*Downloads*) do sistema operativo do seu computador.
Conclusão: A democratização total do front-end 🙌
Este longo desafio do Pixora Studio ilustra que o domínio das aplicações visuais deixou de ser um território estritamente fechado a peritos em React ou *Angular* e arquitetos *Full-Stack*. A inteligência artificial como o Gemini Pro converte linguagem corrente num ecossistema gráfico denso, desde grades modulares a cálculos de renderização Canvas.
Mais uma vez o lema repete-se: é tudo uma questão do comando dado. O segredo da poupança temporal está ancorado na injeção exata e focada de funcionalidades reais sem enchimentos artificiais, moldando ferramentas personalizadas completas de raiz.
Inspire-se para conceber os seus fluxos de trabalho através das IAs, crie utilitários em formato leve de HTML e recuse o limite da sintaxe técnica complexa.
Ei, antes de ir: se este conteúdo ajudou, não pode perder o que separamos nestas outras categorias. É conhecimento de nível pago, entregue de graça aqui:
Faça o download do código, abra e construa um banner. Publique nos stories e marque o nosso instagram @mktamanda. Vamos adorar divulgar o seu trabalho artístico visual independente! :))
ps: obgda por chegar até aqui, é importante para mim.
