Étude de cas : un site de restaurant cinématographique, généré par Claude du premier coup

« Ogień i Zioła » est un restaurant polonais fictif de Poznań, dont le site a été entièrement construit par Claude à partir d’un seul prompt, puis publié sur Hostilo sans aucune correction. Contrairement à notre étude de cas Tetris, où la logique a demandé plusieurs tours, tout a fonctionné ici du premier coup. Voici le prompt exact, et pourquoi cette différence compte.

Le cahier des charges

L’objectif : un site de restaurant haut de gamme au ton éditorial, avec une section d’accueil cinématographique plein écran, une navigation fixe, une section histoire, des onglets de menu interactifs sur quatre catégories, le portrait du chef, un module de réservation avec vraie validation du formulaire, une galerie en pur CSS, les horaires et l’adresse, une inscription à la newsletter et un pied de page. Le tout dans un seul fichier HTML, sans bibliothèque externe, sans image, sans backend.

Le prompt exact (copiez-le et essayez)

Voici le prompt complet et non modifié envoyé à Claude, dans sa version originale en anglais. Rien n’a été ajouté ensuite : c’est lui qui a produit le site final :

Exemple en ligne

Voir le résultat : restauracja.hostilo.page

Pourquoi un seul essai a suffi

Notre étude de cas Tetris a nécessité plusieurs séries de corrections : une vraie logique interactive (détection de collisions, rotation, score) comporte des cas limites qui n’apparaissent qu’à l’exécution du code. Le site du restaurant est un autre type de projet : beaucoup de contenu et de mise en page, peu de logique. Ses seules parties interactives, le changement d’onglet et la validation du formulaire, sont des schémas simples et bien connus que tout bon modèle maîtrise sans problème.

Le prompt lui-même a aussi fait une grande partie du travail. Il listait explicitement chaque section au lieu de décrire vaguement le site, posait d’emblée les contraintes techniques (un seul fichier, pas de bibliothèques externes, pas d’images, pas d’API) et fixait le ton (« cinématographique, élégant, chaleureux et haut de gamme ») au lieu de laisser le style au hasard. Cette combinaison, un brief riche en contenu, des contraintes explicites et un ton clair, est exactement celle décrite dans notre guide des prompts pour sites en un seul fichier.

De Claude à un lien en ligne

La publication a été identique à celle de tous les autres exemples de ce blog, quelle que soit la richesse de la page : copier tout le HTML depuis Claude, le coller dans l’éditeur Hostilo, enregistrer. Le site était en ligne immédiatement, sans build ni configuration d’hébergement séparée pour les animations, les onglets ou la validation. Tout cela n’est que du HTML, du CSS et du JavaScript dans un seul fichier.

À retenir

Tous les projets générés par IA ne demandent pas d’itérations, et tous n’y échappent pas : cela dépend de ce que vous demandez. Les pages visuellement riches, centrées sur le contenu, avec des interactions simples et standard (onglets, formulaires, défilement fluide), passent souvent du premier coup, surtout avec un prompt détaillé et bien structuré. Les projets avec une vraie logique, comme les jeux, les calculateurs ou tout ce qui a un état et des cas limites, demandent plus souvent quelques tours. Dans tous les cas, la publication reste une étape unique et rapide dès que le code fonctionne.

Questions fréquentes

Quel outil d’IA a créé ce site de restaurant ?
Claude, à partir d’un seul prompt détaillé. Le prompt complet figure dans cet article.

A-t-il fallu des corrections ?
Non. Contrairement à l’étude de cas Tetris, ce site a fonctionné correctement du premier coup, sans prompt supplémentaire.

Ogień i Zioła est-il un vrai restaurant ?
Non. C’est un restaurant fictif créé pour montrer ce qu’un seul prompt d’IA peut produire pour un site visuellement riche et dense en contenu.

Le formulaire de réservation réserve-t-il vraiment une table ?
Non. Il vérifie les champs obligatoires et affiche un message de confirmation réaliste, entièrement dans le navigateur. Il n’y a ni backend ni système de réservation derrière, car le prompt n’en demandait pas.

Pourquoi ça a marché du premier coup alors que Tetris a demandé des itérations ?
Ce projet repose surtout sur le contenu et la mise en page, avec des interactions simples (onglets, validation de formulaire), alors que Tetris implique une vraie logique de jeu avec des cas limites comme la détection de collisions. Les projets riches en logique demandent généralement plus d’itérations que les projets visuels.