POUR ALLER PLUS LOIN
Pour aller plus loin avec Trae CLI
Tutoriels, documentation et démonstrations pour concevoir avec Trae CLI, tels que listés dans le guide publié.
Trae CLI 
OpenDesign Concevoir avec
Trae CLI dans
OpenDesign.
Comment concevoir des interfaces avec Trae CLI dans OpenDesign : le modèle que vous apportez, un véritable navigateur qui vérifie chaque passage, une tâche de landing page du brief au fichier validé, et les limites à connaître avant de commencer.
Du brief à l'interface01 / Trae CLI
VOUS APPORTEZ L'IDÉE↗
« Une page produit que nous pouvons vérifier
dans un vrai navigateur, à chaque passage. »
Trois façons d'aborder ce guide Trae CLI
Choisissez par où commencer avec Trae CLI
CE GUIDE · CONCEPTION D'INTERFACE
Concevoir une interface produit avec Trae CLI
Ce guide : brief, références, règles de conception et un résultat HTML révisé.
Lire ce guide CONFIGURATIONConfigurer Trae CLI à partir de zéro
Voici le parcours complet, d'une machine vierge à un Trae CLI capable de construire et de vérifier l'UI.
Accéder à la configuration COMPARAISONComparer Trae CLI à d'autres agents
En quoi Trae CLI 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 Trae CLI complète
Une tâche de design Trae CLI, du brief à l'interface
Une seule tâche, montrée de bout en bout : le brief et les contraintes que vous transmettez, l'artefact 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, et non une exécution enregistrée de Trae CLI.
1Brief de conception et contraintes
BriefConcevez la page d'accueil d'un produit de documentation : hero, une démo de recherche à l'apparence fonctionnelle, trois bénéfices et des logos clients. Vérifiez chaque itération dans un vrai navigateur aux deux largeurs.
- 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
- InteractionsÉtat de focus de la démo de recherche, états du CTA, défilement de la rangée de logos
- SortieUn fichier HTML autonome avec des points d'ancrage
data-od-idstables
2Répartition du travail : vous, Trae CLI et OpenDesign
- Vous
Rédigez le brief, sélectionnez le système de conception et définissez les critères d'acceptation.
- Trae CLI
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 Trae CLI : la page produit à 1440px et 390px
4Vérification avant transmission
Mise en page
Grille et espacement
Hero et bénéfices sur la grille de 8px ; la démo de recherche conserve une hauteur fixe pour que la page ne bouge pas.
Hiérarchie
Hiérarchie visuelle
Titre, démo de recherche, puis bénéfices ; l'accent ne marque que le bouton de démarrage.
Réactif
Mise en page mobile
Le texte, puis la démo, puis les bénéfices ; les logos défilent horizontalement dans leur propre rangée.
Interaction
Vérifications d'interaction
Faites le focus sur la démo, suivez les deux CTA, faites défiler la rangée de logos.
Adéquation
Quand Trae CLI convient à la tâche, et quand il ne convient pas
Trae CLI convient quand
- Apportez votre propre modèle. Agnostique au modèle par conception, vous pouvez donc orienter le travail d’UI vers le fournisseur de LLM qui raisonne le mieux sur votre frontend — et en changer plus tard.
- Ouvert et piloté par la configuration. Sous licence MIT et figé dans un trae_config.yaml, afin que le comportement de l'agent soit transparent et reproductible au sein d'une équipe.
- Boucle de navigateur réel. Les outils de fichiers, de shell et de raisonnement lui permettent de construire, de lancer un serveur de développement et de vérifier l'UI sur différents breakpoints.
- Gratuit pour démarrer. L'agent lui-même est gratuit ; seul coût, votre fournisseur choisi — ou aucun avec un modèle Ollama local.
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 n'avez pas l'identifiant requis par cet agent. Requis : votre propre clé API de fournisseur LLM (bring your own key) — OpenAI, Anthropic, Google, OpenRouter, Doubao, Azure, ou Ollama local. OpenDesign ne fournit ni ne relaie de identifiants.
- Votre équipe travaille dans Qoder ou Kimi. 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 Trae CLI avant de commencer
Ce guide couvre Trae CLI connecté via l'application de bureau OpenDesign. Références publiées vérifiées le 6 septembre 2026.
Périmètre de l'outilTrae CLI, par ByteDance
Trae CLI est l'agent IA de terminal open source (MIT) de ByteDance, publié sous le nom de projet trae-agent. Il lit votre base de code, modifie des fichiers et exécute des commandes shell à partir de tâches en langage naturel. Cette page traite de la conception d'interfaces avec Trae CLI via OpenDesign, et non de l'interface propre à Trae CLI. Les notes de configuration d'OpenDesign listent les agents disponibles.
Comptes et authentificationVotre propre clé API de fournisseur LLM (BYOK) —
Votre propre clé API de fournisseur LLM (BYOK) — OpenAI, Anthropic, Google, OpenRouter, Doubao, Azure, ou Ollama local. Authentifiez-vous avec votre propre clé de fournisseur LLM (BYOK) — les identifiants restent 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 prérequis Node.js et pnpm indiqués dans le quickstart source s'appliquent à l'exécution depuis les sources, pas à l'installation d'un package de bureau. Version minimale compatible de Trae CLI : 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 Trae CLI l'a traitée et que le résultat s'ouvre correctement. Un simple téléchargement n'établit pas une connexion fonctionnelle.
Commencez par l’application de bureau
Configuration de Trae CLI en trois étapes
Téléchargez d'abord, terminez la configuration de Trae CLI 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 cette voie.
- 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 Trae CLI
Suivez les instructions de Trae CLI de votre version installée. Authentifiez-vous avec votre propre clé de fournisseur LLM (BYOK) — les identifiants restent sur votre machine.
Documentation Trae# 1. Get Trae CLI (trae-agent) from source — needs uv git clone https://github.com/bytedance/trae-agent.git cd trae-agent uv sync --all-extras source .venv/bin/activate # 2. Authenticate by pointing it at your LLM provider key # set it in the environment (or a trae_config.yaml file) export OPENAI_API_KEY=... # or ANTHROPIC_API_KEY, GOOGLE_API_KEY, etc.D'après les notes de configuration de Trae CLI dans le guide publié ; vérifiez 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 Trae CLI
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 conception Trae CLI
Le workflow de conception Trae CLI en cinq étapes
La même tâche de page produit, suivie du brief au fichier vérifié. Chaque étape indique ce que vous fournissez, ce que fait Trae CLI, 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.
- Trae CLILit 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.
- Trae CLICharge les tokens et règles de posture de DESIGN.md dans le contexte avant d'écrire une seule 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
Trae CLI écrit un fichier HTML autonome : mise en page, styles, interactions et points d'ancrage stables.
- VousAttendez, ou répondez à une question de clarification. Rien à configurer.
- Trae CLIPlanifie 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.
- Trae CLILit vos commentaires sur l'aperçu et prépare la prochaine révision.
- 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.
- Trae CLIApplique les changements 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 conception pour Trae CLI
Skills Parcourir les skills Systèmes de design Parcourir les systèmes Modèles Parcourir les modèles
Skills de design
Les types de produits que Trae CLI peut générer dans OpenDesign, un skill par type.
Design systems
Tokens de marque et composants à lier avant que Trae CLI 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, vérifications manuelles et solutions de repli pour Trae CLI
- PérimètreIl est agnostique par rapport au modèle — vous apportez votre propre clé de fournisseur de LLM (OpenAI, Anthropic, Google, OpenRouter, Doubao, Azure, ou un modèle Ollama local) — et son comportement est fixé dans un fichier de configuration que vous pouvez versionner. Cette page couvre Trae CLI en tant qu'agent connecté à OpenDesign, pas l'ensemble des fonctionnalités de Trae CLI.
- Limites d'utilisationLes limites d'utilisation et le coût dépendent de l'identifiant que vous utilisez (votre propre clé API de fournisseur de LLM — OpenAI, Anthropic, Google, OpenRouter, Doubao, Azure, ou Ollama local). Cette page ne fait aucune affirmation concernant des 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 Trae CLI et OpenDesign
Trae CLI peut-il vraiment faire du travail de design ?
Oui — avec un skill esthétique, un design system et un véritable contexte de référence, Trae CLI produit une UI responsive de qualité production, et comme il est agnostique par rapport au modèle, vous pouvez orienter le travail vers le fournisseur qui raisonne le mieux sur votre frontend. Sans ce contexte, il a tendance à revenir à un aspect générique, ce qui est précisément la lacune que comble OpenDesign.
Dois-je payer pour concevoir avec Trae CLI ?
Trae CLI lui-même est gratuit et open source (MIT). Vous apportez votre propre clé de fournisseur de LLM, donc votre seul coût est celui facturé par ce fournisseur — ou rien si vous exécutez un modèle local via Ollama. OpenDesign ne fait jamais transiter vos identifiants, dans un cas comme dans l'autre.
Qu'est-ce qui rend Trae CLI particulièrement adapté au design ?
Deux choses : il est agnostique par rapport au modèle, vous choisissez donc le fournisseur de LLM le mieux adapté au travail frontend, et il est entièrement ouvert et piloté par configuration, ce qui rend son comportement transparent et reproductible au sein d'une équipe. Mais le goût provient toujours du design system, du skill et des références que vous fournissez.
Trae CLI ou Claude Code pour le design frontend ?
Les deux sont compétents. Claude Code est reconnu pour des décisions de design précises et conscientes de la base de code ; l'atout de Trae CLI est d'être open source et flexible en matière de fournisseur, donc vous n'êtes jamais lié à un seul modèle. De nombreuses équipes utilisent les deux — OpenDesign vous permet de changer d'agent sans modifier votre workflow de design.
De quoi OpenDesign a-t-il besoin pour exécuter Trae CLI ?
OpenDesign pilote le binaire trae-cli de Trae CLI via l'Agent Client Protocol (ACP) et utilise votre clé de fournisseur de LLM configurée. Vous sélectionnez Trae CLI comme agent, le pointez vers un fournisseur, et OpenDesign fournit tout autour le contexte de design soigneusement préparé.
Démarrer une première tâche de design avec Trae CLI
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.