Como eu construí um SaaS de imagens com assistência de IA usando Astro, Supabase, Stripe, R2 e Electron

A ImgKit começou com uma aposta simples de produto: as pessoas buscam tarefas práticas de imagem o tempo todo. Elas precisam comprimir um arquivo, converter PNG para WebP, redimensionar uma imagem, ou entender por que um upload parece embaçado.

Isso fez com que a primeira versão fosse intencionalmente pequena. Em vez de começar com um painel, a ImgKit lançou ferramentas gratuitas do lado do navegador e guias práticos. O site podia resolver trabalhos reais enquanto a direção do produto ainda estava sendo testada.

The Stack

O site público usa Astro porque o primeiro canal de crescimento é conteúdo e ferramentas. Páginas estáticas, carregamento rápido e um SEO limpo importam mais do que um shell de app complexo nesta fase.

O Supabase lida com login e acesso ao produto. O Stripe lida com o checkout. O Cloudflare R2 armazena ativos baixáveis privados. Os Cloudflare Workers servem rotas de API para checkout, webhooks e fluxos de download protegido.

O Electron tornou-se a camada de desktop para fluxos de trabalho locais de imagens em lote. Esse app permite à ImgKit explorar o valor do software sem forçar as imagens de origem através de um serviço de conversão hospedado.

The Product Path

A primeira superfície útil foram ferramentas gratuitas:

1. Converter imagens no navegador.
2. Comprimir próximo aos limites reais de upload.
3. Redimensionar cópias para sites e lojas.
4. Ensinar o fluxo de trabalho ao redor com guias.

Em seguida vieram os fluxos de trabalho locais estilo Pro: conversão em lote, remoção de fundo, relatórios e lições de empacotamento de desktop.

A questão comercial foi mais difícil. Um app de desktop pago precisa de assinatura, expectativas de suporte, tratamento de atualizações e confiança. A ImgKit tinha software funcional, mas o melhor primeiro produto pago foi o próprio processo de construção.

Why The First Paid Product Is A Builder Case Study

O valor real já estava lá para os criadores:

• as superfícies de conteúdo e produto do Astro;
• a base de membresia do Supabase;
• as decisões de checkout e webhook do Stripe;
• a entrega de downloads protegidos do R2;
• as lições do app de desktop Electron;
• o fluxo de revisão e implementação do Codex;
• a mudança de preços da venda de software para produto educativo.

Isso se tornou brevemente o ImgKit Builder Case Study, um pacote de código-fonte e tutoriais com notas de configuração e o rastro honesto de decisões. Essa oferta independente agora está aposentada.

How AI Helped

A codificação com IA foi mais valiosa quando combinada com o julgamento de produto. O fluxo de trabalho era assim:

1. Inspecionar o repositório existente antes de mudar o código.
2. Fazer edições pequenas com escopo.
3. Construir ou testar imediatamente.
4. Revisar a consequência no produto, não apenas a sintaxe.
5. Transformar o trabalho repetido em scripts ou notas reutilizáveis.

O objetivo não era deixar a IA inventar um produto de forma isolada. O objetivo era usar a IA para avançar mais rápido na implementação, mantendo a direção do produto fundamentada.

What Builders Can Learn

A lição útil não é “copie este app exato”. É a sequência:

1. Comece com um problema específico e repetido.
2. Publique ferramentas e guias gratuitos que resolvam trabalhos reais.
3. Adicione entrega protegida antes do checkout público.
4. Pause o software pago se o suporte e a confiança não estiverem prontos.
5. Venda a parte que já tem valor.

Para a ImgKit, isso significou brevemente vender o registro de construção primeiro. O caminho de pagamento ativo depois se moveu para o Gift Studio.

Archived Case Study

Se você está construindo um SaaS com assistência de IA, um MVP de desktop local, um produto de download protegido, ou um pacote educativo de código-fonte, a página arquivada do Builder Case Study preserva o rastro de implementação. Não é mais uma oferta de checkout.

Perguntas frequentes

A ImgKit é uma plantilla de SaaS finalizada?

Não. A ImgKit é um projeto de produto real, e a antiga página do Builder Case Study agora está arquivada em vez de ser vendida como um pacote de código-fonte separado.

Por que construir primeiro ferramentas de imagem para o navegador?

As ferramentas do navegador criam páginas de busca úteis, resolvem problemas imediatos dos usuários e comprovam a demanda antes de empurrar um software pago mais pesado.

Qual foi o papel da codificação com IA?

A assistência de IA ajudou a inspecionar a base de código, implementar mudanças com escopo, revisar fluxos e converter decisões de produto em páginas e scripts funcionais.