Cómo construí un SaaS de imágenes con asistencia de IA usando Astro, Supabase, Stripe, R2 y Electron

ImgKit comenzó con una apuesta simple de producto: la gente busca tareas prácticas de imagen todo el tiempo. Necesitan comprimir un archivo, convertir PNG a WebP, redimensionar una imagen, o entender por qué una subida se ve borrosa.

Eso hizo que la primera versión fuera intencionalmente pequeña. En lugar de empezar con un panel, ImgKit lanzó herramientas gratuitas del lado del navegador y guías prácticas. El sitio podía resolver trabajos reales mientras la dirección del producto todavía se probaba.

The Stack

El sitio público usa Astro porque el primer canal de crecimiento es contenido y herramientas. Las páginas estáticas, la carga rápida y un SEO limpio importan más que un shell de app complejo en esta etapa.

Supabase maneja el inicio de sesión y el acceso al producto. Stripe maneja el checkout. Cloudflare R2 almacena activos descargables privados. Cloudflare Workers sirven rutas de API para el checkout, los webhooks y los flujos de descarga protegida.

Electron se convirtió en la capa de escritorio para flujos de trabajo locales de imágenes por lotes. Esa app permite a ImgKit explorar el valor del software sin forzar las imágenes de origen a través de un servicio de conversión alojado.

The Product Path

La primera superficie útil fueron herramientas gratuitas:

1. Convertir imágenes en el navegador.
2. Comprimir acercándose a los límites reales de subida.
3. Redimensionar copias para sitios web y tiendas.
4. Enseñar el flujo de trabajo circundante con guías.

Luego llegaron los flujos de trabajo locales estilo Pro: conversión por lotes, eliminación de fondo, informes y lecciones de empaquetado de escritorio.

La pregunta comercial fue más difícil. Una app de escritorio de pago necesita firma, expectativas de soporte, manejo de actualizaciones y confianza. ImgKit tenía software funcional, pero el mejor primer producto de pago fue el proceso de construcción en sí.

Why The First Paid Product Is A Builder Case Study

El valor real ya estaba ahí para los creadores:

• las superficies de contenido y producto de Astro;
• la base de membresía de Supabase;
• las decisiones de checkout y webhook de Stripe;
• la entrega de descargas protegidas de R2;
• las lecciones de la app de escritorio Electron;
• el flujo de revisión e implementación de Codex;
• el cambio de precios de venta de software a producto educativo.

Eso se convirtió brevemente en el ImgKit Builder Case Study, un paquete de código fuente y tutoriales con notas de configuración y el rastro honesto de decisiones. Esa oferta independiente ahora está retirada.

How AI Helped

La codificación con IA fue más valiosa cuando se combinó con el juicio de producto. El flujo de trabajo se veía así:

1. Inspeccionar el repositorio existente antes de cambiar el código.
2. Hacer ediciones pequeñas con alcance.
3. Construir o probar de inmediato.
4. Revisar la consecuencia en el producto, no solo la sintaxis.
5. Convertir el trabajo repetido en scripts o notas reutilizables.

El objetivo no era dejar que la IA inventara un producto de forma aislada. El objetivo era usar la IA para avanzar más rápido en la implementación mientras se mantenía la dirección del producto fundamentada.

What Builders Can Learn

La lección útil no es “copia esta app exacta”. Es la secuencia:

1. Empieza con un problema específico y repetido.
2. Publica herramientas y guías gratuitas que resuelvan trabajos reales.
3. Agrega entrega protegida antes del checkout público.
4. Pausa el software de pago si el soporte y la confianza no están listos.
5. Vende la parte que ya tiene valor.

Para ImgKit, eso significó brevemente vender el registro de construcción primero. El camino de pago activo luego se movió a Gift Studio.

Archived Case Study

Si estás construyendo un SaaS con asistencia de IA, un MVP de escritorio local, un producto de descarga protegida, o un paquete educativo de código fuente, la página archivada de Builder Case Study preserva el rastro de implementación. Ya no es una oferta de checkout.

Preguntas frecuentes

¿Es ImgKit una plantilla de SaaS terminada?

No. ImgKit es un proyecto de producto real, y la antigua página de Builder Case Study ahora está archivada en lugar de venderse como un paquete de código fuente separado.

¿Por qué construir primero herramientas de imagen para el navegador?

Las herramientas del navegador crean páginas de búsqueda útiles, resuelven problemas inmediatos de los usuarios y demuestran la demanda antes de empujar un software de pago más pesado.

¿Qué papel jugó la codificación con IA?

La asistencia de IA ayudó a inspeccionar la base de código, implementar cambios con alcance, revisar flujos y convertir decisiones de producto en páginas y scripts funcionales.