MÁS INFORMACIÓN
Más lecturas sobre Aider
Tutoriales, documentación y guías paso a paso para el diseño con Aider, como se enumeran en la guía publicada.
Aider 
OpenDesign Diseñar con
Aider en
OpenDesign.
Cómo diseñar interfaces con Aider en OpenDesign: un commit por revisión, CONVENTIONS.md como libro de reglas, una tarea de página de changelog desde el briefing hasta el archivo revisado, y los límites que debe conocer antes de empezar.
TRES PUNTOS DE PARTIDA EN ESTA GUÍA DE AIDER
Elige tu punto de partida con Aider
ESTA GUÍA · DISEÑO DE UI
Crea una interfaz de producto con Aider
Esta guía: el brief, las referencias, las reglas de diseño y un artefacto HTML revisado.
Lea esta guía CONFIGURACIÓNConfigure Aider desde cero
La ruta completa: desde una máquina limpia hasta Aider en la terminal, lista para construir y verificar la interfaz de usuario.
Ir a la configuración COMPARACIÓNCompara Aider con otros agentes
En qué se diferencia Aider de Codex, Claude Code y Cursor para el diseño, y cuándo otro flujo de trabajo es la mejor opción.
Ver la comparaciónEn esta página Ejemplo
Una tarea de diseño completa con Aider
Una tarea de diseño con Aider, del brief a la interfaz
Una tarea recorrida por todo el ciclo: el brief y las restricciones que le entregas a Aider, el HTML que devuelve y las comprobaciones que aún ejecutas antes de darla por terminada. La interfaz de abajo es ilustrativa para esta página, no una ejecución grabada de Aider.
1Briefing de diseño y restricciones
BriefingDiseña una página de registro de cambios y notas de versión para una herramienta CLI: una lista de versiones, una versión destacada con cambios agrupados y un comando de actualización. Deja que cada revisión quede como su propio commit. Escritorio y teléfono.
- Sistema de diseñoLienzo de papel OpenDesign: Albert Sans, un acento verde
- Breakpoints1440px de escritorio y 390px de móvil, sin desplazamiento horizontal
- InteraccionesLista de versiones, copiar comando de actualización, ancla por versión
- ResultadoUn archivo HTML autónomo con anclajes
data-od-idestables
2Quién hace qué: tú, Aider y OpenDesign
- Usted
Tú escribes el brief, eliges el sistema de diseño y estableces los criterios de aceptación.
- Aider
Aider planifica la disposición, escribe el HTML, CSS y JavaScript, y realiza revisiones a petición.
- OpenDesign
OpenDesign proporciona el sistema de diseño y la skill, renderiza la vista previa y almacena cada versión como un archivo en el proyecto.
- Revisión
Tú compruebas la jerarquía visual, el espaciado en la cuadrícula de 8px, ambos puntos de interrupción y cada interacción antes de la entrega.
3Artefacto de Aider: página de registro de cambios a 1440px y 390px
4Revisión antes de la entrega
Diseño
Cuadrícula y espaciado
La lista de versiones, las notas y la barra lateral se asientan en la cuadrícula de 8px; los encabezados de versión se alinean con la lista.
Jerarquía
Jerarquía visual
La versión y la fecha van primero, luego el aviso de cambio incompatible; el acento marca solo la versión actual.
Responsivo
Diseño para móvil
La lista de versiones se convierte en un select; las notas ocupan todo el ancho.
Interacción
Comprobaciones de interacción
Prueba copiar el comando de actualización, saltar a una versión anterior, abrir el enlace del aviso de cambio incompatible.
Ajuste
Cuándo Aider es adecuado para la tarea y cuándo no
Aider se ajusta cuando
- Agnóstico respecto al modelo, BYOK. Trae tu propia clave y conecta casi cualquier LLM; un modelo con capacidad de visión puede convertir una imagen de referencia en marcado responsive.
- Iteración nativa de Git. Los auto-commits de Aider convierten cada pasada de diseño en un diff revisable que puedes deshacer, manteniendo la salida limpia y trazable.
- Contexto de CONVENTIONS.md. Un archivo de convenciones de solo lectura carga tus tokens, primitivas y reglas de diseño en cada ejecución.
- Código abierto. Apache-2.0 y local-first, operando directamente sobre el código en tu propio repositorio.
Elija otro workflow cuando
- Necesitas archivos vectoriales editables. Aider devuelve HTML, no un documento de diseño editable. Recurre a un flujo de trabajo vectorial aparte para ese formato de activo.
- No tienes referencia ni restricciones. Si careces de un sistema de diseño o de ejemplos, la salida tiende a un aspecto genérico; escribe primero el brief.
- No tienes la credencial que necesita este agente. Obligatorio: tu propia clave de API del proveedor — BYOK (OpenAI, Anthropic, DeepSeek, Gemini o local). OpenDesign no proporciona ni actúa como proxy de credenciales.
- Tu equipo trabaja en OpenCode o Kilo. Esos agentes tienen sus propias páginas; el espacio de trabajo sigue siendo similar, la configuración cambia. Consulta agentes relacionados.
Compatibilidad
Requisitos de Aider antes de empezar
Esta página cubre Aider tal como se conecta a través de la aplicación de escritorio OpenDesign. Las referencias publicadas se verificaron el 6 de septiembre de 2026.
Alcance de la herramientaAider, by Aider
Aider es una herramienta de programación en pareja con IA de código abierto bajo Apache-2.0 que se ejecuta en tu terminal. Mapea tu base de código, edita archivos en el lugar y hace auto-commit de cada cambio con un mensaje razonable. Esta página trata sobre el diseño de interfaces con Aider a través de OpenDesign, no sobre la interfaz propia de Aider. Las notas de configuración de OpenDesign enumeran los agentes disponibles.
Cuentas y autenticaciónSu propia clave de API de proveedor — BYOK (OpenAI,
Tu propia clave de API de proveedor — BYOK (OpenAI, Anthropic, DeepSeek, Gemini o local). Autentícate con esa clave; las credenciales permanecen en tu máquina. Aquí no se promete ninguna cuota ni precio.
Sistema y versionesApp de escritorio o código fuente
Las compilaciones de escritorio están en la página de descargas. Los requisitos de Node.js y pnpm del inicio rápido del código fuente se aplican cuando se ejecuta desde el código fuente, no a una instalación del paquete de escritorio. Versión mínima compatible de Aider: no verificada aquí.
Verificación de conexiónLa señal de éxito
Usa las instrucciones de conexión que muestra tu versión instalada y luego ejecuta una tarea pequeña. Confirma que Aider la gestionó y que el artefacto se abre. Una descarga por sí sola no demuestra una conexión funcional.
Empiece con la app de escritorio
Configuración de Aider en tres pasos
Descarga primero, completa la configuración de Aider para la versión que instalaste y luego verifica un resultado pequeño. Seguir esta ruta no requiere compilar OpenDesign desde el código fuente.
- 1
Descargue la app de escritorio de OpenDesign
Elige el paquete para tu computadora, instálalo y abre la aplicación.
Descargar OpenDesignPUNTO DE CONTROLLa aplicación de escritorio se abre. ¿Ya está instalada? Salta al siguiente paso; no es necesario volver a descargarla. - 2
Prepare su conexión de Aider
Sigue las instrucciones de Aider para tu versión instalada. Autentícate con tu propia clave de API de proveedor (BYOK); las credenciales permanecen locales.
Aider — programación en pareja con IA en su terminal# 1. Install Aider (recommended installer; Python 3.8–3.13) python -m pip install aider-install aider-install # or with pipx: pipx install aider-chat # 2. Start it in your git project and bring your own key cd your-project aider --model sonnet --api-key anthropic=<your-key> # or: aider --api-key openai=<your-key> (also deepseek=, gemini=)De las notas de configuración de Aider en la guía publicada; consulta la documentación del proveedor para el comando actual.
PUNTO DE CONTROLConfirma el agente y la cuenta previstos. Si no están disponibles, verifica la compatibilidad antes de intentar una tarea más grande. - 3
Ejecute una tarea pequeña de Aider
Comienza con un brief lo suficientemente pequeño para juzgar todo el ciclo, incluida una revisión.
Briefing inicialCrea una pantalla de configuración con un formulario de perfil y una confirmación de guardado. Sigue mis reglas de diseño. Verifícala en anchos de escritorio y móvil.
PUNTO DE CONTROLAbre el resultado, prueba el estado de guardado y solicita un cambio específico. La generación abre la revisión; no la cierra.
Para ejecutar OpenDesign desde el código fuente, sigue el inicio rápido técnico en su lugar.
El workflow de diseño de Aider
Flujo de trabajo de diseño de Aider en cinco pasos
La tarea de la página de registro de cambios a continuación va desde un brief escrito hasta un archivo que hayas revisado. Cada paso nombra tu entrada, las acciones de terminal y git de Aider, las contribuciones de OpenDesign y la revisión que debes hacer.
- 1
Briefing de diseño
Lenguaje sencillo, de tres a seis líneas. Nombra la audiencia, la función de la pantalla y las plataformas.
- UstedRedacta el brief; adjunta una captura de pantalla de referencia cuando tengas una.
- AiderLee el brief y el archivo de instrucciones CONVENTIONS.md del proyecto; pregunta cuando algo es ambiguo.
- OpenDesignAporta el proyecto, la superficie de prompt y el skill para el tipo de artefacto.
- ComprobarConfirme que el briefing indica los criterios de aceptación. Añadirlos ahora resulta más económico que hacerlo después de la generación.
- 2
Restricciones de diseño
Un design system y unas pocas reglas estrictas. Esto es lo que distingue un resultado fiel a la marca de un aspecto genérico.
- UstedElija un design system; indique los breakpoints y los componentes de uso obligatorio, si los hay.
- AiderCarga los tokens de DESIGN.md y las reglas de postura en el contexto antes de escribir una línea.
- OpenDesignProporciona la biblioteca de design systems y vincula el elegido a la plantilla del skill.
- ComprobarLos tokens coinciden con su marca. Un solo acento, las fuentes correctas, el radio correcto.
- 3
Generar la interfaz
Aider escribe un archivo HTML autocontenido: diseño, estilos, interacciones y hooks estables.
- UstedEspere, o responda a una pregunta aclaratoria. No hay nada que configurar.
- AiderPlanifica las secciones, escribe el HTML, CSS y JavaScript, ejecuta el archivo y corrige lo que falle.
- OpenDesignGuarda el artefacto en la carpeta del proyecto y lo indexa para la vista previa.
- ComprobarNada todavía. Evalúe el archivo una vez renderizado, no a partir del código fuente.
- 4
Vista previa
El archivo se renderiza dentro de OpenDesign en los anchos que solicitaste. Aquí es donde se juzga el diseño.
- UstedCambie de ancho, recorra las interacciones, deje comentarios en los elementos.
- AiderLee sus comentarios sobre la vista previa y prepara la siguiente revisión.
- OpenDesignRenderiza la vista previa, expone objetivos
data-od-idpara comentarios y ediciones. - VerificaciónJerarquía, contraste, desbordamiento a 390px, estados de foco, y si el acento se usa con moderación.
- 5
Revisar y verificar
Solicita cambios señalando elementos en la vista previa. Aider hace commit de cada revisión, por lo que nada se sobrescribe en silencio.
- UstedConvierte comentarios en solicitudes; decide cuándo la tarea está terminada.
- AiderAplica los cambios in situ y vuelve a ejecutar el archivo.
- OpenDesignMantiene las versiones lado a lado; exporta una imagen o el HTML cuando haya terminado.
- VerificaciónVuelva a revisar solo el área que cambió, y luego toda la página una vez en cada punto de quiebre.
Recursos
Recursos de diseño de Aider
Skills Explorar skills Sistemas de diseño Explorar sistemas Plantillas Explorar plantillas
Skills de diseño
Los tipos de artefactos que Aider puede producir en OpenDesign, un skill por tipo.
Sistemas de Diseño
Tokens de marca y componentes que vincular antes de que Aider genere algo.
Plantillas
Puntos de partida para presentaciones, landing pages y pantallas de producto.
Limitaciones
Limitaciones de Aider, comprobaciones manuales y alternativas
- AlcanceEsta página cubre a Aider como agente conectado a OpenDesign, no todas las funciones de Aider.
- Límites de usoLos límites de uso y el costo dependen de la credencial que aportes (Tu propia clave de API de proveedor — BYOK (OpenAI, Anthropic, DeepSeek, Gemini o local)). Aquí no se hace ninguna afirmación sobre cuota gratuita.
- RedQue los archivos del proyecto sean locales no implica inferencia sin conexión. Revise la configuración del proveedor y las políticas de datos de su agente antes de compartir información sensible.
- La salida es HTMLLos productos son archivos HTML, no archivos de diseño vectorial.
- Revisión manualLa accesibilidad, el contenido real, la coherencia con la marca y la corrección de las interacciones deben ser revisados por usted en la vista previa. Trate cualquier autocomprobación del agente como una primera pasada.
- AlternativaSi el agente no está disponible o una tarea falla, revise las instrucciones de conexión y autenticación de la versión instalada. Conserve el error y el último artefacto funcional antes de cambiar la configuración.
Preguntas frecuentes
Preguntas frecuentes sobre Aider y OpenDesign
¿Aider puede realmente hacer trabajo de diseño?
Sí — con un skill estético, un sistema de diseño e imágenes de referencia reales en el contexto, Aider produce UI responsiva de calidad de producción, y en modelos con capacidad de visión lee capturas de pantalla para verificar el resultado contra las referencias. Sin ese contexto tiende a producir un aspecto genérico por defecto, que es precisamente la brecha que OpenDesign cubre.
¿Qué modelos puedo usar con Aider para diseño?
Aider es agnóstico respecto al modelo. Usted aporta su propia clave de API y conecta casi cualquier LLM — Claude, GPT-4o, DeepSeek, Gemini o un modelo local. Para trabajo de diseño basado en imágenes, use un modelo con capacidad de visión como GPT-4o o Claude. OpenDesign nunca actúa como proxy de sus credenciales.
¿Qué hace que Aider sea especialmente bueno para el diseño?
Dos cosas: es agnóstico respecto al modelo, por lo que puede elegir el modelo que mejor diseñe para su tarea, y es nativo de git, ya que confirma cada cambio de modo que cada iteración de diseño sea revisable y reversible. Ambas ayudan — pero el gusto estético sigue proviniendo del sistema de diseño, el skill y las referencias que usted proporcione.
¿Aider edita mis archivos y confirma cambios en Git?
Sí. Aider edita archivos directamente en su repositorio y confirma automáticamente cada cambio con un mensaje coherente, de modo que puede comparar, gestionar y deshacer el trabajo de la IA con las herramientas de git que ya utiliza.
¿Cómo le indico a Aider mis convenciones de diseño?
Cree un archivo CONVENTIONS.md con sus tokens, primitivas y reglas, y luego cárguelo en modo de solo lectura con /read CONVENTIONS.md o aider --read CONVENTIONS.md (o configure read: CONVENTIONS.md en .aider.conf.yml para cargarlo en cada ejecución). Aider trabajará entonces según su marca en lugar de un aspecto predeterminado.
Qué es Aider en realidad
Aider es una herramienta de programación en pareja con IA, de código abierto (Apache-2.0), que se ejecuta en tu terminal. Lee tu base de código existente, mapea todo el repositorio para aportar contexto, edita los archivos in situ y confirma automáticamente cada cambio con un mensaje sensato, de modo que puedes comparar, gestionar y deshacer el trabajo de la IA con las herramientas de git que ya usas. Funciona con más de 100 lenguajes de programación y sirve para iniciar proyectos nuevos o construir sobre los existentes.
Para el trabajo de diseño destacan dos propiedades. Aider es agnóstico respecto al modelo: tú aportas tu propia clave y la conectas a casi cualquier LLM — Claude, GPT-4o, DeepSeek, Gemini o un modelo local —, así que nunca quedas atado a un único proveedor. Y en modelos con capacidad de visión, como GPT-4o y Claude, puede leer archivos de imagen, convirtiendo una captura de pantalla de referencia en parte del prompt.
Archivo de convenciones: Aider lee un archivo CONVENTIONS.md que cargas con /read CONVENTIONS.md (o aider --read CONVENTIONS.md), el lugar natural para codificar tus convenciones de diseño, tokens y listas de verificación de revisión como contexto de solo lectura.
Ediciones nativas de git: cada cambio se aplica a los archivos de tu repositorio y se confirma automáticamente, de modo que cada iteración de diseño es revisable y reversible con las herramientas de git que ya conoces.
Aporta tu propio modelo: conecta OpenAI, Anthropic, DeepSeek, Gemini o un modelo local con tu propia clave de API; Aider no está atado a un único proveedor ni a un backend alojado.
Credencial: tu propia clave de API del proveedor — BYOK (OpenAI, Anthropic, DeepSeek, Gemini o un modelo local)
Proveedor: Aider (Aider-AI, código abierto) — agnóstico respecto al modelo
Licencia: Apache-2.0, código abierto
Para el trabajo de diseño destacan dos propiedades. Aider es agnóstico respecto al modelo: tú aportas tu propia clave y la conectas a casi cualquier LLM — Claude, GPT-4o, DeepSeek, Gemini o un modelo local —, así que nunca quedas atado a un único proveedor. Y en modelos con capacidad de visión, como GPT-4o y Claude, puede leer archivos de imagen, convirtiendo una captura de pantalla de referencia en parte del prompt.
Archivo de convenciones: Aider lee un archivo CONVENTIONS.md que cargas con /read CONVENTIONS.md (o aider --read CONVENTIONS.md), el lugar natural para codificar tus convenciones de diseño, tokens y listas de verificación de revisión como contexto de solo lectura.
Ediciones nativas de git: cada cambio se aplica a los archivos de tu repositorio y se confirma automáticamente, de modo que cada iteración de diseño es revisable y reversible con las herramientas de git que ya conoces.
Aporta tu propio modelo: conecta OpenAI, Anthropic, DeepSeek, Gemini o un modelo local con tu propia clave de API; Aider no está atado a un único proveedor ni a un backend alojado.
Credencial: tu propia clave de API del proveedor — BYOK (OpenAI, Anthropic, DeepSeek, Gemini o un modelo local)
Proveedor: Aider (Aider-AI, código abierto) — agnóstico respecto al modelo
Licencia: Apache-2.0, código abierto
Por qué una herramienta agnóstica respecto al modelo y nativa de git encaja con el diseño
La ventaja de Aider para el diseño nace de cómo trabaja con tu repositorio y con el modelo que elijas, pero, como ocurre con cualquier agente, el buen gusto sigue teniendo que aportarlo alguien.
Agnóstico respecto al modelo, BYOK: elige el modelo que mejor diseñe para tu tarea y tu presupuesto — Claude, GPT-4o, DeepSeek, Gemini — y cambia con total libertad sin alterar tu flujo de trabajo, todo con tu propia clave.
Iteración nativa de git: las confirmaciones automáticas convierten cada pasada de diseño en un diff revisable que puedes revertir, así que iteras sobre una base limpia en lugar de sobre un montón de ediciones sin seguimiento.
Convenciones en CONVENTIONS.md: un CONVENTIONS.md (cargado como solo lectura) orienta al agente hacia tus tokens, componentes y reglas, de modo que trabaja conforme a una marca en lugar de recurrir a un aspecto predeterminado.
El buen gusto procede de tres aportaciones tuyas: un sistema de diseño, una skill y referencias visuales reales.
La lección es la misma que enseña cualquier agente: Aider no tiene buen gusto por defecto. Produce buen diseño cuando le das restricciones: un sistema de diseño, una skill estética y referencias concretas. OpenDesign empaqueta exactamente esas aportaciones, y por eso ambos encajan (más abajo).
Agnóstico respecto al modelo, BYOK: elige el modelo que mejor diseñe para tu tarea y tu presupuesto — Claude, GPT-4o, DeepSeek, Gemini — y cambia con total libertad sin alterar tu flujo de trabajo, todo con tu propia clave.
Iteración nativa de git: las confirmaciones automáticas convierten cada pasada de diseño en un diff revisable que puedes revertir, así que iteras sobre una base limpia en lugar de sobre un montón de ediciones sin seguimiento.
Convenciones en CONVENTIONS.md: un CONVENTIONS.md (cargado como solo lectura) orienta al agente hacia tus tokens, componentes y reglas, de modo que trabaja conforme a una marca en lugar de recurrir a un aspecto predeterminado.
El buen gusto procede de tres aportaciones tuyas: un sistema de diseño, una skill y referencias visuales reales.
La lección es la misma que enseña cualquier agente: Aider no tiene buen gusto por defecto. Produce buen diseño cuando le das restricciones: un sistema de diseño, una skill estética y referencias concretas. OpenDesign empaqueta exactamente esas aportaciones, y por eso ambos encajan (más abajo).
Configurar Aider para trabajo de diseño, desde cero
La secuencia de configuración: instalar → aportar tu propia clave → cargar CONVENTIONS.md → añadir una referencia → habilitar la verificación en el navegador.
Codifica tus reglas de diseño: coloca tus tokens, primitivos y convenciones en CONVENTIONS.md y cárgalo como solo lectura, para que el resultado se ajuste a una marca en lugar de recurrir a un aspecto genérico.
Añade verificación en el navegador: ejecuta un servidor de desarrollo y haz que Aider renderice en un navegador real, comprobando su resultado en distintos breakpoints en lugar de limitarse a confirmar que la compilación pasa.
Consulta la sección de configuración actual para ver los comandos y los detalles específicos de la versión, que pueden cambiar.
Ejemplo de comando histórico de la guía anterior; verifica la sintaxis actual en la documentación del proveedor enlazada.
Codifica tus reglas de diseño: coloca tus tokens, primitivos y convenciones en CONVENTIONS.md y cárgalo como solo lectura, para que el resultado se ajuste a una marca en lugar de recurrir a un aspecto genérico.
Añade verificación en el navegador: ejecuta un servidor de desarrollo y haz que Aider renderice en un navegador real, comprobando su resultado en distintos breakpoints en lugar de limitarse a confirmar que la compilación pasa.
Consulta la sección de configuración actual para ver los comandos y los detalles específicos de la versión, que pueden cambiar.
# 1. Instalar Aider (instalador recomendado; Python 3.8–3.13)
python -m pip install aider-install
aider-install
# o con pipx: pipx install aider-chat
# 2. Inícialo en tu proyecto de git y aporta tu propia clave
cd your-project
aider --model sonnet --api-key anthropic=<your-key>
# o: aider --api-key openai=<your-key> (también deepseek=, gemini=)
# 3. Carga tus convenciones de diseño como contexto de solo lectura
aider --read CONVENTIONS.md
# 4. Añade una imagen de referencia (en un modelo con capacidad de visión)
# dentro del chat: /add reference-desktop.pngEjemplo de comando histórico de la guía anterior; verifica la sintaxis actual en la documentación del proveedor enlazada.
El flujo de trabajo de captura de pantalla a interfaz
El bucle de diseño más rentable con Aider consiste en convertir una imagen de referencia en una interfaz funcional y adaptable e iterar hasta que coincida, usando un modelo con capacidad de visión para comparar el resultado con la referencia, y con cada pasada confirmada en git.
Parte de las referencias visuales más claras de que dispongas, e incluye varios estados (escritorio y móvil, hover, vacío, carga), no solo una imagen principal.
Sé específico en el prompt; los prompts vagos producen interfaces genéricas incluso con un modelo potente.
Mantén tu sistema de diseño y tus convenciones en CONVENTIONS.md, e indica a Aider dónde viven los tokens y los primitivos canónicos.
Ejecuta un servidor de desarrollo y comprueba el resultado renderizado en un navegador real, redimensionando a distintos breakpoints.
Itera haciendo que Aider compare su implementación con las capturas de pantalla, no limitándose a confirmar que compila.
Añade una imagen con /add (o /paste desde el portapapeles) en un modelo con capacidad de visión y luego da restricciones concretas:
Mantén los prompts pequeños y centrados. Como Aider confirma cada cambio, conservas las buenas iteraciones y usas git (o /undo) para revertir las malas, de modo que cada pasada parte de una base limpia.
Ejemplo de comando histórico de la guía anterior; verifica la sintaxis actual en la documentación del proveedor enlazada.
Parte de las referencias visuales más claras de que dispongas, e incluye varios estados (escritorio y móvil, hover, vacío, carga), no solo una imagen principal.
Sé específico en el prompt; los prompts vagos producen interfaces genéricas incluso con un modelo potente.
Mantén tu sistema de diseño y tus convenciones en CONVENTIONS.md, e indica a Aider dónde viven los tokens y los primitivos canónicos.
Ejecuta un servidor de desarrollo y comprueba el resultado renderizado en un navegador real, redimensionando a distintos breakpoints.
Itera haciendo que Aider compare su implementación con las capturas de pantalla, no limitándose a confirmar que compila.
Añade una imagen con /add (o /paste desde el portapapeles) en un modelo con capacidad de visión y luego da restricciones concretas:
Mantén los prompts pequeños y centrados. Como Aider confirma cada cambio, conservas las buenas iteraciones y usas git (o /undo) para revertir las malas, de modo que cada pasada parte de una base limpia.
aider --model gpt-4o --read CONVENTIONS.md
# en el chat:
> /add reference-desktop.png
> /add reference-mobile.png
> Implementa este diseño en React + Vite + Tailwind + TypeScript.
Reutiliza mis componentes y tokens del sistema de diseño existentes de CONVENTIONS.md.
Iguala el espaciado, la disposición y la jerarquía; hazlo responsive.
Lo renderizaré en el navegador y te diré qué corregir hasta que coincida
con las referencias en todos los breakpoints.Ejemplo de comando histórico de la guía anterior; verifica la sintaxis actual en la documentación del proveedor enlazada.
CONVENTIONS.md, imágenes y comandos
Tres capacidades hacen que Aider sea práctico para el trabajo de diseño sostenido, y las tres encajan limpiamente en un flujo de trabajo de diseño abierto.
Contexto de CONVENTIONS.md: carga las convenciones de código y de diseño con /read CONVENTIONS.md o aider --read CONVENTIONS.md, o define read: CONVENTIONS.md en .aider.conf.yml para cargarlo en cada ejecución. Es el hogar duradero de tus tokens, primitivos y reglas.
Imágenes y páginas web: en modelos con capacidad de visión, usa /add con un archivo de imagen o /paste desde el portapapeles para dar a Aider una referencia real; /web extrae el texto de una página al chat para aportar contexto adicional.
Comandos dentro del chat: comandos como /add para incorporar archivos al contexto, /read para referencias de solo lectura y /undo para revertir la última confirmación le permiten reunir referencias y ejecutar el bucle de verificación sin salir de la terminal.
Son capacidades portables y nativas del repositorio, justo el tipo de cosa que OpenDesign está diseñado para orquestar, en lugar de recrear en cada proyecto.
Contexto de CONVENTIONS.md: carga las convenciones de código y de diseño con /read CONVENTIONS.md o aider --read CONVENTIONS.md, o define read: CONVENTIONS.md en .aider.conf.yml para cargarlo en cada ejecución. Es el hogar duradero de tus tokens, primitivos y reglas.
Imágenes y páginas web: en modelos con capacidad de visión, usa /add con un archivo de imagen o /paste desde el portapapeles para dar a Aider una referencia real; /web
Comandos dentro del chat: comandos como /add para incorporar archivos al contexto, /read para referencias de solo lectura y /undo para revertir la última confirmación le permiten reunir referencias y ejecutar el bucle de verificación sin salir de la terminal.
Son capacidades portables y nativas del repositorio, justo el tipo de cosa que OpenDesign está diseñado para orquestar, en lugar de recrear en cada proyecto.
Aider comparado con Codex, Claude Code, Cursor y Gemini CLI para diseño
No hay un único ganador para el trabajo de diseño: cada agente tiene una fortaleza distinta, y los equipos con experiencia los combinan. Un resumen justo:
Aider — de código abierto, agnóstico respecto al modelo (BYOK) y nativo de git; las confirmaciones automáticas hacen que cada iteración sea revisable y reversible — Iteración nativa del repositorio sobre tu base de código existente con el modelo que mejor diseñe
Codex — Sólido acabado visual con una skill de frontend; compilaciones asíncronas en sandbox — Compilaciones asíncronas delegadas y reglas portables de AGENTS.md
Claude Code — Decisiones de diseño específicas (hex, espaciado, tipografía) y UX consciente de la base de código — Razonamiento de frontend y refactorizaciones con contexto amplio
Cursor — Bucle visual de construir y ver con vista previa en vivo y ediciones en línea — Trabajo de interfaz de iterar y observar muy ajustado dentro de un IDE
Gemini CLI — Sólida comprensión multimodal de imágenes y un contexto de 1M de tokens; de código abierto con un nivel gratuito — Trabajo con muchas capturas de pantalla y mantener todo un sistema de diseño en contexto
El veredicto recurrente de la comunidad es que el buen gusto proviene de las personas: todos recurren por defecto a una estética genérica sin skills, referencias ni restricciones. Ese es el verdadero problema que hay que resolver, y tiene forma de herramienta de diseño, no de modelo.
Agente — Fortaleza de diseño — Ideal para
Aider — de código abierto, agnóstico respecto al modelo (BYOK) y nativo de git; las confirmaciones automáticas hacen que cada iteración sea revisable y reversible — Iteración nativa del repositorio sobre tu base de código existente con el modelo que mejor diseñe
Codex — Sólido acabado visual con una skill de frontend; compilaciones asíncronas en sandbox — Compilaciones asíncronas delegadas y reglas portables de AGENTS.md
Claude Code — Decisiones de diseño específicas (hex, espaciado, tipografía) y UX consciente de la base de código — Razonamiento de frontend y refactorizaciones con contexto amplio
Cursor — Bucle visual de construir y ver con vista previa en vivo y ediciones en línea — Trabajo de interfaz de iterar y observar muy ajustado dentro de un IDE
Gemini CLI — Sólida comprensión multimodal de imágenes y un contexto de 1M de tokens; de código abierto con un nivel gratuito — Trabajo con muchas capturas de pantalla y mantener todo un sistema de diseño en contexto
El veredicto recurrente de la comunidad es que el buen gusto proviene de las personas: todos recurren por defecto a una estética genérica sin skills, referencias ni restricciones. Ese es el verdadero problema que hay que resolver, y tiene forma de herramienta de diseño, no de modelo.
Agente — Fortaleza de diseño — Ideal para
Errores comunes y cómo evitar el aspecto de “chapuza de IA”
La queja más común sobre el diseño generado por IA es que parece genérico: degradados suaves, paneles flotantes, esquinas redondeadas desmesuradas, sombras dramáticas, un aire de Inter y morado que “grita que esto lo hizo una IA”. Otros problemas señalados incluyen diseños móviles rotos e instrucciones que se filtran en los textos de la interfaz. Ninguno de estos problemas es exclusivo de Aider; son lo que ocurre cuando cualquier agente trabaja sin un contexto de diseño curado.
Añade una skill estética: una skill de diseño curada obliga al agente a comprometerse con una dirección real en lugar del aspecto predeterminado.
Verifica en un navegador real: renderiza y autocomprueba en distintos breakpoints para que las disposiciones no se rompan en silencio en móvil; en un modelo con capacidad de visión, vuelve a introducir las capturas de pantalla.
Aporta tokens y referencias: los tokens de diseño reales y las capturas de pantalla de referencia son la palanca más importante para la calidad del resultado.
Codifica las reglas en CONVENTIONS.md: coloca reglas del estilo “sin tarjetas hero, máximo dos tipografías, jerarquía con la marca primero” donde el agente las lea en cada ejecución.
Fíjate en que cada mitigación consiste en dar al agente un contexto de diseño curado. Mantener ese contexto a mano, proyecto a proyecto, es la carga de trabajo que OpenDesign elimina.
Añade una skill estética: una skill de diseño curada obliga al agente a comprometerse con una dirección real en lugar del aspecto predeterminado.
Verifica en un navegador real: renderiza y autocomprueba en distintos breakpoints para que las disposiciones no se rompan en silencio en móvil; en un modelo con capacidad de visión, vuelve a introducir las capturas de pantalla.
Aporta tokens y referencias: los tokens de diseño reales y las capturas de pantalla de referencia son la palanca más importante para la calidad del resultado.
Codifica las reglas en CONVENTIONS.md: coloca reglas del estilo “sin tarjetas hero, máximo dos tipografías, jerarquía con la marca primero” donde el agente las lea en cada ejecución.
Fíjate en que cada mitigación consiste en dar al agente un contexto de diseño curado. Mantener ese contexto a mano, proyecto a proyecto, es la carga de trabajo que OpenDesign elimina.
Diseñar con Aider dentro de OpenDesign
OpenDesign es la capa de diseño de código abierto que el flujo de trabajo anterior no deja de reclamar. Trata a Aider como un adaptador de primera clase y lo envuelve en una biblioteca curada de skills y sistemas de diseño, un pipeline de renderizado estructurado y una interfaz de escritorio local, de modo que el contexto de diseño que hace bueno a Aider está ahí desde la primera ejecución, sin montarlo a mano cada vez. Ambos son de código abierto y local-first, lo que hace que la combinación encaje de forma natural.
Autentícate con tu propia clave de API del proveedor (BYOK) — OpenAI, Anthropic, DeepSeek o Gemini; las credenciales permanecen en tu máquina y nunca se enrutan a través de nosotros.
Elige un sistema de diseño y una skill, y genera presentaciones, prototipos y páginas de aterrizaje con un gusto coherente.
Cada artefacto y archivo DESIGN.md vive en tu propio repositorio de git, no en una nube alojada.
El mismo agente Aider, la misma clave, y además un flujo de trabajo de diseño real, portable y de código abierto a su alrededor. Es local-first y de código abierto, así que nada de tu trabajo ni de tus credenciales sale de tu máquina.
Instala OpenDesign y selecciona Aider como tu agente.
Autentícate con tu propia clave de API del proveedor (BYOK) — OpenAI, Anthropic, DeepSeek o Gemini; las credenciales permanecen en tu máquina y nunca se enrutan a través de nosotros.
Elige un sistema de diseño y una skill, y genera presentaciones, prototipos y páginas de aterrizaje con un gusto coherente.
Cada artefacto y archivo DESIGN.md vive en tu propio repositorio de git, no en una nube alojada.
El mismo agente Aider, la misma clave, y además un flujo de trabajo de diseño real, portable y de código abierto a su alrededor. Es local-first y de código abierto, así que nada de tu trabajo ni de tus credenciales sale de tu máquina.
Instala OpenDesign y selecciona Aider como tu agente.
¿OpenDesign está afiliado a Aider?
No. OpenDesign es independiente y no está afiliado a Aider.