Codex
Workflow, plugins et diapositives pour concevoir des interfaces avec Codex.
L’ANNUAIRE DE DESIGN DES AGENTS
Votre agent de code.
Un meilleur
workflow de design.
Guides de workflow, notes de configuration et ressources de design pour 22 agents de code, afin que l’outil que vous utilisez déjà puisse transformer un brief en interface réfléchie.
22 guides d’agents, un seul espace de travail.
› Use the reference. Build the landing page.
Reading DESIGN.md · binding tokens…
Writing landing-page.html ✓
Your agentCodexClaude CodeOpenCode+19
Une référence. Votre agent. Quelque chose de résolument vôtre.
Workflow illustratif, pas une capture d'écran de produit.
LE WORKFLOW DE DESIGN
Trois rôles dans un workflow de design avec agent de code
Un agent de code transforme des instructions en code. Un workflow de design ajoute les références, contraintes et revues qui transforment ce code en interface utilisable.
Ce qu’est un agent de design- 01Votre agent de code
- Lit le projet, apporte des modifications et répond aux retours. Conservez l’outil que vous utilisez déjà.
- 02OpenDesign
- L’espace de travail pour le brief, les ressources de design et la revue visuelle. Chaque guide d’agent explique la configuration.
- 03Votre jugement
- Choisissez la référence, définissez ce qui doit rester cohérent et vérifiez le résultat sur de vrais écrans.
GUIDES D’AGENTS DE CODE
Guides de workflow de design pour 22 agents de code
Commencez par l’outil que vous utilisez déjà. Chaque guide couvre le rôle de l’agent, ce qu’il faut préparer et l’étape suivante. La liste est un annuaire, pas un classement.
22 guides
Claude Code
Un workflow de design frontend avec Claude Code, du premier brief à la revue finale.
DeepSeek Harness
La configuration du harness, son rôle dans le workflow et les ressources de design qu'il peut utiliser.
OpenCode
Un workflow de design construit autour des outils et des fournisseurs de modèles que vous choisissez.
Grok
Grok Build
Configuration, prérequis et première tâche de design visuel avec Grok Build.
Cursor
Cursor Agent
Comment l'éditeur Cursor et le workflow de design s'articulent au sein d'un même projet.
DeepSeek
DeepSeek TUI
Le DeepSeek TUI, ses prérequis et ses différences avec DeepSeek Harness.
Hermes
Ressources de design, options d'extension et prérequis pour un workflow Hermes.
Antigravity
D'abord la configuration, puis un workflow de design frontend et de revue avec Antigravity.
Kimi
Kimi CLI
Éléments d'entrée, contexte et configuration à préparer avant une première tâche de design avec Kimi CLI.
Qwen
Qwen Code
Comment Qwen Code, le fournisseur de modèle et le workflow de design s'articulent.
Trae CLI
Configuration de Trae CLI et un point de départ pour le design d'interface.
Qoder
Qoder CLI
Configuration de Qoder CLI et le workflow de design qui le complète.
Mistral Vibe
Mistral Vibe CLI
Le Mistral Vibe CLI comme outil de design, distinct du vibe design en général.
Gemini
Gemini CLI
Un workflow d'UI guidé par des références avec Gemini CLI, de la configuration à la revue.
Copilot
GitHub Copilot CLI
Contexte de dépôt et revue dans un workflow de design d'interface avec GitHub Copilot CLI.
Kilo
Configuration, modes et un point de départ concret pour le design avec Kilo.
Aider
Partez d'un code existant avec Aider, apportez un changement réfléchi et examinez la différence.
Pi
Configuration, extensions et ressources de design pour Pi.
Kiro
Kiro CLI
Où les exigences et les décisions d'interface s'inscrivent dans un workflow Kiro CLI.
Devin
Devin for Terminal
Cadrer la tâche, définir le passage de relais et examiner l'interface avec Devin for Terminal.
Reasonix
DeepSeek Reasonix
Comprendre le projet, ses relations et par où commencer avec DeepSeek Reasonix.
Aucun guide correspondant
Essayez un autre nom ou revenez aux 22 guides.
Un guide ne garantit pas la compatibilité. Vérifiez les exigences relatives à l’outil, à l’authentification et à la plateforme sur sa page avant de vous connecter.
APPLICATION DE BUREAU
Téléchargez OpenDesign et connectez votre agent de code
Téléchargez OpenDesign, suivez le guide d’installation de votre agent et apportez une référence au premier projet.
- 01
Télécharger OpenDesign
Choisissez la version pour macOS ou Windows et ouvrez l’application.
- 02
Connectez votre agent
Vérifiez les prérequis dans son guide ci-dessus et suivez la procédure d’installation qu’il décrit.
- 03
Démarrez une première tâche
Apportez une référence, un brief court ou un modèle parmi les ressources ci-dessous.
RESSOURCES DE CONCEPTION
Ressources de conception pour agents de code
Des workflows réutilisables, des tokens de marque et des points de départ qu’un agent peut intégrer à une tâche.
QUESTIONS FRÉQUENTES
Agents de code, modèles et skills expliqués
Vous n'avez pas besoin d'un nouvel agent de code pour ce workflow. Ces réponses couvrent les termes et les pages associées.
Dois-je changer d'agent ?
Non. Commencez par le guide de votre outil actuel. La configuration et les fonctionnalités disponibles dépendent de cet outil et de sa version ; le répertoire ne les classe pas.
Les agents, les modèles et les skills sont-ils la même chose ?
Non. Un modèle alimente le raisonnement, un agent opère sur la tâche, et un skill fournit une méthode de travail réutilisable. Le répertoire des skills répertorie cette dernière couche.
Je compare des outils de design. Où dois-je aller ?
Utilisez les comparaisons d'outils pour les questions de remplacement et de coexistence. Ces guides d'agents expliquent comment travailler avec un outil que vous utilisez déjà.
Quelle doit être ma première tâche ?
Choisissez une petite interface et apportez une référence. Vérifiez sa mise en page, une interaction et un écran étroit avant d'élargir. Un template peut vous fournir un point de départ.
Commencer
Commencez avec l'agent de code que vous utilisez déjà
Télécharger OpenDesign Notes de configuration
Versions bureau pour macOS et Windows. Sur téléphone, enregistrez le guide de configuration et poursuivez sur votre ordinateur.
