Gemini 4 Argon: Ein React-Dashboard mit Canvas erstellen

Um mit Gemini 4 Argon in der Gemini-Web-App zu programmieren, wählen Sie 4 Argon, aktivieren Canvas und beschreiben die gewünschte Anwendung. Canvas bietet einen Code-Editor und eine Vorschau im selben Arbeitsbereich. So können Sie die Oberfläche prüfen und Änderungen anfordern, ohne zunächst ein lokales Projekt einzurichten.

Als Beispiel dient Daylight People, ein HR-Dashboard mit React. Die Vorgaben umfassen eine cremegelbe Oberfläche, eine kompakte Navigation, einen Terminplan, Leistungsdiagramme und eine Mitarbeitertabelle. Sie legen auch fest, was beim Wechsel des Zeitraums, bei der Mitarbeitersuche und beim CSV-Export passieren soll. Dadurch lässt sich mehr prüfen als die Gestaltung des ersten Bildschirms.

Voraussetzungen

Öffnen Sie gemini.google.com in einem Desktop-Browser, melden Sie sich an und prüfen Sie, ob das Modellmenü 4 Argon enthält. Laut Googles Ankündigung ist der Zugriff in der Gemini-App für Abonnenten von Google AI Pro und Ultra vorgesehen. Prüfen Sie die verfügbaren Modelle Ihres Kontos; die Anmeldung allein gewährt nicht jedem Konto Zugriff auf jedes Modell. Googles Ankündigung zu Argon

Diese Anleitung verwendet die Gemini-App. Für die Schritte in Canvas benötigen Sie weder einen Gemini-API-Schlüssel noch ein npm-Projekt oder ein Terminal. Die API-Integration ist ein eigener Arbeitsablauf; die Modellkennung lautet gemini-4-argon. Google-Dokumentation zum Modell

Bereiten Sie eine Vorgabe mit Zielgruppe, Seitenbereichen, visueller Hierarchie und Interaktionen vor. Sie können ein Referenzbild anhängen, das Sie verwenden dürfen. Beschreiben Sie wichtige Eigenschaften wie kompakte Abstände oder asymmetrisch angeordnete Diagramme, statt nur ein „modernes Dashboard“ anzufordern.

1. 4 Argon auswählen

Starten Sie einen neuen Chat und öffnen Sie die Modellauswahl neben dem Eingabefeld. In der für diesen Leitfaden geprüften Oberfläche stand 4 Argon mit der Beschreibung Complex tasks zur Auswahl. Wählen Sie den Eintrag und prüfen Sie, ob in der Eingabeleiste Argon steht.

Entscheidend ist die Modellbezeichnung im Menü. Eine Startseite mit Gemini-Logo verrät nicht, welches Modell die nächste Nachricht beantwortet.

2. Canvas aktivieren

In der geprüften Desktop-Oberfläche war der Weg:

1. Neben dem Eingabefeld auf + klicken.

2. More tools öffnen.

3. Canvas auswählen.

4. Prüfen, ob im Eingabebereich ein Canvas-Chip erscheint.

Geben Sie danach den Prompt ein. Durch die vorherige Werkzeugauswahl erhält Gemini den Arbeitsbereich, in dem die React-App entstehen soll. Eine Code-Anfrage im normalen Chat kann stattdessen lediglich einen Codeblock erzeugen.

Die Position der Bedienelemente kann sich ändern. Googles Hilfe beschreibt den Start von Canvas über das Menü zum Hinzufügen von Dateien. Screenshot und Menüpfad entsprechen der am 17. Oktober 2026 beobachteten Oberfläche. Canvas-Hilfe

3. Dashboard-Prompt einfügen

Die Vorgabe verlangt einen Kopfbereich mit kompakten Kennzahlen, eine offene Ringanzeige für die Zufriedenheit und unterschiedlich große Bereiche. Der Terminplan steht links. Ein Leistungsdiagramm und Balken zu Beschäftigungsarten füllen die nächsten beiden Spalten. Darunter folgen kleine Urlaubskacheln und direkt anschließend die Mitarbeitertabelle.

Diese Anweisungen legen den Aufbau vor der Auswahl einzelner Komponenten fest. Sie beschreiben auch die Informationsdichte: Die erste Desktop-Ansicht soll nützliche Daten und den Anfang der Tabelle enthalten.

Selbst ausprobieren

Wählen Sie 4 Argon, aktivieren Sie Canvas und kopieren Sie den vollständigen Prompt unten in Gemini. Senden Sie ihn anschließend ab. Produktname, Farben und Beispielkennzahlen können Sie anpassen. Eine Textversion ist ebenfalls verfügbar.

Create a polished, interactive React HR dashboard directly in the active Canvas, with a working Preview. Use React functional components and hooks. Use Tailwind CSS, lucide-react icons and Recharts if available in Canvas. Keep all data local and fictional. Do not call an API, connect a database, deploy anything, or return a standalone HTML page.

Product: Daylight People, a people operations workspace. The visual direction is a dense, carefully composed editorial dashboard: cream and pale butter yellow surfaces, charcoal text, a sunflower yellow accent, subtle gray borders, and compact typography. It should feel like a designed product, with varied panel sizes and useful information visible immediately. Avoid oversized KPI cards, giant headings, heavy shadows, purple gradients, and an evenly spaced wall of identical cards.

Desktop composition at approximately 1440 by 1000: make the application fill the entire preview viewport, edge to edge, with width: 100% and min-height: 100dvh. The application itself must have no outer frame, centered max-width container, gray surround, external padding, shell border or shell corner rounding. Make the left sidebar roughly 210px wide and full height, and let the main content fill the remaining width. Keep the cream-to-pale-yellow wash inside the application. Use 16-20px internal content gutters, 10-12px panel radii, 8-12px grid gaps, and a mostly 12-14px UI type scale with a 28-32px greeting. Use a clean system sans-serif stack with clear contrast. Distinguish the application's full-viewport layout from the smaller rounded panels inside it.

Scrolling architecture: constrain the app root to height: 100dvh with overflow: hidden. Use a roughly 210px sidebar and a flexible main region with min-width: 0 and min-height: 0. The main region must scroll vertically on its own with overflow-y: auto. The sidebar must not move when the main content scrolls. Make it a full-height flex column with the logo/header and bottom profile outside a separate flex: 1; min-height: 0; overflow-y: auto navigation area. Prevent html/body from becoming a shared dashboard scroller. On short screens, only the sidebar's navigation list should scroll, while its logo and bottom profile stay visible. On mobile, use a fixed overlay drawer with independent scrolling and lock the main scroll while it is open.

Sidebar: a small original Daylight People wordmark; a search field; a two-column grid of six navigation tiles with thin line icons (Dashboard, Employees, Time off, Finance, Payroll, Reviews). The selected tile should be charcoal with white text, the rest lightly outlined. Below that, show a compact favorites list, a short workspace menu, and a small profile control anchored at the bottom. Use initials avatars instead of remote photos.

Main area: breadcrumb and two small icon buttons at the top. Below it, a wide greeting band: Good morning, Alex; a date subtitle; four compact inline statistics (432 employees, 24 payrolls, 8% turnover, 24 applicants). At the right of this band, place a large, elegant open-ring gauge showing 80% employee satisfaction, with a sunflower yellow arc and small tick labels. Keep the metric strip integrated into the header rather than four separate cards.

Below the greeting, build an asymmetric three-column grid. Left: a schedule panel with Meetings / Tasks / Events tabs and two or three compact agenda cards; highlight the first meeting with a soft yellow gradient. Center: a team performance panel showing 70.32%, a restrained yellow line/area chart and a 7 days / 30 days / 90 days segmented control. Right: an employment status panel with three chunky rounded vertical bars for Permanent, Contract and Probation, using yellow, charcoal and gray. Below the center and right panels, put five narrow leave-balance tiles in one row: Annual, Monthly, Daily, Hourly, Sick. Use subtle borders to tie this row together.

Finish with a full-width employee table beneath these panels. Include eight fictional employees, initials avatars, employee ID, role, email at example.com, status, department and an actions button. Put search and a department filter in the table toolbar, plus Export CSV. On the desktop, the first few employee rows should be visible within the initial screen rather than below a huge empty chart.

Make the demo work: date ranges change the performance chart and its summary; schedule tabs show different content; search filters by name or email; the department filter combines with search; show a useful empty state with a reset button; Export CSV exports only visible employee rows; an employee action opens a small detail drawer that closes with Escape and returns focus. Navigation tiles should select and navigate to real in-page sections or show a clear compact placeholder, not silently do nothing. The satisfaction gauge must have a text equivalent.

Responsive behavior: at 390px use a working mobile navigation drawer, stack the panels, and keep page-level horizontal scrolling at zero. Let the table scroll inside its own container. Preserve readable text and touch targets. Include semantic headings, associated input labels, visible keyboard focus, aria-expanded on drawer buttons, a sensible focus order, and reduced-motion support.

Before coding, briefly state the layout decisions. Then build and render the complete React app in Canvas. After rendering, list only the checks you actually performed and identify anything that still needs manual testing. Do not claim production readiness or invent test results.

Der Prompt fordert funktionale React-Komponenten und Hooks an. Tailwind CSS, lucide-react und Recharts sollen nur eingesetzt werden, wenn die Canvas-Sitzung sie unterstützt. Fiktive lokale Daten ermöglichen es, Gestaltung und Verhalten ohne vorherige Datenbankeinrichtung zu beurteilen.

Google nennt React-Vorschauen als Funktion von Canvas. Die Abhängigkeiten müssen in der Vorschau dennoch erfolgreich geladen werden. Eine im Prompt genannte Bibliothek belegt nicht, dass die generierten Imports funktionieren. Googles Vorstellung von Canvas

4. Vorschau prüfen

Warten Sie auf den Abschluss der Generierung. Über Code lesen Sie die Implementierung; Preview führt zurück zur gerenderten Oberfläche. Falls die Vorschau fehlschlägt, prüfen Sie die Konsole und melden Sie Gemini den Fehler, bevor Sie weitere Funktionen anfordern. Code- und Fehlerwerkzeuge in Canvas

Beurteilen Sie zuerst den Gesamtaufbau. Die Begrüßung sollte die Seite nicht dominieren. Die vier Hauptkennzahlen sollten kompakt bleiben; Terminplan, Diagramm und Beschäftigungsübersicht sollten unterschiedlich breit sein. Prüfen Sie, ob Gelb die Hierarchie unterstützt, ohne den Textkontrast zu verringern.

Sehen Sie sich danach eine schmale Ansicht an. Ein ansprechender Desktop-Screenshot belegt weder eine funktionierende Navigation auf dem Smartphone noch eine Tabelle, die innerhalb ihres Containers bleibt.

Die Beispielvorschau zeigt das cremegelbe Dashboard mit Terminplan, Leistungsdiagramm und Mitarbeiterverzeichnis. Das in Ihrer Sitzung erzeugte Layout kann davon abweichen.

5. Bedienelemente testen

Führen Sie einige wiederholbare Prüfungen durch. Notieren Sie vor dem Klicken die Eingabe und das erwartete Ergebnis. Halten Sie danach fest, was tatsächlich passiert.

Bitten Sie Gemini, eine statische Codeprüfung von Tests im laufenden Browser zu unterscheiden. Eine generierte Prüfliste beweist nicht, dass Tests bestanden wurden.

6. Code vor der Weiterverwendung prüfen

Wenn sich der Prototyp wie gewünscht verhält, prüfen Sie Code und Abhängigkeiten. Achten Sie auf unerwartete Netzwerkaufrufe, externe Datenquellen und Zugangsdaten. Die Anbindung eines echten HR-Systems erfordert ein separates Konzept für Authentifizierung, Berechtigungen und Datenverarbeitung.

Lassen Sie den Canvas während der Prüfung privat. Code zu exportieren und einen öffentlichen Link zu erstellen sind getrennte Aktionen. Google erläutert, dass ein öffentlicher App-Link die Anwendung und zugehörige Daten für Personen mit diesem Link zugänglich machen kann. Canvas teilen und exportieren

Der Prototyp ist ein Ausgangspunkt für die Prüfung der Implementierung. Testen Sie ihn vor dem Produkteinsatz mit dem tatsächlichen Framework, den Abhängigkeitsversionen, den relevanten Bildschirmgrößen und der Barrierefreiheitskonfiguration Ihres Produkts.

Probleme beim ersten Durchlauf lösen

Statt der Vorschau erscheint ein Codeblock

Prüfen Sie, ob Canvas vor dem Absenden ausgewählt war. Kontrollieren Sie den Canvas-Chip und erstellen Sie die App in diesem Arbeitsbereich. Diese Anleitung sieht vor, die React-App direkt in Canvas zu erstellen und zu prüfen.

Die Vorschau bleibt leer oder meldet einen Importfehler

Kopieren Sie die Fehlermeldung aus der Konsole. Bitten Sie Gemini um eine Korrektur, die Layout und funktionierende Bedienelemente erhält. Falls eine Abhängigkeit fehlt, fordern Sie einen unterstützten Ersatz an. Prüfen Sie die Vorschau anschließend erneut.

Das Ergebnis wirkt beliebig

Geben Sie Größenverhältnisse, Abstände, Schriftgrößen und Informationsdichte an. Eine Referenz zeigt die visuelle Richtung; erklären Sie, welche Eigenschaften übernommen werden sollen. Verwenden Sie einen eigenen Produktnamen sowie eigene Inhalte und Gestaltungsmittel.

Eine Schaltfläche reagiert nicht

Beschreiben Sie die erwartete Änderung: Eine Mitarbeiteraktion soll einen Detailbereich öffnen, eine Export-Schaltfläche eine Datei erzeugen. Testen Sie nach der Änderung erneut, gegebenenfalls auch fehlende Suchtreffer und die Tastaturbedienung.

Argon fehlt im Modellmenü

Prüfen Sie das Google-Konto und dessen Modellzugriff. Canvas-Verfügbarkeit und Modellzugriff sind getrennt zu prüfen. Nutzen Sie Googles aktuelle Angaben, statt dieselbe Modellauswahl wie im Screenshot vorauszusetzen. Verfügbarkeit von Argon