Qué herramienta usar para crear productos digitales

Introducción

Hoy podés transformar una idea en una landing, una calculadora, un cotizador o una herramienta para un negocio sin tener que desarrollar todo desde cero.

Pero para hacerlo necesitás entender qué hace cada herramienta y en qué momento utilizarla.

Esta guía te ayuda a elegir qué usar según el proyecto que quieras crear, cómo conectar las herramientas y qué tener en cuenta antes de publicar.

Antes de empezar: ¿qué querés crear?

El primer paso no es abrir una herramienta. Es definir qué necesitás construir.

Preguntas que tenés que responder

• ¿Qué problema quiero resolver?
• ¿Quién va a utilizar el producto?
• ¿Qué tiene que poder hacer?
• ¿Necesita guardar datos?
• ¿Necesita usuarios o inicio de sesión?
• ¿Necesita conectarse con otras herramientas?
• ¿Quiero crear un prototipo o un producto listo para usar?

Cuanto más claro tengas el problema, más fácil va a ser elegir las herramientas.

¿Qué es?

GitHub es una plataforma para alojar, gestionar y versionar proyectos de código.

Permite guardar el historial de cambios, trabajar con otras personas y conectar el proyecto con plataformas de despliegue.

¿Cuándo usarlo?

Usalo cuando:

• Querés guardar tu proyecto.
• Vas a hacer cambios frecuentes.
• Trabajás con IA sobre el código.
• Necesitás recuperar una versión anterior.
• Querés colaborar con otra persona.
• Querés conectar tu proyecto con Netlify o Vercel.

Ejemplo

Tenés una calculadora que creaste con IA. Guardás los archivos en GitHub y, cada vez que hacés cambios, podés conservar el historial del proyecto.

Lo que tenés que entender

GitHub no es necesariamente el lugar donde el usuario final ve tu página. Es el repositorio donde gestionás el código.

Cómo crear tu primer repositorio en GitHub

Registrate o iniciá sesión

Hacé clic en "Inicia sesión" (si ya tenés cuenta) o registrate acá, completando correo, contraseña y nombre de usuario.

Creá tu repositorio

• 1New — desde tu panel, entrá a crear un nuevo repositorio.
• 2Nombre del repositorio — elegí un nombre corto y claro.
• 3Visibilidad — Público o Privado, según corresponda.
• 4Create repository — confirmá la creación.

Subí los archivos

• 1Agregar archivo — abrí el menú desplegable.
• 2Subir archivos — elegí esta opción para cargar tu proyecto.
• 3Arrastrá los archivos del proyecto: index.html, style.css, script.js.
• 4Commit changes — guardá los cambios en el repositorio.

Verificá

Comprobá que los archivos del proyecto aparezcan correctamente dentro del repositorio.

¿Qué es?

Netlify es una plataforma que permite publicar sitios y aplicaciones web. Una de sus formas más sencillas de empezar es subir directamente los archivos de un proyecto web, como HTML, CSS y JavaScript.

¿Cuándo usarlo?

Es una buena opción cuando:

• Tenés una landing.
• Creaste una calculadora.
• Tenés un cotizador.
• Querés publicar un HTML.
• Estás empezando y necesitás un despliegue simple.
• Querés conectar un repositorio para automatizar actualizaciones.

Ejemplo

Tenés una carpeta con index.html, style.css y script.js. Podés subir el proyecto a Netlify y publicarlo como una web.

Lo que tenés que entender

No necesitás usar GitHub para publicar un HTML sencillo en Netlify. Podés empezar subiendo directamente los archivos. GitHub se vuelve más útil cuando querés guardar versiones, trabajar con IA sobre el proyecto o automatizar los despliegues.

Cómo publicar un HTML directamente en Netlify

Un proyecto HTML sencillo puede publicarse directamente en Netlify sin necesidad de utilizar GitHub.

Entrá y creá

• 1Iniciar sesión / crear cuenta.
• 2Panel principal, donde vas a ver tus proyectos.
• 3Opción para agregar o crear un nuevo proyecto.

Subí

• 1Opción para desplegar/subir el proyecto.
• 2Arrastrá la carpeta del proyecto: index.html, style.css, script.js.
• 3Confirmá el despliegue.

Publicá

• 1Estado del deploy.
• 2URL pública: una vez finalizado, Netlify genera una dirección para acceder a tu web.

Cómo conectar GitHub con Netlify

Útil cuando querés mantener tu proyecto en GitHub y que Netlify se encargue de publicar las actualizaciones.

Conectá

• 1Agregar nuevo proyecto.
• 2Importar/conectar un proyecto existente.
• 3Elegir GitHub.

Autorizá y elegí

• 1Autorizar el acceso.
• 2Seleccionar la cuenta o repositorio.
• 3Elegir el proyecto que querés publicar.

Publicá

• 1Configuración del proyecto.
• 2Deploy.
• 3Estado del despliegue y URL final publicada.

¿Qué pasa cuando modificás el proyecto?

¿Qué es?

Vercel es una plataforma para desplegar sitios y aplicaciones web. Está especialmente orientada a proyectos modernos que utilizan frameworks como Next.js y React.

¿Cuándo usarlo?

Consideralo cuando:

• Trabajás con una aplicación web.
• Utilizás un framework compatible.
• Querés conectar GitHub con el despliegue.
• Necesitás un flujo de publicación automatizado.
• El proyecto va a crecer y tener varias funcionalidades.

Ejemplo

Creaste una aplicación web con ayuda de Claude Code. La conectás con GitHub y después con Vercel para que los cambios del proyecto puedan desplegarse automáticamente.

Netlify o Vercel: ¿cuál uso?

No necesitás utilizar las dos.

La elección depende del tipo de proyecto y de cómo lo estés desarrollando.

Cómo conectar Vercel con GitHub

Vercel permite conectar proyectos alojados en GitHub y desplegarlos directamente.

Conectá tu cuenta

• 1Continue with GitHub.
• 2Autorizar el acceso.
• 3Ingresar a Vercel.

La base de datos es una capa diferente y depende del proyecto.

Importá tu proyecto

• 1Add New / Import Project.
• 2GitHub.
• 3Seleccionar repositorio.

Configurá y desplegá

• 1Configuración.
• 2Variables o parámetros necesarios, si corresponde.
• 3Deploy — Vercel construye y despliega el proyecto.

Publicá

• 1Estado del deployment.
• 2URL de la aplicación ya publicada.

Cómo conectar GitHub con Vercel

Una vez conectado el repositorio, el flujo puede ser mucho más automático.

Cuando actualizás el proyecto y subís los cambios a GitHub, Vercel puede realizar un nuevo despliegue automáticamente según la configuración del proyecto.

Codex

¿Qué es?

Codex es una herramienta de IA para trabajar con código. Puede ayudarte a crear, modificar, entender y revisar proyectos de programación.

¿Cuándo usarlo?

Usalo cuando:

• Tenés una idea y no sabés cómo convertirla en código.
• Querés crear una primera versión de una web.
• Necesitás modificar una funcionalidad.
• Querés encontrar errores.
• Necesitás entender qué hace un archivo.
• Querés automatizar tareas de desarrollo.

Ejemplo

Le explicás a Codex:

A partir de esa indicación, podés trabajar sobre un primer prototipo y pedirle modificaciones.

Lo que tenés que entender

La IA puede ayudarte a escribir código, pero no significa que todo lo que genere esté correcto. Tenés que probar, revisar y entender lo que estás construyendo.

Claude Code

¿Qué es?

Claude Code es una herramienta de IA para trabajar directamente sobre proyectos de código. Permite utilizar IA para desarrollar, modificar, revisar y corregir archivos de un proyecto.

¿Cuándo usarlo?

Es especialmente útil cuando:

• Ya tenés un proyecto con varios archivos.
• Querés modificar funcionalidades.
• Necesitás crear componentes.
• Querés corregir errores.
• Vas a trabajar sobre un proyecto existente.
• Necesitás que la IA analice distintas partes del código.

Ejemplo

Tenés una landing que ya funciona y querés agregarle un formulario de contacto. Podés trabajar con Claude Code para modificar el proyecto, incorporar la funcionalidad y revisar los cambios.

Lo que tenés que entender

No es solamente conversar sobre programación. Es una forma de trabajar con IA sobre el proyecto.

Cómo trabajar con IA para crear un proyecto

7

Publicás

Desplegás en Netlify o Vercel según el proyecto.

¿Codex o Claude Code?

Ambos pueden ayudarte a trabajar con código mediante IA. No tenés que elegir uno para siempre.

La diferencia práctica depende del entorno en el que trabajes, las funciones que necesites y el proyecto.

¿Y si tu herramienta necesita usuarios o guardar datos?

Un HTML publicado en Netlify alcanza para una landing, una calculadora o un cotizador que se usa y se cierra. Pero si querés que cada persona entre con su cuenta, guarde lo que hizo y lo encuentre al volver, necesitás una parte más: un backend, es decir, funciones que corren en un servidor y una base de datos.

Cloudflare Pages

Cloudflare Pages publica tu web igual que Netlify o Vercel, conectada a GitHub. Además permite sumar funciones (el login, guardar y leer datos) y una base de datos (D1) en el mismo proyecto, con un plan gratuito generoso.

Caso real: Relab

Esta guía es parte de Relab, el espacio de recursos gratuitos de ST. Está hecho con Claude Code, guardado en GitHub y publicado en Cloudflare Pages: tiene ingreso con Google, una sola cuenta para todos los recursos, y lo que cada persona escribe se guarda cifrado. El checklist de esta misma guía funciona así: si entrás con tu cuenta, tus respuestas te esperan en cualquier dispositivo.

¿Cómo se conectan todas?

Ahora que entendés qué hace cada herramienta, podés pensar el proceso completo.

Paso 1: Tenés una idea

Querés crear una calculadora, una landing o un cotizador.

Paso 2: Desarrollás

Utilizás Codex o Claude Code para crear el código y modificarlo.

Paso 3: Guardás

Podés guardar el proyecto en GitHub para conservar versiones y organizar el trabajo.

Paso 4: Publicás

Elegís Netlify o Vercel según el tipo de proyecto y tu flujo de trabajo.

Paso 5: Mejorás

Volvés a la IA para agregar funcionalidades, corregir errores y seguir desarrollando.

Importante

No todos los proyectos necesitan pasar por las cinco herramientas. Por ejemplo, si tenés un HTML sencillo, podés empezar directamente con Netlify. Si trabajás con una aplicación más compleja, probablemente necesites un repositorio y una plataforma de despliegue.

Tres formas de trabajar

Flujo 1 — Lo más simple

Para landing, calculadora, cotizador o herramienta sencilla.

Flujo 2 — Proyecto que querés conservar y actualizar

Cada vez que actualizás el proyecto en GitHub, Netlify puede detectar el cambio y volver a desplegarlo.

Flujo 3 — Aplicación desarrollada con IA

Este es el recorrido del ejemplo del cotizador que ya viste en esta guía.

¿Qué podés crear?

Estas herramientas pueden ayudarte a desarrollar diferentes tipos de productos digitales.

Landing pages

Una página para presentar un servicio, curso o negocio.

Calculadoras

Una herramienta que procesa datos y devuelve un resultado.

Cotizadores

Un sistema que calcula precios según variables que ingresa el usuario.

Diagnósticos interactivos

Un formulario que permite responder preguntas y obtener una devolución.

Herramientas para negocios

Soluciones digitales para resolver tareas específicas.

Lo importante

No necesitás empezar con una aplicación enorme. Podés construir una primera versión pequeña, probarla y después agregar funcionalidades.

¿Dónde están mis archivos?

Cuando empezás, aparecen varios lugares distintos. Conviene tenerlos claros:

¿GitHub es obligatorio?

No. Si tenés un HTML y querés publicarlo rápidamente, podés empezar directamente con Netlify.

Pero GitHub es muy útil cuando:

• El proyecto crece.
• Vas haciendo cambios.
• Trabajás con IA.
• Querés mantener historial.
• Necesitás colaborar.
• Querés automatizar despliegues.

¿Qué necesito para empezar?

No necesitás dominar todas las herramientas. Podés comenzar con:

• Una idea concreta.
• Una computadora.
• Una herramienta de IA para ayudarte con el código.
• Un proyecto pequeño.
• Una plataforma para publicarlo.

Recorrido recomendado

1. Definí qué querés crear.
2. Pedile a la IA que te ayude a construir una primera versión.
3. Probá que funcione.
4. Guardá el proyecto si vas a seguir desarrollándolo.
5. Publicalo en Netlify o Vercel.
6. Mejoralo a partir de lo que aprendiste.

Checklist antes de construir

Marcá cada pregunta a medida que la respondas para tu proyecto.

• ¿Qué problema resuelve?
• ¿Quién lo va a utilizar?
• ¿Qué funcionalidades necesito?
• ¿Es una web o una aplicación?
• ¿Necesita guardar datos?
• ¿Necesita usuarios o login?
• ¿Necesita una base de datos?
• ¿Qué parte puede ayudarme a construir la IA?
• ¿Dónde voy a guardar el proyecto?
• ¿Dónde lo voy a publicar?
• ¿Cómo voy a probar que funciona?

Ejemplos reales

Acá te mostramos algunos proyectos reales que trabajamos con estas herramientas.

Ejemplo 1: Texto en Redes

¿Qué problema resolvía?

Poder aplicar negrita, cursiva o negrita+cursiva a los textos y, a la vez, saber la cantidad de caracteres usados al escribir los copys para redes sociales.

¿Qué construimos?

Una herramienta de edición de copys que funciona en la computadora y también se puede descargar como app en el celular.

¿Qué herramientas utilizaste?

Claude Code para construirla, GitHub para guardar el proyecto y Cloudflare Pages para publicarla. Hoy forma parte de Relab, con ingreso con Google para guardar borradores.

¿Cómo fue el proceso?

Fue una conversación con la IA: le expliqué qué necesitaba y el resultado surgió de ese ida y vuelta.

¿Qué aprendiste?

Que puedo crear mis propias herramientas a medida de lo que necesito.

Probá Texto en Redes →

Ejemplo 2: Encuesta dinámica para Expo

¿Qué problema resolvía?

Reemplazar un formulario tipo Google Forms por una experiencia más dinámica para relevar respuestas en una Expo.

¿Qué construimos?

Un HTML con formato de encuesta: la persona iba respondiendo y al final recibía una mini auditoría según sus respuestas.

¿Qué herramientas utilizaste?

Claude Code.

¿Cómo fue el proceso?

Se construyó directamente con Claude Code, definiendo el recorrido de la encuesta y la devolución final.

¿Qué aprendiste?

Que una encuesta puede convertirse en una experiencia de valor para quien la responde, no solo en un formulario.

Ejemplo 3: Cotizador para Community/Social Media Manager Herramienta interna

¿Qué problema resolvía?

Cotizar servicios de Community Manager y Social Media Manager de forma automática.

¿Qué construimos?

Un cotizador web para ese tipo de servicios.

¿Qué herramientas utilizaste?

Claude Code para el HTML y Vercel para el despliegue, con un subdominio conectado.

¿Cómo fue el proceso?

Se desarrolló completamente en Claude Code y se publicó en Vercel, conectando además el subdominio correspondiente.

¿Qué aprendiste?

Que una herramienta puede ir de la idea al despliegue publicado en un solo flujo, con dominio propio.

Es una herramienta de uso interno de ST, por eso no tiene acceso público. La mostramos como ejemplo de lo que se puede construir a medida.

Mini mapa para guardar

Preguntas frecuentes

Conclusión

No necesitás aprender a programar todo desde cero para empezar a crear productos digitales.

Pero sí necesitás entender qué hace cada herramienta y cómo utilizarla.

La tecnología te permite transformar una idea en algo que funciona.

Una propuesta puede ser un PDF. Pero también puede ser una landing, una calculadora, un cotizador o una herramienta personalizada.