POUR ALLER PLUS LOIN
Pour aller plus loin avec Devin
Tutoriels, documentation et guides pas à pas pour concevoir avec Devin, tels que répertoriés dans le guide publié.
Devin 
OpenDesign Concevoir avec
Devin dans
OpenDesign.
Comment concevoir des interfaces avec Devin dans OpenDesign : un build multi-étapes délégué puis restitué, une tâche de section de documentation du brief au fichier validé, et les limites à connaître avant de commencer.
Du brief à l’interface01 / Devin
VOUS APPORTEZ L'IDÉE↗
« Une section de documentation livrée
pendant que je révise autre chose. »
TROIS FAÇONS D'ABORDER CE GUIDE DEVIN
Choisissez par où commencer avec Devin
CE GUIDE · CONCEPTION D'INTERFACE
Construire une interface produit avec Devin
Ce guide : brief, références, règles de conception et un résultat HTML révisé.
Lire ce guide CONFIGURATIONConfigurer Devin de zéro
Voici le parcours complet, depuis une machine vierge jusqu'à un Devin pour Terminal capable de construire et de vérifier une UI.
Accéder à la configuration COMPARAISONComparer Devin à d'autres agents
En quoi Devin diffère de Codex, Claude Code, Cursor pour le travail de design, et quand choisir un autre workflow.
Voir la comparaisonSur cette page Exemple
Une tâche de design Devin complète
Une tâche de design Devin, du brief à l'interface
Une seule tâche, montrée de bout en bout : le brief et les contraintes que vous transmettez, l'artifact qui en résulte, et les vérifications que vous effectuez encore avant que ce soit terminé. L'interface ci-dessous est un exemple illustratif conçu pour cette page, pas un run Devin enregistré.
1Brief de conception et contraintes
BriefConcevez la section de prise en main d'un site de documentation développeur : navigation, un article avec un encadré et du code, et une barre « sur cette page ». Rendez toute la section sous la forme d'un seul fichier révisable. Bureau et téléphone.
- Système de conceptionToile papier OpenDesign : Albert Sans, un accent vert
- Points de rupture1440px pour le bureau et 390px pour le mobile, sans défilement horizontal
- InteractionsNavigation latérale, copie du code, mise en évidence de l'élément actif dans la barre « sur cette page »
- SortieUn fichier HTML autonome avec des points d'ancrage
data-od-idstables
2Répartition du travail : vous, Devin et OpenDesign
- Vous
Rédigez le brief, sélectionnez le système de conception et définissez les critères d'acceptation.
- Devin
Planifie la mise en page, écrit le HTML, le CSS et le JavaScript et le révise sur demande.
- OpenDesign
Fournit le système de conception et le skill, génère l'aperçu et enregistre chaque version comme un fichier dans le projet.
- Révision
La hiérarchie visuelle, l'espacement sur la grille de 8px, les deux points de rupture et chaque interaction sont vérifiés avant la remise.
3Artefact Devin : la page de documentation à 1440px et 390px
4Vérification avant transmission
Mise en page
Grille et espacement
Trois colonnes sur la grille de 8px ; la largeur de l'article reste sous 72 caractères.
Hiérarchie
Hiérarchie visuelle
Titre, encadré, puis étapes ; l'accent ne marque que l'élément de navigation actif.
Réactif
Mise en page mobile
La navigation devient une feuille ; la barre « sur cette page » se replie en menu de saut.
Interaction
Vérifications d'interaction
Copiez le code, sautez à un titre, ouvrez la feuille de navigation.
Adéquation
Quand Devin convient à la tâche, et quand ce n'est pas le cas
Devin convient quand
- Constructions autonomes en plusieurs étapes. Devin planifie et exécute des tâches front-end complètes — scaffolding, câblage des composants, exécution et tests — au lieu de s’arrêter à un extrait.
- Transfert vers un environnement cloud isolé. Les constructions plus longues peuvent être transférées à un agent cloud disposant de son propre ordinateur et continuer à s’exécuter après votre départ.
- Règles de projet + vérification navigateur. Le contexte du projet porte vos conventions ; un rendu dans un vrai navigateur vérifie le résultat sur différents points de rupture par rapport à vos références.
- Basé sur un compte, choix du modèle. Connectez-vous avec un compte Devin ; Devin fonctionne sur des modèles de pointe, y compris le SWE-1.6 propre à Cognition.
Choisissez un autre workflow quand
- Vous avez besoin de fichiers vectoriels modifiables. Le livrable est du HTML, pas un document de design modifiable. Vérifiez un workflow vectoriel distinct pour le format d'asset requis.
- Vous n'avez ni référence ni contrainte. Sans design system ni exemples, le résultat tend vers un aspect générique ; rédigez d'abord le brief.
- Vous ne disposez pas de l’identifiant requis par cet agent. Requis : compte Devin (Cognition) — connexion basée sur un compte, pas de BYOK. OpenDesign ne fournit ni ne relaie d’identifiants.
- Votre équipe travaille dans Codex ou Claude Code. Ces agents ont leurs propres pages ; l'espace de travail est le même, la configuration diffère. Voir agents associés.
Compatibilité
Prérequis Devin avant de commencer
Ce guide couvre Devin tel que connecté via l'application de bureau OpenDesign. Références publiées vérifiées le 6 septembre 2026.
Périmètre de l'outilDevin, par Cognition
Devin for Terminal est la version en ligne de commande de Devin, l'ingénieur logiciel IA autonome de Cognition. Il s'exécute comme un agent de code local ayant accès à votre base de code, à vos outils et à votre environnement, planifiant et exécutant seul des tâches en plusieurs étapes. Cette page porte sur la conception d'interfaces avec Devin via OpenDesign, non sur l'interface propre de Devin. Les notes de configuration d'OpenDesign répertorient les agents disponibles.
Comptes et authentificationCompte Devin (Cognition) — authentification par compte
Compte Devin (Cognition) — connexion par compte, pas BYOK. Authentifiez-vous avec votre compte Devin (Cognition) — les identifiants restent avec votre agent sur votre machine. Cette page ne garantit ni quota ni tarif.
Système et versionsApplication de bureau ou source
Consultez la page de téléchargement pour les builds de bureau. Les exigences Node.js et pnpm mentionnées dans le quickstart des sources s'appliquent à l'exécution depuis les sources, pas à l'installation d'un package de bureau. Version minimale compatible de Devin : non vérifiée ici.
Vérification de la connexionLe signal de réussite
Suivez les instructions de connexion affichées par votre version installée, puis exécutez une petite tâche. Vérifiez que Devin l'a traitée et que l'artefact s'ouvre. Un simple téléchargement n'établit pas une connexion fonctionnelle.
Commencez par l’application de bureau
Configuration de Devin en trois étapes
Téléchargez d'abord, terminez la configuration de Devin pour votre version installée, puis vérifiez un petit résultat. Vous n'avez pas besoin de compiler OpenDesign depuis les sources pour suivre ce parcours.
- 1
Téléchargez l’application de bureau OpenDesign
Choisissez le paquet adapté à votre ordinateur, installez-le et ouvrez l’application.
Télécharger OpenDesignPOINT DE CONTRÔLEL'application de bureau s'ouvre. Déjà installée ? Passez à l'étape suivante ; il n'est pas nécessaire de la télécharger à nouveau. - 2
Préparez votre connexion Devin
Suivez les instructions de Devin dans votre version installée. Authentifiez-vous avec votre compte Devin (Cognition) — les identifiants restent avec votre agent sur votre machine.
Documentation Devin# 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) accountD'après les notes de configuration de Devin dans le guide publié ; consultez la documentation du fournisseur pour la commande actuelle.
POINT DE CONTRÔLEConfirmez l'agent et le compte prévus. S'il n'est pas disponible, vérifiez la compatibilité avant de tenter une tâche plus importante. - 3
Exécutez une petite tâche Devin
Utilisez un petit brief afin de pouvoir juger l’ensemble du cycle, y compris une révision.
Brief de démarrageCréez un écran de paramètres avec un formulaire de profil et une confirmation d'enregistrement. Utilisez mes règles de design. Vérifiez-le aux largeurs bureau et mobile.
POINT DE CONTRÔLEOuvrez le résultat, testez l'état de sauvegarde et demandez une modification précise. Un fichier généré est le début de la revue, pas la fin.
Pour exécuter OpenDesign depuis les sources, suivez plutôt le guide de démarrage technique.
Le workflow de design Devin
Le workflow de design Devin en cinq étapes
La même tâche de page de documentation, suivie du brief au fichier vérifié. Chaque étape indique ce que vous fournissez, ce que fait Devin, ce qu'apporte OpenDesign et ce que vous vérifiez.
- 1
Brief de design
Langage simple, trois à six lignes. Nommez l'audience, la fonction de l'écran et les plateformes.
- VousRédigez le brief ; joignez une capture d'écran de référence si vous en avez une.
- DevinLit le brief et le fichier d'instructions du projet ; pose des questions en cas d'ambiguïté.
- OpenDesignFournit le projet, la surface de prompt et le skill correspondant au type d'artefact.
- VérificationConfirmez que le brief énonce les critères d'acceptation. Les ajouter maintenant coûte moins cher qu'après la génération.
- 2
Contraintes de design
Un design system et quelques règles strictes. C'est ce qui distingue un résultat conforme à votre marque d'un rendu générique.
- VousChoisissez un design system ; indiquez les points de rupture et les composants à utiliser obligatoirement.
- DevinCharge les tokens et les règles de posture de DESIGN.md dans le contexte avant d'écrire la moindre ligne.
- OpenDesignFournit la bibliothèque de design systems et associe celui choisi au modèle du skill.
- VérificationLes tokens correspondent à votre marque. Un accent unique, les bonnes polices, le bon rayon.
- 3
Générer l'interface
Devin rédige un fichier HTML autonome : mise en page, styles, interactions et points d'ancrage stables.
- VousAttendez, ou répondez à une question de clarification. Rien à configurer.
- DevinPlanifie les sections, écrit le HTML, le CSS et le JavaScript, exécute le fichier et corrige ce qui échoue.
- OpenDesignEnregistre l'artefact dans le dossier du projet et l'indexe pour l'aperçu.
- VérificationRien pour l'instant. Jugez le fichier une fois rendu, pas depuis la source.
- 4
Aperçu
Le fichier s'affiche dans OpenDesign aux largeurs que vous avez demandées. C'est ici que le design est évalué.
- VousChangez de largeur, parcourez les interactions, laissez des commentaires sur les éléments.
- DevinLit vos commentaires sur l'aperçu et prépare la révision suivante.
- OpenDesignAffiche l'aperçu, expose des cibles
data-od-idpour les commentaires et les modifications. - VérificationHiérarchie, contraste, débordement à 390px, états de focus, et si l'accent est utilisé avec parcimonie.
- 5
Réviser et vérifier
Demandez des modifications en pointant les éléments dans l'aperçu. Chaque révision est un nouveau fichier ; rien n'est écrasé silencieusement.
- VousTransformez les commentaires en demandes ; décidez quand la tâche est terminée.
- DevinApplique les modifications sur place et réexécute le fichier.
- OpenDesignConserve les versions côte à côte ; exporte une image ou le HTML une fois terminé.
- VérificationRevérifiez uniquement la zone modifiée, puis toute la page une fois à chaque point de rupture.
Ressources
Ressources de design Devin
Skills Parcourir les skills Systèmes de design Parcourir les systèmes Modèles Parcourir les modèles
Skills de design
Les types d'artefacts que Devin peut produire dans OpenDesign, un skill par type.
Design systems
Tokens de marque et composants à lier avant que Devin ne génère quoi que ce soit.
Modèles
Points de départ pour des présentations, des pages d'atterrissage et des écrans produit.
Limites
Limites de Devin, vérifications manuelles et solutions de repli
- PortéeIl peut transférer une session à un agent cloud en bac à sable qui continue de travailler de manière asynchrone, afin que les builds plus longs se terminent après que vous ayez fermé votre ordinateur portable. Cette page couvre Devin en tant qu'agent connecté à OpenDesign, pas toutes les fonctionnalités de Devin.
- Limites d'utilisationLes limites d'utilisation et le coût dépendent des identifiants que vous utilisez (compte Devin (Cognition) — connexion basée sur un compte, pas BYOK). Cette page ne fait aucune affirmation concernant les quotas gratuits.
- RéseauDes fichiers de projet locaux ne signifient pas une inférence hors ligne. Vérifiez les paramètres du fournisseur et les politiques de données de votre agent avant de partager des informations sensibles.
- La sortie est en HTMLLes artefacts sont des fichiers HTML, pas des fichiers de design vectoriels.
- Revue manuelleL'accessibilité, le contenu réel, l'adéquation à la marque et la justesse des interactions sont vérifiés par vous dans l'aperçu. Considérez toute autovérification de l'agent comme une première passe.
- Solution de repliSi l'agent est indisponible ou qu'une tâche échoue, vérifiez les instructions de connexion et l'authentification de la version installée. Conservez l'erreur et le dernier artefact fonctionnel avant de modifier la configuration.
FAQ
Questions fréquentes sur Devin et OpenDesign
Devin for Terminal peut-il vraiment faire du travail de design ?
Oui — avec un skill esthétique, un design system et de véritables images de référence en contexte, Devin produit une UI responsive de qualité production, et en tant qu'agent autonome, il peut construire, exécuter et vérifier le résultat par rapport à vos références. Sans ce contexte, il a tendance à se replier sur un rendu générique, ce qui est précisément le manque qu'OpenDesign comble.
Comment se connecter à Devin ?
Devin fonctionne par compte : vous vous connectez avec un compte Devin (Cognition) plutôt qu'en apportant votre propre clé de modèle. Installez Devin for Terminal, exécutez-le dans votre projet, et authentifiez-vous au premier lancement. OpenDesign ne fait jamais transiter vos identifiants — votre agent les utilise directement.
Qu'est-ce qui rend Devin particulièrement adapté au design ?
C'est un ingénieur logiciel entièrement autonome : il planifie et exécute des builds front-end en plusieurs étapes de bout en bout, et peut transférer une session à un agent cloud en bac à sable qui continue de travailler après votre départ. Le goût provient toujours du design system, du skill et des références que vous fournissez.
Devin ou Claude Code pour le design frontend ?
Les deux sont solides. Claude Code est réputé pour des décisions de design précises et conscientes du codebase ; l'atout de Devin est une exécution entièrement autonome de bout en bout avec un transfert vers le cloud en bac à sable. De nombreuses équipes utilisent les deux — OpenDesign vous permet de changer d'agent sans modifier votre workflow de design.
Devin s'exécute-t-il dans un bac à sable ?
Devin for Terminal s'exécute localement avec accès à votre codebase et votre environnement, et il peut transférer une session à un agent cloud qui s'exécute dans son propre environnement en bac à sable — utile pour les builds plus longs, les tests et la création de PR qui se poursuivent de manière asynchrone.
Démarrer une première tâche de design avec Devin
Commencez par une petite tâche, évaluez l'aller-retour, puis apportez le véritable brief. Choisissez l'option correspondant à votre configuration ; la page ne la détecte pas.