![Imagen de portada de [Explorando open source #2] oh-my-design: branding para agentes de código](/assets/images/posts/7a855f56-283c-465d-b072-3e16af7791ae/oh-my-design-ai-design-workflow-1.jpg)
Esta es la segunda entrega de la serie que rescata repositorios ocultos y los examina. En Explorando open source, parte 1 analizamos una aplicación de escritorio que deja la gestión de una cuenta de Threads en manos de la IA; esta vez se trata del proyecto de un desarrollador coreano. oh-my-design instala un sistema de diseño en agentes de código.
El problema es claro: cuando un agente de IA crea la UI, cada pantalla termina con una marca distinta. Ayer, un botón azul; hoy, un degradado morado. DESIGN.md resuelve el problema mediante un contrato de archivos, como vimos en Artículo aparte. Basado en la especificación publicada por Google Stitch, guarda tokens de diseño y reglas de marca en un archivo Markdown del repositorio para que el agente lo lea siempre. oh-my-design lleva ese contrato al terreno de «¿qué tengo que escribir el lunes por la mañana?».
Repositorio se publicó en abril de 2026, ya supera las 400 estrellas y usa la licencia MIT. Su creador es un desarrollador coreano, quizá por eso el catálogo incluye especialmente muchos servicios locales como Toss, Baemin, Danggeun y Bunjang. Es una de las diferencias sustanciales del proyecto; volveremos a ello.
Una línea de instalación, cuatro agentes
Eso es todo lo que hay que instalar.
npx oh-my-design-cli@latestEl instalador interactivo detecta qué agentes hay en el proyecto e instala un paquete por canal. Este es el alcance compatible resumido en README.
| Agente | Contenido instalado |
|---|---|
| Claude Code | Paquete completo: 20 skills, 18 subagentes, hooks y datos del catálogo bajo .claude/ |
| Codex | Skills de .agents/skills/, roles de subagentes de .codex/agents/ y catálogo local |
| OpenCode | El mismo paquete bajo .opencode/ |
| Cursor | Un archivo de reglas del proyecto y un catálogo compartido. No instala skills, subagentes ni hooks |
Cursor recibe un trato distinto. Como no tiene un canal para ejecutar skills y subagentes, solo incorpora mediante un archivo de reglas el contrato «prioriza DESIGN.md»: es un canal rules-only intencionado. Es honesto que la documentación no oculte la diferencia y la explique en una sección separada, «Ruta exacta de uso de Cursor».
Tras instalar, reinicia el agente y diagnostícalo con npx oh-my-design-cli@latest doctor. Ahí termina la CLI: instala y diagnostica; todo el trabajo de diseño posterior ocurre en la sesión del agente mediante lenguaje natural. No hacen falta claves API, un demonio residente ni un servidor MCP (Model Context Protocol, el estándar para conectar herramientas externas con agentes). Al principio el catálogo se ofrecía mediante MCP, pero se retiró. Leer archivos locales directamente desde las skills resultó más sencillo; la implementación anterior solo queda archivada en packages/mcp/.
440 referencias empresariales: la clave no es la cantidad, sino la evidencia
El paquete incluye 440 referencias que reconstruyen sistemas de diseño empresariales en formato DESIGN.md: Toss, Stripe, Linear, Apple, Airbnb y más. Todas pueden revisarse visualmente en Sitio del catálogo, y cada referencia ofrece una copia raw de Markdown en oh-my-design.kr/<id>/design.md para que el agente también pueda obtenerla directamente por URL. También hay una página Builder para elegir una referencia web y descargar DESIGN.md; la documentación recomienda esta vía para Cursor, donde no se instalan skills.
Por las cifras, uno pensaría «habrán raspado la web y creado 440», pero abrir los archivos cambia la impresión. El front matter de la referencia de Toss aporta evidencia para cada claim: junto a tokens.colors.primary: #3182f6 indica en qué pantalla (la documentación del botón móvil de TDS), mediante qué método (capturas de computed style y contraste con la documentación oficial) y cuándo (2026-07-11) se verificó. El cuerpo hace lo mismo: registra observaciones como «Toss Product Sans se observó como primera fuente en 810 elementos visibles» y advierte que el azul del logotipo de la marca y el azul de la UI real (#3182f6) son distintos y no deben mezclarse. Sobre los derechos de redistribución de fuentes, como la fuente oficial no los especifica, deja constancia de que se desconoce.
Eso no significa que las 440 tengan la misma densidad. El catálogo publica sus niveles: al escribir este artículo, hay 141 Verified v2, 159 Partial y 140 snapshots Legacy. Es decir, la nueva canalización de validación aún cubre solo un tercio. La especificación del repositorio dice «verifiedLa fecha es una marca temporal, no un nivel de calidad», y la página del catálogo insiste en que «la confianza se calcula con evidencia, frescura y conflictos, no se deduce del sello de fecha». Mostrar las limitaciones de sus datos mediante niveles es una virtud poco común en proyectos de catálogo.
Más allá de los tokens: Voice
La especificación original de DESIGN.md se centra en tokens como color, tipografía y espaciado. oh-my-design parte de Especificación de Google Stitch y añade las secciones Voice, Narrative, Principles, Personas, States y Motion. Es el espacio para describir cómo habla una marca, algo que los códigos de color no capturan.
El sitio oficial muestra la diferencia de forma interesante: usa el mismo prompt con el mismo modelo, variando solo si lee DESIGN.md, y coloca las UI resultantes lado a lado. El CTA «Get Started» se convierte en «Empieza en 3 segundos» con la referencia de Toss; el toast «Error 500: Internal Server Error» pasa a «Sync paused — we’ll retry in 4 seconds» con la referencia de Linear. Incluso «No data available» en una pantalla vacía se transforma, tras pasar por la referencia de Anthropic, en «Nothing here yet — and that’s a good place to begin».
No son diferencias en los valores de los tokens, sino en el tono. La página lo resume así: «Tokens get you halfway. Voice takes you home.» Los tokens te llevan hasta la mitad; la voz completa el resto.
Cómo funcionan las 20 skills
El núcleo del paquete son las skills. El flujo principal es omd:init. Si dices «Crea DESIGN.md para una app de registro de comidas familiares; usa Toss como referencia, pero incorpora solo valores verificados», la skill recomienda referencias del catálogo → pide confirmación al usuario → escribe DESIGN.md en la raíz del proyecto, conservando el tono elegido y adaptándolo al contexto. Lo interesante es que no invoca ningún subcomando de la CLI: incluso la puntuación de recomendación se calcula leyendo archivos locales dentro de la sesión del agente.
También incluye omd:feel para revisar la calidad de la interfaz, omd:slop-audit para detectar UI insípidas típicas de la IA y un bucle de preferencias (omd:learn / omd:remember / omd:taste). El bucle acumula en .omd/preferences.md correcciones hechas durante el trabajo («haz el botón más angular») y las aplica al siguiente; con «muéstrame mis preferencias» presenta en una pantalla lo aprendido y lo pendiente.
El secreto para activar estas skills con lenguaje natural, sin comandos de barra, son los hooks. Durante la instalación se registran hooks UserPromptSubmit, SessionStart y PostToolUse en .claude/settings.json, y un script de Node decide en cada prompt si debe activar una skill. Es cómodo, pero añade una capa que interviene en cada prompt.
Los subagentes están formados por omd-master y 17 especialistas en investigación UX, auditoría de a11y, pruebas de personas y pulido de textos. La lista completa está en Documentación oficial.
Lo que conviene saber antes de escribir
También esta vez anoto los puntos problemáticos.
No hay que malinterpretar la situación legal de las referencias. Como indica la licencia del README, el código es MIT, pero las referencias son activos de cada empresa y se reconstruyeron con fines educativos. «Al estilo de Toss» es un punto de partida para inspirarse, no una licencia para copiar sus colores, fuentes o textos. Por eso la propia referencia de Toss indica que no se han confirmado los derechos de redistribución de Toss Product Sans.
Los valores envejecen. Los colores y la tipografía de las referencias son snapshots medidos en una fecha concreta. Cuando una empresa cambia de marca, empiezan a desviarse. Conviene comprobar la fecha verified del front matter; como se indicó, el esquema de validación v2 aún solo se aplica a una parte.
El proyecto instala bastantes archivos. Skills, subagentes, hooks y catálogo entran en .claude/ del repositorio (o en la ruta de cada canal). No importa en un repositorio personal, pero un repositorio de equipo requiere consenso antes de hacer commit. La gestión está cuidada: los archivos administrados llevan marcadores y hashes para actualizarse en su sitio al reinstalar; los archivos modificados por el usuario se omiten en vez de sobrescribirse (skipped-drift), y doctor ofrece comandos de restauración con alcance limitado.
El ritmo de lanzamientos es rápido. Desde Según npm el primer lanzamiento a finales de abril de 2026, llegó a 1.9.0 en tres meses. Hubo cambios estructurales como retirar MCP, y existe incluso un MIGRATION.md específico para usuarios de 0.1.x. En el mejor caso, es actividad; con cautela, no hay garantía de que el flujo siga igual dentro de seis meses.
La calidad de razonamiento depende en última instancia del agente. La herramienta solo aporta buen contexto; quien dibuja la UI sigue siendo Claude Code o Codex. Quienes hayan usado contratos de archivos saben que incluso con DESIGN.md el agente puede ignorarlo. Por eso se incluyen mecanismos de validación como omd:harness o doctor.
Resumen
- oh-my-design es una CLI de código abierto que instala un flujo de diseño basado en DESIGN.md en agentes de código (Claude Code, Codex, OpenCode y Cursor). Tiene licencia MIT y es un proyecto de un desarrollador coreano.
- Incluye 440 referencias empresariales y documenta para cada valor en qué pantalla, mediante qué método y cuándo se verificó. Sin embargo, el nuevo esquema de validación aún solo cubre una parte (unos 140).
- Amplía la especificación DESIGN.md de Google Stitch con Voice, Narrative y Personas para especificar también el tono de marca que los tokens no capturan.
- Se basa en archivos locales. Funciona dentro de sesiones de agentes existentes sin claves API, demonios ni servidores MCP; el enfoque MCP inicial se retiró deliberadamente.
- Las referencias son activos de cada empresa y no deben copiarse tal cual; además, son snapshots medidos que pueden quedar obsoletos. En repositorios de equipo hay que acordar si se harán commit de los archivos instalados.
El repositorio está en https://github.com/kwakseongjae/oh-my-design; el catálogo y la documentación, en oh-my-design.kr. En la próxima entrega volveremos a abrir otro repositorio oculto.
Seguir leyendo
Serie Explorando open source
- Entrega anterior: [Explorando open source #1] AutoThreads, aplicación de escritorio open source que deja la gestión de una cuenta de Threads en manos de la IA
Temas relacionados
Fuentes y verificación
- oh-my-design READMEkwakseongjae · Documentación oficial · Consultado 9 de agosto de 2026Respalda: 4 agentes compatibles y paquetes por canal, 20 skills, 18 subagentes, más de 440 referencias, sin necesidad de claves API, demonios ni servidores MCP, archivo de la implementación MCP, licencia MIT y situación legal de las referencias
- Design Systems 카탈로그oh-my-design · Datos oficiales · Consultado 9 de agosto de 2026Respalda: Distribución de niveles de calidad (141 Verified v2, 159 Partial y 140 Legacy) y el principio «la confianza se calcula con evidencia, frescura y conflictos»
- oh-my-design 공식 문서oh-my-design · Documentación oficial · Consultado 9 de agosto de 2026Respalda: Composición detallada de skills y subagentes, y opciones de instalación
- Google Stitch DESIGN.md OverviewGoogle · Documentación oficial · Consultado 9 de agosto de 2026Respalda: Fuente de la especificación DESIGN.md en la que se basa oh-my-design
- oh-my-design-cli — npmnpm registry · Datos oficiales · Consultado 9 de agosto de 2026Respalda: Historial de versiones: primer lanzamiento a finales de abril de 2026 y versión actual 1.9.0 (2026-07-21)