Caso práctico: una web de restaurante cinematográfica, creada por Claude a la primera

«Ogień i Zioła» es un restaurante polaco ficticio de Poznań cuya web construyó Claude por completo a partir de un único prompt, publicada en Hostilo sin ninguna corrección. A diferencia de nuestro caso práctico de Tetris, donde ajustar la lógica llevó varias rondas, aquí todo funcionó al primer intento. Este es el prompt exacto y por qué importa la diferencia.

El encargo

El objetivo era una web de restaurante premium con aire editorial: portada cinematográfica a pantalla completa, navegación fija, una sección de historia, pestañas de menú interactivas en cuatro categorías, el perfil del chef, un widget de reservas con validación real del formulario, una galería solo con CSS, horarios y ubicación, suscripción al boletín y un pie de página. Todo en un único archivo HTML, sin librerías externas, sin imágenes y sin backend.

El prompt exacto (cópialo y pruébalo)

Este es el prompt completo y sin editar que se envió a Claude, en su versión original en inglés. No se añadió nada después; esto es lo que generó la web terminada:

Ejemplo en vivo

Mira el resultado: restauracja.hostilo.page

Por qué funcionó a la primera

Nuestro caso práctico de Tetris necesitó varias rondas de correcciones: la lógica interactiva real (detección de colisiones, rotación, puntuación) tiene casos límite que solo aparecen al ejecutar el código. La web del restaurante es otro tipo de proyecto: mucho contenido y maquetación, poca lógica. Sus únicas partes interactivas, el cambio de pestañas y la validación del formulario, son patrones sencillos y conocidos que cualquier buen modelo resuelve sin fallos.

El propio prompt también hizo gran parte del trabajo. Enumeraba cada sección de forma explícita en lugar de describir la web vagamente, dejaba claras desde el principio las restricciones técnicas (un archivo, sin librerías externas, sin imágenes, sin APIs) y fijaba el tono («cinematográfico, elegante, cálido y premium») en vez de dejar el estilo al azar. Esa combinación de encargo rico en contenido, restricciones explícitas y tono claro es justo el patrón que explicamos en nuestra guía de prompts para webs de un solo archivo.

De Claude a un enlace en vivo

La publicación fue idéntica a la de cualquier otro ejemplo de este blog, por muy elaborada que fuera la página: copiar todo el HTML de Claude, pegarlo en el editor de Hostilo y guardar. La web quedó online al instante, sin compilación ni configuración de hosting aparte para las animaciones, las pestañas o la validación. Todo es simplemente HTML, CSS y JavaScript en un archivo.

La conclusión

No todos los proyectos con IA necesitan iteraciones, ni todos las evitan; depende de lo que pidas. Las páginas visualmente ricas y centradas en el contenido, con interacciones sencillas y estándar (pestañas, formularios, scroll suave), suelen salir a la primera, sobre todo con un prompt detallado y bien estructurado. Los proyectos con lógica real, como juegos, calculadoras o cualquier cosa con estado y casos límite, suelen necesitar unas cuantas rondas. En cualquier caso, publicar sigue siendo un único paso rápido en cuanto el código funciona.

Preguntas frecuentes

¿Qué herramienta de IA creó esta web de restaurante?
Claude, a partir de un único prompt detallado. El prompt completo está en este artículo.

¿Necesitó correcciones?
No. A diferencia del caso práctico de Tetris, esta web funcionó bien al primer intento, sin prompts adicionales.

¿Ogień i Zioła es un restaurante real?
No. Es un restaurante ficticio creado para demostrar lo que un solo prompt de IA puede lograr en una web visualmente rica y con mucho contenido.

¿El formulario de reserva reserva una mesa de verdad?
No. Valida los campos obligatorios y muestra un mensaje de éxito realista, todo en el navegador. No hay backend ni sistema de reservas detrás, porque el prompt no lo pedía.

¿Por qué funcionó a la primera mientras que Tetris necesitó iteraciones?
Este proyecto es sobre todo contenido y maquetación con interacciones simples (pestañas, validación de formulario), mientras que Tetris implica lógica de juego real con casos límite como la detección de colisiones. Los proyectos con mucha lógica suelen necesitar más iteraciones que los visuales.