Test de Gemini 3 : créer un générateur de menu de café avec l'IA sans écrire une ligne de code

Gemini 3 représente une nouvelle génération d'IA capable de comprendre des demandes complexes et de générer du code production-ready en quelques secondes. Pour tester ses véritables capacités, j'ai décidé de créer un outil pratique et universel sans écrire une ligne de code : un designer de menu de café paramétrable, exportable en PDF, et tenant en un seul fichier HTML. Le résultat ? Impressionnant.

Test de Gemini 3 : créer un menu de café avec l'IA

Google a sorti une nouvelle version de Gemini : la version 3. Cette nouvelle itération promet de nouvelles capacités de raisonnement et de génération de code. Nous allons voir cela avec un test simple.

Première étape : se lancer

Rendez-vous sur Gemini et sélectionnez "raisonnement" dans l'invite de commande.

Pour ce test, j'ai décidé de réaliser un outil pour créer rapidement et facilement un menu de café/bar exportable en PDF.

Le prompt initial

Voilà le prompt utilisé :

Create a single-file HTML tool for designing a coffee shop/bar menu.

FEATURES REQUIRED:

1. Design Themes (user selectable):

   • Modern (minimalist, clean lines)
   • Nature (earthy, organic feel)
   • Futuristic (sleek, bold)
   • Zen (calm, balanced, minimal)

2. Customization:

   • Editable menu items with names and prices
   • Add/remove menu categories (Coffee, Tea, Food, Desserts, etc.)
   • Text color selection from a palette
   • Theme color customization (primary accent color)
   • Option to add item descriptions

3. Export:

   • PDF export in standard sizes: A4, A3, A5, Letter, Half Letter
   • Print-optimized layout
   • Maintain theme and colors in PDF

4. Visual Elements:

   • Include an illustration/icon for each theme
   • Display theme preview on the left panel
   • Live preview of menu as user edits

5. Technical:

   • Single HTML file (no dependencies, or use CDN links)
   • Use TailwindCSS via CDN
   • Include html2pdf library for PDF export
   • Fully responsive design
   • Save/load functionality (LocalStorage for user data)

STRUCTURE:

• Left panel: Controls (theme, colors, export options)
• Right panel: Live menu preview
• Simple, intuitive UI

Make it production-ready, professional, and easy for non-developers to use.

La réponse de Gemini 3

Après quelques minutes de réflexion, Gemini répond :

Here is a complete, single-file HTML solution. It uses TailwindCSS for styling, FontAwesome for icons, and html2pdf.js for generating the PDF. It requires no installation—just save the code below as an .html file (e.g., menu-maker.html) and open it in your browser.

Suivi du code. Je prends le code et je le copie dans un fichier html que j'ouvre dans un navigateur.

Et voilà le résultat :

C'est propre et fonctionnel. Le résultat pour un seul prompt est impressionnant. Je ne mets pas le code ici car c'est un peu long. Je vous invite à tester par vous-même.

Les améliorations

Il y a des petites améliorations pratiques à apporter :

• Rendre modifiable la taille des éléments
• Rendre modifiable le texte en bas du menu

Poussons un peu plus loin et complétons avec ce second prompt :

Add the following features to the coffee menu designer:

1. DRAG & DROP:

   • Drag categories to reorder them
   • Drag menu items within categories to reorder them
   • Visual feedback during drag (highlight, shadow, cursor)
   • Smooth animations

2. SIZE CUSTOMIZATION:

   • Adjustable font size for:
     • Category titles (slider: 16px - 32px)
     • Menu item names (slider: 12px - 24px)
     • Menu item prices (slider: 10px - 20px)
     • Menu item descriptions (slider: 10px - 16px)
   • Show current size value next to each slider
   • Live preview as user adjusts

3. SPACING CUSTOMIZATION (bonus):

   • Gap between menu items (slider: 8px - 24px)
   • Gap between categories (slider: 16px - 32px)

4. FOOTER TEXT CUSTOMIZATION:

   • Editable footer text (currently "Menu created with Barista Designer")
   • Text input field to modify footer content
   • Option to toggle footer visibility (show/hide checkbox)
   • Footer font size slider (8px - 16px)
   • Footer text color selection from palette

5. UX IMPROVEMENTS:

   • Add "Reset sizes to default" button
   • Add icons for drag handles (≡ icon)
   • Group font size controls in a dedicated panel
   • Disable text selection during dragging
   • Add delete buttons for categories and items

6. PERSISTENCE:

   • Save all size settings and footer text to LocalStorage
   • Load them when user reopens the tool

Keep the single-file HTML structure and maintain all existing features (themes, colors, PDF export).

La réponse améliorée

Après quelques minutes de raisonnement, voilà la réponse de Gemini :

Here is the updated, single-file solution.

I have added SortableJS (via CDN) to handle robust drag-and-drop functionality, implemented CSS Variables for high-performance live font resizing, and added the requested Footer and Spacing controls.

Suivi du code. Je copie-colle le code dans un nouveau fichier html et l'ouvre dans un navigateur.

Ci-dessous, le résultat :

Les tailles sont modifiables, tout est fonctionnel et la sauvegarde en PDF fonctionne. Le résultat en 2 prompts est propre et fonctionnel, impressionnant !