Mit DeepSeek Harness gestalten.
DeepSeek Harness kann Landingpages, Produktoberflächen, Dashboards und Frontend-Prototypen erstellen, weil es ein Repository lesen, echten UI-Code bearbeiten, Befehle ausführen, Projektanweisungen laden und eine Sitzung über mehrere Iterationen hinweg erhalten kann. Was es allein nicht liefert, ist visuelles Gespür: Gute Designarbeit benötigt weiterhin Markenregeln, Referenzen, Werkzeuge, Berechtigungen und einen Zyklus, der das Ergebnis rendert und prüft.
Formuliere bei der Arbeit an Benutzeroberflächen das Briefing und die Abnahmeschleife ausdrücklich. Die standardmäßige DeepSeek-Route verarbeitet nur Text; die zuverlässigste Grundlage ist daher ein Code-und-Spezifikations-Workflow. Füge Screenshots erst hinzu, nachdem du eine Modellroute mit deklarierter Bildeingabe ausgewählt hast.
Das Modell benötigt dennoch visuelle Orientierung. Am einfachsten lieferst du sie, indem du DeepSeek Harness mit Open Design verbindest: Open Design stellt das Designsystem, Frontend-Skills, Artefaktvorschauen und die Prüfansicht bereit; dsh übernimmt die Programmierarbeit. Dieser Leitfaden beschreibt den gesamten Workflow von der offiziellen [Produktseite von DeepSeek Harness](https://www.deepseek.com/harness/) und dem [Quellcode-Repository](https://github.com/deepseek-ai/deepseek-harness) bis zur fertigen Benutzeroberfläche.
Kann DeepSeek Harness Designaufgaben übernehmen?
DeepSeek Harness kann Landingpages, Produktoberflächen, Dashboards und Frontend-Prototypen erstellen, weil es ein Repository lesen, echten UI-Code bearbeiten, Befehle ausführen, Projektanweisungen laden und eine Sitzung über mehrere Iterationen hinweg erhalten kann. Was es allein nicht liefert, ist visuelles Gespür: Gute Designarbeit benötigt weiterhin Markenregeln, Referenzen, Werkzeuge, Berechtigungen und einen Zyklus, der das Ergebnis rendert und prüft.
- Dauerhafter Designkontext: Der standardmäßige Anweisungs-Loader liest `AGENTS.md` und `CLAUDE.md` aus der Projekthierarchie. Hinterlege Tokens, Komponentenregeln, responsive Breakpoints und Prüfkriterien dort, wo sie bei jedem Lauf verfügbar sind.
- Wiederverwendbare Skills: Lokale Skills können unter `.dsh/skills` oder `.agents/skills` liegen. Ein Frontend-Skill kann das genaue Briefing, die Checkliste, Beispiele und Skripte bündeln, damit nicht jede UI-Aufgabe bei null beginnt.
- Aufgabengerechte Anbieterwahl: Die Web UI kann DeepSeek, Kataloganbieter wie Anthropic oder OpenAI und benutzerdefinierte OpenAI-kompatible Endpunkte konfigurieren. Verwende für Screenshot-Eingaben eine deklarierte bildfähige Route; für text-, code-, DOM- und spezifikationsbasierte Arbeit eignet sich die native DeepSeek-Route.
Die entscheidende Grenze ist bei jedem Agenten dieselbe: Modularität ersetzt keine gestalterische Qualität. Ohne bewusste Vorgaben für Typografie, Abstände, Komponenten und Interaktionen automatisiert die Laufzeit zuverlässig ein generisches Ergebnis. Open Design liefert und organisiert diese Designgrundlagen.
Schritt 1: DeepSeek Harness installieren und konfigurieren
Prüfe zuerst, ob DeepSeek Harness eigenständig funktioniert. Installiere die getestete dsh-Version und öffne anschließend die lokale Web UI, um API-Schlüssel und Modell zu konfigurieren, bevor du Open Design startest. Die Entwicklervorschau erfordert Node.js `^22.19.0` oder `>=24.0.0`.
# Open Design currently tests DeepSeek Harness 0.1.0-rc.6
# Requires Node.js ^22.19.0 or >=24.0.0
npm install -g @deepseek-ai/[email protected]
# Verify the local executable
dsh --version
# Start the local Web UI and configure a provider and model
dsh web
# Open http://127.0.0.1:3080- Harness Web UI öffnen: Führe `dsh web` aus. Normalerweise öffnet sich `http://127.0.0.1:3080`. Falls sich der Browser nicht öffnet, kopiere die im Terminal angezeigte Adresse und verwende genau diese Adresse.
- DeepSeek API-Schlüssel hinzufügen: Bestätige den Hinweis zur Vorschau und speichere oder übernimm den Schlüssel, sobald du dazu aufgefordert wirst. Falls keine Eingabeaufforderung erscheint, öffne Einstellungen → Modelle → DeepSeek → API-Schlüssel. Füge nur den Schlüssel ein – nicht `DEEPSEEK_API_KEY=...` und keine Anführungszeichen. Die Änderung wird sofort wirksam; `dsh web` muss nicht neu gestartet werden. Erstelle den Schlüssel bei Bedarf auf der DeepSeek Platform.
- Modell bestätigen und Einrichtungs-UI schließen: Der DeepSeek-Anbieter sollte als konfiguriert angezeigt werden und seine Modelle sollten in der Auswahl erscheinen. Wenn `MISSING_CREDENTIAL` angezeigt wird, öffne die DeepSeek-Karte erneut und speichere den Schlüssel noch einmal. Sobald ein Test-Prompt funktioniert, drücke `Ctrl+C`. `dsh web` muss während der Nutzung von Open Design nicht geöffnet bleiben.
DeepSeek Harness speichert Anbieter-Zugangsdaten als nur beschreibbare Geheimnisse: Die UI kann melden, ob ein Schlüssel konfiguriert ist, aber den Klartextschlüssel weder lesen noch anzeigen. Open Design verwendet das vom Nutzer installierte dsh und dessen Modellkonfiguration, ohne den Schlüssel in Open Design zu kopieren. Fixiere dsh für einen zuverlässigen Workflow auf die getestete Version `0.1.0-rc.6`. Einzelheiten zum Verhalten der Zugangsdaten findest du im offiziellen Anbieterleitfaden.
Schritte 2–5: DeepSeek Harness mit Open Design verbinden
Sobald dsh lokal funktioniert, erfolgen die restlichen Schritte in Open Design. Die DeepSeek Harness-Integration ist ab Open Design 0.19.1 verfügbar.
- 2 · Open Design 0.19.1 oder neuer herunterladen: Lade den aktuellen Desktop-Build von der Downloadseite von Open Design herunter, installiere ihn und starte die App.
- 3 · DeepSeek Harness erkennen: Öffne Einstellungen → Modelle & Anbieter → Lokale CLI und wähle Erneut suchen. Starte Open Design neu oder suche noch einmal, falls es während der Installation bereits geöffnet war. Die DeepSeek Harness-Karte erscheint, sobald Open Design die ausführbare Datei `dsh` aus Schritt 1 findet.
- 4 · Open Design-Profil verbinden: Wähle die DeepSeek Harness-Karte. Wenn „Verbindungseinrichtung erforderlich“ angezeigt wird, bestätige „Installieren und auswählen“. Open Design prüft die eigene Komponente, lässt sie von dsh im Profil `open-design` installieren, sucht erneut und testet die Verbindung.
- 5 · Designaufgabe starten: Prüfe, ob die Karte die Harness-Version und „Aus CLI synchronisiert“ anzeigt, und klicke dann auf Test. Öffne oder erstelle nach erfolgreichem Test ein Projekt, wähle DeepSeek Harness und ein synchronisiertes Modell aus und sende deine Designanfrage.
Damit ist die Verbindung abgeschlossen. Die Benutzeroberfläche und `od agent setup deepseek-harness --json` verwenden denselben lokalen Einrichtungspfad. Jeder Lauf startet `dsh --profile open-design --stdio`, während Harness die Sitzungsidentität für spätere Durchgänge beibehält.
Create a polished product landing page in this workspace.
Use DESIGN.md, AGENTS.md, and the installed frontend skill as the visual contract.
Reuse the project tokens and components; include desktop and mobile states.
Run the app, inspect the rendered result, fix visible spacing and hierarchy issues,
and leave the final HTML and assets in the project for Open Design to preview.
Die Aufgabenteilung bleibt einfach: Harness verwaltet dsh, Zugangsdaten, Modelle und Sitzungen; Open Design verwaltet das geprüfte Verbindungsprofil und den Design-Arbeitsbereich. Open Design ist unabhängig von DeepSeek AI; DeepSeek und DeepSeek Harness sind Marken ihrer jeweiligen Eigentümer.
UI-Erstellungs- und Prüfzyklus ausführen
Formuliere bei der Arbeit an Benutzeroberflächen das Briefing und die Abnahmeschleife ausdrücklich. Die standardmäßige DeepSeek-Route verarbeitet nur Text; die zuverlässigste Grundlage ist daher ein Code-und-Spezifikations-Workflow. Füge Screenshots erst hinzu, nachdem du eine Modellroute mit deklarierter Bildeingabe ausgewählt hast.
- Starte dsh aus dem Repository, wähle dieses Verzeichnis als Arbeitsbereich und dann die Modellroute für die Aufgabe.
- Hinterlege den Markenvertrag in `AGENTS.md`, `CLAUDE.md` oder einer referenzierten `DESIGN.md`: Tokens, Grundelemente, Abstände, Typografie, Breakpoints, Zustände und verbotene Muster.
- Lade einen fokussierten Frontend-Skill aus `.dsh/skills` oder `.agents/skills`; bewahre Beispiele und Validierungsskripte neben den Anweisungen auf.
- Weise den Agenten an, vorhandene Komponenten wiederzuverwenden, die Anwendung auszuführen und responsive Zustände mit den projekteigenen Tests oder Browser-Tools zu validieren.
- Prüfe das sichtbare Ergebnis, protokolliere konkrete Abweichungen und iteriere in kleinen Commits. Setze schwache Durchläufe zurück, statt Korrekturen auf einer schlechten Grundlage aufzuschichten.
Ein guter Prompt benennt sowohl die visuellen Vorgaben als auch die Nachweise der Überprüfung:
Implement the account dashboard in React + TypeScript.
Reuse the components and tokens named in AGENTS.md and DESIGN.md.
Use a 240px sidebar, a 12-column content grid, and the documented
mobile navigation pattern. Include loading, empty, error, and focus states.
Run the app and existing UI checks, inspect desktop and mobile breakpoints,
and report the exact files and states you verified.Wenn ein Screenshot unerlässlich ist, konfiguriere zuerst einen bildfähigen Anbieter. DeepSeek Harness lehnt ein Bild vor dem Senden ab, wenn die ausgewählte Route keine Bildunterstützung deklariert — ein sinnvoller Schutz davor, dass die Referenz unbemerkt verworfen wird.
Workflow mit Plugins und Skills wiederverwendbar machen
DeepSeek Harness hebt sich vor allem unterhalb der Chat-Oberfläche ab. Mit seinem Plugin-Baum können Teams den Design-Workflow zum Bestandteil der Laufzeit machen, statt in jeder Sitzung erneut einen Prompt einzufügen.
- AGENTS.md und CLAUDE.md: Das Anweisungs-Plugin lädt die globale Benutzerdatei und die Projekthierarchie und erkennt nach Dateioperationen durch integrierte Tools relevante verschachtelte Anweisungsdateien. Nutze es für dauerhafte Designregeln, nicht für einmalige Anforderungen.
- Dateisystem-Skills: Die Skill-Registry findet Projekt- und Benutzerwurzeln, priorisiert Duplikate und stellt ein modellseitiges Tool namens `skill` bereit. Dies ist der natürliche Ort für Frontend-Handwerk, Barrierefreiheit, responsive Qualitätssicherung und Designsystem-Verfahren.
- Profile und Bundles: Ein Profil stapelt geordnete Plugin-Bundles und benutzerdefinierte Patches. Teams können eine designorientierte Zusammenstellung mit den tatsächlich benötigten Anbietern, Tools, Berechtigungsrichtlinien und Skill-Quellen pflegen.
- MCP und externe Funktionen: Der Quellbaum enthält MCP-Client-Funktionen, doch die benutzerseitige Konfiguration richtet sich weiterhin an Entwickler. Behandle Integrationen während der Vorschau als versionierte Plugin-Arbeit und nicht als stabilen Checkbox-Workflow.
Bevor du einen langlebigen internen Workflow aufbaust, solltest du den effektiven Baum mit `dsh --profile web --dump-config` prüfen. Diese Ausgabe zeigt, was tatsächlich eingebunden und patchbar ist; sie ist zuverlässiger als die Annahme, jedes Paket im Repository sei im ausgelieferten Profil aktiv.
Fehler vermeiden, die visuelle Ergebnisse ruinieren
Die größten Fehler entstehen, wenn eine Vorschau wie ein stabiles Produkt behandelt wird, eine reine Textroute wie ein Vision-Modell oder ein flexibles Harness wie eine Quelle gestalterischer Qualität.
- Version vor dem Anpassen fixieren: Änderungen mit Kompatibilitätsbrüchen sind ausdrücklich Teil der Vorschau-Richtlinie. Fixiere die npm-Version und halte Profil-Patches klein genug, um sie nach einem Upgrade überprüfen zu können.
- Modalitäten des ausgewählten Modells prüfen: Die native Chat-Completions-Route von DeepSeek verarbeitet ausschließlich Text. Wähle und deklariere für Screenshot-to-Code stattdessen eine bildfähige Anbieterroute, statt davon auszugehen, dass der Anhang verstanden wird.
- Gestalterische Qualität als Daten bereitstellen: Gib dem Agenten Tokens, kanonische Komponenten, Referenzzustände und verbotene Muster. Eine modulare Laufzeit ohne Designvertrag erzeugt weiterhin generische UI.
- Prüfen, was das Profil tatsächlich einbindet: Repository-Pakete stellen Funktionen bereit, beweisen aber nicht, dass sie im Standardprofil aktiviert sind. Prüfe die zusammengesetzte Konfiguration, bevor du eine Integration dokumentierst oder dich darauf verlässt.
Jede Gegenmaßnahme ist eine Entscheidung über Kontext und Überprüfung. Genau diese Arbeit sollte eine Design-Ebene wiederholbar machen, anstatt jedes Projekt sie neu entdecken zu lassen.
Was das Harness zum Design beiträgt
DeepSeek Harness (`dsh`) ist ein von DeepSeek AI entwickeltes Agenten-Harness unter MIT-Lizenz. Die offizielle Produktseite stellt das Projekt vor; das GitHub-Repository enthält Quellcode, Versionsverlauf und gepflegte Anleitungen. Die öffentliche Entwicklervorschau umfasst eine lokale Web UI und Headless-Profile.
Die zentrale Idee lautet: „Alles ist ein Plugin.“ Cordis setzt einen Baum zusammen, in dem Modelladapter, Tool-Registry, Agentenschleife, Dateisystem, Shell, Sandbox, Skills, Subagenten, Persistenz und UI über Profile und Bundles eingebunden, ersetzt oder gepatcht werden können. Die mitgelieferten Profile `web` und `headless` sind Ausgangspunkte und keine fest vorgegebenen Produkte.
- Lokale Web UI: `npx @deepseek-ai/dsh web` startet standardmäßig einen Browser-Arbeitsbereich unter `127.0.0.1:3080`. Füge ein Modell hinzu, wähle einen Arbeitsbereich und führe Aufgaben über die Chat-Oberfläche aus.
- Headless-Modus: Das Profil `headless` führt eine neue persistierte Sitzung aus, gibt die endgültige Antwort aus und beendet sich — nützlich für skriptgesteuerte Audits, Builds und wiederholbare Designprüfungen.
- Modular zusammensetzbare Laufzeit: Profile stapeln Plugin-Bundles und eigene Patches. So kann ein Team Anbieter, Tools, Richtlinien und das UI-Verhalten ändern, ohne eine Agentenschleife forken zu müssen.
- Entwickler: DeepSeek AI (offizielles Projekt)
- Status: Entwicklervorschau; Änderungen mit Kompatibilitätsbrüchen sind zu erwarten
- Lizenz: MIT
- Primärer Befehl: `npx @deepseek-ai/dsh web`
DeepSeek Harness, DeepSeek TUI und Open Design
DeepSeek Harness und DeepSeek TUI sind getrennte Projekte mit unterschiedlichen ausführbaren Dateien. Open Design unterstützt beide jetzt als lokale Agenten. Bei der Wahl geht es also darum, welche Laufzeit du verwenden möchtest – nicht darum, ob eine von beiden in den Design-Arbeitsbereich eingebunden werden kann.
| Tool | Was es ist | Beste Verwendung im Design |
|---|---|---|
| DeepSeek Harness (`dsh`) | Offizielles, Plugin-orientiertes Harness von DeepSeek AI mit lokaler Web UI und Headless-Profilen; direkter Open Design-Adapter | Harness-Sitzungen, Anbieter und Plugin-Komposition im Artefakt-Workflow von Open Design verwenden |
| DeepSeek TUI (`deepseek` / `codewhale`) | Separater Terminal-Coding-Agent mit eigenem Open Design-Adapter | Terminal-orientierter DeepSeek-Workflow ohne die Profilarchitektur von Harness |
| OpenCode | Ausgereifter, anbieterunabhängiger Open-Source-Terminal-Agent | Für den Modellwechsel innerhalb eines stabilen TUI-Workflows mit AGENTS.md und MCP |
| Claude Code | Ausgereifter Coding-Agent für Terminal-, IDE-, Desktop- und Weboberflächen | Für Frontend-Reasoning, bildlastige Referenzen und etablierte Designintegrationen |
| Open Design | Agentennativer Design-Arbeitsbereich und Bibliothek rund um unterstützte Coding-Agenten | Für kuratierte Designsysteme, Skills, visuelle Artefakte und einen lokalen Workflow unabhängig von einem einzelnen Modellanbieter |
Wähle DeepSeek Harness, wenn du die offizielle Web UI, das Profilsystem, den Modellkatalog und fortsetzbare Harness-Sitzungen nutzen möchtest. Wähle DeepSeek TUI in Open Design, wenn du den Terminal-orientierten Workflow dieses Agenten bevorzugst. Auch wenn Open Design beide jetzt in denselben Designprozess einbinden kann, bleiben sie eigenständige Laufzeiten.
DeepSeek Harness für Design verwenden: FAQ
-
01 Was ist DeepSeek Harness?
DeepSeek Harness (`dsh`) ist das offizielle Open-Source-Agent-Harness von DeepSeek AI. Es verbindet Modelle, Tools, Kontext, Sitzungen, Richtlinien, Orchestrierung und UI über einen Cordis-Plugin-Baum. Die öffentliche Version ist derzeit eine Entwicklervorschau unter der MIT-Lizenz.
-
02 Wie installiere und starte ich DeepSeek Harness?
Installiere die getestete CLI mit `npm install -g @deepseek-ai/[email protected]` und führe anschließend `dsh web` aus. Bestätige den Hinweis zur Vorschau und speichere unter Einstellungen → Modelle → DeepSeek → API-Schlüssel ausschließlich den API-Schlüssel. Prüfe Anbieter und Modell und beende die Web UI mit `Ctrl+C`. Installiere Open Design 0.19.1 oder neuer, suche erneut nach lokalen CLI-Agenten, verbinde die Harness-Karte und klicke auf Test.
-
03 Ist DeepSeek Harness ein offizielles DeepSeek-Projekt?
Ja. Das Repository wird unter der GitHub-Organisation `deepseek-ai` veröffentlicht und beschreibt dsh als ein von DeepSeek AI entwickeltes Agent-Harness. Es steht unter der MIT-Lizenz und ist ausdrücklich als Entwicklervorschau gekennzeichnet.
-
04 Kann DeepSeek Harness UI anhand von Screenshots erstellen?
Nur wenn die ausgewählte Anbieterroute Bildeingaben deklariert. Die eigene Chat-Completions-Route von DeepSeek in dsh verarbeitet ausschließlich Text, und das Harness lehnt Bildanhänge vor dem Senden über eine reine Textroute ab. Verwende für Screenshots einen bildfähigen Anbieter oder beschreibe das Ziel durch Code, DOM, Tokens und schriftliche Spezifikationen.
-
05 Unterstützt DeepSeek Harness AGENTS.md und Skills?
Ja. Sein Anweisungs-Plugin lädt AGENTS.md- und CLAUDE.md-kompatible Projektdateien. Sein Dateisystem-Skill-Anbieter findet Projekt-Skills unter `.dsh/skills` und `.agents/skills` sowie konfigurierte Benutzer- und Bundle-Wurzeln.
-
06 Was ist der Unterschied zwischen DeepSeek Harness und DeepSeek TUI?
Es handelt sich um separate Tools. DeepSeek Harness verwendet die ausführbare Datei `dsh` und ist eine offizielle Plugin-First-Laufzeit mit Web UI und Headless-Modus von DeepSeek AI. DeepSeek TUI verwendet den Dispatcher `deepseek` oder `codewhale` und ist der separate DeepSeek-Adapter, den Open Design derzeit unterstützt.
-
07 Unterstützt Open Design DeepSeek Harness?
Ja. Open Design erkennt deine offizielle dsh-Installation, installiert nach ausdrücklicher Bestätigung eine geprüfte, Open Design-eigene Profilkomponente, synchronisiert den Harness-Modellkatalog und führt DeepSeek Harness als direkt unterstützten lokalen Agenten aus. Open Design installiert dsh nicht und empfängt keine von Harness verwalteten Anbieter-Geheimnisse.
-
08 Wo speichert DeepSeek Harness meinen API-Schlüssel?
Konfiguriere den Schlüssel in DeepSeek Harness, nicht in Open Design. Laut offiziellem Modellleitfaden werden Anbieterschlüssel in `$DSH_HOME/.credentials.yaml` als nur beschreibbare Geheimnisse gespeichert: Die UI kann erkennen, ob ein Schlüssel konfiguriert ist, seinen Klartextwert aber weder lesen noch anzeigen. Open Design fordert dich weder auf, den Schlüssel in die App einzufügen, noch schreibt es ihn in die Open Design-Konfiguration.
Mit DeepSeek Harness in Open Design gestalten.
Installiere die offizielle dsh-Laufzeit, verbinde sie einmal und nutze anschließend die Designsysteme, Skills, synchronisierten Modelle und lokalen Artefaktvorschauen von Open Design in einem Workflow.