DESIGN MODE : éditez n’importe quel site en direct, votre agent écrit le code
📌 DESIGN MODE est une extension de navigateur gratuite et open source qui transforme n’importe quel site en surface de design : vous cliquez sur un élément, vous le modifiez avec de vrais contrôles, et votre agent de code reçoit un diff prêt à appliquer. Chrome, Firefox, aucun fichier de mock, aucune copie collée.
Le scénario est celui de la boucle « vibe coding », sans les allers-retours. Vous voulez un bouton plus rond, plus d’espace, un autre bleu ? Au lieu de re-expliquer votre intention dans le chat, vous la dessinez sur la page réelle : le panneau latéral affiche les propriétés de l’élément sélectionné, des curseurs et des color pickers remplacent le CSS à saisir, et chaque retouche est enregistrée. Un clic sur « Copy as Prompt » ou « Send to Agent » envoie l’ensemble, au format MCP, à Claude Code, Cursor, Windsurf, Cline, Claude Desktop ou tout agent qui parle le protocole.
Le cœur du système, c’est un petit pont nommé MCP avec trois modes de connexion. Le Cloud utilise un relais hébergé sur mcp.designmode.app : on colle un jeton dans la configuration de son agent et c’est prêt, sans serveur local. Le mode Local lance un compagnon sur la machine avec une seule commande npm — rien ne sort de chez vous, et plusieurs sessions d’agents se partagent le même canal sur le port 9960. Le mode Self-hosted reprend le code du Cloud (open source) pour l’installer sur son propre Node.js avec Redis. Libre à chacun de choisir sa posture de confidentialité.
Huit outils MCP sont exposés à l’agent. get_changes lit toutes les modifications (styles, textes, DOM) ainsi que les commentaires, avec pour chaque changement le sélecteur CSS unique de l’élément. apply_changes renvoie du CSS dans le navigateur pour un aperçu en direct. get_screenshot capture le viewport ou un élément précis et le retourne comme image à l’agent. export_changes transforme le diff en CSS, Tailwind, SCSS ou objet JSX. set_change_status et mark_comment_resolved permettent à l’agent de suivre ses tâches au fil de l’eau. Les courbes de easing et de physique du mouvement passent dans les valeurs CSS, sans outil séparé.
Côté interface, l’extension ne se limite pas aux styles. Le panneau Layers affiche l’arbre DOM de la page et permet de le réorganiser. L’onglet Changes est un journal complet : chaque édition peut être annulée individuellement, ou appliquée en lot à tous les éléments correspondants. L’onglet Tokens repère les variables CSS du site, détecte les dérives de design système et propose de regrouper les valeurs identiques sous un token. Des commentaires jaunes épinglés sur les éléments partent dans le même prompt que les modifications. La touche Alt+D ouvre le panneau, Alt+I bascule le mode inspect.
Design Mode est distribué sur le Chrome Web Store (environ 1 000 utilisateurs, note 5/5) et les modules Firefox, par son créateur Sandeep Baskaran. Le code est en TypeScript, sous licence MIT, avec le dépôt GitHub à 46 étoiles. Pas de compte obligatoire, pas de télémétrie par défaut, et les données d’édition restent dans le stockage local du navigateur.
Je trouve l’approche juste : le problème du design assisté par agent n’est pas un manque d’outils, c’est un manque de communication. Enlever l’étape de description et brancher la page réelle sur l’agent change le rapport de force — l’outil reste entre vos mains, et l’agent exécute exactement ce que vous avez dessiné.
Sources
- Site officiel — Design Mode
- GitHub — SandeepBaskaran/design-mode
- Chrome Web Store — Design Mode
- Firefox Add-ons — Design Mode
