UI-Design mit DeepSeek Harness: das native Plugin dsh-oil-ui und Beispiele
Wenn du Oberflächen mit DeepSeek Harness erstellst, kannst du das native Plugin dsh-oil-ui mit einem einzigen Befehl installieren. Es enthält den Open-Source-Arbeitsablauf von Oil UI und erkennt automatisch eine vorhandene lokale Installation von Oil UI Pro. Die Galerie enthält außerdem Vergleichsbeispiele, die mit DeepSeek 4.1 Flash aus exakt denselben Briefings wie die GPT-Modelle entstanden sind.
Die wichtigsten Punkte
- Führe dsh plugin --profile web add github:oil-oil/dsh-oil-ui aus, um Oil UI nativ in DeepSeek Harness zu aktivieren.
- dsh-oil-ui enthält den kostenlosen Skill und nutzt automatisch den Pro-Arbeitsablauf, wenn es Oil UI Pro auf deinem Rechner erkennt.
- Vergleiche Arbeiten von DeepSeek 4.1 Flash direkt mit Arbeiten von GPT-6.1 Sol, die aus identischen Briefings entstanden sind (Vesper, Atelier Volders, Fonderie Mercier und Sonar).
- Konkrete Fachregeln, echte Zahlen und ausdrücklich aufgelistete Zustände verbessern bei schnellen Modellen die Stabilität des ersten Layoutentwurfs deutlich.
dsh plugin --profile web add github:oil-oil/dsh-oil-uiPlugin-Repository: https://github.com/oil-oil/dsh-oil-ui (enthält den kostenlosen Skill und erkennt eine lokale Oil-UI-Pro-Installation automatisch).
dsh-oil-ui installieren und Oil UI Pro anbinden
DeepSeek Harness verwendet profilbasierte Plugins. Das native Paket dsh-oil-ui wird direkt an dein Web-Profil angebunden, sodass du Skill-Dateien nicht manuell zwischen Projekten kopieren musst.
dsh-oil-ui zum Web-Profil von DeepSeek Harness hinzufügen
Führe den Plugin-Befehl im Terminal aus. DeepSeek Harness lädt das Repository und aktiviert den Open-Source-Arbeitsablauf von Oil UI sofort.
dsh plugin --profile web add github:oil-oil/dsh-oil-ui(Optional) Oil UI Pro lokal installieren, damit es automatisch erkannt wird
Wenn du Oil UI Pro über oil-cli auf demselben Rechner installierst, erkennt dsh-oil-ui die lokale Pro-Installation automatisch und aktiviert die vollständige Pro-Methode ohne zusätzliche Plugin-Optionen.
npx github:oil-oil/oil-cli install oil-ui-proMit einem konkreten Briefing und einem Ziel-Viewport beginnen
Übergib Produktkontext, Ziel-Viewport (1440×900 oder 390×844) und drei prüfbare Zustände, damit der Agent Richtungen vergleichen und echte Screenshots untersuchen kann.
Vergleich bei gleichem Briefing: DeepSeek 4.1 Flash in der Galerie
Entwicklungsteams fragen häufig, wie sich ein schnelles, kosteneffizientes Modell wie DeepSeek 4.1 Flash mit einem strukturierten UI-Skill im Vergleich zu größeren Frontier-Modellen schlägt.
Für einen konkreten Vergleich enthält die Galerie mehrere Paare, bei denen DeepSeek 4.1 Flash und GPT-6.1 Sol exakt dasselbe Aufgabenbriefing (TASK.md) erhalten haben. Du kannst beide Live-Demos öffnen und untersuchen, wie jedes Modell Typografie, Bedienelemente und Layout umgesetzt hat:
| Produktbriefing | Arbeit von DeepSeek 4.1 Flash | Passende GPT-Arbeit | Worauf du in den Live-Seiten achten solltest |
|---|---|---|---|
| Atelier Volders (Werkstatt für Eichenhocker in Gent) | Atelier Volders · The Wedged Oak (volders-wedge) | Grain & Tenon (volders-grain) / River Timber (volders-hearth) | Direkter Wechsel zwischen 3 Hockerhöhen (€240–€310) und 3 Eichenoberflächen ohne Archivfotos |
| Fonderie Mercier (Bronzeglockengießerei) | Fonderie Mercier · The Tuning Sheet (mercier-bell) | Bronze, with a Voice (mercier-voice) / Eighteen Bells (mercier-pour) | Interaktives Anhören von Glockenschlägen mit Grundton- und Obertonabklingkurven sowie Chargenreservierung |
| Vesper (Konsole für API-Nutzung und Abrechnung) | Vesper · Settlement Ledger (vesper-ledger) | Vesper (vesper, GPT 6.1 Sol) | Abrechnungskonsole bei 1440×900 mit Schwellenwertfiltern, Zeitverläufen zur Rechnungskorrektur und Befehlspalette |
| Sonar (Team-Messaging für 30–300 Personen) | Sonar · Signal Room (sonar-desk) | Sonar (chat2, GPT 6.1 Sol) | Desktop-Messaging-Arbeitsbereich mit drei Zuständen: aktiver Kanal, geöffneter Thread und Datei im Entwurf |
Prompt-Tipps für schnelle Modelle wie DeepSeek 4.1 Flash
Ein Design-Skill hilft einem Modell bei der Hierarchie und vermeidet generische Muster; die eigenen Fähigkeiten des Modells bestimmen weiterhin die Obergrenze. Drei Vorgehensweisen helfen schnellen Modellen, schon im ersten Durchgang sauberere Ergebnisse zu erzeugen:
- Echte Zahlen und fachliche Einschränkungen liefern
- Genaue Angaben wie „24 Hocker pro Monatscharge, drei Höhen bei 32 cm / 45 cm / 62 cm“ geben dem Modell konkrete Anker für Tabellen, Auswahlelemente und Badges.
- Ein zentrales Bedienelement pro Bildschirm benennen
- Hebe die eine Interaktion hervor, die auf der Seite am wichtigsten ist, etwa die akustische Stimmtafel in Fonderie Mercier oder die Punktraster-Zeitleiste in Tempo · A Year in Dots.
- Die Browser-Screenshot-Prüfung immer durchführen
- Schnelle Modelle übersehen gelegentlich Zeilenumbrüche oder überlaufende Container bei geringen Breiten. Aufnahmen der gerenderten Seite bei 1440 px und 390 px machen diese Probleme in einem Durchgang sichtbar.
Verwende Oil UI, um die Website für [Markenname, z. B. eine Handwerkswerkstatt mit zwei Personen] zu gestalten und zu implementieren (von 1440×900 auf dem Desktop bis 390 px auf Mobilgeräten).
- Produkt und Optionen: Konzentriere dich auf ein zentrales Objekt mit [3 Größenoptionen und genauen Preisen] sowie [3 Oberflächenoptionen]. Besucher können Größe und Oberfläche direkt wechseln und sehen, wie sich Spezifikationen und Preis aktualisieren.
- Erforderliche Bereiche: Interaktiver Konfigurator, Zeitverlauf des Herstellungsprozesses, Details zum Chargenstempel und Reservierungsformular für die aktuelle Charge.
- Ergebnis: Verwende Typografie, Layout und eigene SVG-/Canvas-Illustrationen statt Archivfotos. Prüfe im Browser sowohl die Zustandsänderungen des Konfigurators als auch das mobile Layout.Führe diesen Prompt in DeepSeek Harness aus, nachdem du das Plugin dsh-oil-ui hinzugefügt hast.
Funktionierende Beispiele und Prompts aus der Galerie
Öffne die Live-Demos bei 1440 px oder 390 px und untersuche, wie Modell und Prompt die fertige Oberfläche geprägt haben.
Atelier Volders · Die verkeilte Eiche
Website einer Möbelwerkstatt
Die Website von Atelier Volders, einer zweiköpfigen Holzwerkstatt an der Korenlei 14 in Gent, Belgien (ab 1440×900, responsiv bis 390 Pixel Breite), mit englischsprachiger Oberfläche. Die Werkstatt fertigt nur ein Objekt: De Drievoet, einen dreibeinigen Hocker aus massiver Eiche, der aus drei Jahre luftgetrocknetem Holz von Hand gedrechselt und verkeilt wird. Er entsteht in einer einzigen Charge pro Monat mit 24 Hockern. Er ist in drei Höhen erhältlich (32 cm niedriger Kaminhocker €240, 45 cm Ess- und Schreibtischhocker €270, 62 cm Tresenhocker mit Eschenfußring €310) und drei Oberflächen (mit Seife geschrubbte rohe Eiche, geräucherte dunkle Eiche, gekochtes Leinöl & Bienenwachs). Besucher können Höhe und Oberfläche in Echtzeit wechseln, den sechswöchigen Herstellungsprozess, den Brennstempel mit Chargennummer auf der Unterseite und die Samstagsöffnungszeiten erkunden sowie einen Hocker aus der aktuellen Charge reservieren. Es sind keine Produktfotos vorhanden.
Arbeit und Prompt ansehen →
Fonderie Mercier · Das Stimmprotokoll
Website einer familiengeführten Glockengießerei
Die Website von Fonderie Mercier, einer familiengeführten Glockengießerei in dritter Generation am Quai Saint-Vincent 28 am Saône-Ufer in Lyon (ab 1440×900, responsiv bis 390 Pixel Breite), mit englischsprachiger Oberfläche. Sie gießt ein einziges charakteristisches Objekt aus Glockenbronze mit 78% Kupfer / 22% Zinn in verdichteten Flusssandformen: Le Bourdon de Table, auf der Drehbank auf einen präzisen Ton gestimmt und einmal im Monat in einer festen Charge von 18 Glocken gegossen. Die Glocke ist in drei Größen und Tonhöhen erhältlich (Ø 72 mm Tischglocke A4 440Hz €180, Ø 96 mm Hofglocke F#4 370Hz €240, Ø 124 mm Wandglocke mit geschmiedeter Eisenhalterung D4 293.7Hz €340) und drei Patinas (rohe auf der Drehbank bearbeitete Bronze, geräucherte Bronze, Grünspan). Besucher können jede Tonhöhe anhören, Größe und Patina wechseln, den fünfstufigen Gussprozess, das kaltgestempelte Kronenregister und die Freitagsöffnungszeiten erkunden sowie einen Reservierungsschein für den nächsten monatlichen Guss vorbereiten. Es sind keine Produktfotos vorhanden.
Arbeit und Prompt ansehen →
Vesper · Abrechnungsjournal
Abrechnungskonsole für API-Nutzung
Entwerfe eine Abrechnungskonsole für API-Nutzung und Kundenrechnungen für KI- und Entwicklertool-Teams, mit englischsprachiger Oberfläche in einer Desktop-Ansicht von 1440×900. Nutzer können Abonnements und Live-API-Nutzung verwalten, fällige Beträge und Rechnungsausnahmen im aktuellen Zeitraum prüfen, Kunden oder Rechnungen nach Status und Nutzungsschwelle filtern und einen Datensatz öffnen, um Einzelpositionen, Zahlungs- und Webhook-Zeitleisten sowie Ereignis-Payloads zu untersuchen. Berücksichtige erneute Zahlungsversuche, Kontingentanpassungen und Rechnungsexporte. Implementiere drei zentrale Zustände: den täglichen Arbeitsbereich mit Umsatz- und Nutzungstrends, Kunden- oder Rechnungslisten und Live-Filtern; eine Detailansicht für eine Ausnahmerechnung mit Nutzungsaufschlüsselung, Statuszeitleiste und Wiederherstellungsaktionen; sowie eine Befehlspalette. Liefere ein offlinefähiges `index.html` und erstelle `shots/desktop.png`, `shots/state-1.png` und `shots/state-2.png` mit 1440×900, DPR=2.
Arbeit und Prompt ansehen →
Sonar · Signalraum
Team-Messaging
Eine Desktop-Messaging-App für Unternehmen mit 30–300 Personen (1440×900): links Kanäle, Gruppen und Direktnachrichten, in der Mitte die laufende Unterhaltung. Nachrichten umfassen Text, Bilder, Dateien, Codeausschnitte, Umfragen und Emoji-Reaktionen. Verwende eine chinesischsprachige Oberfläche. Das unmittelbare Kommunikationsgefühl ist das Herzstück: Eine Nachricht senden, mehrere Kollegen gleichzeitig schreiben sehen, einen Thread zu einer Nachricht öffnen sowie Antworten und Reaktionen anderer in Echtzeit erscheinen lassen – all das soll flüssig und gewichtig wirken. Mach daraus weder einen E-Mail-Client noch ein Aufgabenboard. Entwirf drei Zustände: Alltagsgespräch in einem aktiven Kanal; einen zu einer Nachricht geöffneten Thread; sowie das Erwähnen einer Kollegin oder eines Kollegen im Eingabefeld und das Hereinziehen einer Datei, bereit zum Senden.
Arbeit und Prompt ansehen →Automatische Erkennung von Oil UI Pro in dsh-oil-ui
Wenn du dsh-oil-ui bereits in DeepSeek Harness verwendest, genügt für das Upgrade auf Oil UI Pro der folgende oil-cli-Installer. Das Plugin erkennt deine lokale Pro-Installation automatisch und aktiviert die Überarbeitung bestehender Projekte, 10 Arbeitsbereich-Archetypen und mehrstufige Blindreviews.
npx github:oil-oil/oil-cli install oil-ui-proHäufige Fragen
Was unterscheidet dsh-oil-ui von npx skills add oil-oil/oil-ui?
dsh-oil-ui ist das native Plugin-Paket speziell für DeepSeek Harness und wird über dsh plugin --profile web add installiert. Für Claude Code, Codex, Cursor, Windsurf und andere Agenten verwendest du npx skills add oil-oil/oil-ui.
Welche Arten von Oberflächen gelingen DeepSeek 4.1 Flash mit Oil UI gut?
In den Tests für die Galerie zeigt das Modell gute Ergebnisse bei Websites für Handwerk und technische Produkte (The Wedged Oak, The Tuning Sheet, Archon · The Open Kernel), strukturierten Konsolen (Vesper · Settlement Ledger, Sonar · Signal Room) und redaktionellen mobilen Zusammenfassungen (Tempo · A Year in Dots).
Muss ich dsh-oil-ui nach dem Kauf von Oil UI Pro deinstallieren?
Nein. Lass dsh-oil-ui in DeepSeek Harness aktiviert. Es erkennt deine lokale Installation von Oil UI Pro automatisch und leitet Anfragen über Pro.
Wo finde ich die genauen Prompts der DeepSeek-Arbeiten in der Galerie?
Öffne eine der oben aufgeführten DeepSeek-Arbeiten in der Galerie und klicke in der Viewer-Leiste auf den Prompt-Schalter, um das vollständige Briefing zu lesen und zu sehen, welches Modell die Arbeit erzeugt hat.