Caso práctico: Cómo hemos creado esta app para traducir páginas web usando IA en 5 minutos

En todos nuestros emails de nuestra newsletter incluimos links de interés o recursos relacionados con IA (artículos, videos de Youtube y posts de redes sociales), consultamos muchas fuentes en inglés ya que a menudo contienen la información de mayor calidad sobre ciertos temas de última hora, por lo tanto, muchos de ellos están en inglés y queremos que nuestra audiencia los pueda consultar ya traducidos al español.

Para ello hemos decidido crear una app utilizando IA para que nuestros usuarios la puedan usar cómodamente.

Utilizamos Claude 3.5, ya que es uno de los mejores LLMs para generar código, aunque también puedes usar este custom ChatGPT, que también funciona muy bien para trabajar con código.

Este es el prompt con el que hemos comenzado:

“Quiero que generes un código en html para una pagina muy sencilla en la que el usuario introduce una url de un articulo en cualquier idioma, y cuando clica el botón "traducir a español", se le abre una nueva pestaña en su navegador con la url que había introducido pero traducida al español.“

Puedes ver como Claude comienza a generar el código para la app:

Esta es a primera version que nos ha generado Claude 3.5 (puedes verla desde Claude clicando en “Preview”):

Ya funciona perfectamente, pero queremos una interfaz para la una app más intuitiva visualmente y moderna, así que usamos este prompt:

“hazla visualmente mas atractiva e intuitiva para el usuario“

Preview Versión 2:

Este diseño era mucho más intuitivo y con un diseño más moderno, sin embargo (y esto pasa a menudo cuando generas código con LLMs como Claude), no funcionaba correctamente (al clicar el botón no sucedía nada).

En estos casos, hay que explicarle a Claude qué no funciona y si aparecen errores al ejecutar la app es muy recomendable pegárselos también en el chat para que entienda mejor el problema.

En nuestro caso le indicamos esto:

“no me funciona, soluciónalo manteniendo el mismo estilo (me gusta el diseño)“

Versión final:

Instrucciones para utilizar la app fuera de Claude.

Cuando Claude te dé una versión final que te guste de tu app, debemos copiar el código que nos ha generado clicando en el botón de copiar de la barra de herramientas inferior:

Y para poder utilizar el código, tienes 2 opciones:

Opción 1: Utilizarlo online

Dirígete a esta página o a cualquier otro previsualizador de HTML online.

Borra el código que aparece en la sección de la izquierda y pega el código que has copiado de Claude.

Clica en “RUN” para previsualizar el código y poder utilizarlo.

Opción 2: Guárdalo en un PC y ejecútalo cuando quieras.

Ve a tu block de notas de tu PC y pega el código de Claude en una hoja nueva:

A continuación, selecciona en las opciones “guardar como” y guarda esta hoja escribiendo el nombre que elijas por ejemplo “APP”, y acabándola en “.html” y guárdala con este nombre en una carpeta de tu PC con el formato “todos los archivos”

Al guardarla siguiendo estos pasos, verás que en la carpeta donde la has guardado te aparecerá el archivo como si fuese una web:

Haz doble clic para poder utilizar tu app en el navegador.

Puedes probar nuestra app aquí.

Si aún no estás suscrito a nuestra newsletter donde compartimos las mejores herramientas de IA y casos de uso como este, puedes unirte gratis aquí👇

PD: Por favor, mueve nuestros correos de la carpeta de promociones a tu bandeja de entrada principal para asegurarte de recibir todos nuestros mensajes y no perderte ningún recurso futuro.

🎁 BONUS: Otras apps que puedes crear en minutos con IA (y que la gente va a querer guardar)

Después de crear la app traductora, muchos nos escribieron preguntando:
"¿Qué más puedo hacer con esta misma técnica?"

Así que aquí van 3 apps extra que puedes construir en menos de 10 minutos, sin saber programar, sin APIs, y que son realmente útiles en tu día a día.

1. Checklist de enfoque y productividad

✅ Una mini app que puedes abrir cada mañana para mantenerte enfocado en lo importante.

¿Cómo funciona?
Simple: escribes tus 3 tareas clave del día. A medida que las vas completando, las marcas.
Cuando completas las 3, la app te muestra un mensaje de motivación tipo:

💡 Ideal para personas que trabajan en remoto, freelancers, estudiantes, o cualquiera que quiera dejar de dispersarse entre mil cosas.
Se convierte en tu ritual diario de productividad.

2. Calculadora de tiempo perdido en redes sociales

⏳ ¿Cuántas veces entras a Instagram o TikTok al día? ¿Cuánto rato te quedas?
Con esta app, escribes esas dos cifras y al hacer clic en "Calcular", te muestra:

• Cuántas horas pierdes al mes

• Qué podrías haber hecho con ese tiempo (leer libros, ganar dinero, aprender IA)

Ejemplo:

💥 Es una de esas apps que no te deja indiferente. Brutal para crear conciencia digital.

3. Simulador de ahorro automático

💰 Una app sencilla pero poderosa.
Escribes cuánto gastas al mes en cafés, delivery, suscripciones, etc.
Seleccionas un modo:

• Modo minimalista

• Modo realista

• Modo brutal 💀

Y la app te devuelve:

🔥 Una herramienta que puede cambiar cómo ves tu dinero.
Ideal para creadores, trabajadores digitales, estudiantes o cualquier persona que quiera organizarse mejor sin usar Excel ni apps bancarias.