
Esqueleto da página inicial

Esqueleto da área de trabalho

Esqueleto do envio de arquivos

Esqueleto dos estados de processamento

Tela de configurações e chaves de API

Painel de ferramentas do lote

Lista de arquivos selecionados

Progresso da criação do pacote

Refinamento de componentes

Pacote gerado para download
Imagens recortadas, renomeadas e prontas para o sistema
- Nome do projeto
- MAGE
- Ano e período de execução
- 2024
- Cliente
- --
Resumo
O MAGE nasceu em 2023 para encurtar a produção de imagens do time interno de design gráfico. Eu montei o projeto sozinho, depois de medir quanto tempo ia em recortes, renomeações e preparo de arquivos antes de subir no sistema. A aplicação junta recorte de fundo, renomeação em lote e um ajuste que remove a área em branco que sobra depois do recorte, algo que eu não via bem resolvido nas ferramentas que usava.
Desafio
Cada lote passava por etapas manuais: recortar, padronizar o nome sem acentuação, trocar caracteres especiais por _ e conferir arquivo por arquivo. Isso consumia horas e ainda gerava erro quando o nome não batia com o cadastro do sistema. Além do tempo, não havia previsão de custo de API por parte da gestão, então a solução precisava funcionar com serviços acessíveis e chave configurável pelo usuário.
Processo
Esqueleto de telas e apresentação do produto
Desenhei protótipos de baixa fidelidade pensando em como apresentar o valor do MAGE para o time. Fiz um bench de produtos que destacam bem suas funções principais e usei isso na estrutura da página e do fluxo de trabalho.
Marca e interface
Defini a identidade visual e as telas de configuração, lista de arquivos, ferramentas e criação de pacote, com estados claros de carregamento e conclusão.
Integração e regras de renomeação
Pesquisei serviços de recorte. O Remove.bg era referência, mas busquei opções gratuitas e encontrei o Clipdrop com resultado mais consistente para o que eu precisava. Configurei a renomeação para o padrão que o sistema exigia: sem acentos, sem caracteres especiais, com _ onde necessário.
Recorte inteligente e ajuste de área
No fim do desenvolvimento, usei IA apenas para gerar o recorte de fundo. Em seguida incluí o ajuste automático da área útil da imagem, cortando o espaço em branco que ficava depois do recorte.
Resultados
- O time processa em média cerca de 200 imagens por dia.
- Com o MAGE, esse volume leva menos de 30 minutos. No fluxo manual, o mesmo volume consome várias horas ao longo do dia.
- Os arquivos são renomeados no padrão do sistema interno, sem retrabalho no cadastro.
- Recorte, renomeação e empacotamento acontecem em um único fluxo, sem trocar de ferramenta.
- De uma a três pessoas do design gráfico usam o produto no dia a dia.
Aprendizados
- Mapear do upload ao pacote mostrou onde o tempo ia em etapas que pareciam rápidas
- Estados de progresso e erro definidos com calma mudaram como o time usava a ferramenta
- O recorte de fundo ficou com IA. O ajuste de área útil depois do corte eu não encontrava bem resolvido nas ferramentas que testei
Pontos a melhorar
- Histórico de processamentos para comparar lotes
- Salvamento na nuvem
- Roteiro de produto mais explícito para o time e para gestão
- Planejar custo e manutenção das APIs desde o início, não depois