Download
Für · Engineering

Von der Spec zum Frontend, keine Übergabe dazwischen

Richte deinen Agenten auf eine DESIGN.md und eine Beschreibung; er schreibt systemkonformen, echten Frontend-Code – Komponenten, Screens, Dashboards – direkt in dein Projekt. Keine Redlines, kein „Warten auf Design".

Auf GitHub sternen Desktop-App herunterladen
Redaktionelle Illustration einer DESIGN.md, die direkt in Frontend-Code und gerenderte UI fließt und einen Übergabeschritt überspringt

In einem Satz

Open Design schließt die Lücke zwischen Designer und Engineer, indem es das Designsystem maschinenlesbar macht: Derselbe Agent, der deinen Code schreibt, wendet das System an und rendert echte UI.

So nutzt ein Engineer Open Design

  1. 01

    Lies das System, nicht eine Redline

    Die DESIGN.md liegt im Repo. Dein Agent liest sie so, wie er den Rest der Codebasis liest – keine exportierten Specs zum Interpretieren.

  2. 02

    Erzeuge systemkonforme UI

    Beschreibe den Screen oder die Komponente; der Agent schreibt Frontend, das bereits zum System passt. Prototypen, Admin-Dashboards, interne Tools – in Minuten.

  3. 03

    Es ist bereits dein Code

    Die Ausgabe ist HTML / Framework-Code in deinem Repo, prüfbar in einem PR. Kein Übersetzungsschritt zwischen „dem Design" und „dem Build".

Was ein Engineer erzeugen kann

Frontend mit Open Design vs. der Übergabeweg

Was du brauchst Mit Open Design Design-zu-Dev-Übergabe
Ein Design als Bauvorlage bekommen Eine DESIGN.md, die dein Agent direkt liest Eine Figma-Datei, die du von Hand neu interpretierst
Zum System passen Automatisch zur Generierungszeit durchgesetzt Gegen eine Spec abschätzen, Drift schleicht sich ein
Interne Tools / Dashboards bauen Prompt → systemkonformes Frontend im Repo Auf einen Designer warten, dann zweimal bauen
Review Es ist Code – diff es in einem PR Pixelvergleich gegen ein Mockup
Kosten & Lock-in Open Source, in deinem Repo, läuft lokal Ein Design-Tool, das das ganze Team lizenzieren muss

Echtes, systemkonformes Frontend, direkt im Repo erzeugt. Wähle eines, das dem nahekommt, was du baust, und beschreibe es.

Vorlagen durchsuchen →

Engineering-FAQ

  1. 01 Brauche ich trotzdem einen Designer?

    Für Marke und Richtung ja. Aber zum Bauen systemkonformer UI und interner Tools liest der Agent die DESIGN.md und schreibt das Frontend – ohne Übergabe-Hin-und-Her.

  2. 02 Was gibt es aus?

    Echtes HTML / Framework-Code in deinem Repo, prüfbar in einem PR – kein Mockup, das du neu implementierst.

  3. 03 Wie bleibt es systemkonform?

    Die DESIGN.md ist die Quelle der Wahrheit; der Agent wendet sie zur Generierungszeit an, sodass die Ausgabe ohne manuelle Pixelprüfung passt.

  4. 04 Welche Agenten kann ich nutzen?

    Claude Code, Codex, Cursor Agent, Gemini CLI und weitere First-Party-Adapter, mit deinen eigenen Provider-Keys.

Erzeuge heute Abend deine nächste UI

Gib dem Repo einen Stern, installiere Open Design und verwandle eine DESIGN.md in Frontend – in dem Agenten, den du ohnehin nutzt.

Auf GitHub sternen Desktop-App herunterladen
● Apache-2.0 Apache-2.0 · Made on Earth · BYOK macOS · Windows · Linux