React Bits × pechschwarz

Deine Inhalte.
Dein Bento.

Starte mit einer Vorlage, passe Texte und Stil an und verwende dasselbe Layout in Astro und Storyblok.

So funktioniert es

Vom Briefing zur eigenen Komponente

  1. Layout wählen. Öffne eine Vorlage oder kombiniere die 42 Bento-Kacheln. Stelle den Originalstil oder die ruhigere Osmo-Anmutung ein.
  2. Inhalte anpassen. Wähle eine Kachel und öffne „Inhalte bearbeiten“. Die Vorschau aktualisiert sich nach Verlassen des Textfeldes.
  3. Mit ChatGPT weiterarbeiten. Öffne „Mit KI anpassen“. Wähle eine einzelne Kachel oder das gesamte Grid. „Inhalte anpassen“ erhält das Layout; „Neu kombinieren“ darf die vorhandenen Bausteine neu zusammenstellen. Ergänze Briefing, Zielgruppe und eigene Referenztexte. Kopiere das Briefing in ChatGPT.
  4. Vorschlag prüfen. Füge die JSON-Antwort unter „Antwort aus ChatGPT“ ein und klicke „Vorschlag prüfen“. Vergleiche „Original“ und „Vorschlag“ direkt in der Kachel. Erst „Vorschlag übernehmen“ ändert dein Layout; einmal Rückgängig stellt den vorherigen Stand wieder her.
  5. Im Projekt verwenden. Speichere das Layout oder exportiere Astro, React beziehungsweise Storyblok. Die Texte bleiben zusammen mit dem Layout erhalten. Über „Figma“ erhältst du einen SVG-Entwurf mit bearbeitbaren Texten; Animationen bleiben im Frontend.

Wie individuell kann es werden?

Texte, Anordnung, Kachelgrößen, Abstände, Lückenfüllen und die Stilvariante passen sich im bestehenden System an. Vorhandene Bilder bleiben bei KI-Anpassungen erhalten; Bilder tauschst du über die Storyblok-Mediathek aus. Für eine andere Illustration, neue Diagrammlogik oder eine eigene Interaktion erstellst du eine neue Astro-/React-Komponente. Beschreibe dafür die gewünschte Szene und nutze eine vorhandene Kachel als gestalterische Referenz.

Im KI-Studio siehst du, ob die direkte Generierung für euer Team verfügbar ist. Der ChatGPT-Weg steht unabhängig davon zur Verfügung. Prüfe vor der Übernahme Formulierungen, Fakten, Zeilenumbrüche und Interaktionen.