Crea y publica apps web con Claude
Contenido del curso
Miguel Angel Reyes Moreno
En esta clase aprendí lo que son las UTM y que existe Blue Sky socials jajaja
Johan Alexander Sanabria Restrepo
Arriba Bluesky!
Javier Ramos
En el minuto 9.02 Anibal le paso la del que esta estrenando novia y la llama con el nombre de la Ex jajajajaja
Jennifer Lisandra García Orellana
jajajaj eso estuvo bueno
Carlos Andres Linares Lesmes
Menos mal hubo cambio de nombre en este contexto, porque si fuese un caso de la vida real y con humanos, no sobrevive,.....jajajajjaajja
Diego Eduardo Ramírez Martínez
jaja adore la primer respuesta a por qué pide las cosas "por favor" xD
Javier Ramos
Me parece muy apropiado el termino "Es como tener un asistente muy inteligente pero sin experiencia"
Nien Tzu Kuo
Bueno, llegue hasta el tercer intento para que Claude solucione el botón de registrar factura y aún no lo ha resuelto, el proceso quedó paralizado por el limite de consultas usando el plan gratuito
Dario Mendoza
Oswal Vrez
bueno, pero ahi de a poco van avanzando
David Felipe Morris Cáceres
Anibal es impresionante. Tremendo curso!!!!
Javier Ramos
Apoyo 100% a Anibal , cuando las maquinas dominen la Tierra recordaran gratamente y nos perdonaran la vida a quienes las hallamos tratado bien
Anaís Martínez
Hola!! Yo le subí una foto de mi gato Loki y le pedí que hiciera una animación y creó esto a la primera iteración:
Fernando Sánchez Mejía
La vida en internet siempre es mejor con imagenes de gatitos
Gabriel Obregón
⭐📘 Uso de Claude para crear aplicaciones con UTMs en React
🔵✨ 1. ¿Qué es un UTM?
UTM (Urging Traffic Monitor): 🔗 Código añadido a una URL para monitorear el tráfico web.
¿Para qué sirve? 🎯 Permite analizar el comportamiento de los usuarios mediante parámetros específicos.
🔹 Componentes del UTM
· 🏷️ Fuente (source): Origen del tráfico (Twitter, Facebook...).
· 🚦 Medio (medium): Tipo de tráfico (social, orgánico, pagado).
· 🎪 Campaña (campaign): Identifica campañas (ejemplo: Black Friday).
🟣⚙️ 2. ¿Qué puedes hacer con Claude?
👨💻 Crear aplicaciones web en React usando solo instrucciones textuales. 🪄 Si escribes: “crea una aplicación para agregar UTMs a una URL”, Claude genera el código automáticamente.
🔵🛠️ 3. Pasos para generar la aplicación en React
1. 🆕 Inicia una sesión nueva.
2. 💬 Indica que necesitas una aplicación hecha en React.
3. 🔢 Proporciona: URL + fuente + medio + campaña.
4. 🎨 Utiliza ayudas interactivas (placeholders y guías visuales).
🟣🧩 4. Personalización con Claude
Puedes pedir que añada:
· 💡 Ayudas visuales para explicar cada parámetro UTM.
· 🔧 Ajustes puntuales, como botones de copiado o corrección de funciones.
🔵📁 5. Gestión de versiones y colaboración
Claude genera una versión nueva cada vez que haces un cambio.
Beneficios
· 🔙 Volver a versiones anteriores.
· 📤 Exportar la aplicación como texto o código.
· 🌐 Publicar al instante con URL únicas para compartir.
Diego Andrés Lopez Rodriguez
Los "artifacts" en el contexto de Claude AI se refieren a componentes o recursos que pueden ser utilizados para mejorar el flujo de trabajo. Estos pueden incluir documentos, modelos, datos o cualquier elemento que facilite la integración de la inteligencia artificial en tus proyectos. Al trabajar con artifacts, puedes optimizar tareas, analizar datos y personalizar tus proyectos para alcanzar mejores resultados. Es esencial aprender a manejar estos recursos para maximizar el potencial de Claude AI en tu trabajo diario.
Cristhian Medina
Está increíble esta funcionalidad de crear un artefacto, poder compartirlo y poder modificarlo junto con la opción de tener un historial de las versiones, es simplemente magnífico
Edgar Mogollon
Claudio!
Diego Fernando Bolaños Chamorro
Sugiero controlar un poco el "ok"
Jonathan Macario
que buen comentario el del apocalipsis, también lo había pensado 🤣
Daniel Alfredo García Serna
📚 CLASE: CREA Y PUBLICA APPS WEB CON CLAUDE
━━━━━━━━━━━━━━━━━━
🎯 IDEA PRINCIPAL
Claude puede pasar de una descripción en lenguaje natural a una aplicación web funcional, sin que tengas que construir inicialmente todo el código manualmente.
🟡 El verdadero valor está en el ciclo crear → probar → iterar → publicar, no solamente en generar código.
━━━━━━━━━━━━━━━━━━
⚡ RESUMEN ULTRA RÁPIDO
🟡 Claude puede generar una aplicación funcional a partir de un prompt suficientemente claro.
🔵 En la demostración, Claude genera una app React para construir URLs con parámetros UTM.
🟢 Puedes mejorar la aplicación mediante instrucciones incrementales sin reconstruirla desde cero.
🟡 Claude mantiene versiones anteriores del Artifact para poder revisar iteraciones y regresar a una versión anterior.
🟣 Una aplicación terminada puede publicarse mediante un enlace compartible de claude.site.
━━━━━━━━━━━━━━━━━━
🔑 LO IMPORTANTE
🔵 Un Artifact es el resultado separado que Claude genera para trabajar sobre código o una aplicación.
🟢 Empieza con un problema concreto y describe claramente qué debe hacer la aplicación.
🟡 La primera versión no necesita ser perfecta: úsala como punto de partida para iterar.
🟢 Las mejoras pueden solicitarse progresivamente: ayudas, ejemplos, botones o nuevas funcionalidades.
🔴 Si una implementación falla, no asumas que debes empezar desde cero; prueba otra estrategia mediante una nueva instrucción.
🟣 El versionamiento permite experimentar sin perder fácilmente una implementación anterior que funcionaba.
🔵 Una app publicada puede compartirse mediante un enlace y utilizarse sin que el visitante tenga una cuenta de Claude.
━━━━━━━━━━━━━━━━━━
🧩 MODELO MENTAL
🔵 Problema → Prompt → Prototipo → Prueba → Iteración → Versión estable → Publicación
🟣 Primero valida la utilidad; después invierte esfuerzo en perfeccionar la implementación.
━━━━━━━━━━━━━━━━━━
🚀 ACCIONES PARA HOY
🟢 Identifica una tarea repetitiva que puedas convertir en una pequeña aplicación.
🟢 Describe entradas, proceso y resultado esperado antes de pedirle a Claude que programe.
🟢 Genera una primera versión y úsala inmediatamente para detectar problemas reales.
🟢 Solicita tres mejoras pequeñas, una por una, y observa cómo cambia el resultado.
🟢 Si algo falla, describe el comportamiento incorrecto y pide una implementación alternativa.
🟢 Revisa las versiones anteriores antes de descartar una solución que funcionaba.
🟢 Publica una herramienta sencilla y prueba el enlace desde una ventana de incógnito.
━━━━━━━━━━━━━━━━━━
🟣 VENTAJA PROFESIONAL
🟣 Esto permite crear microherramientas internas para marketing, operaciones, ventas o desarrollo sin comenzar desde cero.
🟣 El conocimiento de programación sigue siendo importante: entender el código permite detectar errores, validar decisiones y dirigir mejor a la IA.
🔴 No confundas un prototipo generado por IA con una aplicación lista para producción: seguridad, persistencia, autenticación, pruebas y mantenimiento requieren análisis adicional.
🟣 El curso actual de Platzi ya trata los Artifacts como una capacidad específica para crear apps sin código, mientras cursos posteriores cubren capacidades más recientes de Claude.
━━━━━━━━━━━━━━━━━━
📝 CIERRE
🟡 La habilidad nueva no es simplemente “pedirle código a Claude”, sino saber convertir un problema real en una herramienta útil e iterarla rápidamente.
🟢 Busca hoy una tarea pequeña que repitas manualmente y conviértela en un prototipo funcional.
Lucia Aldana Castillo
No dio error, es que estabas de incógnito. Por eso sale el login en el remix
DARGELINE STEPHANY GARCIA CALDERON
cuanto tiempo dura el link generado ? tiene caducidad?
Anibal Rojas
ProfesorNo que yo sepa
Jonathan Mendoza
Prompts. Seleccionar opción "concisa".
a) ¿Qué es un UTM?
b) A esta URL quiero agregarle una UTM: https://platzi.com/chatgpt/
c) Que la fuente sea Twitter.
d) Crea una aplicación que me permita agregarle una UTM a una URL suministrada por un usuario, adicionalmente se deben solicitar los campos mínimos indispensables.
e) Agrega una breve ayuda para cada parámetro.
f) No funcionó el botón de copiar la URL con la UTM, por favor, corregilo.
g) Nada. Sigue sin funcionar el botón de copiado, da un paso atrás e impleméntalo de una forma diferente.
Sergio González P.
Una de las soluciones que implemente con Claude fue la creación de una calculadora de hora de salida de jornada para conocer las horas que tenia que realizar en la jornada, o una calculadora de ciclos de sueño. Es muy util, tambien para la creación de pipelines de generación de landing pages automatizada porque los estilos CSS que aporta a las webs es de mucha calidad. Si alguien quiere que le ayude puede crear con Make pipelines de despliegue de landings en Netlify automaticamente.
Walter Raúl Sánchez Uceda
Sí, puedes crear un sistema completo utilizando los Artifacts en Claude AI, especialmente con la membresía Pro. Los Artifacts permiten realizar tareas específicas de manera eficiente y, combinados con las características avanzadas de Claude AI, puedes optimizar tu flujo de trabajo para desarrollar aplicaciones y proyectos completos. Es importante dominar el uso de estos Artifacts para maximizar tu productividad.
