OpenDesigner: crea un sistema de diseño para tu proyecto con unas pocas respuestas

Para quién es

Para desarrolladores y equipos pequeños que ya usan un asistente de programación con IA pero cuyo proyecto todavía carece de unas reglas visuales unificadas: puede que solo tengas unas pocas maquetas o descripciones habladas, mientras que en el código los colores, las tipografías y los espaciamentos están escritos de forma distinta en cada página; también puede que el proyecto acabe de empezar y nadie pueda sacar tiempo para construir primero un sistema de diseño completo. Es un complemento para las herramientas de IA que ya utilizas: convierte preferencias difíciles de expresar en archivos que el código puede consumir directamente, en lugar de enviarte a otro programa de diseño; es un proyecto de código abierto gratuito con licencia MIT, no sustituye el editor que usas, solo añade una capa de capacidades. Todo el que esté dispuesto a responder unas preguntas breves, a aceptar que los resultados se escriban en el directorio del proyecto y a revisarlos una vez más antes de integrarlos es un buen candidato para probarlo una vez. Si acabas de heredar el código de otra persona y quieres captar primero el tono visual, también puedes aprovecharlo para un reconocimiento rápido.

Tu primer intento en 3 minutos

Comprueba antes los requisitos previos: hace falta Python 3.10 o superior en la máquina. El motor es un único archivo de Python y no hay dependencias que instalar.

Primer paso, instala la skill. La vía recomendada es el mercado de plugins de Claude Code: escribe /plugin marketplace add ckryptickunal/OpenDesigner en la conversación, pulsa Intro y después escribe /plugin install opendesigner@opendesigner.

Segundo paso, reconoce la ubicación de instalación. Las herramientas compatibles con Agent Plugins leen el archivo plugin.json de la raíz, mientras que los clientes que leen skills toman los archivos por convención del directorio .agents/skills/; los clientes que no pasan por el mercado de plugins necesitan que copies tú mismo la skill en .agents/skills/ de tu proyecto.

Tercer paso, lanza una tarea de bajo riesgo. Abre tu proyecto, di en la conversación "Create a design system for this project." y hará como máximo cinco preguntas breves, cada una con una respuesta sugerida y su justificación, así que basta con que confirmes o reescribas cada una. La primera vez, conviene ejecutarlo en un directorio limpio o abrir antes una rama, para que los tokens generados no se mezclen con el código existente.

Cuarto paso, acuerda de antemano los efectos secundarios y los puntos de confirmación. El motor escribe sus resultados como DESIGN.md, PRODUCT.md y el directorio opendesigner/, que contiene los tokens, las distintas exportaciones y una página de resumen. La escritura en disco reescribe directamente el contenido del repositorio, así que crea antes una rama o haz un commit; no lo dejes escribir hasta confirmar las respuestas.

Quinto paso, observa las señales de éxito comprobables. En el proyecto aparecen los tres artefactos anteriores y la autocomprobación no reporta errores: el contraste del texto se valida según WCAG 2.2 AA, las zonas de clic miden al menos 24 px, el foco de teclado es visible y se tiene en cuenta la preferencia de movimiento reducido; en cuanto aparece un error, la compilación se detiene.

Casos de uso

Caso uno: poner la primera versión de un sistema de diseño en un proyecto nuevo. Con el plugin instalado, di en el proyecto la frase en inglés de disparo anterior, responde a las cinco preguntas breves como máximo que plantea y obtendrás un sistema de diseño completo en lugar de fragmentos sueltos. La primera versión no tiene que ser perfecta: es el punto de partida para seguir preguntando e iterando. A partir de ahí se puede profundizar: colores, tipografías, espaciamentos y animaciones se refinan con otra ronda de preguntas cada uno, y los resultados siguen cayendo en los mismos tres archivos y directorios. Aquí acaba la evidencia: la documentación oficial fija el límite de cinco preguntas y las cuatro dimensiones de refinamiento, pero no explica si el número de preguntas se puede ajustar ni describe la forma de interacción de cada ronda de refinamiento.

Caso dos: reutilizar la misma skill en un cliente sin mercado de plugins. Copia la skill en el directorio .agents/skills/ del proyecto, pide como de siempre en la conversación que se genere el sistema de diseño y responde a las preguntas; los resultados y las reglas de autocomprobación son exactamente los mismos que en el caso uno. Si el proyecto ya tiene convenciones de nombres para los tokens, confirma antes de copiar que ambos esquemas de nombres no choquen. La documentación oficial solo indica que esos clientes leen las skills desde ese directorio; no explica cómo actualizar tras la copia ni indica pasos adicionales de dependencias o configuración.

Límites de uso

El motor tiene un solo requisito innegociable: Python 3.10 o superior, sin dependencias que instalar aparte. Los modos de instalación son también los que declara la documentación oficial: fuera del mercado de plugins hay que copiar la skill a mano, y el proyecto no ofrece ningún comando de actualización automática ni de verificación para esa ruta manual. En tiempo de ejecución reescribe directamente los archivos del proyecto, así que deja preparado una rama o un commit antes de empezar. La autocomprobación integrada es una barrera dura: un contraste por debajo de WCAG 2.2 AA, zonas de clic por debajo de 24 px, foco de teclado invisible o una preferencia de movimiento reducido sin tratar detendrán la compilación; no arregla nada por ti, hay que corregir y volver a ejecutar. La premisa de las cinco preguntas es que puedan responderse en breve; cuando entran en juego reglas de negocio complejas, el motor no puede decidir. Un sistema de diseño tampoco es un producto final: los tokens y los documentos quedan en el repositorio, y ni la fusión con una biblioteca de componentes existente ni su incorporación al control de versiones están descritos en la documentación oficial, eso lo decides tú. Repositorio: <https://github.com/ckryptickunal/OpenDesigner >.