← Volver a Recursos

🤖 CREA UN ARTIFACT CON IA 🎨

Taller Introductorio: De la Idea a la App en 40 Minutos

¡Aprende a crear aplicaciones interactivas sin programar!

📹 Video Tutorial Paso a Paso

Mira este video antes de comenzar. El Profesor Tito te explicará qué es un Artifact y cómo crearlo:

🎮 ¿Qué es un Artifact?

✨ Definición: Un Artifact es una "cosa real" que la IA crea para ti: aplicaciones web interactivas, juegos, calculadoras, visualizaciones... que funcionan inmediatamente en tu navegador, sin necesidad de programar.
💡 Ejemplo: Tu Primer Artifact

Vamos a crear un juego de adivinar el número. Copia este texto y pégalo en Claude:

Crea un juego de adivinar el número del 1 al 100. Hazlo interactivo y visual. IMPORTANTE: Usa HTML puro (no React ni frameworks), quiero poder copiarlo y pegarlo en Bloc de notas y que funcione.
🎯 ¿Qué va a pasar? Claude creará una aplicación completa con:
  • ✅ Un campo para ingresar números
  • ✅ Botones interactivos
  • ✅ Mensajes que te guían (mayor/menor)
  • ✅ Contador de intentos
  • ✅ Diseño colorido y atractivo

🌟 Ideas para Personalizar tu Juego

Una vez que tengas tu juego básico, pídele a la IA que lo mejore. Aquí hay ejemplos de prompts:

🎯 Para cambiar dificultad:
Agrégale tres niveles: Fácil (1-50), Medio (1-100), Difícil (1-500)
⏱️ Para agregar tiempo:
Agrégale un cronómetro que mida cuánto tardé en adivinar
🏆 Para gamificación:
Que me dé una medalla según mis intentos: 🥇 si adivino en menos de 7, 🥈 en menos de 10, 🥉 en menos de 15
🎨 Para cambiar diseño:
Cambia los colores a azul y morado con un estilo moderno
💡 Consejo Clave: Entre más específico seas en tus instrucciones, mejor será el resultado. No tengas miedo de pedir cambios varias veces hasta que quede perfecto. La IA aprende de tus peticiones.

📤 Sube tu Artifact

¿Ya terminaste tu aplicación? ¡Comparte tu trabajo con el Profesor Tito!

📦 ¿Qué debes entregar?
  • Archivo 1: Tu juego/app como archivo .html
  • Archivo 2: Documento PDF con tu proceso (prompts usados, reflexiones)
💻

Arrastra tu archivo .html aquí

o haz clic para seleccionar el archivo

Formato aceptado: .html (máximo 5MB)

📖 Instrucciones Completas del Taller

🎯 Objetivo del Taller: Aprender a crear aplicaciones web interactivas usando Inteligencia Artificial, sin necesidad de saber programar. Descubrirás que crear tecnología está al alcance de todos si sabes comunicar bien tus ideas.
⏱️ Tiempo Estimado: 40 minutos
🎓 Nivel: Principiante (No requiere conocimientos previos)
💻 Requisitos: Computadora con navegador web y acceso a claude.ai
🎨 FASE 1: ENTENDER QUÉ ES UN ARTIFACT (5 min)

¿Qué es un Artifact?

Un Artifact es como pedirle a un genio mágico que materialice tus ideas, pero en lugar de deseos vagos, creas cosas reales y funcionales.

Los Artifacts pueden ser:
  • 📱 Aplicaciones web interactivas: Juegos, calculadoras, herramientas
  • 📊 Visualizaciones de datos: Gráficos, diagramas, estadísticas
  • 📝 Documentos estructurados: Reportes, planes de estudio, guías
  • 🎨 Contenido creativo: Historias interactivas, poemas, guiones
  • 💻 Código funcional: Que puedes usar inmediatamente
✨ La Magia: Todo aparece en una ventana al lado del chat y funciona de inmediato, sin necesidad de copiar, pegar o instalar nada.
🎮 FASE 2: CREAR TU PRIMER ARTIFACT (20 min)

Paso 1: Acceder a Claude

  1. Abre tu navegador (Chrome, Edge, Firefox, Safari)
  2. Ve a: https://claude.ai
  3. Inicia sesión con tu cuenta (o crea una si no tienes)
  4. Estarás en la interfaz de chat de Claude

Paso 2: Crear el Juego Básico

  1. En el cuadro de texto, escribe o copia este prompt:
Crea un juego de adivinar el número del 1 al 100. Hazlo interactivo y visual. IMPORTANTE: Usa HTML puro (no React ni frameworks), quiero poder copiarlo y pegarlo en Bloc de notas y que funcione.
  1. Presiona Enter o click en el botón de enviar
  2. Espera unos segundos mientras Claude procesa tu solicitud
  3. ¡Aparecerá tu juego en una ventana al lado derecho! 🎉
  4. Pruébalo: ingresa números y verifica que funcione
🎯 ¿Qué acabas de hacer? Acabas de crear tu primera aplicación web usando lenguaje natural. No escribiste código, solo explicaste lo que querías.

Paso 3: Personalizar tu Artifact (La Parte Divertida)

Ahora viene lo interesante: mejorar tu creación. Simplemente sigue escribiendo en el chat para pedir cambios:

  1. Primer cambio - Agregar niveles de dificultad:
    Agrégale tres niveles: Fácil (1-50), Medio (1-100), Difícil (1-500)
    Claude modificará el juego y aparecerá la versión mejorada.
  2. Segundo cambio - Agregar cronómetro:
    Agrégale un cronómetro que mida cuánto tardo en adivinar
  3. Tercer cambio - Sistema de medallas:
    Que me dé medallas según mis intentos: 🥇 menos de 7, 🥈 menos de 10, 🥉 menos de 15
  4. Cuarto cambio - Personalizar colores:
    Cambia los colores a tonos de azul y morado con un diseño más moderno
💡 Secreto del Éxito: No tengas miedo de pedir cambios múltiples veces. La IA es iterativa: entre más específico seas y más veces refines, mejor será el resultado. Es como esculpir: empiezas con algo básico y lo vas puliendo.

Paso 4: Otras Ideas para Agregar

Si te queda tiempo, prueba estos prompts adicionales:

🎵 Agregar sonidos:
Agrégale sonidos de celebración cuando gane y efectos de sonido al adivinar
📊 Historial de partidas:
Que guarde mi historial de las últimas 5 partidas con tiempo e intentos
🎨 Temas visuales:
Agrégale un selector de temas: Claro, Oscuro, y Neón
💬 Pistas divertidas:
Que me dé pistas graciosas si me tardo mucho, como "¿Estás adivinando con los ojos cerrados?"
💾 FASE 3: GUARDAR Y EXPORTAR TU ARTIFACT (10 min)

Paso 5: Descargar tu Artifact (Método A - Si está disponible)

  1. En la ventana del Artifact, busca los tres puntos (⋮) en la esquina superior
  2. Haz click en "Download" o el ícono de descarga (⬇️)
  3. Se descargará un archivo .html
  4. Renómbralo: apellido-nombre-juego.html (Ejemplo: garcia-maria-juego.html)

Paso 6: Copiar el Código Manualmente (Método B - Funciona siempre)

Si el método anterior no está disponible, usa este método universal:

  1. En el chat, escribe este mensaje a Claude:
    Dame el código HTML completo para que pueda guardarlo como archivo
  2. Claude te mostrará todo el código en un bloque
  3. Busca el ícono de copiar (📋) y haz click
  4. O selecciona todo el código (desde <!DOCTYPE html> hasta </html>) y copia con Ctrl+C

Paso 7: Guardar como Archivo HTML

  1. Abre el Bloc de notas:
    • Windows: Presiona tecla Windows, escribe "bloc de notas", Enter
    • Mac: Abre TextEdit → Formato → Convertir a texto sin formato
  2. Pega el código con Ctrl+V (o Cmd+V en Mac)
  3. Ve a: Archivo → Guardar como
  4. Configura:
    • Nombre: apellido-nombre-juego.html
    • Tipo: Todos los archivos (*.*)
    • Codificación: UTF-8
  5. Click en "Guardar"
⚠️ MUY IMPORTANTE: El archivo DEBE terminar en .html, NO en .txt. Si quedó como .txt, cámbialo haciendo clic derecho → Cambiar nombre → Borra el .txt y deja solo .html

Paso 8: Probar que Funciona

  1. Busca tu archivo .html en tu carpeta
  2. Haz doble click sobre él
  3. Se abrirá en tu navegador automáticamente
  4. Tu juego debe funcionar exactamente igual que en Claude
  5. Juega una ronda completa para verificar
✅ ¡Éxito! Ahora tienes tu aplicación funcionando sin necesidad de internet. Puedes:
  • 📧 Enviarlo por email a amigos/familia
  • 💾 Guardarlo en USB y usarlo en cualquier computadora
  • ☁️ Subirlo a Google Drive / OneDrive
  • 📱 Abrirlo en tu celular
📝 FASE 4: DOCUMENTAR TU PROCESO (5 min)

Paso 9: Crear tu Documento de Proceso

  1. Abre Word, Google Docs o un editor de texto
  2. Crea un documento con esta estructura:
📄 Plantilla del Documento:

PROYECTO: Crea un Artifact con IA

ESTUDIANTE: [Tu Nombre Completo]

FECHA: [Fecha de hoy]

1. IDEA INICIAL

¿Qué quisiste crear? ¿Por qué elegiste ese proyecto?

(Ejemplo: "Quise crear un juego de adivinar números porque me gustan los desafíos y quería algo interactivo")

2. PROMPTS UTILIZADOS

Copia y pega TODAS las instrucciones que le diste a la IA:

• Prompt inicial:

(Copia el primer prompt aquí)

• Mejoras solicitadas:

1. [Primera mejora]

2. [Segunda mejora]

3. [Tercera mejora]

3. DESAFÍOS ENCONTRADOS

¿Hubo algo que no funcionó como esperabas? ¿Cómo lo resolviste?

4. RESULTADO FINAL

Describe qué hace tu aplicación final. ¿Qué características tiene?

5. REFLEXIÓN

¿Qué aprendiste sobre comunicarte con la IA? ¿Fue más fácil o difícil de lo que esperabas?

  1. Llena cada sección con tus propias palabras
  2. Guarda el documento como: apellido-nombre-proceso.pdf

Paso 10: Entregar tu Trabajo

  1. Usa el área de carga en la parte superior de esta página
  2. Arrastra tu archivo .html
  3. Después, sube también tu .pdf con la documentación
  4. Haz click en "Enviar mi Artifact"
  5. ¡Listo! El Profesor Tito recibirá tu proyecto
🎉 ¡FELICITACIONES! Has completado tu primer proyecto con IA. Has aprendido que crear tecnología ya no requiere años de estudio en programación, sino la habilidad de comunicar claramente lo que quieres crear.

💡 Ideas para Proyectos Futuros

Una vez que domines el juego de adivinar números, puedes crear:

🎮 Juegos

🛠️ Herramientas Útiles

🎨 Proyectos Creativos

📊 Visualizaciones

🚀 Desafío Final: ¿Te atreves a crear algo completamente original? Piensa en un problema que tengas en tu vida diaria y crea una herramienta para resolverlo.

🎓 Lo Que Aprendiste Hoy

Habilidades Técnicas:
  • ✅ Crear aplicaciones web interactivas
  • ✅ Comunicarte efectivamente con IA
  • ✅ Iterar y mejorar un proyecto
  • ✅ Exportar y compartir tus creaciones
  • ✅ Documentar tu proceso de trabajo
Habilidades Blandas:
  • ✅ Pensamiento computacional (descomponer problemas)
  • ✅ Comunicación clara y específica
  • ✅ Creatividad e innovación
  • ✅ Perseverancia (iteración hasta lograr el resultado)
  • ✅ Documentación profesional

❓ Preguntas Frecuentes

P: ¿Funciona con otras IAs además de Claude?
R: Sí, puedes usar ChatGPT, Gemini, Copilot o cualquier IA que genere código. El método de copiar y pegar el código es universal.
P: ¿Necesito saber programar?
R: No, ese es el punto. Solo necesitas saber explicar lo que quieres crear.
P: ¿Puedo editar el código después?
R: Sí, puedes abrirlo en Bloc de notas, hacer cambios y guardar. Aunque no sepas programar, con el tiempo podrás hacer pequeños ajustes.
P: ¿Mi proyecto funcionará sin internet?
R: Sí, una vez guardado el .html, funciona completamente offline (a menos que uses recursos externos como imágenes de internet).
P: ¿Qué hago si el código no funciona?
R: Asegúrate de copiar TODO el código (desde <!DOCTYPE html> hasta </html>). Si persiste el error, pídele a la IA: "Hay un error, dame el código en HTML puro sin React"
P: ¿Puedo vender o publicar lo que creo?
R: Depende de los términos de servicio de la IA que uses y de tu caso particular. Para proyectos escolares y personales no hay problema.

🔧 Solución de Problemas

Problema: El archivo se guardó como .txt
Solución: Click derecho → Cambiar nombre → Borra el .txt y deja solo .html
Problema: Se ve el código en lugar del juego
Solución: El archivo está en .txt. Vuelve a guardar seleccionando "Todos los archivos" y con extensión .html
Problema: Aparecen caracteres raros (ñ, á, é)
Solución: Al guardar, selecciona codificación UTF-8
Problema: La IA usa React y al copiar no funciona
Solución: Dile: "Convierte esto a HTML puro sin React ni frameworks"
Problema: El juego funciona en Claude pero no en mi archivo
Solución: Asegúrate de copiar el código COMPLETO. Pídele a la IA que te lo muestre de nuevo.

🌟 Reflexión Final

El verdadero aprendizaje:

Este taller no es solo sobre crear un juego. Es sobre entender que la tecnología ya no es una barrera. Cualquier persona que pueda expresar una idea puede crear aplicaciones funcionales.

El futuro no se trata de quién sabe más sintaxis de código, sino de quién tiene mejores ideas y sabe comunicarlas efectivamente. Hoy diste el primer paso en ese futuro.

¿Y ahora qué? No te detengas aquí. Experimenta, crea, falla, mejora. Cada Artifact que crees te enseñará algo nuevo sobre cómo pensar computacionalmente y cómo colaborar con IA.

Bienvenido a la era donde todos pueden ser creadores. 🚀