Piny

Piny ist für einen heute üblichen Workflow gebaut: Ein KI-Coding-Agent erstellt Seiten und Logik, anschließend muss ein Mensch Abstände, Typografie und Texte feinjustieren, ohne für jedes Pixel neu zu prompten. Piny installiert sich als Entwicklungsabhängigkeit und Vite-Plugin, öffnet einen visuellen Editor neben Ihrer App und lässt Sie jedes Element anklicken, um das zugehörige JSX auszuwählen. Dort passen Sie Tailwind-Regler für Abstand, Farbe, Typografie, Flex und Grid über Breakpoints und Zustände hinweg mit dem eigenen Theme Ihres Projekts an, bearbeiten Text, Bilder und Links und prüfen den Klassenbaum eines Elements und seiner Eltern.

Da Piny die Quelle und keine Overlays bearbeitet, sind die Änderungen normale Codeänderungen: Ihr Agent erkennt sie, und nichts gelangt in Produktions-Builds. Ändert Ihr Agent eine Datei, während Sie sie in Piny bearbeiten, erkennt Piny die Änderung und überschreibt sie nicht. Die Funktion „Target this element“ kopiert Komponente, Datei und Zeile eines Elements, damit Sie Ihren Agenten im nächsten Prompt genau dorthin lenken.

Piny stammt von den Machern des Pinegrow Web Editor, ist aber ein eigenständiges Produkt mit eigener Lizenzierung. Es gibt eine wirklich nutzbare kostenlose Stufe ohne Konto und ohne Zeitlimit: Klicken zum Auswählen, Komponentenbaum, Inhaltsbearbeitung, mehrere Seitenansichten, Rückgängig und Wiederholen. Pro ergänzt die Tailwind- und Grid-Regler, den Klasseninspektor, Struktur- und Props-Bearbeitung, einen Content Workspace für Seitentexte und Daten sowie eine Komponentenbibliothek, die Sie registrieren können, damit Ihre eigenen Komponenten mit Vorschauen und Voreinstellungen erscheinen. Unterstützt werden derzeit client-gerenderte React-Projekte auf Vite 5.2 oder neuer; Astro-Unterstützung ist in Arbeit, Next.js wird noch nicht unterstützt.