Crea y publica apps web con Claude

Resumen

Claude se diferencia de ChatGPT y otros LLM por una característica que cambia la forma de resolver problemas: la capacidad de generar aplicaciones funcionales dentro del chat, versionarlas y publicarlas con un enlace único. Si trabajas en mercadeo, desarrollo o cualquier área que requiera herramientas a la medida, esta funcionalidad transforma cómo automatizas tareas repetitivas.

¿Qué es un UTM y por qué importa en marketing digital?

Antes de construir la app, vale la pena entender el problema. Un UTM (Urchin Traffic Monitor) es el código que se agrega a una URL después del signo de interrogación para rastrear de dónde viene el tráfico de una campaña.

¿Qué es un UTM? Es un conjunto de parámetros que se añaden a una URL para identificar la fuente, el medio y la campaña que originaron una visita. Si los borras, la URL sigue funcionando: solo sirven para medir comportamiento.

Los tres parámetros principales son la source (fuente), el medium (medio) y la campaign (campaña). Esto lo puedes confirmar con un zero-shot prompt a Claude, es decir, una pregunta que aprovecha solo el conocimiento ya entrenado del modelo, sin contexto adicional [01:25].

¿Cómo crear una aplicación con Claude en un solo prompt?

La magia ocurre cuando le pides a Claude que cree una aplicación. Al detectar ese patrón en el prompt, dispara automáticamente un generador de código y construye la app en React, un framework popular para frontend web [04:10].

El prompt utilizado fue directo: pedirle que creara una app para agregar UTM a una URL suministrada por un usuario, con los campos mínimos indispensables. En segundos, Claude entrega una interfaz funcional dentro del mismo chat.

¿Cómo iterar sobre una app generada por Claude?

Lo interesante es que no resuelves el problema una sola vez: lo resuelves muchas. Puedes pedirle mejoras incrementales sin reescribir todo desde cero, gracias a técnicas de optimización que evitan regenerar el código completo [05:30].

Ejemplos de iteraciones aplicadas en la clase:

  • Agregar una breve ayuda contextual para cada parámetro.
  • Mostrar ejemplos como Facebook, newsletter o Google en la fuente.
  • Habilitar un botón de copiar que envíe el resultado al portapapeles.

Cuando el botón de copiar falló, la solución fue pedirle a Claude que diera un paso atrás e implementara la función de forma diferente. Esto refleja una mentalidad clave: si no funciona, lo acomodas o aprendes algo nuevo. Es como trabajar con un asistente que sabe mucho pero le falta experiencia.

¿Por qué pedirle por favor a una IA mejora los resultados? Porque el modelo fue entrenado con textos humanos y emula patrones de comunicación cortés. Pedir por favor o dar las gracias a veces produce mejores respuestas.

¿Cómo funcionan las versiones y la publicación de artifacts en Claude?

Cada vez que mandas a regenerar o corregir el código, Claude mantiene un versionamiento automático del artifact. En la clase se llegó hasta la versión cuatro de cuatro, con la posibilidad de navegar hacia atrás haciendo clic en el botón de versión anterior [10:45].

A diferencia del canvas de ChatGPT, en Claude no puedes editar el código manualmente, pero sí tienes acceso ordenado a cada iteración previa. Esto te permite comparar implementaciones y volver a una versión que funcionaba mejor.

¿Qué opciones tienes con un artifact terminado?

Una vez que la app funciona, Claude ofrece varias acciones útiles:

  • Ver el código fuente generado.
  • Descargar la aplicación como archivo de texto.
  • Copiar todo el código al portapapeles.
  • Publicar la app con un enlace único en el dominio claude.site.

La publicación es la función más potente. Al hacer clic, Claude copia automáticamente un enlace tipo claude.site con un código único de identificación. Cualquier persona con ese link puede usar tu aplicación sin tener cuenta de Claude [12:50].

Si cambias de idea, puedes despublicar el artifact y volverlo privado. Eso sí, una vez despublicado no recuperas el mismo enlace: tienes que generar una nueva versión para obtener un link distinto.

¿Cómo compartir y remixar aplicaciones creadas con Claude?

Al abrir el enlace publicado en una ventana de incógnito, aparece un mensaje indicando que el artifact fue generado con Claude (puedes apagar ese aviso). Desde ahí, cualquier visitante puede usar la app o darle remix, lo que arranca un chat nuevo con ese código como punto de partida para editarlo y adaptarlo [14:20].

Esto abre posibilidades concretas para equipos:

  • Crear herramientas internas sin contratar desarrollo.
  • Compartir utilidades con compañeros de marketing, ventas u operaciones.
  • Permitir que otros remixen tus apps y las personalicen.

Aprender a programar sigue valiendo la pena precisamente por esto: el futuro estará lleno de herramientas creadas on demand, y entender el código que Claude genera te da una ventaja real para depurar errores y guiar mejor al modelo.

¿Qué pequeña aplicación resolvería un problema repetitivo en tu trabajo? Compártela en los aportes y cuéntanos cómo la construiste.

      Crea y publica apps web con Claude