Lunagraph

Was ist Lunagraph?

Lunagraph ist eine Design-Canvas zur Erstellung von Benutzeroberflächen mit echtem HTML-, CSS- und React-Code. Der Kernzweck ist es, Teams dabei zu unterstützen, UI zu gestalten und umzusetzen, sodass Design und ausgelieferter Code übereinstimmen und „Hand-off“-Lücken minimiert werden.

Statt das Design als separaten Deliverable zu behandeln, der von jemand anderem in Komponenten übersetzt werden muss, positioniert Lunagraph den Deliverable als den Code selbst – mit KI-Unterstützung durch Claude Code.

Wichtige Funktionen

• Direktes Design in echten Code (HTML, CSS, React): Die Canvas-Arbeit spiegelt sich in tatsächlichem Markup und Komponenten wider, sodass das Ergebnis mit dem Laufenden übereinstimmt.
• Zero-Hand-off-Workflow für UI-Teams: Die Plattform sorgt für Konsistenz zwischen Designern, Product, Entwicklern und Agents ohne Übersetzungsschritt vom Design zur Umsetzung.
• Claude-Code-gestützte kontextbewusste Hilfe: Der KI-Partner arbeitet mit dem Gesamtbild, inklusive Canvas und bestehendem Codebase.
• Canvas + Chat + lokales Repo Round-Trip: Der Chat greift auf Canvas und lokalen Codebase zu; der Workflow umfasst direkte Änderungen im Repository und Vorschau der Ergebnisse.
• Live-Vorschau und Screenshot-Vergleich: Der Workflow zeigt Vorschau in einem Live-iFrame und vergleicht Screenshots aus Design und Ausgabe.
• Repo-Komponenten-Updates aus Design-Änderungen: Beispiele umfassen die Generierung von Komponenten wie PricingCard und Updates von Dateien wie einer Feature-Vergleichstabelle.

So nutzt du Lunagraph

1. Starte mit der Design-Canvas: Beginne mit dem Entwurf von UI-Elementen auf der Canvas.
2. Nutze den integrierten Chat für Umsetzungshilfe: Fordere Änderungen an, die Canvas und Repository-Kontext referenzieren.
3. Lasse die KI direkt ins Repo schreiben: Der Workflow umfasst das direkte Schreiben in den lokalen Codebase.
4. Vorschau und Überprüfung: Nutze die Live-iFrame-Vorschau und mache Screenshots von Canvas/Design sowie resultierender UI zur Vergleich.
5. Iteriere an Komponenten: Wende weitere Updates an, indem du Refactorings oder Feature-Anpassungen anfragst (z. B. Aufteilung einer Sidebar in kleinere Komponenten).

Anwendungsfälle

• Designer-zu-Umsetzung UI-Erstellung: Ein Designer erstellt UI-Layouts auf der Canvas und stellt sicher, dass der resultierende Code echtes HTML/CSS/React nutzt statt separater Design-Datei.
• Team-Workflow ohne Hand-off-Reibung: Ein gemischtes Team (Design, Product, Entwicklung, Agents) arbeitet im selben Workflow mit weniger Übersetzungsschritten zwischen Rollen.
• Refactoring komplexer Komponenten mit KI-Hilfe: Bei zu komplexen Komponenten (z. B. Sidebar) hilft der Chat beim Umstrukturieren in kleinere Komponenten und Hinzufügen von Verhalten wie Collapse-Toggle.
• Aktualisierung bestehender Seiten aus Design-Vorgabe: Nutze Screenshot oder Palette-Referenz, um UI-Abschnitte anzupassen, sodass die Ausgabe zum erwarteten Layout und Styling passt.
• Erstellung von Pricing/Feature-UI aus Canvas-Designs: Generiere Komponenten für Pricing-Cards und Feature-Tabellen, integriere sie in Page-Layouts und aktualisiere bestehende Tabellen-Markup.

FAQ

• Welchen Code generiert oder bearbeitet Lunagraph? Lunagraph generiert und arbeitet mit echtem HTML-, CSS- und React-Code.

• Braucht Lunagraph einen separaten Design-File-Hand-off? Die Website betont einen „Zero-Hand-off“-Workflow, bei dem der Deliverable der Code selbst ist, nicht eine zu übersetzende Design-Datei.

• Was bedeutet „powered by Claude Code“ in diesem Workflow? Der Inhalt beschreibt Claude Code als kreativen Design-Partner, der Canvas und lokalen Codebase berücksichtigt und Umsetzungsaufgaben per Chat unterstützt.

• Wie überprüfen Nutzer, ob Design und Ausgabe übereinstimmen? Der Workflow umfasst Vorschau im Live-iFrame und Screenshots von Canvas und gerendertem Ergebnis zum Vergleich.

• Kann die KI in ein lokales Repository lesen und schreiben? Die Seite zeigt ein Beispiel mit „AI File Access“ und Dateisystem-Pfaden für Lesen/Schreiben außerhalb des Projekts, was lokale Repo-Integration andeutet, aber keine weiteren Details liefert.

Alternativen

• Allgemeine Design-Tools (Figma-Style) + separate Entwicklerimplementierung: Dies trennt Design und Code in verschiedenen Tools und Workflows und erfordert eine Übersetzung von Design-Dateien in Komponenten.
• Code-first UI-Builder (React-Komponenten-Editoren) ohne Design-Canvas: Diese fokussieren auf direkte Erstellung in UI-Code, bieten aber möglicherweise keinen Canvas, der Designabsichten ebenso gut erfasst und vermittelt.
• KI-Coding-Assistenten in einer IDE integriert: Diese helfen beim Generieren oder Refactoring von Code, verbinden aber typischerweise keinen Design-Canvas, Live-Iframe-Vorschauvergleich und den „Canvas + Chat + Repo“-Loop wie hier beschrieben.
• UI-Prototyping-Tools, die Komponenten oder Styles exportieren: Diese zielen darauf ab, Design und Implementierung zu verbinden, beinhalten aber oft noch Export oder Konvertierung statt Code als primäres Deliverable.