Dessn für KI-UI-Design mit bestehendem Frontend

Was ist Dessn und wofür ist es gedacht?

Dessn ist eine Arbeitsfläche für KI-gestütztes UI-Design mit dem eigenen Frontend. Angenommen, euer Shop braucht einen verständlicheren Ablauf für die Änderung einer Lieferadresse. Das Team kann die vorhandene Seite auf die Arbeitsfläche holen, Varianten mit denselben Eingabefeldern bauen und die Schritte gemeinsam anklicken. So können Design, Produkt und Entwicklung über dieselbe konkrete Änderung sprechen.

Einen UI-Prototyp aus dem eigenen Repository bauen

Verbinde ein freigegebenes GitHub- oder GitLab-Repository. Wähle den Ausgangsbranch und bei einem Monorepo die Anwendung oder den Unterordner. Dessn erstellt aus ausgewählten Oberflächen eine Bibliothek. Prüfe, ob die Seite, an der du arbeiten willst, darin gerendert wird.

Lege auf der Arbeitsfläche eine Kopie des Frames an. Bitte die KI zum Beispiel, die Bearbeitung der Lieferadresse in zwei Schritte aufzuteilen und die vorhandene Fehlermeldung für eine fehlende Postleitzahl beizubehalten. Gehe den Ablauf in Play durch. Teile anschließend die Variante, zu der das Team Feedback geben soll. Private Pakete oder spezielle Build-Schritte können Unterstützung durch die Entwicklung erfordern. Anleitung zur Repository-Anbindung

Die Vorschau ist besonders hilfreich für Teams, die bereits eine Komponentenbibliothek pflegen. Prüfe beim Vergleich, ob eine gewünschte Variante wirklich den vorhandenen Baustein verwendet und dieselben Eingabezustände abdeckt.

Abweichungen im Designsystem finden

Vergleiche mehrere Ansichten, die denselben Baustein verwenden sollten. Dessn kann etwa auffällige Abstände oder alte Varianten eines Buttons markieren. Prüfe einen Austausch auf einer Kopie und kontrolliere auch den Fehlerzustand. Anleitung zur Designsystem-Migration

Änderungen an die Entwicklung übergeben

Der lokale Coding-Agent kann Änderungen als Patch, Commits oder Bundle zurückholen. Der Pro-Tarif führt MCP für Claude Code, Codex und Cursor auf. Das Team prüft, welche Dateien sich geändert haben, und übernimmt den passenden Stand nach den eigenen Tests. Einrichtung der MCP-Anbindung

Zugriff auf Code und Daten im Test

Dessn fordert Lesezugriff für die freigegebenen Repositories an. Für die Vorschau erstellt der Dienst eine Frontend-Kopie in einer isolierten Cloud-Umgebung. Anmeldung und Antworten von Diensten lassen sich nachbilden. Dessn gibt an, Kundencode, Eingaben und Ergebnisse vom Modelltraining auszuschließen. Datenschutzerklärung von Dessn

Häufige Fragen zu Dessn

Kann ich Dessn kostenlos ausprobieren?

Ja. Am 6. November 2026 listete Free 20 Credits pro Monat. Pro wurde mit $30 pro Editor und Monat, 100 monatlichen Credits und Zukaufoption angezeigt. Enterprise gibt es auf Anfrage. Der Design-Agent verbraucht Credits. Währung und Steuern prüfst du beim Abschluss. aktuelle Dessn-Preise

Wie kann ich Code aus einem Entwurf übernehmen?

Im dokumentierten Ablauf mit einem lokalen Coding-Agent kannst du etwa einen Patch der ausgewählten Variante mitnehmen und vor dem Einspielen prüfen.

Welche Rechte braucht Dessn am Repository?

Für die Repository-Anbindung braucht Dessn Lesezugriff. Du kannst einzelne Repositories oder Projekte freigeben. Das Team übernimmt Änderungen nach der Freigabe in den Quellcode.