Claude hat eine neue Funktion namens Design.
Claude Design ist eine Forschungsvorschau, die von Anthropic am 17. April veröffentlicht wurde, Teil der Anthropic Labs-Produktlinie, und läuft auf ihrem derzeit stärksten Vision-Modell Opus 4.7. Es wurde entwickelt, um visuelle Entwürfe mit Claude zu erstellen – Web-Prototypen, Präsentationen, Pitch Decks, Landing Pages, One-Pager und mehr sind möglich. Es kann dein Code-Repository und vorhandene Design-Dateien lesen und dein Designsystem auf die Ausgabe anwenden, sodass der Stil zu deinen bestehenden Projekten passt.
Das Beste ist das Endergebnis: Neben dem Export als PDF/PPTX/HTML oder dem Senden an Canva kann es auch alles in ein Handoff-Bündel packen und an lokales Claude Code übergeben, um den Projektcode weiter zu bearbeiten.
Sobald das herauskam, hat es den Aktienkurs von Figma gedrückt – ein Minus von 6,89%.
Kurze Einführung zu Figma: Ein Unternehmen, das Online-Kollaborations-Design-Tools herstellt und mit Adobe und Canva konkurriert. Zehn Millionen Designer weltweit nutzen es, um Designs zu erstellen. Eigentlich gab es bereits einen MCP, mit dem man KI nutzen konnte, um Figma zu steuern, aber weil mein ästhetisches Empfinden zu einfach ist und mein Kopf leer ist, habe ich dieses Produkt nie genutzt.
Warum ich es wirklich brauchte
Erinnerst du dich an das Obsidian-Plugin, das ich erstellt habe, um Inhalte auf WeChat Official Accounts zu pushen?
Bisher habe ich über alle Kanäle hinweg insgesamt 0 Exemplare verkauft. Wie erfreulich (TAT).
Natürlich könnte es – und ich prahle nicht – mit meinem einfachen Designgeschmack zu tun haben.
Schau dir an, wie die ursprüngliche Benutzeroberfläche meines Plugins aussah:
Zwei Symbolleisten, 9 Buttons in einer Reihe zusammengequetscht. Format, Konto, voreingestellter Kontoname, Kontokonfiguration, Kaufaktivierung, Benutzerhandbuch, Rendern aktualisieren, HTML kopieren, in WeChat Official Account einfügen, Entwurf veröffentlichen … alles an der prominentesten Stelle.
Alle Funktionen sind da, aber allein der Anblick ist ermüdend.
Darunter ein super langer Prompt: ‘Klicken Sie auf die Schaltfläche unten, um ein Bild von Ihrem Computer auszuwählen; leer lassen, um ein Platzhalter-Cover zu verwenden; wenn ein Standard-Cover festgelegt ist, verwenden Sie das Standard-Cover.’ Ein Freund sah es und sagte: ‘Für wen ist das? Eine Datenbankfeldbeschreibung?’
Als ich also sah, dass Claude Design herauskam, habe ich es sofort ausprobiert. Mal sehen, wie es tatsächlich abschneidet.
Wie man es verwendet
Öffne zuerst die Webversion von Claude, klicke links auf Design, um einzusteigen. Oben gibt es ein Eingabefeld namens ‘New prototype’, gib einfach den Projektnamen ein.
Du kannst Wireframe (niedrige Detailtreue) oder High Fidelity (hohe Detailtreue mit Marken-Assets) wählen. Ich habe niedrige Detailtreue gewählt, weil es am Anfang nur um grobe Konzepte geht, keine hohe Detailtreue nötig. Eigentlich wird es nach Abschluss automatisch für dich aktualisiert.
Als nächstes gib den Programmordnerpfad an und sende einen Screenshot der Seite, die du ändern möchtest.
Es wird dir zuerst ein paar Fragen stellen: Was soll geändert werden, was soll bleiben, was ist die primäre Aktion, was ist die sekundäre Aktion. Ich habe ehrlich gestanden – ich möchte am meisten ‘Entwurf veröffentlichen’ und ‘Konto wechseln’ hervorheben, der Rest kann eingeklappt werden.
Nachdem es gefragt hatte, begann es von selbst zu laufen.
Es kam mit 4 Optionen
Kurz darauf übergab es mir eine wireframes.html-Vergleichsseite.
Das erste war ein Vergleich – es listete die ‘Sünden’ meiner aktuellen Benutzeroberfläche einzeln in rotem Text auf:
- ‘Zwei Leisten quetschen die Vorschau’
- ‘9 Buttons’
- ‘Gemischtes Chinesisch/Englisch + verwirrende Symbolbeschreibungen’
Diese Funktion hat mich wirklich überrascht. Ich dachte, es würde mir nur helfen, Dinge zu ändern, aber es hat tatsächlich den Inhalt gesehen und die Probleme aufgezeigt. Es fühlte sich an wie ein echter Designer, der persönlich kommuniziert, nicht wie eine kalte KI.
Dann kamen die 4 Optionen:
- Option A: Einreihig minimal, Hauptbutton ‘Entwurf veröffentlichen’ + Konto-Kapsel, Rest Symbole +
⋯-Menü - Option B: Karten-Breadcrumb + Drawer, Einstieg zum Bearbeiten von Metainformationen beibehalten
- Option C: Seitenleiste (wie VSCode), obere Leiste nur Titel
- Option D: Schwebende Veröffentlichungskarte unten rechts, primäre Aktion am prominentesten
Am interessantesten war Option D. Es zeichnete einen Haftnotizzettel mit ‘Allgemeine Designregeln’ und ‘Empfohlene Reihenfolge’:
A → Platzsparendste, geringe Lernkosten D → Visuell hübscheste, befriedigendste primäre Aktion C → Freundlich für Power-User (Symbolbibliothek) B → Sicher, behält Bearbeitung von Metainformationen
Das ist nicht nur ‘hier sind einige Optionen’, sondern ‘hier sind einige Optionen + sagt dir, für wen jede ist’. Ich mache schon lange Plugins, und niemand hat mir jemals ernsthaft gesagt, ‘wo dieser Button hingehört’.
Du kannst weiter iterieren
Nachdem du eine Richtung gewählt hast, kannst du weiter kommunizieren. Links ist ein Chat-Fenster, rechts klicke auf Edit, um Elemente direkt auszuwählen und zu ändern (aber die Einstellungen dort waren zu professionell, ich konnte sie nicht verstehen, also habe ich es übersprungen). Klicke auf Draw, um Kreise und Pfeile auf die Vorschau zu zeichnen und ihm zu sagen ‘Ich möchte das hierhin verschieben’:
Ich finde die Draw-Funktion großartig. Ich habe einen sehr groben Pfeil von einem Button nach unten rechts gezeichnet, und es hat es tatsächlich verstanden – wahrscheinlich aufgrund der großen Verbesserung der visuellen Erkennung von Opus 4.7 (wie bereits erwähnt, hat es die Bilderkennungsgenauigkeit auf 3,75 Megapixel erhöht).
Von der Symbolleiste zum Layout
Nachdem ich die Menüleiste geändert hatte, bat ich es, mehrere Artikel-Layout-Stile zu erstellen – schließlich besteht die Hauptaufgabe meines Plugins darin, Markdown in etwas zu formatieren, das auf WeChat Official Accounts veröffentlicht werden kann.
Es öffnete eine neue Seite mit dem Titel ‘Markdown in einen lesenswerten WeChat-Artikel formatieren’. Oben rechts gibt es einen Tweaks-Button, der beim Klicken die Anpassung von Schriftgröße, -stärke, -farbe, Zeilenabstand usw. ermöglicht, genau wie Figma:
Beachte, dass dies eine wirklich klickbare und umschaltbare Seite ist, keine gefälschte. Diese Interaktion ist viel besser als in Claude Code im Terminal. Bei Claude Code musst du warten, bis es fertig ist, um den Effekt zu sehen, und es dann bitten, es zu ändern. Hier hast du eine Echtzeitvorschau.
Nach der Fertigstellung klicke oben rechts auf Export. Es gibt mehrere Optionen: PPT herunterladen, PDF exportieren, eigenständiges HTML exportieren oder – die letzte – ‘Handoff to Claude Code’, die die gesamte Designdatei an lokales Claude Code sendet, um weiter zu programmieren.
Das ist der beste Teil der gesamten Kette.
Nach dem Design im Web generiert es einen Befehl für dich. Kopiere und füge ihn in das Terminal ein, und das lokale Claude Code übernimmt:
> Fetch this design file, read its readme,
and implement the relevant aspects of the design.
Implement: option-b-hifi.html
Dann beginnt es, das Designpaket zu lesen, den aktuellen Code anzusehen, zu verstehen, welche Dateien geändert werden müssen, und schließlich direkt meinen gesamten Plugin-Quellcode zu ändern. Die Designseite stellte option-b-hifi.html bereit (ich habe mich letztendlich für die hochauflösende Version von Option B entschieden), und Claude Code liest Farben, Schriftgrößen, Abstände aus der Designdatei und wendet sie auf meinen React-Code an.
Ich habe während des gesamten Prozesses keine einzige Zeile Code geschrieben.
Das Endergebnis
Jedenfalls finde ich, dass es viel besser aussieht als mein Original. Obwohl ein echter Designer vielleicht noch besser gemacht hätte, ist es für ein persönliches Plugin mehr als ausreichend (im Vergleich zu meinem ursprünglichen Design).
Titel + Metainformationen in eine Zeile zusammengeklappt, Konto wird zu einer Kapsel (mit einem grünen aktiven Punkt), die primäre Aktion ist nur ein einzelner lila ‘Entwurf veröffentlichen’-Button rechts, alles andere ist im ⋯-Menü versteckt.
Es stellt sich heraus, dass mein Haufen von ‘Funktionen’ nicht an mangelndem Designverständnis litt – sondern dass mir niemand half, Kompromisse zu machen.
Einen Button hinzuzufügen ist einfach, aber einen aus der Benutzeroberfläche zu entfernen, ist für einen Entwickler kontraintuitiv – man denkt immer ‘was, wenn jemand es braucht?’. Aber ein Designer trifft diese Entscheidung für dich: ‘Setz das in ein sekundäres Menü, Benutzer werden es nach dem ersten Mal nicht mehr anklicken.’
Dieses Mal hat Claude Design diese Entscheidung für mich getroffen.
Die Kosten
Es ist ressourcenintensiv
In den Abonnementplänen von Claude hat Design ein eigenes Kontingent (ich muss sagen, Claudes separate Kontingente häufen sich wirklich).
Dieses Set zu machen – 4 Optionsvergleiche + 5 Artikelthemen + hochauflösende Implementierung – hat 36% meines täglichen Kontingents verbraucht. Ich habe ein 5x Max-Konto; für ein Pro-Konto würde das das gesamte Tageskontingent sprengen.
Ein Freund von mir hat ein Pro-Konto. Letzte Nacht hat er mit Design eine 30-seitige Präsentation erstellt und sein tägliches Kontingent war vollständig aufgebraucht.
Gelegentliche Störungen
Manchmal kann es während der Arbeit zu einer Situation kommen: Du sendest eine Nachricht, und es antwortet mit <empty>. Sende erneut, immer noch <empty>:
Die Lösung ist, die Seite zu aktualisieren und ihm zu sagen ‘bitte weiter’, und es nimmt normalerweise wieder auf. Aber du verlierst etwas Kontext. Wenn du mitten in kritischen Designiterationen bist, denke daran, ab und zu Screenshots als Sicherung zu machen, damit du nicht von vorne beginnen musst, wenn es im letzten Schritt kaputtgeht.
Abschließende Gedanken
Mein Obsidian-Plugin mit seinem einfachen Design sieht endlich wie ein richtiges Produkt aus.
Aber um ehrlich zu sein, als ich vor meinem Computer saß und auf ‘Entwurf veröffentlichen’ klickte, war ich nicht ganz begeistert. Mir ist eines sehr klar – wenn jemand wie ich ohne Designausbildung in zwei Stunden eine anständige Benutzeroberfläche hinbekommt, dann werden diejenigen, die ihren Lebensunterhalt mit ‘anständig’ verdienen, ein paar schwere Jahre vor sich haben.
Früher habe ich mir Sorgen gemacht, dass KI Schriftstellern einen Gesprächspartner mit literarischem Geschmack nehmen würde. Dieses Mal ist es das Gegenteil – Designer sind dabei, den dicksten Teil des Marktes zu verlieren: den Anfänger- bis Mittelstufenbereich.
Jedes Mal, wenn die KI einen Schritt nach vorne macht, jubeln einige Leute, und einige gehen leise. Dieses Mal bin ich derjenige, der jubelt, aber ich kann das Seufzen hinter mir hören.
Ich habe in letzter Zeit viel Zeit und Geld in KI investiert, aus Sorge, dass sie mich eines Tages ersetzen könnte, aber bisher habe ich keinen Ausweg gefunden. Sie hilft bei meinem Hauptjob, aber keine grundlegende Veränderung. Am wichtigsten ist, dass ich kein Geld damit verdient habe.
Wenn du auch ein kleines Produkt, Plugin oder eine Website hast, die wie meine vor sich hin staubt – probiere Claude Design aus.
Es wird dir vielleicht nicht deinen ersten Verkauf bringen, aber zumindest wird es es ansehnlicher aussehen lassen. Und das allein ist schon eine enorme Verbesserung.