Pedirle a una inteligencia artificial que cree una página web parece tan simple como escribir una frase y esperar el resultado. Pero la diferencia entre un prompt improvisado y uno bien estructurado define la calidad del sitio que obtienes, y aquí te muestro cómo lograrlo con el proyecto Okini, un café de especialidad que vamos a construir paso a paso.
Qué es el proyecto Okini y por qué importa para aprender
Okini significa gracias en la región de Kansai, en Japón, y es el café que va a servir como hilo conductor para aplicar cada concepto del curso en un negocio real.
El modelo de negocio tiene reglas específicas que serán clave al momento de pedirle a la IA que construya el sitio:
- Métodos con reserva: V60 a 5 dólares, Kyoto drip a 7 dólares y sifón a 8 dólares.
- Máximo 50 tazas al día entre todos los métodos lentos y un límite de dos tazas por persona.
- Prensa francesa walk-in sin reserva a 3 dólares la taza hasta el cierre.
- Cata semanal con cupo para ocho personas a 25 dólares por persona.
- Horario de ocho de la mañana a ocho de la noche, todos los días.
En los recursos de la clase encontrarás el brief completo para que sigas la construcción conmigo y luego lo adaptes a tu propio negocio [2:00].
Por qué un prompt corto en Gemini genera resultados inventados
La primera prueba la hice en Gemini con la herramienta Canvas activada, que renderiza el código como si fuera una página web abierta en el navegador, sin tener que crear un archivo .html manualmente. El prompt fue directo: Hazme una página web para Okini, mi café de especialidad [3:30].
El resultado se ve razonable a primera vista. Tiene título, secciones y colores. Pero al revisarlo aparecen problemas serios: un eslogan que nunca di, una historia inventada y productos que no son los míos. Y peor aún, lo que sí sé sobre Okini no aparece: ni la regla de las dos tazas por persona, ni la diferencia entre métodos con reserva y prensa francesa, ni la cata semanal.
¿Por qué la IA inventa información cuando le pido una página web? Porque cuando le das poca información, llena los huecos con suposiciones. No es mala fe, hace lo que puede con lo que tiene. El problema no es de la herramienta, es del prompt.
La intuición dice que la solución es escribir un prompt más largo, pero eso no resuelve el fondo. Si no sabes qué pedir, escribir más no te hace pedir mejor.
Cómo invertir los roles para que la IA te entreviste a ti
La solución útil es cambiar quién pregunta. En lugar de que yo le pida cosas a Gemini, le pido que me entreviste primero. El prompt fue: Voy a construir una página web para mi café de especialidad. Antes de generar código, entrevístame, hazme las preguntas que necesites para entender el negocio, qué información quiero mostrar y qué debe hacer la página. Cuando creas que tienes lo necesario, dímelo y ahí generamos [6:30].
Gemini empezó a preguntar sobre identidad visual, personalidad de la marca, secciones deseadas y métodos de preparación. Para algunas respuestas copié información directa del brief. Para otras, como la identidad visual, fui honesta: no tengo logotipo ni paleta definida, pero me gusta el verde menta y quiero incluirlo.
¿Qué hago si Gemini se queda atascado durante la entrevista? Copia de nuevo el mismo prompt en una conversación nueva o reintenta. Las herramientas de IA fallan a veces y basta con retomar desde donde quedaste.
Cuando Gemini terminó la entrevista, devolvió algo parecido a un nuevo brief, pero esta vez con especificaciones técnicas para el sitio. Le di mi visto bueno y le pedí que generara el código en modo Canvas.
Cómo visualizar el código HTML generado por Gemini
Si el botón de vista previa no aparece, puedes usar la herramienta HTML Online Viewer que dejo en los recursos. Copias el código desde Gemini con el botón superior derecho, lo pegas en el visor y ves el resultado al instante.
La diferencia con el primer intento es notoria. Esta segunda página sí tiene los métodos de preparación con precios reales, las reglas de las tazas y la cata semanal con sus cupos. No inventó historia ni productos.
Lo que cambió no fue un prompt más elaborado, sino que la inteligencia artificial me hizo preguntas que yo no me había hecho. Es una colaboración distinta: yo aporto el conocimiento del negocio, ella aporta el conocimiento técnico de qué preguntar.
Cómo guardar el resultado como archivo HTML
En Windows pegas el código en el bloc de notas. En Mac abres Text Edit, creas un New Document, pegas el código y al guardar le pones el nombre okini-v0.html. El formato .html es obligatorio para que el navegador lo lea como página web [11:30].
Si revisas el código vas a reconocer etiquetas de la clase anterior como h1, p, a o img, junto con etiquetas nuevas como DOCTYPE, html, head y body, que le dicen al navegador cómo leer un documento HTML completo. Las veremos a fondo en el módulo tres.
Por qué dos prompts iguales generan resultados diferentes en la IA
Hice una prueba final: abrí un chat nuevo y pegué exactamente el mismo prompt de entrevista. Gemini me hizo preguntas parecidas pero no idénticas, y el código final fue similar aunque ligeramente distinto en colores y secciones.
No pasa por usar cuentas distintas ni herramientas diferentes. Hay una razón técnica detrás de esto que vamos a explorar en la siguiente clase, junto con el nombre formal de la técnica que acabamos de usar: description. Ese concepto va a atravesar el curso entero.
¿Ya intentaste construir tu propio proyecto con el método de entrevista? Cuéntame en los comentarios qué preguntas te hizo la IA que no esperabas.
