Design-System · Claude
Corporate Design UI mit Claude: markenkonform statt generisch
Kurz gesagt
Eine Corporate Design UI mit Claude baut Pexon Consulting so, dass das Design-System zuerst maschinenlesbar vorliegt: Design Tokens als JSON, darauf Komponenten mit allen Zuständen, dann drei Prüfungen in der Pipeline. Für Produkt- und IT-Verantwortliche im Mittelstand, deren digitale Oberflächen nicht nach der eigenen Marke aussehen. Eine Erhebung zu KI-gestützter Entwicklung nennt Reproduzierbarkeit 2026 mit 66,8 Prozent als häufigstes Kernproblem. und den Kern-Nutzen. Selbsterklärend, ohne Umbruch mitten in der Antwort.]
14 AI Agents in Produktion
30 Azure-Spezialisten
On-Premise und EU-Cloud
Micha, Consultant für KI-Infrastruktur und Security bei Pexon Consulting · Stand 16.09.2026
Warum Oberflächen per Prompt entstehen teuer wird
Wer eine Oberfläche per Prompt erzeugt, bekommt etwas Ansehnliches, und genau das ist das Problem. Reproduzierbarkeit ist mit 66,8 Prozent das häufigste Kernproblem KI-gestützter Entwicklung: zwei Sitzungen mit demselben Prompt ergeben zwei verschiedene Oberflächen.
Die Standardoptik der Trainingsdaten
Abgerundete Ecken, ein Blauton, eine Systemschrift. Das Ergebnis wirkt professionell und trägt keine einzige Eigenschaft Ihrer Marke. Auffallen tut es erst, wenn die neue Oberfläche neben der bestehenden steht.
Feste Werte statt Token-Referenzen
Eine Oberfläche kann markenkonform aussehen und das System trotzdem umgehen. Beim nächsten Farbwechsel zieht sie dann nicht mit, und niemand weiß vorher, welche Komponenten betroffen sind.
Barrierefreiheit nach Gefühl
Modelle wählen Farbpaare nach Optik, nicht nach Messwert. Kontrast ist deshalb der am häufigsten verletzte Punkt bei KI-erzeugten Oberflächen.
Was die Claude-Strecke messbar bringt
Die erste Zahl stammt aus einer Branchenerhebung zu KI-gestützter Entwicklung, die übrigen beschreiben den Umfang unserer Strecke.
66,8 % Kernproblem Reproduzierbarkeit
So häufig wird fehlende Reproduzierbarkeit als Kernproblem genannt. Ein festes Token-Set nimmt dem Modell genau die Freiheit, die den Unterschied zwischen zwei Sitzungen erzeugt. (Empirische Erhebung zu KI-gestützter Entwicklung, 2026)
5 Zustände je Basiskomponente
Normal, aktiv, deaktiviert, Fehler, Ladevorgang. Ein Knopf ohne Ladezustand wird später in jedem Formular einzeln nachgebaut, und dann unterschiedlich. (Pexon-Komponenten-Standard)
3 Prüfungen in der Pipeline
Token-Treue, Kontrast und Komponenten-Inventar laufen automatisiert. Sie halten die Oberfläche markenkonform, statt es einmal bei der Abnahme festzustellen. (Pexon-Projektstandard)
4,5 Mindestkontrast als Zahl im System
Der Schwellwert steht in der Token-Datei, nicht in einer Richtlinie. Ein Modell, das ihn kennt, prüft seine Farbpaare selbst. (WCAG-Mindestkontrast für Text)
Ab wann sich die Claude-Strecke lohnt
Die Claude-Strecke lohnt sich, sobald mehr als zwei digitale Anwendungen dieselbe Marke tragen sollen, mehr als 10 Komponenten wiederverwendet werden oder ein Markenwechsel ansteht. Bei einer einzelnen Anwendung reicht ein Token-Set ohne Automatisierung. Wer noch gar kein maschinenlesbares System hat, beginnt beim Design-System selbst, nicht bei der Strecke darüber.
> 2
Anwendungen mit derselben Marke
> 10
wiederverwendete Komponenten
1
anstehender Markenwechsel
Wofür die Claude-Strecke eingesetzt wird
Use Case 01
Token-Set aus dem Bestand ableiten
Pexon leitet Farben, Typografie und Abstandslogik aus Ihrer bestehenden Anwendung und Ihren Designdateien ab, statt sie neu zu erfinden.
1 JSON-Datei als verbindliche Quelle für alle Werkzeuge
Use Case 02
Komponenten mit allen Zuständen
Knopf, Eingabefeld, Karte, Tabelle und Navigation entstehen mit allen fünf Zuständen, bevor der erste Bildschirm gebaut wird.
5 Zustände je Komponente statt nur des glücklichen Pfads
Use Case 03
Übergang ins Repository
Design-System und Bildschirme wandern in Ihr Repository. Danach prüfen wir, ob die Komponenten wirklich Tokens referenzieren.
0 feste Farbwerte in Komponenten als Abnahmekriterium
Use Case 04
Markenwechsel als Dateiänderung
Wenn Farben und Abstände nur als Token-Referenzen im Code stehen, ist ein Rebranding eine Änderung an einer Stelle.
1 Datei statt einer Suche durch alle Komponenten
Passt das in unser Figma und unser Repository?
Die Strecke bringt kein neues Werkzeug mit. Sie verbindet, was Sie im Design und in der Entwicklung bereits nutzen.
Design-Seite
Figma · Vorhandenes System als JSON-Tokens exportieren, damit es verlustfrei lesbar wird.
Markenrichtlinien · Wenn kein Designsystem existiert, leiten wir Tokens aus Richtlinien und Bestand ab.
Mehrere Systeme · Marken- oder Produktlinien lassen sich als getrennte Token-Sets parallel pflegen.
Entwicklungs-Seite
Ihr Repository · Komponenten und Tokens liegen bei Ihnen im Code, nicht in einem fremden Werkzeug.
Ihre Pipeline · Die drei Prüfungen laufen in GitHub Actions oder GitLab CI, die Sie schon betreiben.
Barrierefreiheit · Der Mindestkontrast steht als Zahl im Token-Set und wird automatisiert geprüft.
Wie die Claude-Strecke funktioniert
1
Tokens erstellen oder ableiten
Farbe, Schrift, Abstand, Radius und Kontrast-Schwelle als JSON. Die Abstandsleiter bekommt feste Stufen, damit niemand 13 Pixel erfindet.
2
System einlesen
Claude Design baut beim Onboarding ein Design-System aus Codebasis und Designdateien. Seit dem Juni-Update gehen auch JSON-Tokens, Figma und GitHub-Repositories als Quelle.
3
Basiskomponenten
Knopf, Eingabefeld, Karte, Tabelle, Navigation, jeweils mit allen fünf Zuständen. Erst danach wird zusammengesetzt.
4
Muster statt Bildschirme
Formular, Liste mit Filter, Detailansicht, alle aus den Basiskomponenten. Bildschirme entstehen zuletzt und nur aus vorhandenen Mustern.
5
Übergang in den Code
Design-System und Bildschirme wandern ins Repository. Danach prüfen wir, ob die Komponenten Tokens referenzieren statt feste Werte zu tragen.
6
Prüfungen verankern
Token-Treue, Kontrast und Komponenten-Inventar als Pflichtschritte in der Pipeline. Sie halten den Zustand, den die Abnahme einmal festgestellt hat.
Tokens selbst aufsetzen oder aufsetzen lassen?
Selbst aufsetzen
–Ohne Token-Set wählt jedes Werkzeug Standardwerte, unabhängig vom Prompt.
–Bildschirme werden einzeln erzeugt und fallen in Summe auseinander.
–Feste Farbwerte schleichen sich ein und fallen erst beim Rebranding auf.
Designagentur
–Liefert ein schönes Manual, aber selten maschinenlesbare Tokens.
–Endet bei der Abgabe, ohne Prüfungen in Ihrer Pipeline.
–Der Übergang in den Code bleibt Ihr Problem.
Mit Pexon
✓Wir liefern Tokens, Komponenten und die drei Prüfungen, nicht nur Entwürfe.
✓30 Azure-Spezialisten, also Pipeline-Arbeit als Handwerk statt als Zusatz.
✓Ehrliche Grenze: Entwurf aus dem Werkzeug, Abgabe aus dem Code.
Wie lange dauert der Aufbau der Strecke?
1
Tag 1
Token-Set
Ableiten aus Figma, Bestand oder Richtlinien, inklusive fester Abstandsleiter und Kontrast-Schwelle als Zahl.
2
Tag 2 bis 3
Basiskomponenten
Fünf Basiskomponenten mit allen Zuständen, gegen das Token-Set geprüft und im Repository abgelegt.
3
Tag 4
Ein Muster als Beweis
Ein zusammengesetztes Muster, etwa ein Formular, ausschließlich aus den Basiskomponenten. Es zeigt, dass die Strecke traegt.
4
Tag 5
Prüfungen und Übergabe
Token-Treue, Kontrast und Komponenten-Inventar laufen in Ihrer Pipeline, dann Übergabe mit dokumentierten Regeln im Repository.
Was kostet eine Corporate Design UI mit Claude?
Vom Token-Set bis zu den verankerten Prüfungen in einer Woche, bezogen auf ein Token-Set und eine Anwendung.
Ihre Investition
ab 3.000 EUR
Festpreis · 1 Woche · ein Token-Set, eine Anwendung
Enthält:
Im Festpreis enthalten · Token-Set, fünf Basiskomponenten mit allen Zuständen, ein zusammengesetztes Muster, die drei Prüfungen in Ihrer Pipeline und die dokumentierten Regeln im Repository. Weitere Muster und Bildschirme baut Ihr Team danach selbst auf dieser Grundlage.
Was wir von Ihnen brauchen · Zugang zu Figma oder dem bestehenden Frontend, eine Ansprechperson aus dem Marken- oder Designbereich und einen Kontakt in der Entwicklung, je etwa eine Stunde am Tag.
Abnahme und danach · Abgenommen ist die Strecke, wenn die Prüfung auf feste Farb- und Abstandswerte leer läuft, der Kontrast automatisiert geprüft wird und Ihr Team eine weitere Komponente selbst auf System gebaut hat. Wer noch kein maschinenlesbares Design-System hat, beginnt beim Design-System zum Festpreis und kommt danach hierher. Endpreis nach Scoping.
100 % unverbindlich, ohne Verpflichtung
Häufige Fragen zur Corporate Design UI
Brauche ich Figma, oder reicht Claude?
Existiert ein Figma-System, exportieren wir es als JSON-Tokens und nutzen es als Grundlage. Existiert keines, leitet Claude Design ein System aus Codebasis und Designdateien ab. Für sehr große Enterprise-Design-Systeme bleibt das dedizierte Werkzeug die bessere Quelle, dort kommt Claude Design an seine Grenze.
Wie verhindern Sie generische KI-Optik?
Über Tokens, nicht über Prompt-Formulierungen. Solange das Modell keine benannten Werte für Farbe, Schrift und Abstand hat, wählt es Standardwerte, egal wie ausführlich der Prompt ist. Mit Token-Datei und fester Abstandsleiter verschwindet der Effekt größtenteils von selbst.
Was kostet eine Corporate Design UI mit Claude?
3.000 EUR als Festpreis für eine Woche, bezogen auf ein Token-Set und eine Anwendung. Das ist bewusst dicht am Design-System zum Festpreis für 2.900 EUR, weil es eine andere Leistung ist: dort entsteht das Fundament, hier kommt es in die Werkzeugkette. Endpreis nach Scoping.
Worin unterscheidet sich das vom Design-System zum Festpreis?
Das Design-System zum Festpreis liefert das Fundament: Tokens, Komponenten, Styleguide, Templates. Diese Strecke setzt darauf auf und bringt es in die Werkzeugkette, also Komponenten mit allen Zuständen, den Übergang ins Repository und die drei Prüfungen, die den Zustand halten.
Wo passt die Strecke nicht?
Bei einer einzelnen Anwendung ohne Wiederverwendung reicht ein Token-Set ohne Automatisierung. Claude Design liefert außerdem keine pixelgenaue Präzision für komplexe Oberflächen, ist nicht für Print gedacht und ist weiterhin Research Preview. Der Entwurf kommt aus dem Werkzeug, die Abgabe aus dem Code.
Wie bleibt die Oberfläche bei einem Markenwechsel konform?
Indem Farben und Abstände ausschließlich als Token-Referenzen im Code stehen. Dann ist ein Markenwechsel eine Änderung an einer Datei. Die Prüfung auf feste Hex-Werte und Pixelabstände ist das, was diesen Zustand über die Jahre hält.
Nachricht senden
Kein passender Termin? Schreiben Sie uns, wir melden uns innerhalb von 24 Stunden.
Antwort innerhalb von 24 Stunden
Unverbindliches Erstgespräch
Persönlicher Ansprechpartner
Phillip Pham
CEO @ Pexon Consulting
Aktualisiert am 16. September 2026
Sie suchen einen Partner für Ihr Projekt?
Wir analysieren Ihren individuellen Bedarf, geben erste Empfehlungen zu Umsetzungsstrategien und bieten Ihnen transparente Einblicke in unsere Methoden, Technologien und Referenzen.
Vertrieb kontaktieren
400+Projekte seit 2020
100+Kunden im DACH-Raum
ISO27001 zertifiziert
3Hyperscaler Partner