Windframe
Devwares · Coding
Windframe ist ein KI-gestützter Tailwind-CSS-Builder. Sie beschreiben eine Seite oder laden einen Screenshot hoch, feilen im visuellen Editor am Ergebnis und exportieren responsiven Code für React, Vue, Svelte oder reines HTML.
Über Windframe
About
Was ist Windframe
Windframe ist ein visueller Editor für Websites und Bildschirme, die auf Tailwind CSS basieren, entwickelt von Devwares. Sie starten mit einem Satz, einem Screenshot oder einer fertigen Vorlage, rücken das Layout auf der Arbeitsfläche zurecht und nehmen Code mit, der direkt ins Projekt passt. Das Versprechen ist Tempo: Wer eine Seite beschreiben kann, kann sie veröffentlichen, ohne jede Utility-Klasse von Hand zu schreiben.
Was den Builder von einem gewöhnlichen Website-Baukasten mit KI unterscheidet, ist die Ausgabe. Fast alle diese Werkzeuge wollen Ihre Seite hosten. Windframe liefert den Quellcode: React, Next.js, Vue, Nuxt, Angular, Svelte, Astro, SolidJS, Rails ERB oder reines HTML. Das Markup nutzt Standard-Tailwind-Klassen, sodass eine Entwicklerin es lesen, im Review prüfen und im selben Repository weiterbauen kann wie alles andere.
Auch die Grenzen zählen. Windframe AI arbeitet nicht pixelgenau, und die offizielle Dokumentation sagt das selbst: Eigene Icons, Bilder und Diagramme weichen oft vom Original-Screenshot ab. KI-Funktionen laufen über Credits, eine pro Generierung. Ein kostenloser Zugang bietet 3 MCP-Aufrufe und einen kurzen Blick in den Editor, die Bezahlpläne starten bei 25 Dollar im Monat.
Getting Started
- Registrieren Sie sich auf windframe.dev und öffnen Sie den Editor, der im Browser läuft und nichts zu installieren verlangt.
- Geben Sie eine Anweisung ein wie "moderne Landingpage mit Hero-Bereich", laden Sie einen Screenshot hoch oder wählen Sie eine Vorlage aus der Bibliothek.
- Feilen Sie auf der Arbeitsfläche am Ergebnis: Komponenten ziehen, Farben und Abstände ändern, exakte Werte im Eigenschaften-Panel setzen.
- Wählen Sie das Exportziel und kopieren Sie die erzeugten Dateien oder laden Sie das ganze Projekt herunter.
- Wenn Sie UI-Bausteine lieber direkt aus Ihrem Coding-Agenten erzeugen, binden Sie den Windframe-MCP-Server in Claude Code, Cursor oder VS Code ein.
Produktinformationen
Ein kurzer Überblick über Preise, unterstützte Plattformen und die Leistung von Windframe.
Am besten für
Die Nutzer, Aufgaben und Szenarien, für die dieses Tool am besten passt.
Nutzer
- Frontend-Entwickler, die eine erste Fassung einer Tailwind-Seite brauchen, ohne jede Klasse selbst zu tippen. Der exportierte Code lässt sich im eigenen Repository prüfen und erweitern, die Arbeit wird also gespart und nicht abgeschlossen.
- Gründer und Designer kleiner Teams, die erklären können, was sie wollen, aber nicht täglich mit Tailwind arbeiten. Sie bauen ihre Landingpage selbst und geben danach funktionierenden Code an die Entwicklung weiter.
- Freiberufler mit Kundenprojekten
Aufgaben
- Ein Figma-Mockup zu Code machen
- Eine Marketing-Seite prototypen
- Admin-Dashboards bauen
- Eine bestehende Website neu aufbauen
- Einem Coding-Agenten Designkontext geben
Szenarien
- Ein Wochenende, an dem das Portfolio online gehen soll
- Ein Redesign, bei dem der Kunde ständig seine Meinung ändert
- Ein Team mit einem nicht-technischen Gründer
- Eine gewachsene Codebasis in Rails oder Astro
Wichtigste Funktionen
KI, die mit einem Satz beginnt
Sie beschreiben, was gebraucht wird ("moderne Landingpage mit Hero", "Preistabelle mit drei Paketen"), und bekommen den ganzen Abschnitt oder die Seite zurück, mit responsivem Layout, echten Abständen und lesbarer Typografie. Der Tailwind-CSS-Generator stützt sich auf eingebaute Design-Vorgaben, deshalb wirkt das erste Ergebnis meist durchdacht und nicht wie ein Stapel ungestylter Kästen. Jede Generierung kostet einen KI-Credit, eine Ausgabe, die man in langen Testphasen im Blick behalten sollte.
Vom Screenshot zum Code
Ein Design-Bild, ein Mockup oder der Screenshot einer laufenden Seite wird hochgeladen und Windframe wandelt ihn in HTML mit Tailwind-Klassen um. Das ist der schnellste Weg, wenn das Design schon existiert und nur der Code fehlt. Die offiziellen Seiten sagen den Kompromiss deutlich: Die Dateien müssen nicht pixelgenau passen, eigene Icons, Bilder und Diagramme fallen manchmal anders aus als die Vorlage.
Visueller Editor, der den Code mitzieht
Der visuelle Tailwind-Editor zieht jede Änderung mit: Was auf der Arbeitsfläche passiert, landet im Code. Element anklicken, Farbe, Größe oder Abstand anpassen, das Markup folgt. Drag-and-drop und Eigenschaften-Panel decken den Alltag ab, und der Editor verwaltet responsive Varianten, damit ein Design auf Desktop, Tablet und Smartphone funktioniert.
Export in zehn Frameworks
Ein Design wird zu Code für React, Next.js, Vue, Nuxt, Angular, Svelte, Astro, SolidJS, Rails ERB oder reines HTML. React-Code exportieren, Vue oder Svelte bedienen: alles geht von derselben Arbeitsfläche aus, ohne das Layout neu zu bauen. Die Ausgabe nutzt Standard-Utility-Klassen ohne proprietäre Laufzeit, eine Entwicklerin versteht sie im Review und behält sie. Laut offizieller Website gehört der exportierte Code Ihnen und braucht keine Namensnennung.
Über 1.000 Vorlagen
Die Bibliothek bringt Tailwind-CSS-Vorlagen für Kopfbereiche, Hero-Sektionen, Preistabellen, Dashboards, Formulare, Fußzeilen und komplette Seiten mit, wöchentlich kommen neue hinzu. Das sind professionelle Designs und keine leeren Startpunkte, was die Hemmschwelle vor der leeren Fläche senkt. Blöcke, Admin-Seiten und Call-to-Action-Layouts sind separat sortiert, ein einzelner Baustein ist also schnell gefunden, bevor die ganze Seite gebraucht wird.
Bestehenden Tailwind-Code importieren
Eine Komponente aus Tailwind UI, Flowbite oder DaisyUI lässt sich einwerfen, ein eigenes Projekt ebenso importieren, und der Editor öffnet alles für die visuelle Arbeit. Windframe wird damit eine Schicht über Code, der Ihnen schon gehört, kein geschlossener Garten. Genau diese Funktion macht es für Pflege und Wartung brauchbar und nicht nur für neue Seiten.
MCP-Server für Coding-Agenten
Der Windframe-MCP-Server gibt Claude Code, Cursor, VS Code und Codex echte Design-Tokens und Stilsysteme, angelehnt an Linear, Shadcn, Notion, Stripe und Apple. Der Agent erhält Entscheidungen zu Typografie, Abständen und Farbe, statt Werte zu raten. Die ersten drei Aufrufe sind gratis, Pro- und Einmal-Lizenzen schalten unbegrenzte Nutzung frei.
Vor- und Nachteile
Vorteile
- Exportiert produktionsreifen Code für zehn Frameworks, die Arbeit endet also nicht in einer gehosteten Vorschau.
- Visueller Editor und Code bleiben synchron, nicht-technische Kollegen können beitragen, ohne den Build zu zerlegen.
- Über 1.000 Vorlagen verkürzen die Phase der leeren Seite, vor allem bei Preistabellen, Dashboards und Landingpages.
- Screenshot zu Code erledigt ein vorhandenes Design in Sekunden.
- Der MCP-Server bringt dasselbe Designsystem in Claude Code, Cursor und VS Code.
Nachteile
- Jede Generierung verbraucht Credits, der Monatsplan enthält 50, wer viel testet, lädt nach oder wechselt zum Jahresplan.
- Die Ausgabe ist nicht pixelgenau: Icons, Bilder und Diagramme können vom Screenshot abweichen, vor dem Livegang sind Handkorrekturen nötig.
- Eine öffentliche API, um Windframe in ein anderes Produkt einzubauen, gibt es nicht. Der MCP-Server dient Agenten, nicht eigenen Integrationen.
- Der Editor lebt im Browser. Ohne Verbindung steht die Arbeit, im Flugzeug oder im schwachen Hotel-WLAN ist das lästig.
Häufige Fragen
Windframe baut Tailwind-CSS-Oberflächen visuell. Sie erzeugen oder importieren ein Design, korrigieren es auf der Arbeitsfläche und exportieren das Ergebnis als Code für React, Vue, Svelte, Angular, Astro, Rails oder reines HTML. Teams nutzen es für Landingpages, Dashboards und schnelle Prototypen.
Ähnliche Inhalte
Entdecke passende Tools, Skills und Artikel zu Windframe.
Alternativen zu Windframe
Base Code
Base44 (Wix) · Coding · ProduktivitätBase Code ist eine geteilte Cloud-Entwicklungsumgebung von Base44. Das Team beschreibt Änderungen an einem bestehenden GitHub-Repository im Chat, prüft sie in der Vorschau und reicht sie als Pull Request ein.
Google EmbeddingGemma 2
Google DeepMind · Schreiben · Bilder · CodingGoogle EmbeddingGemma 2 ist ein offenes Modell mit 740 Millionen Parametern, das Text, Code, Bilder, Audio und Videobilder in Vektoren eines gemeinsamen 768-dimensionalen Raums umwandelt und auf Handys und Notebooks läuft.
GitGlow
GitGlow · Coding · ProduktivitätGitGlow ist ein Git-Client für den Desktop, der Ihren Code und die Änderungen Ihrer KI-Agenten in einer Review bündelt, damit Sie vor dem Ausliefern sehen, was die Maschine verlässt.