UI Design & Frontend-Entwicklung

UI Design & Frontend-Entwicklung

0:00 Zwischen Design und Code liegt traditionell eine Lücke, und jeder, der schon einmal ein Frontend gebaut hat, kennt sie: Da ist ein Entwurf, hübsch anzusehen, und daneben sitzt jemand, der Abstände abmisst, Farbwerte abtippt und am Ende doch etwas anderes produziert, als gemeint war. In diesem Kapitel geht es darum, wie diese Lücke schmaler wird.

0:19 Wir schauen uns drei Wege an: das schlichte Bild als Vorlage, die direkte Anbindung an Figma und ein eigenes Prototyping-Werkzeug mit Übergabe ins Terminal. Der rote Faden ist überall derselbe — von der visuellen Vorlage zur lauffähigen Oberfläche.

UI Design & Frontend-Entwicklung

0:34 Drei Stationen, die aufeinander aufbauen. Wir beginnen niedrigschwellig mit Bildern: Ein Screenshot wird zur Komponente, ganz ohne zusätzliches Werkzeug. Danach wird es strukturierter mit der Figma-Anbindung über MCP — da fließen nicht mehr nur Pixel, sondern Layer und Design-Tokens. Und zum Schluss der Blick auf Claude Design, wo der Prototyp im Browser entsteht und anschließend an Ihr Terminal übergeben wird.

Vision Capabilities

0:58 Fangen wir mit dem einfachsten Werkzeug an, das Sie schon haben: einem Bild. Es braucht keine Integration, keinen Token und keine Konfiguration — und trotzdem ist es überraschend wirkungsvoll. Der Kerngedanke ist so naheliegend, dass man ihn leicht übersieht: Ein Bild sagt mehr als eine Beschreibung. Sie ziehen einen Screenshot ins Terminal, fügen ihn per Zwischenablage ein oder geben schlicht einen Dateipfad an — und Claude Code macht daraus eine funktionsfähige Komponente.

1:28 Die üblichen Formate werden unterstützt, PNG, JPEG, GIF und WebP; Sie müssen also nichts konvertieren. Was das im Alltag bedeutet, merkt man erst beim Ausprobieren: Der mühsame Schritt, ein Layout in Worte zu fassen — „links eine Sidebar, oben eine Leiste, die Karten dreispaltig" —, entfällt einfach. Sie zeigen es stattdessen.

1:47 Der wichtigste Punkt steht ganz oben und ist eine Frage der Informationsdichte: Ein Screenshot transportiert Layout präziser, als es zehn Sätze könnten — Abstände, Hierarchie, Proportionen stecken alle im Bild. Daraus ergeben sich drei praktische Anwendungen. Sie können bestehende Oberflächen nachbauen, etwa wenn ein Legacy-Screen in ein neues Framework umzieht.

2:08 Sie kommen von einer Skizze oder einem Mockup schnell zu echtem Code, ohne Zwischenstufe. Und — das ist der unterschätzte Punkt — Ihr Feedback wird visuell: Statt zu erklären, was nicht stimmt, markieren Sie es im Bild und schicken es zurück. Die ersten drei Schritte sind schnell erzählt: Vorlage bereitlegen, Bild übergeben, Komponente generieren lassen.

2:29 Der interessante Schritt ist der vierte, und die Fußzeile erklärt auch, warum. Claude Code sieht nicht, was Ihr Browser rendert — der Agent hat keine Augen im laufenden Programm. Sie schließen den Kreis also selbst: Ergebnis rendern, neu screenshotten, das Bild zurückgeben. Diese sogenannte Screenshot-Loop klingt nach Handarbeit, ist aber der eigentliche Trick des Kapitels.

2:51 Sie liefern damit eine Rückkopplung, die der Agent von sich aus nicht hat — und genau dadurch nähert sich das Ergebnis mit jeder Runde der Vorlage an. Probieren Sie das jetzt an einer eigenen Vorlage aus — ein Screenshot von einer Website, ein Ausschnitt aus einem Mockup, notfalls eine abfotografierte Skizze. Wichtig ist die zweite Hälfte des Lernziels: iterativ angleichen. Die erste Runde wird selten sitzen, und das ist völlig normal.

3:16 Nehmen Sie sich die Disziplin vor, nach jeder Runde tatsächlich neu zu screenshotten, statt in Worten nachzubessern — genau darin liegt der Unterschied zwischen zwei mühsamen Versuchen und einer Annäherung, die funktioniert. Als Erfolg gilt eine Komponente, die dem Bild in Aufbau und wesentlichen Stilen entspricht. Pixelgenau muss sie nicht sein.

Figma-Integration (MCP)

3:37 Ein Bild ist ein guter Anfang, aber es ist eben nur eine Fläche aus Pixeln. In einem echten Design steckt viel mehr — benannte Komponenten, Ebenen, definierte Farb- und Abstandswerte. Diese Struktur können wir direkt anzapfen. Der Unterschied zum Screenshot lässt sich gut vergleichen: Ein Bild ist wie ein Foto einer Seite, das Figma-Design ist das Dokument selbst — mit allem, was darin benannt und strukturiert ist.

4:03 Über den offiziellen Figma-MCP-Server bekommt Claude Code Zugriff auf genau diese Struktur. Bemerkenswert ist die Richtung, oder besser: dass es zwei gibt. Sie erzeugen aus einem Frame Code — der erwartbare Weg. Sie können aber auch eine im Browser laufende Oberfläche als editierbare Frames zurück nach Figma spielen. Damit ist Design nicht mehr nur Ausgangspunkt, sondern kann den Stand des Codes wieder aufnehmen.

4:28 Der handfeste Gewinn steckt im zweiten Punkt: kein manuelles Abmessen, kein Abtippen von Hexcodes. Das ist die Arbeit, bei der Fehler entstehen, ohne dass jemand dabei etwas lernt. Dahinter steht aber das größere Argument — was übernommen wird, ist die Design-Struktur selbst: Layer, Komponenten, Tokens. Der Code erbt damit die Ordnung des Designs, statt sie nachträglich nachzuempfinden.

4:52 Der dritte Punkt ist eine Perspektive für Teams: Änderungen bleiben zwischen beiden Welten synchronisierbar, das Design veraltet nicht sofort. Und die Einstiegshürde ist niedrig — ein Access-Token, eine MCP-Konfiguration, ein paar Minuten. Diese eine Befehlszeile ist die gesamte Einrichtung, und sie folgt einem Muster, das Sie im MCP-Kapitel wiedersehen werden: Sie melden bei Claude Code einen externen Dienst an, geben ihm einen Namen und eine Adresse — fertig.

5:21 Danach ändert sich Ihr Arbeitsalltag nur an einer Stelle: Sie fügen einen Frame-Link in den Prompt ein, und Claude liest das Design. Zwei Dinge sollten Sie im Kopf behalten. Erstens brauchen Sie einen persönlichen Access-Token; das ist Ihr Zugang, gehen Sie damit entsprechend um. Und zweitens der Hinweis in der Fußzeile: MCP-Server nur aus vertrauenswürdiger Quelle einbinden. Sie geben einem fremden Dienst Zugriff auf Ihre Arbeit.

5:47 Für diese Übung brauchen Sie einen Figma-Frame — nehmen Sie einen aus einem echten Projekt, wenn Sie können. Der Hinweis ist wichtiger, als er wirkt: Starten Sie mit einer einzelnen, gut strukturierten Komponente, nicht mit einem kompletten Screen. Ein sauber benanntes Button- oder Karten-Element liefert ein Ergebnis, an dem Sie tatsächlich beurteilen können, was übernommen wurde; ein ganzer Screen produziert nur Rauschen.

6:10 Achten Sie beim Prüfen genau darauf, ob die Design-Tokens im Code erkennbar sind — also ob dort Ihre definierten Werte auftauchen oder ob doch irgendwelche Zahlen fest verdrahtet wurden. Das ist der eigentliche Qualitätstest.

Claude Design (Prototyping)

6:23 Bisher gab es immer schon etwas: einen Screenshot, ein fertiges Design. Bleibt die Frage, wie man startet, wenn noch gar nichts da ist — nur eine Idee. Genau dafür gibt es ein eigenes Werkzeug. Claude Design ist ein webbasiertes Prototyping-Werkzeug, und der entscheidende Punkt ist das Wort „interaktiv". Was hier entsteht, ist kein Bild und kein Klickdummy aus verlinkten Screens, sondern ein Prototyp, den man tatsächlich bedienen kann — erzeugt aus Text, aus Bildern oder aus Ihrer bestehenden Codebasis.

6:54 Am Ende steht der Hand-off: Der fertige Entwurf wandert an Claude Code in Ihr Terminal. Damit schließt sich der Bogen dieses Kapitels. Wir sind vom Bild über das strukturierte Design bis zu einem Werkzeug gekommen, das den Übergang zwischen Entwerfen und Bauen selbst zum Vorgang macht. Zwei dieser Punkte lohnen eine genauere Betrachtung. Der zweite: Das Design-System wird automatisch aus Codebasis oder Figma gelesen.

7:19 Das ist der Unterschied zwischen einem hübschen Entwurf, der zu nichts passt, und einem, der von Anfang an in Ihren Farben, Abständen und Komponenten denkt. Und der dritte Punkt beschreibt eine Arbeitsteilung, die in vielen Teams Reibung erzeugt: Produktmanagement und Design können prototypen, ohne Engineering-Kapazität zu binden — und was dabei herauskommt, ist kein Wunschzettel, sondern etwas, das sich übergeben lässt.

7:43 Der Hand-off führt direkt zur lokalen Implementierung. Aus „so ungefähr könnte es aussehen" wird ein Startpunkt. Der Ablauf ist bewusst einfach gehalten und verläuft in zwei Welten. In den ersten beiden Schritten arbeiten Sie im Browser: Prototyp per Prompt erzeugen, dann interaktiv verfeinern — Layout, Flows, Stil. Das ist die Phase, in der Ausprobieren billig ist und Verwerfen nichts kostet. Der dritte Schritt ist die Grenze: Der Hand-off übergibt an Claude Code.

8:11 Und ab dem vierten Schritt sind Sie zu Hause im Terminal und bauen aus dem Entwurf die echte Umsetzung. Die Fußzeile ist dabei der Grund, warum dieser Übergang überhaupt funktioniert — das Design-System kommt aus Ihrer bestehenden Codebasis, der Prototyp spricht also schon Ihre Sprache. Diese letzte Übung führt beides zusammen.

8:30 Bauen Sie einen Prototyp und vollziehen Sie den Übergang bis in Ihr Terminal — der Hand-off ist ausdrücklich Teil der Aufgabe, nicht bloß der Prototyp. Halten Sie das Ganze klein: ein Screen, ein klarer Flow. Wer einen kompletten Anwendungsentwurf versucht, verbringt die Zeit mit Verfeinern im Browser und kommt nie beim eigentlich Interessanten an.

8:50 Achten Sie bei der Übergabe darauf, was tatsächlich im Terminal ankommt und in welchem Zustand — dieser Moment sagt Ihnen mehr über den Nutzen des Werkzeugs als eine Stunde Prototyping davor. Fassen wir zusammen, und zwar entlang der Frage, wann Sie was nehmen. Der Screenshot ist der schnellste Weg — kein Setup, sofort einsetzbar, und mit der Screenshot-Loop kommen Sie erstaunlich weit.

9:13 Die Figma-Anbindung über MCP lohnt sich, sobald ein gepflegtes Design-System existiert, denn dann fließt Struktur statt Pixel, und das in beide Richtungen. Und Claude Design ist das Werkzeug für den Anfang, wenn noch nichts da ist außer einer Idee. Alle drei enden am selben Ort: bei lauffähigem Code in Ihrem Projekt. Im nächsten Kapitel geht es einen Schritt davor — um Anforderungen und spezifikationsgetriebene Entwicklung.

Design und Code, ein Fluss

9:39 „Ein Fluss" — das ist die Zusammenfassung, und sie ist bewusst gewählt. Design und Code waren lange zwei getrennte Welten mit einer Übergabe dazwischen, bei der regelmäßig etwas verloren ging. Was Sie in diesem Kapitel gesehen haben, sind drei Wege, diese Übergabe verlustärmer zu machen — vom Bild, vom Design, vom Prototyp zur lauffähigen Oberfläche.

10:00 Ein Gedanke sei zum Schluss erlaubt: Die Werkzeuge nehmen Ihnen das Abtippen ab, nicht die Gestaltungsentscheidung. Die bleibt bei Ihnen. Fragen und das Material zum Nachlesen finden Sie unter www.HCO.de.