Communitygithub.com

dream-loop

Erstelle ein Spiel oder eine App basierend auf einer Beschreibung, sodass ein Live-Screenshot mit einer generierten Darstellung übereinstimmt. Verwende dies, wenn der Benutzer „Dream Loop“ sagt oder eine Anwendung mit sehr hoher grafischer Detailtreue fordert.

Was ist dream-loop?

Dream-Loop ist ein KI-Agenten-Skill, der es ermöglicht, Spiele oder Anwendungen aus einer textuellen Beschreibung zu entwickeln, wobei ein Live-Screenshot der erstellten Anwendung mit einem generierten Rendering (z. B. einem Bild oder einer UI-Skizze) übereinstimmen muss. Der Skill ist besonders nützlich für Szenarien, in denen höchste grafische Wiedergabetreue gefordert wird – zum Beispiel bei pixelgenauen UI-Implementierungen oder bei der Neuerstellung von Spielszenen nach Designvorgaben. Er unterstützt Agenten wie Claude Code und andere KI-gestützte Entwicklungsumgebungen, indem er die Ausgabe des Agenten (Code und Ausführung) mit einer Referenzdarstellung abgleicht. Die Funktionsweise basiert darauf, dass der Agent iterativ Code generiert, eine Live-Ansicht aktualisiert und diese mit dem Zielbild vergleicht, bis die Übereinstimmung optisch perfekt ist. Dadurch wird sichergestellt, dass das finale visuelle Ergebnis exakt den Erwartungen entspricht, ohne dass manuelle Anpassungen nötig sind.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/achimala/dream-loop/tree/main

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Was macht dream-loop?

Erstelle ein Spiel oder eine App basierend auf einer Beschreibung, sodass ein Live-Screenshot mit einer generierten Darstellung übereinstimmt. Verwende dies, wenn der Benutzer „dream loop“ sagt oder eine Anwendung mit sehr hoher grafischer Detailtreue fordert.

Wie es funktioniert

  1. Der Benutzer gibt eine Beschreibung des gewünschten Spiels oder der App sowie ein Referenzbild (oder eine Beschreibung der gewünschten Optik) an.
  2. Der Agent generiert iterativ Code, startet die Anwendung und erstellt einen Live-Screenshot.
  3. Der Agent vergleicht den Live-Screenshot mit dem generierten Rendering (oder dem Referenzbild) und passt den Code an, bis die Übereinstimmung optisch perfekt ist.
  4. Sobald der Live-Screenshot dem Rendering entspricht, gilt die Aufgabe als abgeschlossen.

Einsatzzwecke

  • Spieleentwicklung mit präziser visueller Umsetzung
  • UI-Design nach genauen Vorgaben
  • Pixelgenaue Anwendungen
  • Schnelles Prototyping mit grafischer Validierung

Unterstützte Plattformen

  • Claude Code
  • Cursor
  • Codex
  • Andere KI-Agenten, die Code generieren und ausführen können

Tipps zur Verwendung

  • Sei so detailliert wie möglich in der Beschreibung.
  • Gib ggf. ein Referenzbild an.
  • Nutze den Befehl „dream loop“, um den Prozess zu starten.
  • Erwarte mehrere Iterationen für beste Ergebnisse.

Hinweis: Je präziser die Beschreibung, desto schneller wird die visuelle Übereinstimmung erreicht.

Verwandte Skills