Die besten Design-to-Code-KI-Tools, sortiert nach Ihrem Ausgangspunkt

Ein Beitrag im Community-Forum von Figma beschreibt, wie jemand in Figma Make eine Komponenten- und Variablenbibliothek auswählte und „Farben mit fast keinem Kontrast und Schriftgrößen, die keinen Sinn ergeben“ zurückbekam. Derselbe Nutzer berichtet, dass die Ergebnisse ganz ohne ausgewählte Bibliothek etwa 90 % besser waren. An genau diesem Fehler sollten Sie jedes Tool messen: Entweder baut es mit den vorhandenen Komponenten Ihres Teams, oder es baut eine parallele UI, die Sie später zusammenführen müssen.

Die besten Design-to-Code-KI-Tools treten nicht auf einer einzigen Rangliste gegeneinander an, weil sie von unterschiedlichen Eingaben ausgehen. Ein Screenshot, eine Figma-Datei, ein geschriebener Prompt und eine bestehende Codebasis enthalten sehr unterschiedlich viel Struktur.

Wählen Sie danach, was Sie in der Hand haben. Eine Figma-Datei gehört in einen Konverter wie die eingebaute Codegenerierung von Figma, Anima oder Builder.io Visual Copilot. Ein Screenshot gehört in screenshot-to-code. Ein Prompt gehört in v0, Lovable oder Bolt. Eine bestehende Codebasis gehört zu einem Coding-Agent, der Ihr Design System über das Model Context Protocol (MCP) liest.

Kurzfassung

• Nutzen Sie die eingebaute Codegenerierung von Figma, wenn Sie für Figma bezahlen; screenshot-to-code nur, wenn es keine Designdatei gibt; v0, Lovable oder bolt.diy je nach Deploy-Ziel, Abrechnung und Bedarf an eigenen Modell-Keys; und Figma MCP mit einem Mapping über Code Connect, wenn Sie eine Codebasis und ein Design System haben.
• Bevor Sie ein Tool einführen, generieren Sie einen Screen, für den Sie Komponenten haben, und prüfen Sie die Ausgabe auf hartcodierte Hex-Farben und Pixelwerte sowie auf neu deklarierte Komponenten an Stellen, an denen Imports aus Ihrer Bibliothek stehen sollten.
• Sie können bolt.diy, screenshot-to-code und Penpot auf einem Server betreiben, den Sie kontrollieren, aber jedes hat einen Haken: Bei bolt.diy ruhten die Commits von Februar bis Oktober 2026 und das letzte getaggte Release stammt vom Mai 2025, screenshot-to-code braucht einen API-Key für ein Modell, und selbst gehostetes Penpot hinkt dem Cloud-Release hinterher.
• Die Wiederverwendung von Komponenten klappt am besten, wenn ein Tool ein explizites Mapping hat, etwa Figma MCP mit Code Connect oder die Design-System-Indexierung von Builder.io. Generierter Code muss trotzdem reviewt werden, planen Sie also auf jedem Weg Zeit fürs Aufräumen ein.

Das passende Tool für Ihren Ausgangspunkt

Ein Screenshot enthält Pixel und sonst nichts. Eine Figma-Datei bringt Komponentennamen, Variablen und Layoutregeln mit, und eine Codebasis enthält die Komponenten selbst. Die Eingabe entscheidet also, welche Art von Tool überhaupt etwas zum Arbeiten hat.

Der Ein-Screen-Test für die Wiederverwendung von Komponenten und Tokens

Der Make-Nutzer, der ohne ausgewählte Bibliothek bessere Ergebnisse bekam, brauchte keine Woche Nutzung, um das Problem zu finden. Es zeigte sich schon auf den ersten generierten Seiten, und deshalb reicht ein einziger Screen, um jeden Kandidaten zu testen:

1. Wählen Sie einen Screen, den Ihr Team aus vorhandenen Komponenten gebaut hat, etwa ein Einstellungsformular oder eine Preiskarte.
2. Generieren Sie diesen Screen mit dem Tool, das Sie in Betracht ziehen, und nutzen Sie dieselbe Art von Eingabe wie für neue Arbeit.
3. Durchsuchen Sie die Ausgabe nach hartcodierten Werten: rohe Hex-Farben wie #3B82F6, Schriftgrößen in Pixeln wie font-size: 14px und feste Abstände. Vergleichen Sie das damit, wie oft Ihre Token-Namen, CSS-Variablen oder Theme-Klassen vorkommen.
4. Prüfen Sie die Imports. Eine Ausgabe, die einen neuen Button oder eine neue Card deklariert, statt Ihre aus der Komponentenbibliothek zu importieren, hat eine parallele UI gebaut.
5. Prüfen Sie, ob Framework und Styling-Ansatz zum Repo passen. Reines HTML mit Inline-Styles ist eine Neuschreibung, egal wie die Vorschau aussieht.

Im Stack Overflow Developer Survey 2025 nannten 66 % der Entwickler „KI-Lösungen, die fast richtig sind, aber eben nicht ganz“ als ihre größte Frustration mit KI. Das ist ein Befund über KI-Coding-Tools allgemein, keine Design-to-Code-Studie. Aber ein Screen, der richtig aussieht und dabei jede Farbe hartcodiert, ist genau in diesem Sinne „fast richtig“.

Hinweis: Machen Sie diesen Check, bevor ein Tool im ganzen Team ausgerollt wird. Ein generierter Screen kostet ein paar Minuten; ein Monat gemergter Code mit hartcodierten Werten kostet einen Aufräum-Sprint.

Der Check liest den Code. Ob der gerenderte Screen noch zum Design passt, ist eine separate Frage für ein selbst hostbares Tool wie BackstopJS, das visuelle Regressionstests ausführt.

Wenn Sie eine fertige Figma-Datei haben

Die Figma-to-Code-KI-Tools in dieser Gruppe gehen alle von derselben Datei aus. Der praktische Unterschied liegt darin, wo der Code landet: im Canvas, in einem gehosteten Prototyp oder in einem Export eines Drittanbieters.

Die eingebaute Codegenerierung von Figma

Sie wählen in Figma Design einen Frame, eine Komponente oder eine Section aus, öffnen den Agent und fragen nach HTML und CSS, React-Komponenten oder einem bestimmten Framework. Laut Figma können Sie den Agent auf Ihr Design System verweisen, damit die Ausgabe Ihre Tokens, Variablen und Komponentenstruktur referenziert statt generischer Platzhalter. Auf derselben Seite steht, dass die Funktion in allen kostenpflichtigen Figma-Plänen verfügbar ist. Stand Oktober 2026 ist die Funktion in der offenen Beta, Creditverbrauch und Limits können sich also ändern.

Die Ausgabe bleibt als Thread in der Datei, den Ihre Entwickler öffnen können. Es gibt kein Hosting und keinen Deploy-Schritt. Das ist eine Einschränkung, wenn Sie einen laufenden Prototyp wollten, und ein Vorteil, wenn Sie Code zum Einfügen in Ihr Repo wollten.

Figma Make

Figma Make ist eine eigene, promptgesteuerte Oberfläche. Laut Figma gibt Make HTML, CSS und JavaScript aus, für Frontend-Prototypen, mit einem eingebauten Editor für Änderungen. Sie können es im kostenlosen Starter-Plan ausprobieren, und es unterstützt eine Supabase-Integration, um Live-Daten zu simulieren.

Die Figma-eigenen Oberflächen erledigen unterschiedliche Aufgaben. Make erzeugt aus einem Prompt plus Frame einen funktionierenden Prototyp. Der Generator im Canvas macht aus ausgewählten Frames Code und nutzt dabei die Bibliothek der Datei. Figma MCP lässt einen Coding-Agent in Ihrem Repo Komponenten und Variablen direkt lesen.

Anima, Builder.io Visual Copilot und Locofy

Visual Copilot von Builder.io nennt Ausgabe für React, Qwik und Angular, dazu Kotlin und Flutter für Mobile, gestylt mit Tailwind CSS oder CSS Modules. Für die Wiederverwendung nennt dieselbe Seite Custom Component Mapping, das Figma-Komponenten mit Komponenten in Ihrer Codebasis verknüpft. Die Dokumentation von Builder markiert manuelles Komponenten-Mapping inzwischen als veraltet zugunsten der Komponentenindexierung und weist es als Funktion des Enterprise-Plans aus, prüfen Sie also zuerst die aktuelle Dokumentation und Ihren Plan.

Der kostenlose Plan von Anima erlaubt 5 Codegenerierungen im Figma-Plugin, dazu 5 Chat-Nachrichten pro Tag und 5 Figma-Importe im AI Playground. Der Enterprise-Preis beginnt bei 500 $ pro Monat, jährlich abgerechnet (Stand Oktober 2026).

Anima betreibt außerdem einen MCP-Server, und Code, der darüber generiert wird, zählt gegen dasselbe Kontingent für Codegenerierung. Locofy ist ein weiterer Figma-Datei-Konverter in dieser Kategorie.

Mit welchem Figma-Konverter Sie anfangen sollten

Fangen Sie mit der eingebauten Codegenerierung von Figma an, wenn Ihr Team für Figma bezahlt: Sie liest die Bibliothek der Datei ohne Export-Schritt, und mit einem bezahlten Plan kostet der Ein-Screen-Test kein zusätzliches Abo. Wechseln Sie zu Builder.io Visual Copilot, wenn Sie eine Ausgabe wollen, die die Komponenten Ihrer Codebasis importiert (prüfen Sie in der Dokumentation, wie Mapping oder Komponentenindexierung für Ihren Plan gilt), oder wenn Sie die Mobile-Ausgabe für Kotlin oder Flutter brauchen, die es ausdrücklich nennt.

Nutzen Sie Figma Make für einen klickbaren Prototyp, den Sie anderen zeigen. Code, den Sie mergen wollen, gehört in die Codegenerierung im Figma-Canvas oder in Builder.io Visual Copilot.

Wenn Sie nur einen Screenshot haben

screenshot-to-code ist hier der Open-Source-Standard: MIT-lizenziert, rund 80.000 GitHub-Sterne und auch 2026 noch mit neuen Commits. Geben Sie ihm ein Bild, und es liefert HTML mit Tailwind oder CSS, React oder Vue, neben anderen Stacks. Eine gehostete Version gibt es unter screenshottocode.com, falls Sie nichts selbst betreiben wollen.

Screenshot-to-code-KI kann nur mit dem arbeiten, was das Bild zeigt, die Grenze liegt also in der Eingabe. Ein Screenshot enthält keine Komponentenidentität, keine Variablen, keine Hover- oder Fokus-States und keine responsiven Breakpoints. Was zurückkommt, ist die Rekonstruktion eines einzigen statischen Frames in einer einzigen Breite, und jedes Token muss aus Pixelfarben erraten werden.

screenshot-to-code ist das richtige Tool, wenn es keine Designdatei gibt, etwa um ein Referenzlayout nachzubauen oder eine alte Seite neu aufzubauen, für die niemand eine Figma-Datei hat. Wenn es eine Figma-Datei gibt, starten Sie lieber mit ihr, denn die Datei enthält genau die Informationen, die der Screenshot wegwirft.

Wenn Sie nur einen Prompt haben

Ohne Design System, an das man sich halten muss, verlagern sich die Kompromisse an drei andere Stellen: wie das Tool abrechnet, wie viel vom Code Sie bearbeiten können und wie weit die generierte App wachsen kann.

v0

Der kostenlose Plan von v0 hat ein Tageslimit von 7 Nachrichten, dazu Deploys auf Vercel, GitHub-Sync und einen visuellen Design Mode. Bezahlte Nutzung wird pro Token abgerechnet, und die Token-Preise der v0-Modelle unterscheiden sich über vier Modellstufen, von v0 Mini bis v0 Max Fast. Was eine Session kostet, hängt davon ab, welche Stufe Sie wählen und wie lange die Unterhaltung läuft.

Lovable

Lovable rechnet in Credits ab. Im Default Mode hängen die Kosten von der Komplexität der Aufgabe ab, während Plan Mode 1 Credit pro Nachricht kostet. Der kostenlose Plan enthält täglich 5 Build-Credits, gedeckelt auf 30 pro Monat.

Ein Kommentator in einem Reddit-Thread, der Bolt und Lovable vergleicht, schrieb, Bolt gebe „fast volle Kontrolle“ über den Code, während Lovable anscheinend nur Code-Diffs zeige, „ohne Bearbeitungszugriff“. Das ist der Bericht eines einzelnen Nutzers, prüfen Sie also den aktuellen Editor, bevor Sie annehmen, dass das noch stimmt.

Bolt.new und bolt.diy

Bolt.new ist das gehostete Produkt. bolt.diy ist das Open-Source-Gegenstück, mit dem Sie für jeden Prompt das LLM wählen können, aus über 21 Anbietern, einschließlich lokaler Modelle über Ollama. Eine Datenbank ist nicht zwingend nötig; Supabase ist eine optionale Integration. Prüfen Sie die Commit-Historie und die Lizenzbedingungen, bevor Sie darauf aufbauen.

Google Stitch

Google hat Stitch im März 2026 mit einem unendlichen Canvas, Sprachinteraktion und einem Design-Agent neu gestartet, laut dem Bericht von Winbuzzer über das Redesign. Derselbe Bericht sagt, dass sich Designs ins Figma-Format oder in Code-Frameworks wie React exportieren lassen und dass ein MCP-Server Stitch mit Claude Code, Gemini CLI, Cursor und Antigravity verbindet. Damit liegt Stitch zwischen dem Prompt-Weg und dem Codebasis-Weg: Es startet mit einem Prompt, kann Designs aber an einen Agent übergeben, der in Ihrem Repo arbeitet.

Mit welchem Prompt-Tool Sie anfangen sollten

In einer Diskussion auf Hacker News über Lovable und Bolt argumentierte ein Kommentator, dass die Obergrenze für nützliche Software mit diesen beiden „unglaublich niedrig“ sei, wenn das Backend an Supabase ausgelagert ist. Derselbe Kommentator gab an, an einem Konkurrenzprodukt zu arbeiten. Lesen Sie es also als informierte Meinung mit Eigeninteresse, nicht als Messung.

Eine Figma-Datei schließt diesen Weg auch nicht automatisch aus. Im selben Reddit-Thread über Bolt und Lovable sagte ein anderer Kommentator, er habe Figma nie eingebunden, weil es für das gewünschte Design „schwieriger und nerviger als einfach zu prompten“ wirkte.

Nehmen Sie v0, wenn Ihr Team auf Vercel deployt und vom ersten Tag an GitHub-Sync will. Nehmen Sie Lovable, wenn Sie einen Build mit Nachrichten im Plan Mode zu festen Kosten planen wollen, bevor Sie Build-Credits ausgeben, und prüfen Sie vorher den Editor, wenn Sie Code von Hand ändern wollen.

Nehmen Sie bolt.diy, wenn Sie eigene Modell-Keys mitbringen oder ein lokales Modell betreiben müssen, und behandeln Sie es als Prototyping-Tool, solange sich die neue Aktivität nicht bestätigt. Probieren Sie Stitch, wenn Sie per Prompt generierte Designs wollen, die Sie später über seinen MCP-Server an einen Coding-Agent in Ihrem Repo übergeben können.

Wenn Sie schon eine Codebasis und ein Design System haben

Dieser Weg funktioniert in Ihrem Repo, wo der Agent die Komponenten selbst liest. Der Preis ist Einrichtungsarbeit, und selbst dann verbessern die dokumentierten Mechanismen nur die Chancen auf Wiederverwendung; bei keinem ist dokumentiert, dass er sie garantiert.

Figma MCP

Laut dem Help Center von Figma kann der Figma-MCP-Server Code aus ausgewählten Frames generieren, nachdem er Komponenten, Variablen, Layoutdaten, FigJam-Inhalte und Make-Ressourcen gelesen hat. Er nutzt Code Connect, um diesen Code mit Ihren Komponenten abzugleichen, und der Remote-Server kann zurück in den Canvas schreiben.

Es gibt ihn in zwei Varianten: einen Remote-Server, den Figma den meisten Nutzern empfiehlt, und einen Desktop-Server für bestimmte Fälle in Organisationen und Unternehmen.

Technisch gesehen gibt MCP Ihrem Coding-Agent einen strukturierten Feed des Designs. Wenn der Agent einen Frame untersucht, schickt der Server dessen Komponenten, Styles und Variablen, und der Figma-Blog erklärt, dass der Agent auf Ihre Code-Ressourcen zugreifen kann, wenn diese Elemente über Code Connect auf Code gemappt sind. Ohne dieses Mapping bekommt er trotzdem den Styling-Kontext und schreibt die Komponente von Grund auf neu.

Den Agent wählen Sie selbst. Die Setup-Anleitung von Figma ist für Claude Code geschrieben, und die MCP-Dokumentation von OpenCode deckt lokale und Remote-Server ab. Die Wahl zwischen Claude Code und OpenCode läuft auf verwalteten Komfort gegen Kontrolle über den Anbieter hinaus, und nichts an dieser Wahl ist spezifisch für Designarbeit.

Penpot MCP

Penpot ist das Open-Source-Pendant, und seine Dokumentation beschreibt drei zentrale Bausteine: einen MCP-Server, ein MCP-Plugin, das in Penpot läuft und Ihre geöffnete Datei verbindet, und den MCP-Client, in dem Sie Prompts schreiben. Sie richten es auf der Seite Integrations Ihres Penpot-Kontos mit einem persönlichen MCP-Key ein. Darüber kann ein Agent Komponenten, Styles, Tokens und Ebenen lesen und ändern.

Die Struktur des Projekts hat sich kürzlich geändert. Das eigenständige Repository penpot-mcp trägt einen Hinweis, dass es im Februar 2026 archiviert wurde und sein Inhalt ins Haupt-Repository von Penpot übernommen wurde. Anleitungen, die für das alte Repo geschrieben wurden, beschreiben eventuell ein anderes Setup.

Claude Design

Anthropic hat Claude Design im April 2026 als Research Preview von Anthropic Labs für Abonnenten von Pro, Max, Team und Enterprise gestartet. Beim Onboarding baut Claude ein Design System für Ihr Team, indem es Ihre Codebasis und Designdateien liest, wendet es auf spätere Projekte an und packt fertige Designs in ein Übergabepaket für Claude Code.

UXPin, das selbst Design-Tools verkauft, schrieb in der Launch-Woche:

„Designer, die Claude Design diese Woche getestet haben, berichteten in ihren ersten Sessions von falschen Schriften, falschen Button-Farben und uneinheitlichen Abständen.“

Mit welchem Codebasis-Setup Sie anfangen sollten

Nutzen Sie Figma MCP mit einem Coding-Agent, wenn Ihr Design System in Figma liegt und Sie bereit sind, das Mapping über Code Connect anzulegen, denn genau dieses Mapping trennt importierte Komponenten von neu gestylten Kopien.

Nutzen Sie Penpot MCP, wenn Sie ein Open-Source-Design-Tool wollen, das Ihr Agent lesen und bearbeiten kann. Penpot selbst lässt sich selbst hosten, aber die MCP-Doku beschreibt das Setup über ein Penpot-Konto. Prüfen Sie den Ablauf also auf Ihrer eigenen Instanz, bevor Sie sich darauf verlassen.

Nutzen Sie Claude Design, wenn Ihr Team für Claude bezahlt und möglichst wenig Setup will, und machen Sie den Ein-Screen-Test, bevor Sie seiner Version Ihres Design Systems vertrauen.

Die Open-Source-Optionen auf Ihrem eigenen Server betreiben

Drei dieser Tools laufen auf einem Server, den Sie kontrollieren. Damit tauschen Sie das Hosting eines Anbieters gegen Ihre eigene Wartung und, bei bolt.diy und screenshot-to-code, einen Credit-Zähler gegen Ihre eigenen Modell-Keys. Stand Oktober 2026 hat jedes davon einen Haken.

bolt.diy. Das Projekt bekam vom 7. Februar bis 4. Oktober 2026 keinen Commit, und das letzte getaggte Release, v1.0.0, erschien im Mai 2025, laut der Commit-Historie des Repositorys. Das Projekt ist MIT-lizenziert, hängt aber von der WebContainers API ab (der Browser-Laufzeit, die den generierten Code ausführt), die für den Produktionseinsatz eine Lizenz erfordert, wenn sie kommerziell und gewinnorientiert genutzt wird.

Prototypen und Proofs of Concept brauchen diese Lizenz nicht. In der Praxis eignet sich bolt.diy gut zum Prototyping mit Ihren Keys; prüfen Sie die Aktivität erneut, bevor Sie ein Produkt darauf aufbauen.

screenshot-to-code. Wer es selbst betreibt, braucht mindestens einen Key eines Modellanbieters, von OpenAI, Anthropic oder Gemini, plus einen Server, den man selbst wartet. Die laufenden Kosten sind die Modellnutzung pro Generierung, abgerechnet von dem Anbieter, dessen Key Sie konfigurieren.

Penpot. Penpot lässt sich mit Docker Compose oder mit dem offiziellen Helm-Chart auf Kubernetes, OpenShift oder Rancher selbst hosten. Laut Doku werden selbst gehostete Docker-Images kurz nach SaaS-Updates veröffentlicht, ein neues Cloud-Feature erreicht Ihre Instanz also mit Verzögerung.

Wo Sie sie betreiben, hängt davon ab, wer sie nutzt. Ein Laptop reicht, um bolt.diy oder screenshot-to-code allein auszuprobieren. Ein Server lohnt sich, sobald ein Team eine Penpot-Instanz teilt oder die Tools erreichbar bleiben müssen, während Ihr Laptop zugeklappt ist.

Für bolt.diy gibt es kein offizielles Minimum, nehmen Sie also rund 4 GB RAM und 2 vCPU mit NVMe-Speicher als Ausgangspunkt für eine einzelne Node-App wie diese. Laut Help Center von Penpot reichen 4 CPUs und 16 GB RAM für Tausende Nutzer, und Sie können bei der Zuteilung von Ressourcen zurückhaltend sein; für die Instanz eines kleinen Teams plus einen Coding-Agent auf demselben Server sind eher 8 bis 12 GB RAM ein vernünftiger Start. Wenn der Agent auf diesem Rechner auch in einer Browser-IDE laufen soll, ist die Dimensionierung für Code Server mit Claude Code eine eigene Rechnung.

Selbst hosten heißt: Sie betreiben den Server, spielen die Updates ein und halten die Modell-Keys sicher. Wenn Sie den Installationsschritt lieber überspringen, bieten wir Ein-Klick-Deployments von bolt.diy für eine Prototyping-Umgebung und von Penpot für einen gemeinsamen Design-Arbeitsbereich an, auf einem Linux VPS mit Root-Zugriff. Coding-Agents wie Claude Code und OpenCode werden genauso bereitgestellt, als separate Apps. Die Wartung bleibt bei Ihnen; das Setup nicht.

Häufig gestellte Fragen

Was ist besser, Figma Make oder v0?

Das entscheidet Ihr Ausgangspunkt. Figma Make arbeitet in Figma, nimmt einen Frame plus Prompt und gibt HTML, CSS und JavaScript für Frontend-Prototypen aus. v0 startet nur mit einem Prompt, deployt auf Vercel und synchronisiert mit GitHub. Nehmen Sie Make, wenn das Design in Figma existiert, und v0, wenn Sie von einer Beschreibung ausgehen.

Kann KI einen Screenshot in funktionierenden Code umwandeln?

Ja. Das Open-Source-Projekt screenshot-to-code macht aus einem Screenshot HTML-, React- oder Vue-Code und nutzt dafür einen API-Key von OpenAI, Anthropic oder Gemini. Das Ergebnis ist allerdings die Rekonstruktion eines einzigen statischen Frames, ohne Komponentenidentität, Interaktions-States oder responsive Breakpoints. Eine Figma-Datei ist daher die bessere Eingabe, wenn es eine gibt.

Gibt es eine Open-Source-Alternative zu v0, Bolt oder Lovable?

Ja. bolt.diy ist das Open-Source-Gegenstück zu Bolt.new und die selbst hostbare Option unter den hier vorgestellten Prompt-to-App-Tools. Es ist MIT-lizenziert und arbeitet mit Ihren Modell-Keys, einschließlich lokaler Modelle über Ollama. Die Commits ruhten von Februar bis Oktober 2026, und die Abhängigkeit WebContainers braucht für gewinnorientierten Produktionseinsatz eine kommerzielle Lizenz. Prüfen Sie also sowohl die Aktivität als auch die Lizenz, bevor Sie ein Produkt darauf aufbauen.

Warum ignoriert KI-generierter Code mein Design System?

Viele Tools sehen Ihr Design als Pixel oder als flachen Frame und nähern daraus Farben, Schriften und Abstände an. Tools, die Variablen und Komponentenstruktur direkt lesen, etwa Figma MCP, können Ihre echten Komponenten importieren, wenn diese über Code Connect auf Code gemappt sind. Ohne dieses Mapping nutzt der Agent Ihre Styles als Kontext und schreibt neue Komponenten.