Webflow Frameworks: Die 3 wichtigsten Systeme für 2026

Autor
Bruno Spindler
Autor
wunderlabs Redaktion
Veröffentlicht
25.03.2026
Zuletzt bearbeitet
28.03.2026
Lesezeit
1
Minuten

TL;DR - die Kurzfassung

Client-First, MAST und Lumos V2 sind die Frameworks, die den Webflow-Markt strukturieren. Sie legen fest, wie Klassen, Komponenten und Design-Tokens organisiert werden - und entscheiden damit, ob deine Website in drei Jahren noch wartbar ist oder zum Neubauprojekt wird. Wer das beauftragt, sollte wissen, worauf er sich einlässt.

Was ist ein Webflow Framework?

Webflow ist seit 2022 von 451.000 auf über 651.000 aktive Sites gewachsen (W3Techs, 2024) - und mit diesem Wachstum ist die Frage nach Struktur und Wartbarkeit akut geworden. Ein Webflow Framework ist ein verbindliches Regelwerk für Klassen-Namen, Komponentenstruktur und CSS-Variablen. Wer danach arbeitet, baut etwas, das andere verstehen.

Das treffendste Bild ist eine Bauordnung. Handwerker, die nach derselben Bauordnung arbeiten, können das Gebäude später gemeinsam erweitern, umbauen oder übergeben - ohne drei Monate damit zu verbringen, erst herauszufinden, was der Vorgänger sich dabei gedacht hat. Wer ohne Bauordnung baut, liefert ein Unikat. Das Unikat funktioniert. Aber es kennt nur einer.

Ohne Framework entstehen Code-Silos. Klassen heißen "wrapper-blau", "text-custom-3", "div-irgendwas" - benannt nach dem Moment, nicht nach dem System. Nach zwei Jahren ist das Projekt kaum noch zu warten. Nach einem Agenturwechsel fängst du von vorne an.

{{IMG: Schematische Darstellung "Mit Framework vs. ohne Framework": Links eine unstrukturierte Liste willkürlicher Klassen-Namen (wrapper1, div-blue, text-custom-3). Rechts eine saubere Client-First Hierarchie mit Block-, Element- und Modifier-Ebene. Minimalistisch, Wunderlabs Blau/Grau, keine Icons.}}

Warum ist Webflow ohne Framework ein Problem?

92 % der Unternehmen berichten von wachsender Website-Komplexität - aber nur 28 % liefern ihre Projekte im Zeit- und Budgetrahmen ab (Webflow State of Website, 2026). Die Lücke zwischen diesen beiden Zahlen hat einen klaren Ursprung: fehlende Struktur, fehlende Konventionen, fehlende Skalierbarkeit.

Ohne Framework läuft das typischerweise so ab: Du beauftragst eine Agentur. Die baut eine schöne Website. Zwei Jahre später willst du etwas ergänzen. Die ursprüngliche Agentur ist nicht mehr dabei. Eine neue Agentur schaut ins Projekt - und gibt dir einen Kostenvoranschlag, der ungefähr dem Original entspricht. Nicht weil das Projekt so komplex ist, sondern weil zuerst aufgeräumt werden muss.

Das ist kein Ausnahmefall. Das ist der Standard bei Projekten ohne Framework.

Übergaben werden zum Ratespiel. Eine neue Agentur verbringt Wochen damit, das System der Vorgänger zu entziffern - wenn es überhaupt ein System gibt.

Änderungen werden riskant. Wer nicht weiß, welche Klasse was tut, riskiert bei jeder Anpassung unerwünschte Nebenwirkungen auf anderen Seiten.

Wachstum kostet unverhältnismäßig viel. Neue Sektionen bauen heißt: wieder erfinden statt wiederverwenden. Wie ein klarer Landingpage-Aufbau mit Framework in der Praxis aussieht, zeigt sich schnell im Vergleich.

Warum hat sich Client-First als Standard durchgesetzt?

Client-First ist das meistgenutzte Webflow Framework weltweit - entwickelt von Finsweet, einer der bekanntesten Webflow-Spezialagenturen. Die Relume Library stellt über 1.000 fertige Komponenten auf Client-First-Basis bereit (2024), was die Entwicklungszeit für Standardprojekte erheblich senkt. Kein anderes Framework kommt an dieses Ökosystem heran.

{{IMG: Visualisierung der Client-First Klassen-Hierarchie: Drei Ebenen übereinander - Block (section, container, layout), Element (button_text, card_title, nav_link), Modifier (is-large, is-primary, is-dark). Klare vertikale Struktur, Linien als Trenner, Wunderlabs Blau/Grau, kein Dekor.}}

Der Name ist Programm: "Client-First" bedeutet, das Framework ist für den Auftraggeber gebaut - nicht für den Entwickler. Wer ein Projekt in Client-First übernimmt, findet eine Struktur vor, die lesbar und dokumentiert ist.

  • Konsistente Block-Element-Modifier Logik (ähnlich BEM in klassischem CSS)
  • Klare Trennung von Layout, Typografie, Komponenten und Hilfsklassen
  • Umfangreiche, öffentliche Dokumentation auf client-first.io
  • Kompatibilität mit Relume, Finsweet Attributes und den meisten Webflow UI-Kits
  • Aktive Community mit regelmäßigen Updates

Der praktische Vorteil für dich als Auftraggeber: In fast jedem Fall kennt die neue Agentur Client-First. Kein Neustart, keine Räumungskosten. Das ist selten in der Webentwicklung.

Für welche Projekte eignet sich MAST?

MAST wurde 2023 eingeführt und richtet sich an Entwickler mit soliden CSS-Grundlagen. Das System ist bewusst minimalistisch: weniger vordefinierte Klassen, mehr Freiraum, kürzerer Einstieg für erfahrene Teams. Die Dokumentation ist kompakter als bei Client-First - das setzt voraus, dass man wenig Erklärung braucht.

  • Kleinere Projekte mit überschaubarer Komponentenzahl
  • Teams mit hoher CSS-Kompetenz, die keine engen Vorgaben brauchen
  • Freelancer oder kleinere Studios, die eine schlankere Arbeitsweise bevorzugen

Der Trade-off ist direkt: Weniger Struktur bedeutet mehr Freiheit - und weniger Sicherheit bei Übergaben. Das Ökosystem ist deutlich kleiner. Es gibt keine vergleichbare Bibliothek à la Relume. Die Community ist ein Bruchteil der Client-First-Gemeinde. Als Auftraggeber wirst du MAST seltener antreffen - nicht grundsätzlich schlechter, aber seltener kompatibel, wenn du später den Dienstleister wechselst.

Was macht Lumos V2 besonders?

Lumos V2 setzt auf konsequente Nutzung von Webflow-Variablen als zentrale Design-Tokens. Farben, Abstände, Schriftgrößen werden einmal definiert und überall referenziert. Wer eine Farbe im System ändert, ändert sie auf der gesamten Site. Das klingt selbstverständlich - in der Praxis ist es das überraschend selten.

Für Projekte mit umfangreichen Brand-Systemen oder Token-basierten Übergaben aus Figma ist das ein echter Vorteil - besonders wenn strenge CI-Vorgaben gelten. Was ein klarer Styleguide dabei grundsätzlich leisten kann, ist eine gute Ergänzung zum Thema.

  • Projekte mit komplexen Design-Systemen und vielen konsistenten Elementen
  • Teams, die eng mit Figma-Tokens arbeiten
  • Kunden mit strengen Brand-Guidelines und häufigen Farbpaletten-Anpassungen

Die Einschränkung: Das Framework ist jünger und weniger verbreitet als Client-First. Externe Ressourcen sind knapper, die Lernkurve für neue Entwickler ist steiler.

Wann ist Flowkit die richtige Wahl?

Flowkit kommt direkt von Webflow und ist eng mit Webflow AI integriert. Das Framework ist für Teams gebaut, die stark auf Webflows native Produktivitätstools setzen. Für Projekte, die hauptsächlich mit Webflow AI Companion und den nativen Webflow-Komponenten arbeiten, ist Flowkit sinnvoll.

Der Haken: Du bist stärker an Webflows eigene Entwicklungsrichtung gebunden. Was Webflow ändert, ändert sich auch bei dir. Wer mehr über die Plattform insgesamt wissen will, findet eine gute Grundlage in den Webflow-Vorteilen.

Welches Framework sollte deine Agentur nutzen?

Agenturen, die erklären können warum sie ein Framework gewählt haben, verstehen ihr Handwerk. Nur 28 % der Website-Projekte werden im Zeit- und Budgetrahmen geliefert (Webflow State of Website, 2026) - wer ohne Struktur arbeitet, trägt zu diesem Ergebnis bei.

{{IMG: Vergleichsmatrix der vier Frameworks. Zeilen: Client-First, MAST, Lumos V2, Flowkit. Spalten: Ökosystem-Größe, Übergabe-Sicherheit, Skalierbarkeit, Am besten für. Wunderlabs-Farben, tabellarische Darstellung, klar und leserlich ohne visuelle Ablenkung.}}

FrameworkÖkosystemÜbergabe-SicherheitAm besten für
Client-FirstSehr großHochAgenturen, skalierbare Projekte
MASTKleinMittelErfahrene CSS-Entwickler
Lumos V2MittelMittelDesign-Token-Systeme
FlowkitWebflow-gebundenPlattformabhängigWebflow-native Teams

Die richtige Frage an deine Agentur lautet nicht "Nutzt ihr ein Framework?" - sondern: "Welches Framework nutzt ihr und warum?" Eine gute Antwort zeigt, dass die Agentur über deine langfristigen Interessen nachgedacht hat. Nicht nur über ihren eigenen Workflow.

Was bedeutet das für dich als Auftraggeber?

Die Wahl des Frameworks entscheidet darüber, ob deine Website in drei Jahren noch wartbar ist - und ob du bei einem Agenturwechsel neu anfangen musst oder nahtlos weitermachst. Das ist keine Entwickler-Fachfrage. Das ist eine unternehmerische Entscheidung, die beim Briefing getroffen werden sollte, nicht erst beim Abnahmeprotokoll.

Wir setzen bei wunderlabs auf Client-First. Nicht weil es das bekannteste Framework ist, sondern weil es das Richtige für unsere Kunden ist. Als Webflow-Agentur haben wir uns bewusst dafür entschieden.

Skalierbarkeit. Client-First wächst mit dem Projekt. Neue Seiten, neue Sektionen, neue Kampagnen-Landingpages - alles baut auf denselben Konventionen auf. Kein Neuerfinden, kein "das haben wir damals irgendwie gelöst".

Unabhängigkeit. Client-First ist der Marktstandard. Wenn du die Agentur wechselst, kannst du direkt weitermachen. Du bist nicht an uns gebunden - das ist so gewollt. Ein gutes Fundament gehört dir, nicht der Agentur, die es gebaut hat.

Versorgungssicherheit. Das Client-First-Ökosystem wächst aktiv. Neue Komponenten, neue Tools, eine lebendige Community - was wir heute bauen, ist in zwei Jahren besser ausgestattet als am ersten Tag. Das ist kein Versprechen von uns, das ist die Eigenschaft eines lebendigen Standards.

Wenn du uns fragst welches Framework wir empfehlen: Client-First, für nahezu alle Projekte. Wenn jemand anderes etwas anderes empfiehlt - frag warum. Die Antwort sagt mehr über die Agentur als jede Referenzliste.

Häufig gestellte Fragen zu

Webflow Frameworks: Die 3 wichtigsten Systeme für 2026

Was ist ein Webflow Framework und wozu brauche ich es?

Ein Webflow Framework ist ein verbindliches Regelwerk für Klassen-Namen, Komponentenstruktur und CSS-Variablen. Es sorgt dafür, dass deine Website wartbar, skalierbar und für andere Entwickler lesbar bleibt. Ohne Framework entstehen Code-Silos, die Übergaben und Erweiterungen unverhältnismäßig teuer machen.

Was ist der Unterschied zwischen Client-First und MAST?

Client-First ist umfangreicher strukturiert, hat das größere Ökosystem und eignet sich für Agenturen und skalierbare Projekte. MAST ist schlanker und gibt erfahrenen Entwicklern mehr Freiheit, bietet aber weniger Ressourcen und eine kleinere Community. Für die meisten Auftraggeber ist Client-First die sicherere Wahl, weil Übergaben reibungsloser funktionieren.

Kann ich beim Agenturwechsel mein bestehendes Framework behalten?

Ja, wenn die neue Agentur dasselbe Framework kennt. Bei Client-First ist das sehr wahrscheinlich - es ist der meistgenutzte Standard im Webflow-Ökosystem. Bei selteneren Frameworks hängt es davon ab, ob die neue Agentur damit vertraut ist. Das ist ein guter Grund, schon beim ersten Briefing nach dem Framework zu fragen.

Warum setzt wunderlabs auf Client-First?

Weil es das Framework ist, das unsere Kunden am besten stellt - nicht das, das Entwicklern das Leben am leichtesten macht. Client-First ist skalierbar, gut dokumentiert und der Marktstandard. Das bedeutet: du bist nicht an uns gebunden, kannst jederzeit wechseln, und deine Website wächst mit deinem Unternehmen.

Was kostet es, ein bestehendes Projekt auf ein Framework umzustellen?

Das hängt von der Größe und dem Zustand des Projekts ab. Kleinere Sites lassen sich in wenigen Tagen migrieren, größere Projekte können mehrere Wochen in Anspruch nehmen. In den meisten Fällen ist eine Migration günstiger als ein kompletter Neubau - aber es lohnt sich, das vorher ehrlich zu kalkulieren.

Verwandte Begriffe aus dem Glossar

Zusammenfassen lassen

Du brauchst Unterstützung?
Sprich mit einem Experten!

Seit 2018 entwickeln wir Websites und digitale Auftritte für Unternehmen. Alles, was Struktur, Sichtbarkeit und Weiterentwicklung betrifft, ist Teil unserer täglichen Arbeit. Du hast Fragen? Wir sind #happytohelp.
Kontakt aufnehmen