Gemini 3 vertegenwoordigt een nieuw soort AI dat complexe verzoeken kan begrijpen en in seconden productieklaar code kan genereren. Om de echte mogelijkheden ervan te testen, besloot ik een praktisch en universeel hulpmiddel te maken zonder één regel code te schrijven: een aanpasbare koffiemenulayouter, exporteerbaar naar PDF en geschikt in één HTML-bestand. Het resultaat? Indrukwekkend.
Gemini 3 testen: een koffiemenu met AI maken
Google heeft een nieuwe versie van Gemini uitgebracht: versie 3. Deze nieuwe iteratie belooft nieuwe redener- en codegeneratiecapaciteiten. Laten we dit met een eenvoudige test zien.
Eerste stap: beginnen
Ga naar Gemini en selecteer "redenering" in de opdrachtprompt.
Voor deze test besloot ik een hulpmiddel te maken om snel en gemakkelijk een naar PDF exporteerbaar koffiemenu/barmenù te maken.
De initiële prompt
Hier is de gebruikte prompt:
Create a single-file HTML tool for designing a coffee shop/bar menu.
FEATURES REQUIRED:
Design Themes (user selectable):
- Modern (minimalist, clean lines)
- Nature (earthy, organic feel)
- Futuristic (sleek, bold)
- Zen (calm, balanced, minimal)
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
Export:
- PDF export in standard sizes: A4, A3, A5, Letter, Half Letter
- Print-optimized layout
- Maintain theme and colors in PDF
Visual Elements:
- Include an illustration/icon for each theme
- Display theme preview on the left panel
- Live preview of menu as user edits
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.
Het antwoord van Gemini 3
Na enkele minuten denken antwoordt Gemini:
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.
Gevolgd door de code. Ik neem de code en kopieer deze naar een HTML-bestand dat ik in mijn browser open.
En hier is het resultaat:
Het is schoon en functioneel. Het resultaat voor een enkele prompt is indrukwekkend. Ik plaats de code hier niet omdat deze vrij lang is. Ik nodig u uit om het zelf te testen.
De verbeteringen
Er zijn enkele praktische verbeteringen die nodig zijn:
- De grootte van elementen aanpasbaar maken
- De tekst onderaan het menu aanpasbaar maken
Laten we verder gaan en dit voltooien met deze tweede prompt:
Add the following features to the coffee menu designer:
DRAG & DROP:
- Drag categories to reorder them
- Drag menu items within categories to reorder them
- Visual feedback during drag (highlight, shadow, cursor)
- Smooth animations
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
SPACING CUSTOMIZATION (bonus):
- Gap between menu items (slider: 8px - 24px)
- Gap between categories (slider: 16px - 32px)
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
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
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).
Het verbeterde antwoord
Na enkele minuten redenering hier is het antwoord van 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.
Gevolgd door de code. Ik kopieer en plak de code in een nieuw HTML-bestand en open het in mijn browser.
Hieronder ziet u het resultaat:
De maten zijn aanpasbaar, alles werkt en PDF-opslag werkt. Het resultaat in 2 prompts is schoon, functioneel en indrukwekkend!