Concevoir avec DeepSeek Harness.
DeepSeek Harness peut créer des landing pages, des interfaces produit, des tableaux de bord et des prototypes frontend, car il peut lire un dépôt, modifier le véritable code de l’UI, exécuter des commandes, charger les instructions du projet et conserver une session d’une itération à l’autre. En revanche, il n’apporte pas à lui seul le sens visuel : un travail de design utile nécessite toujours des règles de marque, des références, des outils, des autorisations et une boucle qui génère puis vérifie le résultat.
Pour les interfaces, rendez explicites le brief et la boucle de validation. La route DeepSeek par défaut n’accepte que le texte ; le point de départ le plus fiable est donc un workflow fondé sur le code et les spécifications. Ne joignez des captures d’écran qu’après avoir sélectionné une route de modèle qui déclare prendre en charge les images.
Le modèle a néanmoins besoin d’une direction visuelle. Le moyen le plus simple de la lui fournir consiste à connecter DeepSeek Harness à Open Design : Open Design apporte le système de design, les compétences frontend, l’aperçu des artefacts et l’interface de révision ; dsh se charge du code. Ce guide présente ce flux de travail depuis la [page produit officielle de DeepSeek Harness](https://www.deepseek.com/harness/) et le [dépôt du code source](https://github.com/deepseek-ai/deepseek-harness) jusqu’à l’interface terminée.
DeepSeek Harness peut-il faire du design ?
DeepSeek Harness peut créer des landing pages, des interfaces produit, des tableaux de bord et des prototypes frontend, car il peut lire un dépôt, modifier le véritable code de l’UI, exécuter des commandes, charger les instructions du projet et conserver une session d’une itération à l’autre. En revanche, il n’apporte pas à lui seul le sens visuel : un travail de design utile nécessite toujours des règles de marque, des références, des outils, des autorisations et une boucle qui génère puis vérifie le résultat.
- Contexte de design persistant: Le chargeur d’instructions par défaut lit `AGENTS.md` et `CLAUDE.md` dans la hiérarchie du projet. Placez-y les tokens, les règles de composants, les points de rupture responsive et les critères de revue afin qu’ils soient accessibles à chaque exécution.
- Skills réutilisables: Les skills locaux peuvent être placés dans `.dsh/skills` ou `.agents/skills`. Un skill frontend peut regrouper le brief, la checklist, les exemples et les scripts précis qui évitent de repartir de zéro à chaque tâche d’UI.
- Choix du fournisseur selon la tâche: La Web UI permet de configurer DeepSeek, des fournisseurs du catalogue tels qu’Anthropic ou OpenAI, ainsi que des endpoints personnalisés compatibles avec OpenAI. Pour fournir une capture d’écran en entrée, utilisez une route déclarée comme compatible avec les images ; pour le texte, le code, le DOM et les tâches guidées par des spécifications, utilisez la route DeepSeek native.
La limite essentielle est la même pour tous les agents : la composabilité ne remplace pas le goût. Sans contraintes réfléchies sur la typographie, l’espacement, les composants et les interactions, l’environnement automatisera fidèlement un résultat générique. Le rôle d’Open Design est de fournir et d’organiser ces éléments de design.
Étape 1 : installer et configurer DeepSeek Harness
Commencez par vérifier que DeepSeek Harness fonctionne seul. Installez la version testée de dsh, puis ouvrez sa Web UI locale pour configurer la clé API et le modèle avant de lancer Open Design. La préversion pour développeurs nécessite Node.js `^22.19.0` ou `>=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- Ouvrir la Web UI de Harness: Exécutez `dsh web`. La page `http://127.0.0.1:3080` s’ouvre normalement. Si le navigateur ne s’ouvre pas, copiez l’adresse affichée dans le terminal et utilisez exactement cette adresse.
- Ajouter la clé API DeepSeek: Passez l’avertissement concernant la préversion, puis enregistrez ou appliquez la clé lorsque vous y êtes invité. Si aucune invite n’apparaît, ouvrez Paramètres → Modèles → DeepSeek → Clé API. Collez uniquement la clé, sans `DEEPSEEK_API_KEY=...` ni guillemets. La modification prend effet immédiatement ; il n’est pas nécessaire de redémarrer `dsh web`. Créez une clé sur la DeepSeek Platform si nécessaire.
- Confirmer le modèle, puis fermer l’UI de configuration: Le fournisseur DeepSeek doit apparaître comme configuré et ses modèles doivent figurer dans le sélecteur. Si `MISSING_CREDENTIAL` s’affiche, rouvrez la carte DeepSeek et enregistrez de nouveau la clé. Lorsqu’un prompt de test fonctionne, appuyez sur `Ctrl+C`. `dsh web` n’a pas besoin de rester ouvert pendant que vous utilisez Open Design.
DeepSeek Harness stocke les identifiants des fournisseurs comme des secrets accessibles uniquement en écriture : l’UI peut indiquer si une clé est configurée, mais ne peut ni lire ni afficher la clé en clair. Open Design réutilise le dsh installé par l’utilisateur et sa configuration de modèle sans copier la clé dans Open Design. Pour un flux de travail fiable, épinglez dsh à la version testée `0.1.0-rc.6`. Consultez le guide officiel des fournisseurs pour connaître le comportement des identifiants en amont.
Étapes 2 à 5 : connecter DeepSeek Harness à Open Design
Une fois dsh fonctionnel en local, tout le reste se déroule dans Open Design. L’intégration de DeepSeek Harness est disponible à partir d’Open Design 0.19.1.
- 2 · Télécharger Open Design 0.19.1 ou une version ultérieure: Téléchargez la version actuelle de l’application de bureau depuis la page de téléchargement d’Open Design, installez-la et lancez l’application.
- 3 · Détecter DeepSeek Harness: Ouvrez Paramètres → Modèles et fournisseurs → CLI locale, puis choisissez Relancer l’analyse. Redémarrez Open Design ou relancez l’analyse s’il était déjà ouvert pendant l’installation. La carte DeepSeek Harness apparaît lorsqu’Open Design trouve l’exécutable `dsh` de l’étape 1.
- 4 · Connecter le profil Open Design: Sélectionnez la carte DeepSeek Harness. Si elle indique « Configuration de la connexion requise », confirmez « Installer et sélectionner ». Open Design vérifie son propre composant, demande à dsh de l’installer dans le profil `open-design`, relance l’analyse et teste la connexion.
- 5 · Démarrer une tâche de design: Vérifiez que la carte affiche la version de Harness et « Synchronisé depuis la CLI », puis cliquez sur Tester. Une fois le test réussi, ouvrez ou créez un projet, sélectionnez DeepSeek Harness et un modèle synchronisé, puis envoyez votre demande de design.
La connexion est maintenant terminée. L’UI et `od agent setup deepseek-harness --json` utilisent le même chemin de configuration local ; chaque exécution démarre `dsh --profile open-design --stdio`, tandis que Harness conserve l’identité de la session pour les interactions suivantes.
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.
La répartition reste simple : Harness gère dsh, les identifiants, les modèles et les sessions ; Open Design gère le profil de connexion vérifié et l’espace de travail de design. Open Design est indépendant de DeepSeek AI, et DeepSeek ainsi que DeepSeek Harness sont des marques de leur propriétaire respectif.
Exécuter la boucle de création et de révision de l’UI
Pour les interfaces, rendez explicites le brief et la boucle de validation. La route DeepSeek par défaut n’accepte que le texte ; le point de départ le plus fiable est donc un workflow fondé sur le code et les spécifications. Ne joignez des captures d’écran qu’après avoir sélectionné une route de modèle qui déclare prendre en charge les images.
- Démarrez dsh depuis le dépôt, choisissez ce répertoire comme espace de travail et sélectionnez la route de modèle adaptée à la tâche.
- Définissez les règles de marque dans `AGENTS.md`, `CLAUDE.md` ou un fichier `DESIGN.md` référencé : tokens, primitives, espacements, typographie, points de rupture, états et motifs interdits.
- Chargez un skill frontend ciblé depuis `.dsh/skills` ou `.agents/skills` ; conservez les exemples et scripts de validation avec les instructions.
- Demandez à l’agent de réutiliser les composants existants, d’exécuter l’application et de valider les états responsive avec les tests ou les outils de navigateur propres au projet.
- Examinez le résultat visible, consignez les écarts précis et procédez par petits commits. Annulez les itérations insuffisantes au lieu d’empiler les corrections sur une base défaillante.
Un bon prompt précise à la fois les contraintes visuelles et les éléments de preuve attendus lors de la vérification :
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.Si une capture d’écran est indispensable, configurez d’abord un fournisseur compatible avec les images. DeepSeek Harness refuse l’image avant l’envoi lorsque la route sélectionnée ne déclare pas cette prise en charge — une protection utile qui évite d’ignorer silencieusement la référence.
Rendre le flux de travail réutilisable grâce aux plugins et aux compétences
C’est sous l’interface de chat que DeepSeek Harness se distingue le plus. Son arborescence de plugins permet aux équipes d’intégrer le workflow de design à l’environnement d’exécution, au lieu de coller un prompt dans chaque session.
- AGENTS.md et CLAUDE.md: Le plugin d’instructions charge le fichier global de l’utilisateur et la hiérarchie du projet, puis détecte les fichiers d’instructions imbriqués pertinents après les opérations de fichiers natives. Utilisez-le pour les règles de design durables, pas pour les demandes ponctuelles.
- Skills du système de fichiers: Le registre de skills découvre les racines du projet et de l’utilisateur, classe les doublons et expose au modèle un outil `skill`. C’est l’emplacement naturel pour les pratiques frontend, l’accessibilité, le contrôle qualité responsive et les procédures du système de design.
- Profils et bundles: Un profil superpose des bundles de plugins ordonnés et les modifications de l’utilisateur. Les équipes peuvent maintenir une composition orientée design qui réunit le fournisseur, les outils, les règles d’autorisation et les sources de skills dont elles ont réellement besoin.
- MCP et fonctionnalités externes: L’arborescence des sources inclut des fonctionnalités de client MCP, mais leur configuration reste destinée aux développeurs. Pendant la préversion, traitez les intégrations comme des plugins versionnés, et non comme un workflow stable activable par une simple case à cocher.
Avant de construire un workflow interne pérenne, inspectez l’arborescence effective avec `dsh --profile web --dump-config`. Le résultat indique ce qui est réellement monté et modifiable ; il est plus fiable que de supposer que chaque package du dépôt est actif dans le profil fourni.
Éviter les erreurs qui ruinent les résultats visuels
Les erreurs les plus courantes consistent à traiter une préversion comme un produit stable, une route texte comme un modèle de vision ou un cadre flexible comme une source de goût visuel.
- Verrouillez la version avant de personnaliser: Les changements incompatibles font explicitement partie de la politique de préversion. Verrouillez la version npm et limitez l’ampleur des modifications de profil pour pouvoir les examiner facilement après une mise à niveau.
- Vérifiez les modalités du modèle sélectionné: La route native de complétion de chat de DeepSeek n’accepte que le texte. Pour convertir une capture d’écran en code, sélectionnez et déclarez une route de fournisseur compatible avec les images au lieu de présumer que la pièce jointe sera comprise.
- Fournissez le goût esthétique sous forme de données: Donnez à l’agent les tokens, les composants de référence, les états de référence et les motifs interdits. Un environnement modulaire sans règles de design produit malgré tout une UI générique.
- Vérifiez ce que le profil monte réellement: Les packages du dépôt représentent des fonctionnalités disponibles, mais ne prouvent pas que le profil par défaut les active. Inspectez la configuration composée avant de documenter une intégration ou d’en dépendre.
Chaque mesure corrective relève du contexte et de la vérification. C’est précisément ce qu’une couche de design doit rendre reproductible, au lieu de laisser chaque projet le redécouvrir.
Ce que Harness apporte au design
DeepSeek Harness (`dsh`) est un harness d’agents sous licence MIT développé par DeepSeek AI. La page produit officielle présente le projet ; le dépôt GitHub contient le code source, l’historique des versions et les guides maintenus. La préversion publique destinée aux développeurs comprend une Web UI locale et des profils headless.
Son principe fondateur est que « tout est un plugin ». Cordis assemble une arborescence dans laquelle l’adaptateur de modèle, le registre d’outils, la boucle d’agent, le système de fichiers, le shell, la sandbox, les skills, les sous-agents, la persistance et l’UI peuvent être montés, remplacés ou modifiés au moyen de profils et de bundles. Les profils `web` et `headless` fournis sont des points de départ, pas des produits figés.
- Web UI locale: `npx @deepseek-ai/dsh web` démarre par défaut un espace de travail dans le navigateur à l’adresse `127.0.0.1:3080`. Ajoutez un modèle, choisissez un espace de travail et lancez des tâches depuis l’interface de conversation.
- Mode headless: Le profil `headless` lance une nouvelle session persistante, affiche la réponse finale, puis se termine — pratique pour les audits scriptés, les builds et les contrôles de design reproductibles.
- Environnement composable: Les profils superposent des bundles de plugins et vos propres modifications. Une équipe peut ainsi changer de fournisseur, d’outils, de règles et de comportement d’UI sans créer un fork de la boucle d’agent.
- Développeur : DeepSeek AI (projet officiel)
- Statut : préversion développeur ; des changements incompatibles sont à prévoir
- Licence : MIT
- Commande principale : `npx @deepseek-ai/dsh web`
DeepSeek Harness, DeepSeek TUI et Open Design
DeepSeek Harness et DeepSeek TUI sont des projets distincts dotés d’exécutables différents. Open Design prend désormais les deux en charge comme agents locaux : le choix porte donc sur l’environnement d’exécution que vous souhaitez utiliser, et non sur la possibilité pour l’un ou l’autre d’intégrer l’espace de travail de design.
| Outil | Description | Meilleur usage pour le design |
|---|---|---|
| DeepSeek Harness (`dsh`) | Harness officiel de DeepSeek AI axé sur les plugins, avec Web UI locale et profils headless ; adaptateur Open Design natif | Utilisation des sessions Harness, des fournisseurs et de la composition de plugins dans le flux d’artefacts d’Open Design |
| DeepSeek TUI (`deepseek` / `codewhale`) | Agent de codage distinct orienté terminal, doté de son propre adaptateur Open Design | Flux de travail DeepSeek orienté terminal, sans l’architecture de profils de Harness |
| OpenCode | Agent de terminal open source éprouvé et indépendant des fournisseurs | Changer de modèle dans un workflow TUI stable avec AGENTS.md et MCP |
| Claude Code | Agent de programmation éprouvé pour le terminal, les IDE, les applications de bureau et le Web | Raisonnement frontend, références riches en images et intégrations de design bien établies |
| Open Design | Espace de travail et bibliothèque de design pensés pour les agents, construits autour d’agents de programmation pris en charge | Systèmes de design soigneusement sélectionnés, skills, artefacts visuels et workflow local indépendant d’un fournisseur de modèles particulier |
Choisissez DeepSeek Harness pour bénéficier de sa Web UI officielle, de son système de profils, de son catalogue de modèles et de sessions Harness pouvant être reprises. Choisissez DeepSeek TUI dans Open Design si vous préférez le flux de travail orienté terminal de cet agent. Même si Open Design peut désormais intégrer l’un comme l’autre au même processus de design, leurs environnements d’exécution restent distincts.
Utiliser DeepSeek Harness pour le design : FAQ
-
01 Qu’est-ce que DeepSeek Harness ?
DeepSeek Harness (`dsh`) est le cadre d’exécution d’agents open source officiel de DeepSeek AI. Il réunit modèles, outils, contexte, sessions, règles, orchestration et UI au moyen d’une arborescence de plugins Cordis. La version publique est actuellement une préversion développeur sous licence MIT.
-
02 Comment installer et exécuter DeepSeek Harness ?
Installez la CLI testée avec `npm install -g @deepseek-ai/[email protected]`, puis exécutez `dsh web`. Passez l’avertissement concernant la préversion et enregistrez uniquement la clé API sous Paramètres → Modèles → DeepSeek → Clé API. Vérifiez le fournisseur et le modèle, puis arrêtez la Web UI avec `Ctrl+C`. Installez Open Design 0.19.1 ou une version ultérieure, relancez l’analyse des agents CLI locaux, connectez la carte Harness et cliquez sur Tester.
-
03 DeepSeek Harness est-il un projet officiel de DeepSeek ?
Oui. Le dépôt est publié sous l’organisation GitHub `deepseek-ai` et présente dsh comme un cadre d’exécution d’agents développé par DeepSeek AI. Il est sous licence MIT et explicitement désigné comme préversion développeur.
-
04 DeepSeek Harness peut-il créer une UI à partir de captures d’écran ?
Uniquement lorsque la route de fournisseur sélectionnée déclare accepter des images en entrée. Dans dsh, la propre route de complétion de chat de DeepSeek n’accepte que le texte, et le cadre rejette les images jointes avant leur envoi sur une telle route. Pour les captures d’écran, utilisez un fournisseur compatible avec les images ou décrivez la cible à l’aide du code, du DOM, des tokens et de spécifications écrites.
-
05 DeepSeek Harness prend-il en charge AGENTS.md et les skills ?
Oui. Son plugin d’instructions charge les fichiers de projet compatibles avec AGENTS.md et CLAUDE.md. Son fournisseur de skills par système de fichiers découvre les skills du projet dans `.dsh/skills` et `.agents/skills`, ainsi que les racines utilisateur et intégrées configurées.
-
06 Quelle est la différence entre DeepSeek Harness et DeepSeek TUI ?
Il s’agit d’outils distincts. DeepSeek Harness utilise l’exécutable `dsh` et constitue la Web UI et l’environnement headless officiels de DeepSeek AI, centrés sur les plugins. DeepSeek TUI utilise le lanceur `deepseek` ou `codewhale` et correspond à l’adaptateur DeepSeek distinct actuellement pris en charge par Open Design.
-
07 Open Design prend-il en charge DeepSeek Harness ?
Oui. Open Design détecte votre installation officielle de dsh, installe après confirmation explicite un composant de profil vérifié appartenant à Open Design, synchronise le catalogue de modèles Harness et exécute DeepSeek Harness comme agent local pris en charge nativement. Open Design n’installe pas dsh et ne reçoit pas les secrets des fournisseurs gérés par Harness.
-
08 Où DeepSeek Harness stocke-t-il ma clé d’API ?
Configurez la clé dans DeepSeek Harness, et non dans Open Design. Selon le guide officiel des modèles, les clés des fournisseurs sont stockées dans `$DSH_HOME/.credentials.yaml` comme des secrets accessibles uniquement en écriture : l’UI peut vérifier qu’une clé est configurée, mais ne peut ni lire ni afficher sa valeur en clair. Open Design ne vous demande pas de coller la clé dans l’application et ne l’écrit pas dans la configuration d’Open Design.
Concevoir avec DeepSeek Harness dans Open Design.
Installez l’environnement d’exécution dsh officiel, connectez-le une seule fois, puis utilisez les systèmes de design, les compétences, les modèles synchronisés et les aperçus locaux d’artefacts d’Open Design dans un même flux de travail.