WEITERE LEKTÜRE
Weiterführende Ressourcen für Devin
Designorientierte Tutorials, Dokumentationen und Walkthroughs für die Arbeit mit Devin, wie im veröffentlichten Leitfaden aufgeführt.
Devin 
OpenDesign Mit Devin
in OpenDesign
gestalten.
Wie man Interfaces mit Devin in OpenDesign gestaltet: ein mehrstufiger Build, delegiert und zurückgegeben, eine Dokumentationsabschnitts-Aufgabe vom Briefing bis zur geprüften Datei, und die Grenzen, die Sie vor dem Start kennen sollten.
DREI AUSGANGSPUNKTE FÜR DEVIN
Wo man mit Devin beginnt
DIESER LEITFADEN · UI-DESIGN
Eine Produktoberfläche mit Devin erstellen
Dieser Leitfaden behandelt den Auftrag, Referenzen, Designregeln und das geprüfte HTML-Artefakt.
Diese Anleitung lesen EINRICHTUNGDevin von Null an einrichten
Der vollständige Weg von einer sauberen Maschine zu einem Devin for Terminal, das UI erstellen und verifizieren kann.
Zum Setup VERGLEICHDevin mit anderen Agenten vergleichen
Wo Devin bei Designaufgaben im Vergleich zu Codex, Claude Code und Cursor steht und wann ein anderer Workflow besser ist.
Zum VergleichAuf dieser Seite Beispiel
Eine vollständige Devin-Design-Aufgabe
Eine Devin-Design-Aufgabe, vom Briefing zur Interface
Eine Aufgabe, vom Anfang bis zum Ende verfolgt: der Auftrag und die Vorgaben, die Sie liefern, das Artefakt, das Devin zurückgibt, und die Prüfungen, die Sie durchführen, bevor Sie es als erledigt betrachten. Die unten gezeigte Oberfläche ist ein illustratives Beispiel, das für diese Seite erstellt wurde, kein aufgezeichneter Devin-Lauf.
1Design-Briefing und Vorgaben
BriefingGestalte den Getting-Started-Bereich einer Entwickler-Dokumentationsseite: Navigation, einen Artikel mit einem Callout und Code sowie eine On-this-page-Leiste. Gib den gesamten Bereich als eine prüfbare Datei zurück. Desktop und Telefon.
- Design-SystemOpenDesign Papier-Canvas: Albert Sans, ein einzelner grüner Akzent
- Breakpoints1440px Desktop und 390px Mobil, ohne horizontales Scrollen
- InteraktionenSidebar-Navigation, Aktion zum Kopieren von Code, On-this-page-Hervorhebung
- AusgabeEine einzelne in sich geschlossene HTML-Datei mit stabilen
data-od-id-Hooks
2Wie die Arbeit aufgeteilt ist: Sie, Devin und OpenDesign
- Sie
Verfassen Sie den Auftrag, wählen Sie das Designsystem und definieren Sie die Abnahmekriterien.
- Devin
Devin plant das Layout, schreibt das HTML, CSS und JavaScript und überarbeitet auf Anfrage.
- OpenDesign
OpenDesign stellt das Designsystem und den Skill bereit, rendert die Vorschau und speichert jede Version als Datei in Ihrem Projekt.
- Prüfung
Sie prüfen die visuelle Hierarchie, die Abstände im 8px-Raster, beide Breakpoints und jede Interaktion vor der Übergabe.
3Devins Artefakt: die Docs-Seite bei 1440px und 390px
4Überprüfung vor der Übergabe
Layout
Raster und Abstände
Drei Spalten im 8px-Raster; die Zeilenlänge des Artikels bleibt unter 72 Zeichen.
Hierarchie
Visuelle Hierarchie
Titel, Callout, dann Schritte; der Akzent markiert nur das aktive Navigationselement.
Responsive
Mobiles Layout
Die Navigation wird zu einem Sheet; die On-this-page-Leiste klappt zu einem Sprungmenü zusammen.
Interaktion
Interaktionsprüfungen
Den Code kopieren, zu einer Überschrift springen und das Navigations-Sheet öffnen.
Eignung
Wann Devin gut passt und wann nicht
Devin passt, wenn
- Autonome mehrstufige Builds. Devin plant und führt ganze Frontend-Aufgaben aus – Scaffolding, Verdrahten von Komponenten, Ausführen von Tests – statt bei einem Snippet stehenzubleiben.
- Sandboxed Cloud-Übergabe. Längere Builds können an einen Cloud-Agenten mit eigenem Computer übergeben werden, der auch weiterläuft, wenn Sie wegtreten.
- Projektregeln + Browser-Verifikation. Der Projektkontext trägt Ihre Konventionen; ein Rendering in einem echten Browser prüft die Ausgabe bei jedem Breakpoint gegen Ihre Referenzen.
- Kontobasiert, Modellwahl. Melden Sie sich mit einem Devin-Konto an; Devin läuft auf Frontier-Modellen, einschließlich Cognition’s eigenem SWE-1.6.
Wählen Sie einen anderen Workflow, wenn
- Sie benötigen bearbeitbare Vektordateien. Die Ausgabe ist HTML, kein bearbeitbares Designdokument. Suchen Sie einen separaten Vektor-Workflow für Ihr erforderliches Asset-Format.
- Sie haben keine Referenz und keine Vorgaben. Ohne ein Designsystem oder Beispiele tendiert die Ausgabe zu einem generischen Look; schreiben Sie zuerst den Auftrag.
- Sie haben nicht das Credential, das dieser Agent benötigt. Erforderlich: Devin (Cognition)-Konto — kontobasierte Anmeldung, nicht BYOK. OpenDesign stellt keine Credentials bereit und leitet sie auch nicht weiter.
- Ihr Team arbeitet in Codex oder Claude Code. Diese Agenten haben ihre eigenen Seiten; das Setup unterscheidet sich. Siehe verwandte Agenten.
Kompatibilität
Devin-Voraussetzungen vor dem Start
Dieser Leitfaden konzentriert sich auf Devin, verbunden über die OpenDesign-Desktop-App. Veröffentlichte Referenzen geprüft am 6. September 2026.
Tool-UmfangDevin, by Cognition
Devin for Terminal ist die Kommandozeilen-Inkarnation von Devin, Cognition’s autonomem KI-Softwareentwickler. Er arbeitet als lokaler Coding-Agent mit Zugriff auf Ihre Codebasis, Tools und Umgebung und plant und führt mehrstufige Aufgaben eigenständig aus. Diese Seite befasst sich mit dem Entwerfen von Oberflächen mit Devin über OpenDesign, nicht mit Devins eigener Oberfläche. Die Setup-Hinweise von OpenDesign listen die verfügbaren Agenten auf.
Konten und AuthentifizierungDevin (Cognition)-Konto — kontobasiert
Devin-(Cognition-)Konto – kontobasierte Anmeldung, nicht BYOK. Authentifizieren Sie sich mit Ihrem Devin-(Cognition-)Konto; die Zugangsdaten bleiben bei Ihrem Agenten auf Ihrer Maschine. Diese Seite verspricht weder ein Kontingent noch einen Preis.
System und VersionenDesktop-App oder Quellcode
Siehe die Download-Seite für Desktop-Builds. Die Node.js- und pnpm-Anforderungen im Quell-Quickstart gelten für das Ausführen aus dem Quellcode, nicht für die Installation eines Desktop-Pakets. Minimale kompatible Devin-Version: hier nicht verifiziert.
VerbindungsprüfungDas Erfolgssignal
Befolgen Sie die Verbindungsanweisungen Ihrer installierten Version und führen Sie dann eine kleine Aufgabe aus. Bestätigen Sie, dass Devin sie bearbeitet hat und dass sich das Artefakt öffnet. Ein Download allein stellt keine funktionierende Verbindung her.
Mit der Desktop-App beginnen
Devin-Setup in drei Schritten
Laden Sie zuerst herunter, schließen Sie das Devin-Setup für Ihre installierte Version ab und verifizieren Sie dann ein kleines Ergebnis. Sie müssen OpenDesign nicht aus dem Quellcode bauen, um diesem Weg zu folgen.
- 1
Die OpenDesign-Desktop-App herunterladen
Wählen Sie das Paket für Ihren Computer, installieren Sie es und öffnen Sie die App.
OpenDesign herunterladenMEILENSTEINDie Desktop-App öffnet sich. Bereits installiert? Fahren Sie mit dem nächsten Schritt fort; kein erneuter Download nötig. - 2
Bereiten Sie Ihre Devin-Verbindung vor
Folgen Sie den Devin-Anweisungen in Ihrer installierten Version. Authentifizieren Sie sich mit Ihrem Devin (Cognition)-Konto — die Zugangsdaten bleiben bei Ihrem Agent auf Ihrem Rechner.
Devin-Dokumentation# 1. Install Devin for Terminal curl -fsSL https://cli.devin.ai/install.sh | bash # 2. Start it in your project and sign in on first run cd your-project devin # sign in with your Devin (Cognition) accountÜbernommen aus den Devin-Setup-Hinweisen im veröffentlichten Leitfaden; prüfen Sie die Herstellerdokumentation für den aktuellen Befehl.
MEILENSTEINBestätigen Sie den vorgesehenen Agenten und das Konto. Falls nicht verfügbar, prüfen Sie die Kompatibilität, bevor Sie eine größere Aufgabe versuchen. - 3
Führen Sie eine kleine Devin-Aufgabe aus
Beginnen Sie mit einem kleinen Auftrag, damit Sie den gesamten Kreislauf beurteilen können, einschließlich einer Überarbeitung.
Start-BriefingBaue einen Einstellungsbildschirm mit einem Profilformular und einer Speicherbestätigung. Wende meine Designregeln an. Prüfe ihn bei Desktop- und Mobilbreite.
MEILENSTEINÖffnen Sie das Ergebnis, testen Sie den Speicherzustand und fordern Sie eine konkrete Änderung an. Die generierte Datei markiert den Beginn der Prüfung, nicht ihr Ende.
Um OpenDesign aus dem Quellcode auszuführen, folgen Sie stattdessen dem technischen Quickstart.
Der Devin-Design-Workflow
Fünf Schritte vom Auftrag zur geprüften Datei mit Devin
Diese Schritt-für-Schritt-Anleitung verfolgt eine Docs-Bereich-Aufgabe vom ersten Auftrag bis zu einem verifizierten Artefakt. Bei jedem Schritt sehen Sie Ihren Beitrag, Devins autonome Ausführung, den Beitrag von OpenDesign und die Prüfung, die Sie durchführen.
- 1
Design-Briefing
Halten Sie den Auftrag schlicht und kurz – drei bis sechs Zeilen. Nennen Sie, wem der Bildschirm dient, was er erreichen muss und welche Plattformen wichtig sind.
- SieSie schreiben den Auftrag und hängen einen bereits vorhandenen Referenz-Screenshot an.
- DevinDevin liest den Auftrag zusammen mit der Instruktionsdatei des Projekts und bittet um Klärung, wenn der Auftrag mehrdeutig ist.
- OpenDesignOpenDesign stellt das Projekt, die Prompt-Oberfläche und den passenden Skill für den Artefakttyp bereit.
- PrüfenSie bestätigen, dass der Auftrag die Abnahmekriterien klar benennt. Das vor Devins Build zu tun, kostet weniger als die Ausgabe danach zu reparieren.
- 2
Design-Vorgaben
Ein Designsystem plus eine Handvoll fester Regeln. Diese Kombination hält Devins Ausgabe markenkonform, statt auf einen generischen Look zurückzufallen.
- SieSie wählen ein Designsystem und geben Breakpoints sowie alle Komponenten an, die wiederverwendet werden müssen.
- DevinBevor Devin Code schreibt, lädt er die DESIGN.md-Tokens und Haltungsregeln in den Kontext.
- OpenDesignOpenDesign stellt die Designsystem-Bibliothek bereit und bindet Ihre Auswahl in die Skill-Vorlage ein.
- PrüfenSie überprüfen, dass die Tokens zu Ihrer Marke passen: ein Akzent, die richtigen Schriften, der richtige Radius.
- 3
Die Oberfläche generieren
Devin erzeugt eine in sich geschlossene HTML-Datei, die Layout, Stile, Interaktionen und stabile Hooks abdeckt.
- SieIhre Rolle ist es, zu warten oder eine klärende Frage zu beantworten; es gibt nichts zu konfigurieren.
- DevinDevin plant die Abschnitte, schreibt HTML, CSS und JavaScript, führt die Datei aus und behebt Fehler.
- OpenDesignOpenDesign speichert das Artefakt im Projektordner und indiziert es für die Vorschau.
- PrüfenNoch keine Prüfung – beurteilen Sie die Datei, sobald sie rendert, nicht anhand ihres Quellcodes.
- 4
Vorschau
OpenDesign rendert die Datei in den von Ihnen angegebenen Breiten. In diesem Moment wird die Designqualität beurteilt.
- SieDu wechselst die Breiten, testest die Interaktionen und hinterlässt Kommentare zu bestimmten Elementen.
- DevinDevin liest die Kommentare, die du in der Vorschau hinterlassen hast, und bereitet die nächste Revision vor.
- OpenDesignOpenDesign rendert die Vorschau und stellt Ziele vom Typ
data-od-idfür Kommentare und Bearbeitungen bereit. - PrüfenPrüfe Hierarchie, Kontrast, Überlauf bei 390px, Fokuszustände und ob der Akzent sparsam eingesetzt bleibt.
- 5
Überarbeiten und Verifizieren
Fordere Änderungen an, indem du in der Vorschau auf Elemente zeigst. Jede Revision wird zu einer neuen Datei — keine stillen Überschreibungen.
- SieDu wandelst Kommentare in Anforderungen um und entscheidest, wann die Aufgabe abgeschlossen ist.
- DevinDevin wendet Änderungen direkt an und führt die Datei erneut aus.
- OpenDesignOpenDesign hält Versionen nebeneinander und exportiert ein Bild oder das HTML, wenn du fertig bist.
- PrüfenPrüfe nur den geänderten Bereich erneut und dann die gesamte Seite einmal bei jedem Breakpoint.
Ressourcen
Devin-Design-Ressourcen
Skills Skills durchsuchen Design-Systeme Systeme durchsuchen Vorlagen Vorlagen durchsuchen
Design Skills
Artefakttypen, die Devin in OpenDesign generieren kann, mit einem Skill pro Typ.
Design Systems
Brand-Tokens und Komponenten, die gebunden werden müssen, bevor Devin mit der Generierung beginnt.
Vorlagen
Ausgangspunkte für Decks, Landingpages und Produktbildschirme.
Einschränkungen
Devin-Grenzen, menschliche Prüfungen und Fallbacks
- UmfangDevin kann eine Sitzung an einen Cloud-Agenten in einer Sandbox übergeben, der asynchron weiterarbeitet, sodass längere Builds noch abgeschlossen werden können, nachdem du deinen Laptop zugeklappt hast. Diese Seite behandelt Devin in Verbindung mit OpenDesign, nicht jede Devin-Funktion.
- NutzungslimitsNutzungslimits und Kosten richten sich nach den von dir verwendeten Anmeldedaten — ein Devin-(Cognition)-Konto mit kontobasierter Anmeldung, nicht BYOK. Diese Seite macht keine Angabe zu einem kostenlosen Kontingent.
- NetzwerkLokale Projektdateien implizieren keine Offline-Inferenz. Bevor du sensible Eingaben teilst, prüfe die Anbieter-Einstellungen und Datenrichtlinien deines Agenten.
- Ausgabe ist HTMLArtefakte kommen als HTML-Dateien zurück — nicht als Vektordesign-Dateien.
- Manuelle ÜberprüfungDu prüfst in der Vorschau Barrierefreiheit, echte Inhalte, Markenpassung und die Korrektheit der Interaktionen. Jede Selbstprüfung, die Devin durchführt, ist nur ein erster Durchlauf.
- FallbackWenn Devin nicht verfügbar ist oder eine Aufgabe fehlschlägt, lies die Verbindungsanweisungen und die Authentifizierung für deine installierte Version. Speichere den Fehler und das letzte funktionierende Artefakt, bevor du die Konfiguration änderst.
FAQ
Häufige Fragen zu Devin und OpenDesign
Kann Devin for Terminal wirklich Design-Arbeit leisten?
Ja — mit einem ästhetischen Skill, einem Design-System und echten Referenzbildern im Kontext erzeugt Devin produktionsreife, responsive UI, und als autonomer Agent kann es das Ergebnis bauen, ausführen und gegen Ihre Referenzen verifizieren. Ohne diesen Kontext tendiert es zu einem generischen Look — genau diese Lücke schließt OpenDesign.
Wie melde ich mich bei Devin an?
Devin ist kontobasiert: Sie melden sich mit einem Devin (Cognition)-Konto an, anstatt Ihren eigenen Modell-Schlüssel mitzubringen. Installieren Sie Devin for Terminal, führen Sie es in Ihrem Projekt aus und authentifizieren Sie sich beim ersten Start. OpenDesign leitet Ihre Zugangsdaten niemals weiter — Ihr Agent verwendet sie direkt.
Was macht Devin für Design geeignet?
Es ist ein vollständig autonomer Softwareentwickler: Es plant und führt mehrstufige Frontend-Builds durchgängig aus und kann eine Sitzung an einen sandboxed Cloud-Agenten übergeben, der weiterarbeitet, sobald Sie sich entfernen. Der Geschmack stammt weiterhin aus dem Design-System, dem Skill und den Referenzen, die Sie bereitstellen.
Für Frontend-Design: Devin oder Claude Code?
Beide sind stark. Claude Code ist bekannt für präzise, codebasis-bewusste Designentscheidungen; Devins Vorteil ist die vollständig autonome End-to-End-Ausführung mit sandboxed Cloud-Übergabe. Viele Teams nutzen beide — OpenDesign ermöglicht Ihnen den Wechsel zwischen Agents, ohne Ihren Design-Workflow zu ändern.
Läuft Devin in einer Sandbox?
Devin for Terminal läuft lokal mit Zugriff auf Ihre Codebasis und Umgebung und kann eine Sitzung an einen Cloud-Agenten übergeben, der in einer eigenen sandboxed Umgebung läuft — nützlich für längere Builds, Tests und die Erstellung von PRs, die asynchron fortgesetzt werden.
Was Devin for Terminal tatsächlich ist
Devin for Terminal ist die Kommandozeilenversion von Devin, dem autonomen KI-Software-Ingenieur von Cognition. Es läuft als lokaler Coding-Agent mit Zugriff auf deine Codebasis, Tools und Umgebung — liest dein Repository, bearbeitet Dateien, führt Shell-Befehle aus und plant und verifiziert Arbeit anhand einer natürlichsprachlichen Aufgabe, statt nur Zeilen zu vervollständigen. Cognition hat eine eigene Terminal-Rendering-Bibliothek in Rust entwickelt, um die Oberfläche schnell und reaktionsfähig zu halten.
Für Designarbeit stechen zwei Eigenschaften hervor. Es ist wirklich autonom, du kannst also ein Ergebnis beschreiben, und es führt den mehrstufigen Weg dorthin aus. Und wenn ein Build deinen Laptop übersteigt, kannst du die Sitzung an einen Cloud-Agenten übergeben, der in seiner eigenen sandboxed Umgebung läuft und asynchron weiterarbeitet — sodass du zu einem fertigen Pull Request zurückkehren kannst.
Autonome, agentische Ausführung: Devin plant und führt eine mehrstufige Aufgabe selbstständig aus — implementiert ein Feature, baut UI, führt sie aus und testet sie — geleitet von klaren Prompts mit expliziten Abschlusskriterien.
Lokaler Agent, Cloud-Übergabe: Er läuft lokal in deinem Terminal und kann eine Sitzung an einen sandboxed Cloud-Agenten eskalieren, der seinen eigenen Computer hat und die Arbeit fortsetzt, nachdem du weggehst.
Kontobasiert, Modellwahl: Du meldest dich mit einem Devin-Konto (Cognition) an; Devin läuft auf Frontier-Modellen — du kannst zwischen Optionen wie Cognitions eigenem SWE-1.6 und anderen Frontier-Modellen wählen.
Zugangsdaten: Devin-Konto (Cognition) — Anmeldung über Abonnement/Konto, nicht Bring-your-own-key
Formfaktor: lokaler Terminal-Agent mit optionaler sandboxed Cloud-Übergabe
Anbieter: Cognition
Für Designarbeit stechen zwei Eigenschaften hervor. Es ist wirklich autonom, du kannst also ein Ergebnis beschreiben, und es führt den mehrstufigen Weg dorthin aus. Und wenn ein Build deinen Laptop übersteigt, kannst du die Sitzung an einen Cloud-Agenten übergeben, der in seiner eigenen sandboxed Umgebung läuft und asynchron weiterarbeitet — sodass du zu einem fertigen Pull Request zurückkehren kannst.
Autonome, agentische Ausführung: Devin plant und führt eine mehrstufige Aufgabe selbstständig aus — implementiert ein Feature, baut UI, führt sie aus und testet sie — geleitet von klaren Prompts mit expliziten Abschlusskriterien.
Lokaler Agent, Cloud-Übergabe: Er läuft lokal in deinem Terminal und kann eine Sitzung an einen sandboxed Cloud-Agenten eskalieren, der seinen eigenen Computer hat und die Arbeit fortsetzt, nachdem du weggehst.
Kontobasiert, Modellwahl: Du meldest dich mit einem Devin-Konto (Cognition) an; Devin läuft auf Frontier-Modellen — du kannst zwischen Optionen wie Cognitions eigenem SWE-1.6 und anderen Frontier-Modellen wählen.
Zugangsdaten: Devin-Konto (Cognition) — Anmeldung über Abonnement/Konto, nicht Bring-your-own-key
Formfaktor: lokaler Terminal-Agent mit optionaler sandboxed Cloud-Übergabe
Anbieter: Cognition
Warum ein autonomer Software-Ingenieur zu Design passt
Devins Design-Vorteil rührt daher, wie es arbeitet — autonome End-to-End-Ausführung —, doch wie bei jedem Agenten muss Geschmack weiterhin geliefert werden.
End-to-End-Mehrschritt-Builds: Da Devin ganze Aufgaben plant und ausführt, kann es eine Seite scaffolden, Komponenten verdrahten, einen Dev-Server ausführen und das Ergebnis in einem Durchgang testen, statt bei einem Snippet stehen zu bleiben.
Sandboxed Cloud-Läufe: Längere Frontend-Arbeit — eine vollständige Landingpage, ein Multi-Screen-Flow — kann an einen sandboxed Cloud-Agenten übergeben werden, der weiterbaut, sodass die Iteration nicht durch deinen Laptop blockiert wird.
Konventionen in Projektregeln: Verweise den Agenten über die Regeln und Docs deines Projekts auf deine Tokens, Komponenten und echten Spezifikationen, damit er gegen eine Marke statt gegen einen Standard-Look arbeitet.
Geschmack kommt aus drei Eingaben, die du bereitstellst: einem Designsystem, einem Skill und echten Referenzbildern.
Die Lektion ist dieselbe, die jeder Agent lehrt: Devin hat standardmäßig keinen Geschmack. Es erzeugt gutes Design, wenn du ihm Constraints gibst — ein Designsystem, einen ästhetischen Skill und konkrete Referenzen. OpenDesign bündelt genau diese Eingaben, weshalb die beiden zusammenpassen (mehr unten).
End-to-End-Mehrschritt-Builds: Da Devin ganze Aufgaben plant und ausführt, kann es eine Seite scaffolden, Komponenten verdrahten, einen Dev-Server ausführen und das Ergebnis in einem Durchgang testen, statt bei einem Snippet stehen zu bleiben.
Sandboxed Cloud-Läufe: Längere Frontend-Arbeit — eine vollständige Landingpage, ein Multi-Screen-Flow — kann an einen sandboxed Cloud-Agenten übergeben werden, der weiterbaut, sodass die Iteration nicht durch deinen Laptop blockiert wird.
Konventionen in Projektregeln: Verweise den Agenten über die Regeln und Docs deines Projekts auf deine Tokens, Komponenten und echten Spezifikationen, damit er gegen eine Marke statt gegen einen Standard-Look arbeitet.
Geschmack kommt aus drei Eingaben, die du bereitstellst: einem Designsystem, einem Skill und echten Referenzbildern.
Die Lektion ist dieselbe, die jeder Agent lehrt: Devin hat standardmäßig keinen Geschmack. Es erzeugt gutes Design, wenn du ihm Constraints gibst — ein Designsystem, einen ästhetischen Skill und konkrete Referenzen. OpenDesign bündelt genau diese Eingaben, weshalb die beiden zusammenpassen (mehr unten).
Devin für Design von Grund auf einrichten
Die Einrichtungsreihenfolge: installieren → anmelden → deine Designregeln festhalten → Referenzen bereitstellen → in einem echten Browser überprüfen.
Designregeln festhalten: Lege deine Tokens, Primitive und Konventionen dort ab, wo der Agent sie liest – in den Regeln und Dokumenten deines Projekts –, damit die Ausgabe zu einer Marke passt, statt auf ein generisches Aussehen zurückzufallen.
Browser-Verifikation ergänzen: Lass Devin in einem echten Browser rendern und seine Ausgabe über Breakpoints hinweg prüfen, damit es gegen das Design verifiziert, statt nur zu bestätigen, dass der Build durchläuft.
Nutze den aktuellen Einrichtungsabschnitt für Befehle und versionsspezifische Details, die sich ändern können.
Historisches Befehlsbeispiel aus dem vorherigen Leitfaden; prüfe die aktuelle Syntax in der verlinkten Herstellerdokumentation.
Designregeln festhalten: Lege deine Tokens, Primitive und Konventionen dort ab, wo der Agent sie liest – in den Regeln und Dokumenten deines Projekts –, damit die Ausgabe zu einer Marke passt, statt auf ein generisches Aussehen zurückzufallen.
Browser-Verifikation ergänzen: Lass Devin in einem echten Browser rendern und seine Ausgabe über Breakpoints hinweg prüfen, damit es gegen das Design verifiziert, statt nur zu bestätigen, dass der Build durchläuft.
Nutze den aktuellen Einrichtungsabschnitt für Befehle und versionsspezifische Details, die sich ändern können.
# 1. Install Devin for Terminal
curl -fsSL https://cli.devin.ai/install.sh | bash
# 2. Start it in your project and sign in on first run
cd your-project
devin # sign in with your Devin (Cognition) account
# 3. Describe the task in natural language, with clear
# completion criteria, and let Devin plan and execute.
# 4. When a build outgrows your laptop, hand the session
# off to a sandboxed cloud agent that keeps working.Historisches Befehlsbeispiel aus dem vorherigen Leitfaden; prüfe die aktuelle Syntax in der verlinkten Herstellerdokumentation.
Screenshots in UI umwandeln
Der Design-Loop mit der größten Hebelwirkung mit Devin besteht darin, ein Referenzbild in funktionierende, responsive UI zu verwandeln und zu iterieren, bis es passt – wobei der autonome Agent seine Ausgabe erstellt, ausführt und mit der Referenz vergleicht.
Beginne mit den klarsten visuellen Referenzen, die du hast – und füge mehrere Zustände hinzu (Desktop und Mobil, Hover, leer, ladend), nicht nur einen einzigen Hero-Shot.
Sei konkret im Prompt und gib explizite Fertigstellungskriterien an; vage Prompts erzeugen generische UI, selbst mit einem starken Agenten.
Halte dein Designsystem und deine Konventionen in deinen Projektregeln fest und sage Devin, wo die Tokens und kanonischen Primitive liegen.
Starte einen Dev-Server und lass Devin in einem echten Browser rendern, wobei du auf Breakpoints umstellst, um das Ergebnis zu prüfen.
Iteriere, indem Devin seine Implementierung mit den Referenzen vergleicht – und nicht bloß bestätigt, dass sie baut –, und übergib an die Cloud für längere Durchläufe.
Gib Devin die Referenzen und konkrete Einschränkungen, mit einer klaren Definition von „fertig“:
Halte Prompts fokussiert, committe gute Iterationen und mache schlechte rückgängig (sage Devin, wenn du etwas rückgängig machst), damit jeder Durchlauf auf einer sauberen Basis aufbaut.
Historisches Befehlsbeispiel aus dem vorherigen Leitfaden; prüfe die aktuelle Syntax in der verlinkten Herstellerdokumentation.
Beginne mit den klarsten visuellen Referenzen, die du hast – und füge mehrere Zustände hinzu (Desktop und Mobil, Hover, leer, ladend), nicht nur einen einzigen Hero-Shot.
Sei konkret im Prompt und gib explizite Fertigstellungskriterien an; vage Prompts erzeugen generische UI, selbst mit einem starken Agenten.
Halte dein Designsystem und deine Konventionen in deinen Projektregeln fest und sage Devin, wo die Tokens und kanonischen Primitive liegen.
Starte einen Dev-Server und lass Devin in einem echten Browser rendern, wobei du auf Breakpoints umstellst, um das Ergebnis zu prüfen.
Iteriere, indem Devin seine Implementierung mit den Referenzen vergleicht – und nicht bloß bestätigt, dass sie baut –, und übergib an die Cloud für längere Durchläufe.
Gib Devin die Referenzen und konkrete Einschränkungen, mit einer klaren Definition von „fertig“:
Halte Prompts fokussiert, committe gute Iterationen und mache schlechte rückgängig (sage Devin, wenn du etwas rückgängig machst), damit jeder Durchlauf auf einer sauberen Basis aufbaut.
devin
# in the prompt:
> Implement the attached reference (desktop + mobile) in
React + Vite + Tailwind + TypeScript.
Reuse my existing design-system components and tokens.
Match spacing, layout, and hierarchy; make it responsive.
Render it in the browser and iterate until it matches the
references across breakpoints. Done = pixel-close on both
desktop and mobile with no console errors.Historisches Befehlsbeispiel aus dem vorherigen Leitfaden; prüfe die aktuelle Syntax in der verlinkten Herstellerdokumentation.
Projektregeln, Tools und Cloud-Übergabe
Drei Erweiterungspunkte machen Devin for Terminal für dauerhafte Designarbeit praktikabel, und alle drei lassen sich sauber auf einen offenen Design-Workflow abbilden.
Projektregeln und Kontext: Halten Sie Ihre Designkonventionen, Tokens und Review-Checklisten in den Regeln und Dokumenten Ihres Projekts fest, damit der Agent sie bei jedem Lauf liest und sich an Ihrer Marke orientiert.
Codebasis, Tools und Umgebung: Devin läuft als lokaler Agent mit Zugriff auf Ihre Codebasis, Tools und Umgebung — er kann einen Dev-Server starten, den Build ausführen und die Ausgabe überprüfen, ohne das Terminal zu verlassen.
Sandbox-Cloud-Übergabe: Übergeben Sie eine Sitzung an einen Cloud-Agenten in seiner eigenen Sandbox, um längere Builds, Tests und PR-Erstellung asynchron auszuführen, und kehren Sie dann zu einem fertigen Pull Request zurück.
Genau diese Art portabler, agentenförmiger Fähigkeiten ist OpenDesign darauf ausgelegt zu orchestrieren, statt sie pro Projekt neu zu erstellen.
Projektregeln und Kontext: Halten Sie Ihre Designkonventionen, Tokens und Review-Checklisten in den Regeln und Dokumenten Ihres Projekts fest, damit der Agent sie bei jedem Lauf liest und sich an Ihrer Marke orientiert.
Codebasis, Tools und Umgebung: Devin läuft als lokaler Agent mit Zugriff auf Ihre Codebasis, Tools und Umgebung — er kann einen Dev-Server starten, den Build ausführen und die Ausgabe überprüfen, ohne das Terminal zu verlassen.
Sandbox-Cloud-Übergabe: Übergeben Sie eine Sitzung an einen Cloud-Agenten in seiner eigenen Sandbox, um längere Builds, Tests und PR-Erstellung asynchron auszuführen, und kehren Sie dann zu einem fertigen Pull Request zurück.
Genau diese Art portabler, agentenförmiger Fähigkeiten ist OpenDesign darauf ausgelegt zu orchestrieren, statt sie pro Projekt neu zu erstellen.
Devin, Codex, Claude Code, Cursor und Gemini CLI für Design vergleichen
Es gibt keinen einzigen Gewinner für Designarbeit — jeder Agent hat eine andere Stärke, und erfahrene Teams kombinieren sie. Eine faire Zusammenfassung:
Devin — Vollständig autonomer Softwareentwickler; plant und führt mehrstufige Builds aus und übergibt an einen Cloud-Agenten in einer Sandbox — Delegieren von End-to-End-Frontend-Builds, die weiterlaufen, nachdem Sie sich zurückgezogen haben
Codex — Starker visueller Feinschliff mit einer Frontend-Skill; asynchrone Builds in der Sandbox — Delegierte asynchrone Builds und portable AGENTS.md-Regeln
Claude Code — Konkrete Designentscheidungen (Hex, Abstände, Typografie) und codebasisbewusste UX — Frontend-Denkweise und Refactorings mit großem Kontext
Cursor — Visuelle Build-and-See-Schleife mit Live-Vorschau und Inline-Bearbeitungen — Engmaschige UI-Arbeit zum Iterieren und Beobachten in einer IDE
Gemini CLI — Starke multimodale Bildverarbeitung und ein 1M-Token-Kontext; Open Source mit einem kostenlosen Tarif — Screenshot-lastige Arbeit und ein ganzes Designsystem im Kontext halten
Das wiederkehrende Urteil der Community ist, dass Geschmack von Menschen kommt: Alle von ihnen fallen auf eine generische Ästhetik zurück, wenn Skills, Referenzen und Einschränkungen fehlen. Das ist das eigentliche Problem, das es zu lösen gilt — und es ist design-tool-förmig, nicht modellförmig.
Agent — Designstärke — Am besten für
Devin — Vollständig autonomer Softwareentwickler; plant und führt mehrstufige Builds aus und übergibt an einen Cloud-Agenten in einer Sandbox — Delegieren von End-to-End-Frontend-Builds, die weiterlaufen, nachdem Sie sich zurückgezogen haben
Codex — Starker visueller Feinschliff mit einer Frontend-Skill; asynchrone Builds in der Sandbox — Delegierte asynchrone Builds und portable AGENTS.md-Regeln
Claude Code — Konkrete Designentscheidungen (Hex, Abstände, Typografie) und codebasisbewusste UX — Frontend-Denkweise und Refactorings mit großem Kontext
Cursor — Visuelle Build-and-See-Schleife mit Live-Vorschau und Inline-Bearbeitungen — Engmaschige UI-Arbeit zum Iterieren und Beobachten in einer IDE
Gemini CLI — Starke multimodale Bildverarbeitung und ein 1M-Token-Kontext; Open Source mit einem kostenlosen Tarif — Screenshot-lastige Arbeit und ein ganzes Designsystem im Kontext halten
Das wiederkehrende Urteil der Community ist, dass Geschmack von Menschen kommt: Alle von ihnen fallen auf eine generische Ästhetik zurück, wenn Skills, Referenzen und Einschränkungen fehlen. Das ist das eigentliche Problem, das es zu lösen gilt — und es ist design-tool-förmig, nicht modellförmig.
Agent — Designstärke — Am besten für
Fallstricke und wie man den „KI-Slop“-Look vermeidet
Der häufigste Kritikpunkt an KI-generiertem Design ist, dass es generisch wirkt — weiche Verläufe, schwebende Panels, überdimensionierte abgerundete Ecken, dramatische Schatten, ein Inter-und-Lila-Vibe, der „schreit, dass eine KI das gemacht hat“. Weitere berichtete Probleme sind kaputte mobile Layouts und Anweisungen, die in UI-Texte durchsickern. Nichts davon ist einzigartig für Devin; es passiert, wenn irgendein Agent ohne kuratierten Designkontext läuft.
Fügen Sie einen ästhetischen Skill hinzu: Ein kuratierter Design-Skill zwingt den Agenten, sich auf eine echte Richtung festzulegen, statt auf den Standard-Look.
Verifizieren Sie in einem echten Browser: Lassen Sie Devin über Breakpoints hinweg rendern und selbst prüfen, damit Layouts auf Mobilgeräten nicht stillschweigend kaputtgehen.
Stellen Sie Tokens und Referenzen bereit: Echte Design-Tokens und Referenz-Screenshots sind der mit Abstand größte Hebel für die Ausgabequalität.
Kodieren Sie Regeln im Projektkontext: Platzieren Sie Regeln im Stil von „keine Hero-Cards, maximal zwei Schriftarten, Marken-zuerst-Hierarchie“ dort, wo der Agent sie bei jedem Lauf liest, mit expliziten Abschlusskriterien.
Beachten Sie, dass jede Maßnahme darauf hinausläuft, dem Agenten einen kuratierten Designkontext zu geben. Diesen Kontext pro Projekt von Hand zu pflegen, ist die Mühsal, die OpenDesign beseitigt.
Fügen Sie einen ästhetischen Skill hinzu: Ein kuratierter Design-Skill zwingt den Agenten, sich auf eine echte Richtung festzulegen, statt auf den Standard-Look.
Verifizieren Sie in einem echten Browser: Lassen Sie Devin über Breakpoints hinweg rendern und selbst prüfen, damit Layouts auf Mobilgeräten nicht stillschweigend kaputtgehen.
Stellen Sie Tokens und Referenzen bereit: Echte Design-Tokens und Referenz-Screenshots sind der mit Abstand größte Hebel für die Ausgabequalität.
Kodieren Sie Regeln im Projektkontext: Platzieren Sie Regeln im Stil von „keine Hero-Cards, maximal zwei Schriftarten, Marken-zuerst-Hierarchie“ dort, wo der Agent sie bei jedem Lauf liest, mit expliziten Abschlusskriterien.
Beachten Sie, dass jede Maßnahme darauf hinausläuft, dem Agenten einen kuratierten Designkontext zu geben. Diesen Kontext pro Projekt von Hand zu pflegen, ist die Mühsal, die OpenDesign beseitigt.
Devin für Design in OpenDesign verwenden
OpenDesign ist die Open-Source-Designschicht, nach der der obige Workflow immer wieder verlangt. Es behandelt Devin for Terminal als First-Party-Adapter und umhüllt ihn mit einer kuratierten Skill- und Designsystem-Bibliothek, einer strukturierten Render-Pipeline und einer lokalen Desktop-UI — sodass der Designkontext, der Devin gut macht, vom ersten Lauf an vorhanden ist und nicht jedes Mal von Hand zusammengebaut werden muss. OpenDesign ist Open Source und local-first, was die Kombination zu einer natürlichen Wahl für einen Agenten macht, den Sie bereits in Ihrem Terminal ausführen.
Installieren Sie OpenDesign und wählen Sie Devin for Terminal als Ihren Agenten aus.
Authentifizieren Sie sich mit Ihrem Devin-(Cognition)-Konto — Anmeldedaten werden direkt von Ihrem Agenten verwendet und niemals über uns weitergeleitet.
Wählen Sie ein Designsystem und einen Skill und generieren Sie dann Decks, Prototypen und Landing Pages mit konsistentem Geschmack.
Jedes Artefakt und jede DESIGN.md-Datei lebt in Ihrem eigenen Repo, nicht in einer gehosteten Cloud.
Derselbe Devin-Agent, dasselbe Konto — plus ein echter, portabler, Open-Source-Design-Workflow darum herum. OpenDesign ist local-first und Apache-2.0, sodass nichts an Ihrer Arbeit oder Ihren Anmeldedaten über uns Ihren Rechner verlässt.
Installieren Sie OpenDesign und wählen Sie Devin for Terminal als Ihren Agenten aus.
Authentifizieren Sie sich mit Ihrem Devin-(Cognition)-Konto — Anmeldedaten werden direkt von Ihrem Agenten verwendet und niemals über uns weitergeleitet.
Wählen Sie ein Designsystem und einen Skill und generieren Sie dann Decks, Prototypen und Landing Pages mit konsistentem Geschmack.
Jedes Artefakt und jede DESIGN.md-Datei lebt in Ihrem eigenen Repo, nicht in einer gehosteten Cloud.
Derselbe Devin-Agent, dasselbe Konto — plus ein echter, portabler, Open-Source-Design-Workflow darum herum. OpenDesign ist local-first und Apache-2.0, sodass nichts an Ihrer Arbeit oder Ihren Anmeldedaten über uns Ihren Rechner verlässt.
Ist OpenDesign mit Cognition verbunden?
Nein. OpenDesign ist unabhängig; Devin ist eine Marke von Cognition.