KlassischInteraktiv
DEEN
Alle Referenzen

Design System und Prototype Factory

Techem

KI-ProjektDas heißt: Ich habe die Prototypen mit Claude Code und Figma MCP erstellt.

Überblick

Ich habe für Techem ein Design System mit aufgebaut. Es enthält Design Tokens, Storybook-Komponenten in React, den Techem Context und den UX Writing Context. Mit Figma MCP habe ich neue Komponenten und Prototypen erstellt. Mit Claude Code, den Storybook-Komponenten und dem passenden Figma-Mapping kann ich außerdem Prototypen bauen.

Typ
Design System und Prototyping
Rolle
Design System für Techem mit aufgebaut. Prototypen mit Figma MCP und Claude Code.
Tools
Figma, Figma MCP, Claude Code, Storybook, React

Projekt-Snapshot

Ziel

Bestehende Figma-Designs werden mit dem offiziellen Techem UI Kit, Design Tokens und den Techem Content Rules in reproduzierbare React-Prototypen übersetzt.

Ergebnis

Alle Teile der Architektur sind umgesetzt. Der Ablauf reicht vom Browser Studio über die Prototype Factory API und die Copilot- und LLM-Orchestrierung bis zur Browser-Vorschau. Dazu gehören Figma Bridge, Design IR, Registry, Strict Plan, React Workspace und Quality Checks.

KI im Einsatz

Aufgabe von Claude Code

  • Claude Code baut Prototypen aus den Storybook-Komponenten.

Was schiefging

  • Claude Code hat für eine Figma-Komponente eine eigene Komponente gebaut.
  • Claude Code hat die Storybook-Komponente nicht genutzt.

Was ich geändert habe

  • Ich habe das Component Registry eingeführt.
  • Der Strict Generation Plan stoppt jetzt, wenn eine Figma-Komponente keine Storybook-Entsprechung hat.

Lernzyklus

  • Der Fehler steht in den Lessons und Generator Rules.
  • Er wiederholt sich nicht.

Das Design System in Zahlen

  • 7800

    Design Tokens

  • 554

    Komponenten

  • 85

    Patterns

Die Figma-Datei des Design Systems

Die Datei heißt Techem Components_NEW. Sie führt die Grundlagen, die Oberflächenelemente und die lokalen Styles zusammen.

Bildschirmfoto der Figma-Datei Techem Components_NEW im Figma-Editor. Links stehen die Seiten mit den Grundlagen und den Oberflächenelementen sowie die Ebenen. In der Mitte liegen viele kleine Rahmen mit Card-Komponenten und ihrer Dokumentation. Rechts stehen die lokalen Styles für Text, Farbe und Effekte. Das Profilbild oben rechts ist abgedeckt.
Bildschirmfoto der Figma-Datei. Das Profilbild oben rechts ist abgedeckt. Bild in voller Auflösung öffnen

Buttons

SpeichernAbbrechen

Badges

NeutralErfolgFehler

Eingabefeld

E-Mail[email protected]

Alert

Gespeichert

Die Änderungen sind übernommen.

Einige Elemente im Stil des Design Systems, in HTML und CSS gebaut.

Techem Prototype Factory – Architektur für Figma-zu-React-Prototyping

Bestehende Figma-Designs werden mit dem offiziellen Techem UI Kit, Design Tokens und den Techem Content Rules in reproduzierbare React-Prototypen übersetzt. Das Diagramm ist neu gezeichnet und animiert.

Architektur der Techem Prototype Factory in fünf EbenenFünf Ebenen: Nutzung und Zielprodukt, Quellen, Pipeline, Vorschau und Qualität sowie Lernzyklus. Den Ablauf in Worten zeigt die Liste unter dem Diagramm.Ebene 1: Nutzung & ZielproduktEbene 2: QuellenEbene 3: Prototype Factory PipelineEbene 4: Vorschau & QualitätEbene 5: LernzyklusLernzyklus: Fehler und Regelnfließen in Registry und Generator zurück.UX DesignerBrowser StudioPrototype Factory APICopilot / LLMOrchestrationFigma DesignTechem React UI KitDesign TokensTechem ContentContextUX-Writing SkillFigma Adapter /Desktop BridgeDesign IRComponentRegistryStrictGeneration PlanReact ScaffoldGeneratorPrototypeWorkspaceBrowser PreviewStructuralQuality ChecksVisual ComparisonHandoff / DocumentationLessons /Generator Rules Architektur der Techem Prototype Factory in fünf EbenenFünf Ebenen: Nutzung und Zielprodukt, Quellen, Pipeline, Vorschau und Qualität sowie Lernzyklus. Den Ablauf in Worten zeigt die Liste unter dem Diagramm.Ebene 1: Nutzung & ZielproduktEbene 2: QuellenEbene 3: Prototype Factory PipelineEbene 4: Vorschau & QualitätEbene 5: LernzyklusLernzyklus: Fehler und Regelnfließen in Registryund Generator zurück.UX DesignerBrowser StudioPrototype Factory APICopilot / LLM OrchestrationFigma DesignTechem ReactUI KitDesign TokensTechem ContentContextUX-WritingSkillFigma Adapter /Desktop BridgeDesign IRComponent RegistryStrict Generation PlanReact Scaffold GeneratorPrototype WorkspaceBrowser PreviewStructural Quality ChecksVisual ComparisonHandoff / DocumentationLessons / Generator Rules
  • Durchgezogen: Datenfluss der Pipeline
  • Punktlinie: Lernzyklus, speist die Pipeline zurück