Gemini 3 stellt eine neue Generation von KI dar, die in der Lage ist, komplexe Anfragen zu verstehen und in wenigen Sekunden produktionsbereiten Code zu generieren. Um ihre wahren Fähigkeiten zu testen, beschloss ich, ein praktisches und universelles Tool ohne das Schreiben einer einzigen Codezeile zu erstellen: einen anpassbaren Kaffeemenü-Designer, der als PDF exportiert werden kann und in eine einzelne HTML-Datei passt. Das Ergebnis? Beeindruckend.
Gemini 3 testen: Ein Kaffemenü mit KI erstellen
Google hat eine neue Version von Gemini veröffentlicht: Version 3. Diese neue Iteration verspricht neue Denk- und Codegenerierungsfähigkeiten. Schauen wir uns das mit einem einfachen Test an.
Erster Schritt: Loslegen
Gehen Sie zu Gemini und wählen Sie "Denken" in der Eingabeaufforderung.
Für diesen Test beschloss ich, ein Werkzeug zu erstellen, um schnell und einfach ein in PDF exportierbares Kaffee-/Barmenü zu erstellen.
Die anfängliche Aufforderung
Hier ist die verwendete Aufforderung:
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.
Gemini 3s Antwort
Nach ein paar Minuten Überlegung antwortet 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.
Gefolgt vom Code. Ich kopiere den Code und füge ihn in eine HTML-Datei ein, die ich in meinem Browser öffne.
Und hier ist das Ergebnis:
Es ist sauber und funktional. Das Ergebnis mit nur einer Aufforderung ist beeindruckend. Ich setze den Code hier nicht ein, da er ziemlich lang ist. Ich lade Sie ein, es selbst zu testen.
Die Verbesserungen
Es gibt einige praktische Verbesserungen, die vorgenommen werden müssen:
- Die Größe der Elemente modifizierbar machen
- Den Text am unteren Rand des Menüs modifizierbar machen
Lassen Sie uns weiter gehen und mit dieser zweiten Aufforderung vervollständigen:
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).
Die verbesserte Antwort
Nach ein paar Minuten Überlegung ist hier Geminis Antwort:
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.
Gefolgt vom Code. Ich kopiere und füge den Code in eine neue HTML-Datei ein und öffne sie in meinem Browser.
Unten ist das Ergebnis:
Die Größen sind modifizierbar, alles funktioniert und das Speichern als PDF funktioniert. Das Ergebnis bei 2 Aufforderungen ist sauber, funktional und beeindruckend!