Layrr
Narnia · Bilder · Coding
Layrr ist eine kostenlose Open-Source-CLI, die den Browser in einen visuellen Code-Editor für lokale Web-Apps verwandelt. Man wählt ein Element auf der laufenden Seite aus, beschreibt die Änderung in normaler Sprache, und ein KI-Coding-Agent aktualisiert die passenden Quelldateien im Repository. Das Tool läuft neben dem Setup, das man ohnehin nutzt, verbindet sich mit Claude Code, Codex CLI oder Gemini via Pi und bearbeitet echten Quellcode statt einer separaten Design-Ebene.
Über Layrr
Was ist Layrr
Layrr ist ein Kommandozeilen-Werkzeug von Narnia, das zwischen dem Browser und dem Entwicklungsserver sitzt. Man kann es sich als Coding-Agent-Schnittstelle im Browser vorstellen: Es fügt ein kleines Overlay in die Seite ein, die man gerade ansieht, ordnet jedes angeklickte Element dem Code zu, der es gerendert hat, und übergibt diese Stelle zusammen mit der Anweisung an einen Coding-Agenten. Das Versprechen ist einfach. Der Fehler ist im Browser sichtbar, die Datei aber nicht. Layrr schließt diese Lücke.
Für wen ist es gedacht? Für Entwickler, die bereits eine Web-App lokal laufen lassen und bereits einem KI-Coding-Agenten vertrauen. Statt eine Seite aus dem Gedächtnis zu beschreiben, zeigt man auf genau den Button, die Karte oder die Überschrift, die gemeint ist. Das nimmt das Rätselraten aus dem Prompt.
Die wichtigste Grenze ist der Umfang. Layrr ist ein visueller Editor für Quellcode-Änderungen, kein vollständiges Design-Werkzeug und keine Hosting-Plattform. Es erwartet eine lokale App, einen laufenden Entwicklungsserver und ein Git-Repository und stützt sich auf den Agenten, den man konfiguriert hat. Es kommt zudem als CLI, also gibt es keine GUI-App zum Installieren und keine Bindung an eine bestimmte IDE. Vertrautheit mit dem Terminal gehört damit zum Paket.
Erste Schritte
- Die CLI global mit
npm i -g layrrinstallieren und sie aus dem Stammverzeichnis eines lokalen Web-Projekts starten. - Den Entwicklungsserver wie gewohnt starten und Layrr als Proxy zwischen Browser und diesem Server arbeiten lassen.
- Die App im Browser öffnen, über ein Element fahren und darauf klicken (oder Shift+Klick, um mehrere zu erfassen), um genau den gewünschten Kontext auszuwählen.
- Die Anpassung in normaler Sprache beschreiben, egal ob Text, Abstand, Farbe, Layout oder eine ganze Komponente.
- Die Änderung des Agenten prüfen, den
[layrr]-Commit in der Git-Historie kontrollieren und zurücksetzen, wenn das Ergebnis nicht passt.
Produktinformationen
Ein kurzer Überblick über Preise, unterstützte Plattformen und die Leistung von Layrr.
Am besten für
Die Nutzer, Aufgaben und Szenarien, für die dieses Tool am besten passt.
Nutzer
- Frontend-Entwickler
- Einzelentwickler und Indie-Hacker
- Nutzer von KI-Coding-Agenten
Aufgaben
- Visuelle Fehler beheben
- Kleine UI-Anpassungen
- Änderungen prototypisch testen
Szenarien
- Während der lokalen Entwicklung an einer Seite feilen, wenn man das Problem sieht, aber nicht die Datei dahinter.
- Einem Agenten ein präzises Element übergeben, wenn ein vager Text-Prompt das Ziel immer wieder verfehlt.
- An einer bestehenden App arbeiten, ohne ein neues Framework einzuführen oder den aktuellen Editor zu wechseln.
Wichtigste Funktionen
Elementkontext per Klick auswählen
Layrr fügt ein Overlay in die laufende Seite ein, sodass man über genau das gemeinte Element fahren und es auswählen kann, oder per Shift+Klick gleich mehrere erfasst. Es übergibt das ausgewählte DOM und den Quellcode-Kontext an die Änderung. Schluss damit, das Markup aus dem Gedächtnis zu beschreiben. Der Agent arbeitet mit der echten Struktur statt mit der eigenen Umschreibung.
Zuordnung des Codes zu echten Dateien
Das Werkzeug nutzt Framework-Metadaten und Dateisuche, um ein angeklicktes Element bis zu dem Code zurückzuverfolgen, der es gerendert hat. Diese Zuordnung ist der Kern des Produkts. Sie ist der Unterschied zwischen der Bitte, „die Kopfzeile" zu ändern, und der genauen Angabe, welche Komponente anzufassen ist.
Änderungswünsche in normaler Sprache
Ist ein Element ausgewählt, beschreibt man die Änderung in gewöhnlicher Sprache, ob Text, Abstand, Farbe, Layout oder eine Komponentenanpassung. Kurz halten. Layrr hält die genaue Quellcode-Stelle an der Anfrage, damit die Anweisung am richtigen Code verankert bleibt.
Git-Historie mit Zurücksetzen
Erfolgreiche Änderungen werden mit dem Präfix [layrr] committet, sodass jede Änderung in der normalen Git-Historie auftaucht. Man kann nachsehen, was der Agent getan hat. Verfehlt eine Änderung das Ziel, geht man zurück.
Bewusstsein für geänderte Dateien
Bevor der Agent läuft, erstellt Layrr einen Schnappschuss des Repositorys und vermeidet es, bereits geänderte Dateien zu stagen. So bleiben unzusammenhängende lokale Änderungen aus dem Commit. Das macht das Werkzeug mitten in der Arbeit sicherer, wenn man wahrscheinlich noch andere Änderungen offen hat.
Flexibilität bei Frameworks und Agenten
Layrr läuft mit gängigen Frameworks wie React, Vue, Svelte, Next.js und Astro sowie mit beliebigem reinen HTML. Es ist proxybasiert, begegnet der App also dort, wo sie schon läuft. Man kann es mit Claude Code, Codex CLI oder Gemini via Pi kombinieren. Es gibt keine IDE-Bindung, und man installiert es mit einem einzigen npm-Befehl.
Vor- und Nachteile
Vorteile
- Kostenlos und quelloffen unter der MIT-Lizenz, mit dem Repository auf GitHub.
- Sendet dem Agenten den genauen Element- und Quellcode-Kontext, was vage oder fehlgeleitete Prompts verringert.
- Läuft mit bestehenden Apps und gängigen Frameworks, also kein Neuschreiben zur Einführung.
- Committet jede Änderung mit dem Präfix `[layrr]`, was Prüfen oder Zurücksetzen erleichtert.
- Keine IDE-Bindung und keine Festlegung auf einen bestimmten Coding-Agenten.
Nachteile
- Es ist eine CLI, also keine grafische App für Entwickler, die eine Klick-Oberfläche bevorzugen.
- Es braucht eine lokale App, einen laufenden Entwicklungsserver und ein Git-Repository, passt also nicht zu gehosteten oder geschlossenen Setups, die sich nicht lokal ausführen lassen.
- Die Qualität einer Änderung hängt weiterhin vom KI-Coding-Agenten ab, mit dem man es kombiniert.
- Es ist ein junges Projekt, daher holen Funktionstiefe und Stabilität erst noch zu ausgereiften Design-Werkzeugen auf.
Häufige Fragen
Es verwandelt den Browser in einen visuellen Code-Editor für lokale Web-Apps. Man klickt ein Element an, beschreibt eine Änderung, und ein KI-Coding-Agent bearbeitet die passenden Quelldateien im Repository. Layrr übernimmt die Zuordnung zwischen dem, was man sieht, und dem Code dahinter.
Ähnliche Inhalte
Entdecke passende Tools, Skills und Artikel zu Layrr.
Alternativen zu Layrr
X Ray Interpreter
X-ray Interpreter · BilderX Ray Interpreter ist ein webbasiertes KI-Radiologie-Tool, das Röntgenbilder, CTs, MRTs, Ultraschallbilder und PET-Aufnahmen in Berichte in einfacher Sprache verwandelt. Sie laden eine Aufnahme hoch, erhalten in wenigen Augenblicken eine vorläufige Röntgenbild-Interpretation und stellen dann Rückfragen, wenn etwas erklärt werden muss. Es dient als zweite Meinung und als Lernhilfe, nicht als medizinische Diagnose.
Aieasypic
AIEasyPic · BilderAIEasyPic ist ein KI-Bildgenerator, der einfache Text-Prompts in Sekunden in fertige Kunstwerke verwandelt. Du kannst außerdem eigene Modelle mit persönlichen Fotos trainieren, Gesichter in vorhandenen Bildern tauschen und kurze Videoclips aus Text erstellen, alles im Browser. Er passt zu Gelegenheitskreativen, die schnelle Bilder wollen, und zu Hobbyisten, die ein persönliches Modell bauen möchten, ohne eine Zeile Code anzufassen.
Chargen
Chargen · BilderChargen ist ein KI-Charaktergenerator und ein Toolkit zum Worldbuilding für Dungeons & Dragons und andere Tisch-Rollenspiele. Es verwandelt eine einzeilige Idee in ein gemaltes Charakterporträt, erzeugt NSCs, Monster, Karten und Begegnungen in derselben Sitzung und hält die Details jeder Kreatur griffbereit. Der Bereich für Tisch-Rollenspiel-Kunst läuft über ein Creditsystem namens Gold, während die Textgeneratoren für alle kostenlos bleiben.