Flash DSM - Das Designgenom, mit dem deine Agenten bauen.

Stelle deine Grundlagen zusammen. Jede Komponente und jedes Modul folgt. Das Designgenom weiß, wo jedes Element lebt und was sich mitbewegt, wenn es sich ändert.

Figma überspringen. Mit dem Designsystem anfangen.

Figma und jedes andere Canvas-Tool wurde gebaut, um Bilder eines Designsystems zu zeichnen, nicht um eines zu bauen. Erst wird gemalt, dann ein System darunter rekonstruiert, und der Code passt am Ende nie ganz. Flash dreht das um: erst das System bauen, dann direkt zu Code, der wirklich stimmt. Und weil das System maschinenlesbar ist, dient es zugleich als Leitplanke für alles, was deine KI-Tools erzeugen.

Farbe, Schrift, Abstände, Komponenten - alles verknüpft.

Gib Flash ein Briefing, eine URL oder eine Figma-Datei, und es schneidet dir das Schnittmuster zu: komplette Farbskalen in beiden Themes, ein Schriftpaar, Abstände, Radien, Bewegung und Komponenten, die darauf verweisen. Das ist der Startpunkt, nicht das Produkt. Das Produkt ist, was du im Editor daraus machst.

Beschreibe es

Tippe einen Prompt, füge eine Live-URL ein oder verbinde eine Figma-Datei. Flash extrahiert die Design-DNA in jedem Fall.

Mache es zu deinem

Flash legt komplette Token-Skalen an - Farben in Hell und Dunkel, ein Schriftpaar, Abstände, Radien, Schatten, Bewegung - und du bearbeitest sie direkt. Tausche die Schrift, stimme eine Skala neu ab, streiche die Entscheidungen, die dir nicht passen.

Liefere es aus

Exportiere CSS-Variablen, eine Tailwind-Config oder Tokens Studio JSON. Oder pushe direkt zu GitHub.

• Marken-DNA wird extrahiert
• Farbskalen werden angelegt
• Typografie wird kombiniert
• Abstände und Radien werden geformt
• Bewegung und Effekte werden abgestimmt
• Komponenten werden zugeordnet

+ 8–14 branchenspezifische Komponenten, an Tokens gebunden

Ein Schnittmuster. Jeder Stoff, den du willst.

Ein Schnittmuster hält Passform und Nähte fest, nie die Farbe des Stoffs. Genau diese Trennung erlaubt es einem System, ein ganzes Unternehmen einzukleiden.

Das Schnittmuster für alle

Struktur ist der Teil, der nicht variieren sollte: woraus eine Karte besteht, wie viel Abstand ein Button um sein Label lässt, welche Zustände es gibt. Flash hält das an einer Stelle, damit jedes Produkt nach derselben Form zuschneidet.

Der Stoff, den jedes Produkt wählt

Farbe, Schrift, Radius, Bewegung. Ein Theme liegt über der Struktur und lässt sich tauschen, ohne sie anzufassen. So kann ein Team völlig anders aussehen als das nächste und trotzdem jede Komponente teilen.

Woran Systeme hängen bleiben

Liefere eine Komponente aus, die zugleich ein ganz bestimmtes Blau ist, und das nächste Team sagt: Das ist nicht unser Blau, und baut sich eine eigene. Zwei Monate später pflegst du zwei Systeme. Den Stoff getrennt zu halten, verhindert genau das.

Macht ein Designsystem die Arbeit gleichförmig?

Es klärt die Dinge, über die niemand immer wieder neu entscheiden sollte. Genau das schafft Platz für das, was nur von dir kommen kann.

Jedes Designsystem ist einzigartig

Flash drückt dir keine Vorlage in die Hand. Grundlagen, Komponenten und Module - alles gebaut, damit es zu deiner Marke passt, nicht umgekehrt.

Dein eigener Stil

Farben, Schrift und Abstände legst du selbst fest, statt sie aus einer vorgefertigten Palette zu wählen.

Illustration, Effekte und Bewegung

Illustrationen, Effekte, Animationen und Übergänge sind Teil des Systems, keine Einzelstücke, die an einen einzelnen Screen geschraubt werden.

Komponenten und Module, wie du sie willst

Baue neue Komponenten und Module, die zur Vision deines Produkts passen. Flash begrenzt dich nicht auf eine feste Bibliothek.

Noch keine Kundenlogos.

Flash ist neu, und Zitate sind schnell gesammelt. Hier sind drei Dinge, die du selbst prüfen kannst, bevor du für irgendetwas bezahlst.

Öffne die Beispiele

Jedes System auf dieser Seite ist öffentlich. Öffne eins, lies die Tokens, die es erzeugt hat, forke es in dein eigenes Konto und nimm es auseinander. Nichts davon ist ein Screenshot.

Nimm die Dateien und geh

Exportiert werden tokens.css, eine Tailwind-Config und Tokens Studio JSON: schlichte Dateien, die du auch von Hand hättest schreiben können. Sie funktionieren weiter, ob es uns noch gibt oder nicht.

Achte aufs Datum

Jeder Fix und jede Funktion steht mit dem Tag da, an dem sie live ging. Wenn das Tempo nachlässt, siehst du es hier, bevor es dir jemand sagt.

Fragen?

Was ist Flash?

Flash ist ein Designsystem-Builder. Aus einem Prompt, einer Live-URL oder einer Figma-Datei legt es eine komplette Token-Architektur an - Farbskalen in Hell und Dunkel, Schriftpaare, Abstände, Radien, Schatten, Bewegung - plus branchenspezifische Komponenten, die an diese Tokens gebunden sind. Du bearbeitest und exportierst dann CSS, Tailwind oder Tokens Studio JSON, oder pushst zu GitHub.

Warum brauchen KI-Builder ein Designsystem?

Tools wie Lovable, v0 und Bolt generieren Screens schnell, aber jeder neue Prompt erfindet eigene Farben und Abstände, wenn nichts sie festhält. Ein Designsystem ist diese Regelschicht: Gib den Tools maschinenlesbare Tokens, und der Output bleibt markentreu, hält barrierefreien Kontrast und passt zum Code, den du schon ausgeliefert hast. Flash baut diese Schicht und liefert sie in den Formaten, die die Tools tatsächlich lesen: kit.md, Token-Dateien und MCP.

Für wen ist Flash?

Design Engineers, solo oder im Team, die für UI-Qualität verantwortlich sind, aber keine Zeit haben, ein Designsystem zu bewachen. Und für schnelle Dev-Teams, die ein System brauchen, das mit ihrem Tempo mithält.

Ist Flash kostenlos?

Zum Start ja. Jedes Konto baut ein Genome, also ein Designsystem und alles, was daraus liest, kostenlos und ohne Kreditkarte. Pro, Team und Studio ergänzen Modulabrufe, Update-Sync, ein geteiltes Genome und die Kundenübergabe. Was wo liegt, steht auf der Preisseite.

Kann ich meine bestehenden Designs importieren?

Verbinde eine Figma-Datei, füge eine beliebige Live-Website-URL ein oder importiere aus GitHub und Storybook. Flash extrahiert die vorhandene Design-DNA und macht daraus strukturierte, bearbeitbare Tokens.

Bleibt Flash mit Figma und meinem Code synchron?

Das gibt es heute wirklich: Import aus Figma, einer URL oder einer Codebasis; Export als CSS, Tailwind und Tokens Studio JSON; Push zu GitHub; Variablen nach Figma über das Flash-Plugin. Tieferer Zwei-Wege-Sync, bei dem Änderungen automatisch aus Code und Figma zurückfließen, wird gerade ausgerollt. Wir versprechen lieber zu wenig, als so zu tun, als wäre es fertig.

Was kann ich exportieren?

Produktionsreife Formate: tokens.css mit CSS Custom Properties, eine tailwind.config.js-Erweiterung, Tokens Studio JSON für den Roundtrip mit Figma und Komponenten-Specs. Du kannst auch direkt zu GitHub pushen.

Erzeugt es echten, nutzbaren Code?

Die Exporte sind dieselben CSS-Variablen und Tailwind-Tokens, die du von Hand schreiben würdest, bereit für deine Codebasis. Keine proprietäre Runtime, kein Lock-in.

Wie unterscheidet sich Flash von KI-UI-Generatoren?

Screen-Generatoren liefern Mockups. Flash liefert das System darunter: konsistente Skalen, semantische Tokens, beide Farbmodi und Komponenten, die auf Tokens statt auf hartkodierte Werte verweisen. So bleibt alles konsistent, was du danach baust.

Gehört mir, was Flash generiert?

Vollständig. Jedes Token, jede Komponenten-Spec und jeder Export gehört dir. Nutze sie in Kundenprojekten, kommerziellen Produkten oder deinen eigenen Design-Tools.