OpenCode 
OpenDesign Comment concevoir des interfaces avec OpenCode dans OpenDesign : design.md lié avant toute génération, le fournisseur que vous choisissez, une tâche de boîte de réception partagée du brief au fichier validé, et les limites à connaître avant de commencer.
« Une boîte de réception partagée construite sur
design.md, pas sur des valeurs par défaut. »
TROIS FAÇONS D'ABORDER CE GUIDE OPENCODE
Ce guide : brief, références, règles de conception et un résultat HTML révisé.
Lire ce guide CONFIGURATIONVoici le chemin complet, d'une machine vierge jusqu'à un OpenCode capable de construire et de vérifier l'UI.
Accéder à la configuration COMPARAISONEn quoi OpenCode diffère de Codex, Claude Code, Cursor pour le travail de design, et quand choisir un autre workflow.
Voir la comparaisonUne tâche de design OpenCode complète
Une tâche unique, présenté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, et non l'enregistrement d'une exécution OpenCode.
BriefConcevez une boîte de réception d’équipe partagée : liste des conversations avec propriétaires, une vue de fil et une colonne latérale droite avec le contexte client. Liez le système design.md avant de générer. Bureau et téléphone.
data-od-id stablesRédigez le brief, sélectionnez le système de conception et définissez les critères d'acceptation.
Planifie la mise en page, écrit le HTML, le CSS et le JavaScript et le révise sur demande.
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.
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.
Trois volets sur la grille de 8px ; la colonne de contexte se réduit avant le fil.
Le propriétaire et le sujet en premier ; l’accent marque uniquement « en attente de nous ».
La liste, puis le fil au toucher ; la colonne de contexte devient une feuille.
Filtrez par propriétaire, ouvrez un fil, basculez la colonne, envoyez une réponse.
Adéquation
Compatibilité
Ce guide couvre OpenCode connecté via l'application de bureau OpenDesign. Références publiées vérifiées le 6 septembre 2026.
OpenCode est un agent de code IA open-source (MIT) pour terminal — un TUI plus des interfaces desktop et IDE — maintenu par Anomaly (l’équipe SST) sur github.com/anomalyco/opencode. Cette page traite de la conception d’interfaces avec OpenCode via OpenDesign, pas de l’interface propre d’OpenCode. Les notes de configuration d’OpenDesign répertorient les agents disponibles.
Clés fournisseur via la configuration OpenCode (BYOK). OpenCode utilise vos clés fournisseur via sa propre configuration (BYOK) — rien n’est relayé. Cette page ne promet ni quota ni prix.
Consultez la page de téléchargement pour les builds de bureau. Les prérequis Node.js et pnpm indiqués dans le guide de démarrage rapide des sources s'appliquent à l'exécution depuis les sources, pas à l'installation d'un package de bureau. Version minimale compatible d'OpenCode : non vérifiée ici.
Suivez les instructions de connexion affichées par votre version installée, puis exécutez une petite tâche. Vérifiez qu'OpenCode 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
Téléchargez d'abord, terminez la configuration d'OpenCode 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.
Choisissez le paquet adapté à votre ordinateur, installez-le et ouvrez l’application.
Télécharger OpenDesignSuivez les instructions OpenCode de votre version installée. OpenCode utilise vos clés fournisseur via sa propre configuration (BYOK) — rien n'est relayé par un proxy.
# 1. Install OpenCode
curl -fsSL https://opencode.ai/install | bash
# or: npm i -g opencode-ai@latest
# or: brew install sst/tap/opencode
# 2. Start the TUI in your project, then authenticate your provider
opencode # then run /login and pick your provider + paste your keyD'après les notes de configuration OpenCode du guide publié ; consultez la documentation du fournisseur pour la commande actuelle.
Utilisez un petit brief afin de pouvoir juger l’ensemble du cycle, y compris une révision.
Cré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.
Pour exécuter OpenDesign depuis les sources, suivez plutôt le guide de démarrage technique.
Le workflow de conception OpenCode
La même tâche de boîte de réception d'équipe, suivie du brief au fichier vérifié. Chaque étape indique ce que vous fournissez, ce que fait OpenCode, ce qu'apporte OpenDesign et ce que vous vérifiez.
Langage simple, trois à six lignes. Nommez l'audience, la fonction de l'écran et les plateformes.
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.
OpenCode écrit un fichier HTML autonome : mise en page, styles, interactions et hooks stables.
Le fichier s'affiche dans OpenDesign aux largeurs que vous avez demandées. C'est ici que le design est évalué.
data-od-id pour les commentaires et les modifications.Demandez des modifications en pointant les éléments dans l'aperçu. Chaque révision est un nouveau fichier ; rien n'est écrasé silencieusement.
Ressources
Tutoriels, documentation et démonstrations pour concevoir avec OpenCode, tels que listés dans le guide publié.
Les types d'artefacts qu'OpenCode peut produire dans OpenDesign, un skill par type.
Tokens de marque et composants à lier avant qu'OpenCode ne génère quoi que ce soit.
Points de départ pour des présentations, des pages d'atterrissage et des écrans produit.
Limites
FAQ
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.