Codex
Workflow, plugins y diapositivas para diseñar interfaces con Codex.
EL DIRECTORIO DE DISEÑO DE AGENTES
Su agente de código.
Un mejor flujo
de diseño.
Guías de workflow, notas de configuración y recursos de diseño para 22 agentes de código, para que la herramienta que ya usa pueda convertir un briefing en una interfaz bien pensada.
22 guías de agentes, un solo espacio de trabajo.
› Use the reference. Build the landing page.
Reading DESIGN.md · binding tokens…
Writing landing-page.html ✓
Your agentCodexClaude CodeOpenCode+19
Una referencia. Su agente. Algo claramente suyo.
Flujo de trabajo ilustrativo, no una captura de producto.
EL WORKFLOW DE DISEÑO
Tres roles en un workflow de diseño con agente de código
Un agente de código convierte instrucciones en código. Un workflow de diseño añade las referencias, restricciones y revisión que convierten ese código en una interfaz utilizable.
Qué es un agente de diseño- 01Su agente de código
- Lee el proyecto, hace cambios y responde a los comentarios. Conserve la herramienta que ya usa.
- 02OpenDesign
- El espacio de trabajo para el briefing, los recursos de diseño y la revisión visual. Cada guía de agente explica la configuración.
- 03Su criterio
- Elija la referencia, defina qué debe mantenerse consistente y revise el resultado en pantallas reales.
GUÍAS DE AGENTES DE CÓDIGO
Guías de workflow de diseño para 22 agentes de código
Empiece con la herramienta que ya usa. Cada guía cubre el rol del agente, qué preparar y el siguiente paso. La lista es un directorio, no un ranking.
22 guías
Claude Code
Un workflow de diseño frontend con Claude Code, desde el primer briefing hasta la revisión final.
DeepSeek Harness
Configuración del harness, su papel en el workflow y los recursos de diseño que puede usar.
OpenCode
Un workflow de diseño construido alrededor de las herramientas y proveedores de modelos que usted elija.
Grok
Grok Build
Configuración, requisitos previos y una primera tarea de diseño visual con Grok Build.
Cursor
Cursor Agent
Cómo se combinan el editor Cursor y el workflow de diseño en un solo proyecto.
DeepSeek
DeepSeek TUI
El DeepSeek TUI, sus requisitos previos y en qué se diferencia de DeepSeek Harness.
Hermes
Recursos de diseño, opciones de extensión y requisitos previos para un workflow con Hermes.
Antigravity
Primero la configuración y luego un workflow de diseño frontend y revisión con Antigravity.
Kimi
Kimi CLI
Entradas, contexto y configuración que preparar antes de una primera tarea de diseño con Kimi CLI.
Qwen
Qwen Code
Cómo se conectan Qwen Code, el proveedor de modelos y el workflow de diseño.
Trae CLI
Configuración de Trae CLI y un punto de partida para el diseño de interfaces.
Qoder
Qoder CLI
Configuración de Qoder CLI y el workflow de diseño que lo complementa.
Mistral Vibe
Mistral Vibe CLI
Mistral Vibe CLI como herramienta de diseño, distinto del diseño vibe en general.
Gemini
Gemini CLI
Un workflow de UI guiado por referencias con Gemini CLI, desde la configuración hasta la revisión.
Copilot
GitHub Copilot CLI
Contexto del repositorio y revisión en un workflow de diseño de interfaces con GitHub Copilot CLI.
Kilo
Configuración, modos y un punto de partida práctico para el diseño con Kilo.
Aider
Parta de código existente con Aider, realice un cambio considerado y revise la diferencia.
Pi
Configuración, extensiones y recursos de diseño para Pi.
Kiro
Kiro CLI
Dónde encajan los requisitos y las decisiones de interfaz en un workflow con Kiro CLI.
Devin
Devin for Terminal
Enmarcar la tarea, definir el traspaso y revisar la interfaz con Devin for Terminal.
Reasonix
DeepSeek Reasonix
Entender el proyecto, sus relaciones y por dónde empezar con DeepSeek Reasonix.
Ninguna guía coincidente
Pruebe con otro nombre o vuelva a las 22 guías.
Una guía no garantiza la compatibilidad. Consulte los requisitos de herramienta, autenticación y plataforma en su página antes de conectar.
APLICACIÓN DE ESCRITORIO
Descargue OpenDesign y Conecte su Agente de Código
Descargue OpenDesign, siga la guía de configuración de su agente y lleve una referencia al primer proyecto.
- 01
Descargar OpenDesign
Elija la versión para macOS o Windows y abra la aplicación.
- 02
Conecte su Agente
Consulte los requisitos previos en la guía anterior y complete la configuración que describe.
- 03
Inicie una Primera Tarea
Lleve una referencia, un briefing corto o una plantilla de los recursos a continuación.
RECURSOS DE DISEÑO
Recursos de Diseño para Agentes de Código
Workflows reutilizables, tokens de marca y puntos de partida que un agente puede vincular a una tarea.
PREGUNTAS FRECUENTES
Agentes de código, modelos y skills explicados
No necesita un nuevo agente de código para este flujo de trabajo. Estas respuestas abarcan los términos y las páginas relacionadas.
¿Necesito cambiar de agente?
No. Empiece con la guía de su herramienta actual. La configuración y las capacidades disponibles dependen de esa herramienta y versión; el directorio no las clasifica.
¿Son lo mismo los agentes, los modelos y las skills?
No. Un modelo impulsa el razonamiento, un agente actúa sobre la tarea y una skill aporta una forma reutilizable de trabajar. El directorio de skills recoge esa última capa.
Estoy comparando herramientas de diseño. ¿Adónde debo ir?
Use las comparativas de herramientas para preguntas sobre sustitución y coexistencia. Estas guías de agentes explican cómo trabajar con una herramienta que ya usa.
¿Cuál debería ser mi primera tarea?
Elija una interfaz pequeña y aporte una referencia. Revise su diseño, una interacción y una pantalla estrecha antes de ampliar. Una plantilla puede darle un punto de partida.
Comenzar
Empiece con el agente de código que ya usa
Descargar OpenDesign Notas de configuración
Compilaciones de escritorio para macOS y Windows. En un teléfono, guarde la guía de configuración y continúe en su ordenador de escritorio.
