Por qué existe este capítulo: los 50 yuanes que casi me dan un infarto
La razón para escribir este capítulo es simple: un amigo gastó 50 yuanes para que alguien le hiciera una simple ruleta de premios en una página web.
Cuando lo escuché, casi me da un infarto.
No es que 50 yuanes sean caros, sino que esto se puede hacer en 5 minutos con IA gratuita.
En serio, si tienes esta necesidad, incluso si me regalas 50 yuanes directamente y te enseño paso a paso, es mejor que pagar a esos servicios. Al menos mis tutoriales son gratuitos y te explico cada paso con claridad.
Así que este capítulo es una adición especial, específicamente para enseñarte: cómo usar IA gratuita para crear una página HTML simple pero práctica.
Recordatorio importante: familiarízate primero con la versión web gratuita
Antes de sumergirnos, quiero enfatizar una cosa:
Las versiones web de IA actuales ya son muy potentes. No necesitas conocimientos de programación, ni instalar software, solo abre un navegador y úsalas.
¿Qué puede hacer la versión web de IA?
- Chatear contigo y responder preguntas
- Reconocer imágenes y analizar contenido
- Escribir código y crear páginas web
- Crear presentaciones e informes
- Traducir y resumir documentos
- Y mucho más…
Mi sugerencia: los principiantes deben dominar primero la IA web gratuita antes de considerar herramientas avanzadas como las API.
¿Por qué? Porque la versión web:
- Es completamente gratuita (o tiene cuotas gratuitas generosas)
- Es simple de usar, sin curva de aprendizaje
- Ya es lo suficientemente potente
- Te permite preguntar directamente a la IA si tienes problemas
Ahora empecemos con el tema principal: Usa IA para crear una ruleta de premios en una página web.
Usa AI Studio para crear una página HTML
Paso 1: Entra en Google AI Studio
Usaremos Google AI Studio, la plataforma gratuita oficial de IA de Google.
¿Por qué elegirla?
- Completamente gratuita
- Gemini 3 Pro es potente
- Adecuada para tareas complejas como crear páginas web
Pasos:
- Abre https://aistudio.google.com
- Inicia sesión con tu cuenta de Google (requiere VPN/proxy)
- Entra en la interfaz principal
Paso 2: Selecciona Playground y el modelo
Después de iniciar sesión, verás la interfaz principal de AI Studio.
Pasos:
- Haz clic en “Playground” en el menú izquierdo
- En el selector de modelos en la parte superior derecha, elige Gemini 3 Pro
- No elijas Flash; Pro es más capaz
- Especialmente para tareas complejas como escribir código
- Confirma que a la izquierda está la interfaz de chat con un cuadro de entrada en la parte inferior
Ahora estás listo para chatear con la IA.
Paso 3: Ingresa un prompt para que la IA genere la página web
Este paso es clave: debes decirle claramente a la IA lo que quieres.
¡Cuanto más detallado, mejor! No digas solo “Ayúdame a hacer una ruleta de premios”; sé específico sobre:
- Cómo se ve
- Qué funciones tiene
- Cómo usarla
- Qué estilo
Ejemplo de prompt completo
Copia el texto de abajo y pégalo en el cuadro de entrada de AI Studio:
Please help me generate a lottery wheel webpage.
If no prizes are specified, use default prizes: Grand Prize, First Prize, Second Prize, Third Prize, Lucky Prize, Try Again.
Functional requirements:
- Beautiful wheel design, supporting 6-8 sectors
- A "Start Lottery" button in the center
- Click the button to spin the wheel
- The spin should have acceleration and deceleration effects for realism
- After stopping, a popup shows the result
- Click the popup to close and spin again
Design requirements:
- Festive and grand style (mainly red and gold)
- The wheel border should have texture
- Each sector should have alternating colors
- A pointer indicating the current position
- Responsive for mobile and desktop
After completion, please explain:
1. How to open and use it
2. How to modify the prize names
3. How to adjust the winning probability
Use example prizes: iPhone 16, AirPods, 100 yuan red envelope, 50 yuan red envelope, Try Again
Pasos:
- Copia y pega el prompt anterior en el cuadro de entrada
- Haz clic en el botón “Ejecutar” o presiona Enter
- Espera a que la IA genere (normalmente de 10 a 30 segundos)
Paso 4: La IA devolverá el código HTML completo
Después de que la IA termine de generar, verás un gran bloque de código.
La respuesta de la IA normalmente incluye:
- Código HTML: un archivo de página web completo
- Instrucciones de uso: cómo abrirlo y modificarlo
- Guía de personalización: cómo cambiar premios y ajustar probabilidades
El código se ve así:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lottery Wheel</title>
<style>
/* Style code here */
</style>
</head>
<body>
<!-- Webpage content here -->
<script>
// Function code here
</script>
</body>
</html>
¡No te asustes! ¡La página web ya puede ejecutarse ahora! Solo sigue las capturas de pantalla y haz clic.
Paso 5: Modifica el contenido de la página web (cambia premios, ajusta probabilidades)
La página web generada por IA suele ser bastante completa, pero quizás quieras:
- Cambiar nombres de premios
- Ajustar probabilidades de ganar
- Cambiar colores
No te preocupes, no necesitas entender código. ¡Sigue preguntando a la IA!
Continúa la conversación, deja que la IA te ayude a modificar
Pasos:
- No cierres la ventana de chat de AI Studio
- La IA recuerda tu conversación anterior
- Puedes seguir haciendo preguntas abajo
- Ingresa tu solicitud de modificación
Ejemplo 1: Cambiar nombres de premios
Escribe en el cuadro de entrada:
Add a settings interface to this webpage to set the probabilities and specific prizes for different awards.
Itera hasta que estés satisfecho
Este es el proceso central para hacer cosas con IA:
- Expresa claramente lo que quieres
- La IA genera la primera versión
- Pruébala, encuentra problemas
- Dile el problema a la IA, deja que lo corrija
- Repite los pasos 3-4 hasta que sea perfecto
Puntos clave:
- No tengas miedo a las molestias, prueba varias veces
- Cambia solo una cosa a la vez para facilitar el control
- Si la IA cambia algo mal, di “No, vuelve a la versión anterior”
Paso 6: Descarga la página web final
Ahora tienes una ruleta de premios perfecta, ¿cómo descargarla?
Simplemente haz clic en el botón de descarga, se descargará en tu computadora local y podrás abrirla para usarla.
¿Qué pueden hacer las páginas HTML? 10 recomendaciones de miniherramientas prácticas
A estas alturas, quizás estés pensando: además de la ruleta, ¿qué otras páginas web puedo hacer con IA?
La respuesta es: ¡casi cualquier miniherramienta simple!
Aquí tienes 10 ejemplos prácticos que puedes pedirle directamente a la IA que haga:
1. Herramienta de traducción en línea
Prompt:
Make an online translation webpage that supports Chinese-English translation with a clean interface.
2. Reconocimiento de texto en imágenes (OCR)
Prompt:
Make a webpage that can upload an image, recognize text in the image, and allow copying.
3. Lista de tareas
Prompt:
Make a to-do list webpage that can add, delete, and mark tasks as complete, with data saved in the browser.
4. Cuenta atrás/Temporizador
Prompt:
Make a multi-functional timer webpage: countdown, Pomodoro timer, stopwatch.
5. Generador de contraseñas aleatorias
Prompt:
Make a password generator that can set length and complexity, with one-click copy.
6. Calculadora de IMC
Prompt:
Make a BMI health calculator that inputs height and weight and displays health advice.
7. Generador de códigos QR
Prompt:
Make a QR code generation webpage that inputs text or URL, generates a QR code, and allows download.
8. Selector de colores
Prompt:
Make a color tool that can select colors, display RGB/HEX values, and provide color scheme suggestions.
9. Editor Markdown
Prompt:
Make a simple Markdown editor with input on the left and real-time preview on the right.
10. Rastreador de gastos
Prompt:
Make a simple expense tracking webpage that can record income and expenses and display statistical charts.
Características comunes de estas herramientas:
- Todas son archivos HTML individuales
- No requieren servidor
- Solo hay que abrirlas en un navegador
- Completamente gratuitas
Preguntas frecuentes
P1: No entiendo nada de código, ¿realmente puedo hacer esto?
R: ¡Sí, puedes! Todo lo que necesitas saber es:
- Copiar y pegar
- Guardar un archivo
- Abrir un archivo con un navegador
Solo estos tres pasos, incluso un niño puede hacerlo.
P2: ¿Qué pasa si el código generado por IA no es perfecto?
R: ¡Es normal! Continúa la conversación con la IA:
- “Aquí hay un error, al hacer clic en el botón no pasa nada”
- “Este color es feo, cámbialo por algo bonito”
- “¿Puedes añadir un efecto de sonido?”
La IA seguirá mejorando según tus comentarios.
P3: ¿Puedo usar páginas web hechas con IA con fines comerciales?
R: Técnicamente sí, pero ten en cuenta:
- El código generado por IA normalmente no tiene restricciones de derechos de autor
- Pero si es para un proyecto de cliente, pruébalo a fondo
- Para proyectos comerciales complejos, sigue siendo recomendable contratar a un desarrollador profesional
P4: ¿Por qué no se abre mi archivo HTML?
R: Razones comunes:
- Extensión de archivo incorrecta: asegúrate de que sea
.html, no.html.txt - Código incompleto: asegúrate de haber copiado todo el código
- Problema del navegador: prueba con otro navegador
P5: ¿Puedo usarlo en el móvil?
R: ¡Sí! Dos métodos:
- Transfiere el archivo HTML a tu teléfono y ábrelo con un navegador móvil
- Súbelo a plataformas como Netlify y accede mediante URL (recomendado)
P6: Quiero modificar el código pero no sé cómo
R: ¡No lo modifiques tú mismo! Pregúntale a la IA:
- “Quiero cambiar el color de fondo a azul”
- “Quiero hacer la fuente del título más grande”
- “Quiero añadir música de fondo”
Deja que la IA lo modifique por ti, luego copia el nuevo código.
Resumen
Hoy has aprendido:
- Cómo usar Google AI Studio para generar una página HTML
- Cómo escribir prompts claros para decirle a la IA tus necesidades
- Cómo guardar el archivo HTML y abrirlo en un navegador
- Cómo mejorar continuamente la página web mediante la conversación
- Cómo compartir o desplegar tu página web
Idea central:
- No necesitas conocimientos de programación
- No necesitas dinero
- Solo necesitas saber cómo comunicarte con la IA
- Haz una herramienta práctica en 5 minutos
La próxima vez que alguien te pida que hagas una página web simple, podrás:
- Usar IA para hacerlo en 5 minutos
- Cobrar esos 50 yuanes (es broma)
- O enseñarles a hacerlo ellos mismos
En serio, ¡deja de gastar dinero!