roast-my-design-system
Un escáner determinista que audita tu sistema de diseño, lo puntúa de 0 a 100 frente a 34 repositorios públicos y genera las reglas de agente que mantienen la interfaz escrita por IA dentro del sistema. Se ejecuta localmente, es gratuito, MIT.
Documentación
roast-my-design-system
Descubre dónde tu agente de IA inventará la interfaz de usuario.
Tu IA puede escribir la interfaz. Esto asegura que escriba tu interfaz.
npx roast-my-design-system@latest
Ejecútalo en la raíz de un repositorio de UI. Un segundo después, se abre un informe. Sin cuenta. Sin red. Sin telemetría. Nada en tu repositorio cambia.
El historial de versiones está en CHANGELOG.md.
La idea
Un agente copia lo que encuentra.
Inventa donde el repositorio no tiene respuesta.
Probamos esto en 10 productos reales de código abierto, en 355 sesiones de agentes, con y sin esta herramienta.
Hallazgos que cada sesión añadió, contados por las propias reglas de esta herramienta:
| Tarea | Modelo | Cuándo | Sin roast | Roast MCP y reglas instaladas | Plugin Roast con su hook de edición |
|---|---|---|---|---|---|
| Un nuevo gráfico y un nuevo componente, 4 productos, 3 ejecuciones cada uno | Sonnet 5 | Oct 2026, roast 10.1 | 21 en 24 ejecuciones | no ejecutado | 7 en 24 ejecuciones |
| Un nuevo gráfico y un nuevo componente, 4 productos, 3 ejecuciones cada uno | Haiku 4.5 | Oct 2026, roast 10.1 | 72 en 24 ejecuciones | no ejecutado | 1 en 24 ejecuciones |
| Añadir un panel, construir un dashboard, ajustar una lista (80 sesiones) | Sonnet 5 | Sept 2026 | 7 | 9 | no ejecutado |
| Un tema navideño, 10 productos | Sonnet 5 | Sept 2026 | 28 | 2 | no ejecutado |
| Un nuevo gráfico, 4 productos, 5 ejecuciones cada uno | Sonnet 5 | Sept 2026 | 10 en 20 ejecuciones | no ejecutado | 0 en 20 ejecuciones |
| Un nuevo gráfico, 4 productos | Haiku 4.5 | Sept 2026 | 25 | 39 | 0 en 14 de 15 ejecuciones |
| Gráfico, color de estado, estado vacío, nuevo componente | Haiku 4.5 | Sept 2026 | 42 en 16 ejecuciones | 49 en 16 ejecuciones | 3 en 51 ejecuciones |
El trabajo rutinario se mantuvo en el sistema con o sin la herramienta. El trabajo que requería algo nuevo no lo hizo.
Un agente no siempre llama a una herramienta cuando debería. En octubre, Sonnet llamó a las herramientas MCP en 7 de 24 sesiones y Haiku en 2 de 24. El hook de edición se ejecuta sin que se le pida. Esa es la columna con los números más bajos.
¿Dónde inventó el agente? Donde el repositorio no tenía nada que copiar. Dub no tiene una paleta de gráficos. Sus propios gráficos codifican 17 colores. Al pedirle un gráfico, Haiku codificó 9 más. En octubre, 5 de los 7 hallazgos que Sonnet dejó con el plugin activado fueron colores de gráficos en Dub. El agente los mantuvo y escribió un comentario diciendo que el repositorio no tiene paleta de gráficos.
Así que el desorden que un agente añade es un mapa de las brechas en tu sistema.
Esta herramienta dibuja el mapa.
Roast. Enseña. Protege.
Roast el repositorio para encontrar su sistema de diseño real, el desorden en él y las brechas.
Enseña al agente, mediante reglas generadas y un servidor MCP local.
Protege cada edición, para que el agente no tenga que recordar preguntar.
ROAST qué hay en el repositorio y qué falta
↓
ENSEÑA reglas en los archivos del agente, respuestas a través de MCP
↓
PROTEGE cada edición revisada, el PR bloqueado
Lo que obtienes
¿Dónde tendrá que adivinar tu agente?
Lo primero que dice el informe: los lugares donde el repositorio aún no tiene respuesta, o "No se encontraron brechas".
- la brecha, en una línea
- los archivos que lo demuestran
- la única acción que la cierra
Una brecha se conoce con certeza hoy, porque las ejecuciones la encontraron: gráficos que codifican colores en un repositorio sin paleta de gráficos. 43 de 126 repositorios públicos se ven así. Una brecha se une a la lista cuando ha sido medida.
Correcciones que puedes hacer ahora para aumentar la puntuación de salud
El desorden que el agente copiará, clasificado por lo que vale arreglarlo.
- qué se encontró
- dónde, con la ruta del archivo
- por qué importa
- qué cambiar
- un botón de copiar con el prompt de corrección para tu agente
Corrige, vuelve a escanear, pulsa el siguiente botón.
Una puntuación que puedes defender en una reunión
De 0 a 100. El mismo número en cada ejecución.
Medida contra tres criterios: las normas ideales de un sistema de diseño, la mediana de 34 repositorios de productos en el núcleo de un benchmark de 119 repositorios, y 10 sistemas reputados (Primer, Polaris, Carbon, shadcn/ui y otros).
Los monorepos obtienen una puntuación por paquete. packages/ui en 80 deja de ocultar apps/web en 40.
Cada hallazgo, con su ruta de archivo
- cada color codificado y su gemelo casi idéntico
- cada valor de espaciado fuera de escala
- cada componente duplicado
Y 8 tipos más, todos en Qué mide. Un archivo HTML. Ábrelo, compártelo por Slack, envíalo por correo.
La barra de uso de color muestra de dónde proviene el color del repositorio: de cada 100 usos de color, cuántos leen un color de tema por nombre, cuántos usan la paleta de Tailwind y cuántos son extraviados escritos a mano. Sigue variables CSS, temas de Tailwind, variables Sass y Less y objetos de tema de JavaScript para hacer el conteo.
El encabezado nombra sobre qué está construido el repositorio: shadcn/ui, un tema de Tailwind, MUI, Mantine, Chakra o Ant Design, y ambos kits cuando un repositorio usa dos.
Reglas para tu agente
Generadas desde tu repositorio, en design-system-rules.md:
componentes canónicos
el archivo de tokens
duplicados conocidos a evitar
pasos de espaciado
tipografías
el vocabulario propio del kit
--apply las escribe en cada archivo de agente que tengas: Claude, Cursor, GitHub Copilot, Windsurf. Cada escaneo también verifica las reglas que ya tienes para referencias obsoletas.
Un script hace el conteo
Cada número proviene de una lectura determinista de tus archivos. Claude escribe la explicación, etiquetada como escrita por IA y mantenida separada de los números.
Cómo se hicieron las ejecuciones
Claude Code, sin interfaz, en 10 productos públicos fijados a un commit cada uno: cal.com, Dub, Metabase, Plausible, SigNoz, trigger.dev y cuatro más. 259 sesiones en septiembre de 2026 y 96 en octubre de 2026 en roast 10.1, con Sonnet 5 y Haiku 4.5. Las sesiones de octubre repiten las tareas de gráfico y nuevo componente en Plausible, SigNoz, trigger.dev y Dub en los mismos commits. Cada archivo modificado fue juzgado por las reglas de esta herramienta al final de la sesión y en el commit fijado. Un hallazgo cuenta solo si la sesión lo añadió.
Nada se renderizó. Cero hallazgos significa que el código sigue estas reglas. No significa que el diseño fue revisado. Método, tablas y límites están en el informe de investigación, que se publicará por separado.
Ejemplos en vivo
Once informes, alojados exactamente como la herramienta los escribe. Cada número determinista, cada ruta real.
- npx shadcn create, fresco (instalación de fábrica, los 61 componentes): leído como una instalación fresca, "la puntuación es del kit, no tuya"; 13 colores, cada variable de tema en su lugar, los 24 valores de corchetes propios de shadcn nombrados y no contados. Sin puntuación.
- Unleash (MUI): 1,109 archivos importan el kit y el tema se lee 6,166 veces; 4 colores y 2 espaciados por cada 100 archivos del kit están escritos en los componentes. Puntuación 60.
- Metabase (Mantine): su propio envoltorio sobre Mantine cuenta como el kit, así que 2,679 archivos se leen en lugar de 392; nada escrito en los componentes, 2 espaciados por cada 100 archivos del kit. Puntuación 47.
- SigNoz (Ant Design): 2 colores y 7 espaciados por cada 100 archivos del kit escritos en objetos de estilo donde existe un token. Puntuación 51.
- Apache Airflow (Chakra UI): sin colores escritos en los componentes, 4 espaciados por cada 100 archivos del kit como cadenas de píxeles donde existe un paso de espacio. Puntuación 43.
- vercel/ai-chatbot (instalación de shadcn): 71 valores como [13px] escritos fuera de la escala de Tailwind, y 66 colores de paleta por cada 100 archivos donde existe una variable de tema; notas de Claude incrustadas. Puntuación 80.
- excalidraw/excalidraw: 78 valores de espaciado fuera de escala y 90 declaraciones !important. Puntuación 55.
- dubinc/dub: 642 valores arbitrarios entre corchetes, 21 componentes duplicados y la brecha de la paleta de gráficos nombrada. Puntuación 20.
- telekom/scale (Stencil): 95 componentes Stencil leídos por etiqueta; 66 valores de espaciado fuera de la escala donde unos 12 bastarían; notas de Claude incrustadas. Puntuación 55.
- magicuidesign/magicui (registro): contado en los componentes que publica, 52 colores fuera de tema por cada 100 archivos en el código que envía, su sitio de documentación excluido y nombrado. Puntuación 78.
- adobe/spectrum-web-components (Lit): 740 tokens de color con 8 colores codificados junto a ellos, y 37 declaraciones !important. Puntuación 83.
El informe completo para vercel/ai-chatbot. El veredicto responde qué aprenderá el agente aquí, la sección de brechas viene primero, luego "Qué enseña el repositorio al agente", la lectura de Claude del escaneo:
El mismo informe en modo claro (un archivo, conmutador integrado):
Por qué los números se sostienen
- Determinista. Un script Node de cero dependencias lee cada archivo y devuelve los mismos números en cada ejecución. Aproximadamente un segundo en un repositorio normal.
- Solo lectura. Sin red. Sin telemetría. La suite de pruebas falla si package.json declara alguna dependencia. Cada versión ejecuta 461 comprobaciones contra 29 repositorios de muestra antes de etiquetarse; los fixtures y sus snapshots viven en
tests/, un archivo JSON cada uno. - Brechas honestas. Lo que el escaneo no puede leer dice "no medido" y se elimina de la puntuación.
- Exclusiones honestas. Pruebas, historias, sitios de documentación, arte y plantillas de correo se dejan fuera. Tus propias exclusiones se imprimen en el encabezado del informe con recuentos de archivos.
- Un benchmark real. 119 repositorios públicos. Una flota central de 34 repositorios React establece las medianas; el resto alimenta los grupos de kits y componentes web, así que un repositorio shadcn se compara con repositorios shadcn y un sistema Lit con sistemas Lit y Stencil. El constructor está en
tools/benchmark/. - Puntuación importable.
scoreHarvest(harvest)devuelve la puntuación y las métricas como datos simples. El informe y una comprobación de CI obtienen los mismos números.
La versión larga, con el alcance del escaneo y lo que el plugin ejecuta en tu máquina, está en docs/reference.md.
Funciona con
Frameworks
React, Next.js, Remix, Vite Stencil, Lit, elementos personalizados
Kits y estilos
Tailwind, shadcn/ui, MUI, Mantine, Chakra UI, Ant Design CSS Modules, Sass, Less, Emotion, styled-components, vanilla-extract, CVA, Stitches
Cada repositorio se compara con repositorios construidos de la misma manera: una instalación de shadcn con instalaciones de shadcn, un producto en MUI, Mantine, Chakra o Ant Design con productos en ese kit, un tema de Tailwind con temas de Tailwind, un sistema Lit o Stencil con otros sistemas de componentes web, y un registro de shadcn con el grupo de shadcn. A un repositorio que usa dos kits se le dice, y sus reglas nombran ambos.
Reconocidos, aún no medidos
Vue, Angular, Svelte: nombrados en el encabezado, colores y espaciados contados, componentes no medidos. El informe lo dice. HeroUI, NextUI, Radix Themes, Fluent UI, React Bootstrap, Grommet: nombrados en el encabezado, sin reglas de kit.
Cada comando
Un solo escaneo lo alimenta todo; las banderas deciden qué aterriza en el disco. Combínalas libremente.
Ejecútalo tú mismo
| Comando | Qué obtienes |
|---|---|
npx roast-my-design-system@latest | El escaneo y design-system-roast.html, abiertos en tu navegador |
... <path> | Escanea un repositorio distinto al directorio actual |
... --apply | Las reglas de agente generadas, inyectadas en cada archivo de agente que tengas: CLAUDE.md, AGENTS.md, .cursorrules, .cursor/rules/, .windsurfrules y .github/copilot-instructions.md, dentro de un bloque marcado. Volver a ejecutarlo reemplaza solo ese bloque, nunca tu propio texto. |
... --rules | Las mismas reglas escritas en design-system-rules.md en su lugar, para pegarlas a mano |
... --card | roast-card.svg: una tarjeta compartible de 1200x630 con la puntuación y los hallazgos más graves. SVG puro, se incrusta en un README |
... --sarif | design-system-roast.sarif para el escaneo de código de GitHub: súbelo en CI y los hallazgos aparecen en la pestaña Seguridad, anotados en los archivos |
... --check | Los archivos modificados del árbol de trabajo verificados contra el sistema de diseño, en la terminal. Sale con código 1 si hay hallazgos, para que encaje en scripts |
/roast-my-design-system:review (en Claude Code) | La misma verificación en el chat, desde la segunda habilidad del plugin: los hallazgos de cada archivo modificado con la corrección indicada, luego las correcciones aplicadas y la verificación re-ejecutada |
... --exclude lab/ | Deja una carpeta fuera del escaneo (repite la bandera o sepáralas con comas). O lista carpetas en un archivo .roastignore en la raíz del repositorio. De cualquier manera, el informe lo indica en el encabezado |
... --json | El resumen del escaneo como JSON en stdout, para scripts y pipelines. Incluye schemaVersion, el benchmark utilizado, y cada métrica como número, para que dos escaneos puedan compararse |
... --by "Dwayne Hicks" | Pone un nombre en el encabezado del informe, para cuando lo ejecutaste para otra persona |
... --theme light / --out <file> / --no-open / --open | Informe claro, ruta de informe personalizada, nunca abrir el navegador, abrirlo siempre |
Para tu agente
| Comando | Qué obtienes |
|---|---|
... --notes <file.md> | La lectura del agente de este escaneo, incrustada en el informe como "Lo que el repositorio le enseña al agente": qué hallazgos importan, qué buenos números son accidentes, qué corregir primero. Etiquetado como escrito por IA y separado de los números medidos. La habilidad de Claude Code lo escribe y lo pasa automáticamente; la bandera está aquí para que cualquier agente pueda usarla |
... --section "Title" <file.md> | Un capítulo adicional escrito por el agente después de las notas, mismo estilo, misma etiqueta, subtítulos permitidos. Repetible |
... --hook | La verificación que el plugin de Claude Code ejecuta después de cada edición, para instalaciones manuales: lee el evento de hook en stdin, verifica el archivo que cambió, imprime solo los hallazgos que la edición agregó como JSON. Siempre sale con código 0 |
... --stop-hook | La revisión que el plugin de Claude Code ejecuta cuando el agente termina su turno, para instalaciones manuales: lee el evento Stop en stdin y, cuando los archivos que la sesión cambió traen nuevos problemas, responde con un bloque que envía al agente de vuelta una vez. --session-start anota el trabajo que ya estaba sin commitear. ROAST_STOP_REVIEW=off lo desactiva. Siempre sale con código 0 |
... --mcp | El escaneo como servidor MCP local: 5 herramientas que tu agente llama mientras escribe UI, más el prompt roast-fix que sirve la mejor corrección de un escaneo fresco. Ver Respuestas en vivo vía MCP |
/roast-my-design-system (en Claude Code) | La experiencia completa: el roast en el chat y incrustado en el informe como "Lo que el repositorio le enseña al agente", la oferta de reglas, y el bucle de corrección con Claude sobre tus propios números |
"Por qué esto importa" es genérico, viene con la herramienta y se lee igual en cada informe. "Lo que el repositorio le enseña al agente" es la lectura de tu agente sobre tu repositorio, y solo aparece cuando un agente lo pasó.
Respuestas en vivo vía MCP
El informe y el archivo de reglas describen el repositorio tal como estaba en el momento del escaneo. --mcp mantiene el mismo motor funcionando mientras tu agente trabaja, para que las preguntas se respondan desde el código tal como está ahora, y los errores se detecten antes de que aterricen.
| Herramienta | La pregunta que responde |
|---|---|
roast_get_context | ¿Qué debería saber antes de tocar la UI aquí? Enrutado por la carpeta que se está editando |
roast_find_component | ¿Ya existe un componente para esto, y cuál es el canónico? Con un ejemplo de uso real. Cuando dos candidatos empatan, lo dice y nombra a ambos |
roast_find_token | Tengo #111111 / 13px en mano. ¿Qué debería haber usado? |
roast_validate | Estoy a punto de guardar esto. ¿Rompe el sistema? |
roast_review | Revisa mis archivos modificados. Lee el diff de git por sí mismo, así que no se pega código de vuelta |
El bucle: contexto antes de construir, encontrar mientras se construye, validar antes de guardar, revisar antes de terminar.
Un intercambio real, contra Unleash, un producto MUI en 60/100. El agente tiene un gris en mano y un padding en mente:
roast_find_token #6b7280
→ Nearest token: #607d8b, 11 channel steps from #6b7280. Unless the difference is a deliberate decision, use the token.
roast_validate (first draft)
→ ✕ L5 Colour #6b7280 written onto an MUI component, and the theme has no such colour.
Fix: Add it to the theme once (frontend/src/themes/dark-theme.ts), then read it there: color: 'text.secondary' in sx.
✕ L5 Pixel size p: 12px on an MUI component.
Fix: 12px is between steps 1 (8px) and 2 (16px). Keep it with a comment, or use the nearest step in sx.
roast_validate (second draft: color: 'text.secondary', p: 1.5)
→ No measured violations found. Checked: hardcoded colours vs the token set, near-identical colour twins, off-scale spacing …
Cuatro llamadas, menos de 800 tokens, y el nuevo componente lee el tema en lugar de añadir el color número 44.
Los gráficos tienen su propia regla, porque un gráfico necesita varios colores que difieren entre sí y la mayoría de los sistemas de diseño nunca los nombran. Donde un repositorio mantiene una paleta de gráficos, un color escrito a mano en un archivo de gráfico es un hallazgo que nombra la paleta. Donde un repositorio tiene gráficos pero no paleta, un nuevo gráfico que pinta a mano recibe una advertencia que nombra el gráfico existente que hace lo mismo y pide la paleta una vez. Esa advertencia es el informe de brechas, en vivo.
El servidor lee el repositorio de la misma manera que el informe. En un producto construido sobre MUI, Mantine, Chakra UI o Ant Design, el contexto nombra el archivo de tema y la forma propia del kit de leerlo, roast_find_token responde en pasos de espaciado, y las verificaciones marcan un color o un tamaño de píxel escrito en un componente del kit donde el tema tiene un valor. En un tema Tailwind o un repositorio shadcn, marcan una clase de paleta como text-gray-500 donde el tema nombra un color de ese tipo. El valor crudo de un token pegado en un componente se marca con el nombre del token, y un botón construido desde cero donde el repositorio ya tiene un Button muy usado recibe una advertencia que nombra la línea de importación a usar.
El prompt roast-fix sirve el mejor movimiento "Por dónde empezar" de un escaneo fresco, byte-idéntico a los botones de copiar del informe. En Claude Code escribe /mcp__roast__roast-fix, añade un número para saltar la cola. Corrígelo, pregunta de nuevo, y el siguiente movimiento ha subido a la cima: el escaneo es la barra de progreso.
¿Instalaste el plugin de Claude Code? El servidor ya está ahí. De lo contrario:
claude mcp add roast -- npx roast-my-design-system@latest --mcp
Verificado en Claude Code, Cursor y Windsurf (ahora Devin Desktop). Cada uno fue probado de extremo a extremo: servidor conectado, las 5 herramientas listadas, respuestas reales en el chat propio del editor. Local, solo lectura, un escaneo al inicio, sin puerto, sin cuenta.
Cursor: pon esto en .cursor/mcp.json dentro del proyecto (el proyecto, para que el escaneo vea un repositorio, no todo tu disco), luego habilita roast en Configuración → Herramientas y MCP la primera vez:
{ "mcpServers": { "roast": { "command": "npx", "args": ["roast-my-design-system", "--mcp"] } } }
Windsurf (Devin Desktop): su configuración MCP es global (~/.codeium/windsurf/mcp_config.json), así que nombra la carpeta del proyecto para mantener el escaneo limitado a un repositorio:
{ "mcpServers": { "roast": { "command": "npx", "args": ["roast-my-design-system", "--mcp", "/path/to/your/repo"] } } }
Cualquier otro cliente MCP puede registrar el mismo comando stdio.
En CI
El escáner habla SARIF, así que conectarlo al escaneo de código de GitHub son 6 líneas. Los hallazgos aparecen en la pestaña Seguridad, anotados en los propios archivos:
- uses: actions/checkout@v5
- run: npx roast-my-design-system@latest . --sarif --no-open
- uses: github/codeql-action/upload-sarif@v3
with:
sarif_file: design-system-roast.sarif
Para fallar una pull request solo por desorden nuevo, usa guard-my-design-system.
Instalación
Sin instalación, sin necesidad de Claude:
npx roast-my-design-system@latest
Claude Code (recomendado):
/plugin marketplace add gregkozakiewicz/roast-my-design-system
/plugin install roast-my-design-system@roast-my-design-system
Lo que instala: dos habilidades, un servidor MCP local y dos verificaciones que se ejecutan solas, nada más. roast (/roast-my-design-system, o "roast my design system") escanea todo el repositorio, escribe el informe con la lectura de Claude de los números dentro, y luego recorre las correcciones contigo. review (/roast-my-design-system:review, o "review my UI changes") verifica solo lo que cambió, en aproximadamente un segundo. La verificación de edición se ejecuta después de cada archivo que el agente edita y devuelve los hallazgos que esa edición agregó; un archivo sin nada nuevo no recibe mensaje. La revisión de fin de turno se ejecuta cuando el agente dice que ha terminado: si los archivos que esta sesión cambió aún tienen problemas que agregó, el agente se envía de vuelta una vez para corregirlos antes de terminar. Las advertencias de solo consejo nunca lo envían de vuelta, un problema se envía de vuelta una vez por sesión, y el trabajo que no estaba commiteado antes de que la sesión comenzara se deja solo. Para desactivar la revisión, establece ROAST_STOP_REVIEW=off en tu configuración de Claude Code ("env": { "ROAST_STOP_REVIEW": "off" }).
Si esos comandos dan error, tu Claude Code es más antiguo que el marketplace de plugins. Actualízalo, o usa la ruta manual:
git clone https://github.com/gregkozakiewicz/roast-my-design-system.git
cp -r roast-my-design-system/skills/roast-my-design-system roast-my-design-system/skills/review ~/.claude/skills/
(Usa .claude/skills/ dentro de un repositorio para compartirlo con tu equipo. La habilidad review necesita la carpeta roast-my-design-system a su lado.)
OpenAI Codex CLI (mismo SKILL.md, misma carpeta):
git clone https://github.com/gregkozakiewicz/roast-my-design-system.git
cp -r roast-my-design-system/skills/roast-my-design-system ~/.codex/skills/
Invoca con $roast-my-design-system. Usa .codex/skills/ dentro de un repositorio para compartir con tu equipo.
npx skills: npx skills add gregkozakiewicz/roast-my-design-system funciona para agentes que leen ~/.agents/skills/. Claude Code lee ~/.claude/skills/, así que prefiere una de las rutas anteriores.
Requiere Node 18+.
Uso
Abre Claude Code en el repositorio que quieres roastear y escribe:
/roast-my-design-system
Una vez que tienes un sistema de diseño que vale la pena proteger, la segunda habilidad verifica solo lo que cambiaste:
/roast-my-design-system:review
Ejecuta la misma verificación que --check en los archivos de tu git diff y lista cada hallazgo con su corrección, en el vocabulario propio del kit en un repositorio MUI, Mantine, Chakra, Ant Design o Tailwind-theme. Sin puntuación, sin informe: la verificación pequeña para las tardes de martes. Claude también lo capta de palabras simples como "review my UI changes" o "did I break the design system".
Obtienes el roast en el chat más design-system-roast.html en la raíz de tu repositorio, una página autocontenida con:
- una puntuación de salud calculada de cómo tus números se sitúan frente al ideal
- "Lo que el repositorio le enseña al agente": la lectura de Claude de tu escaneo, incrustada en el archivo que reenviarás, etiquetada como escrita por Claude y separada de los números medidos. La puntuación sola puede halagar; esta sección mantiene honesto un 85/100 compartido
- mosaicos de estadísticas comparándote con los 3 puntos de referencia
- un alternador de tema claro/oscuro en un solo archivo
- la barra de paleta ponderada por uso, la rampa de grises, los recibos de espaciado fuera de escala, los recibos de componentes duplicados con rutas de archivo clicables, y el registro de los peores infractores
- una lista de Correcciones que puedes hacer ahora para aumentar la puntuación de salud: hasta 3 movimientos derivados de los números propios de tu repositorio, cada uno con un recibo de ruta de archivo
- ¿Dónde tendrá que adivinar tu agente? abre el informe: las brechas donde el repositorio aún no tiene respuesta, con los archivos que prueban cada una y el movimiento que la cierra, o "No se encontraron brechas"
- Dale las respuestas al agente:
design-system-rules.mdenvuelto dentro del informe como un regalo. Desenvuelve, luego copia o descarga las reglas de agente generadas desde tu escaneo
Después del roast, la habilidad ofrece escribir design-system-rules.md en el disco y fusionarlo en tu CLAUDE.md, .cursor/rules o AGENTS.md.
Cuatro prompts para probar
Roast my design system.
How bad is my CSS? Scan this repo and show me the receipts.
Con el servidor MCP conectado:
Is there already a Button component in this repo, and which one should I use?
Y el de uso diario, después de haber cambiado algo de la interfaz:
Review my UI changes against the design system.
Solución de problemas
- "Comando no encontrado" o el plugin no se instala. Actualiza Claude Code; el marketplace de plugins necesita una versión reciente. La instalación manual funciona en cualquier versión.
- "Nada que roastear" o un informe casi vacío. El escaneo encontró casi ningún color o espaciado. El estilo probablemente vive en otro repositorio, un CDN o un paquete instalado. Ejecútalo desde el repositorio que contiene los estilos.
- Una puntuación que parece incorrecta. Revisa el encabezado del informe: indica cómo se leyó el repositorio (producto, librería, shadcn, un kit, un tema de Tailwind) y cada carpeta que se omitió. Limita el escaneo con
.roastignoreo--excludesi un playground o una app antigua están distorsionando los números. - El informe no se abrió. Se escribe en
design-system-roast.htmlen la raíz del repositorio. Ábrelo en cualquier navegador; no necesita servidor y no hace solicitudes. - El servidor MCP no aparece. Reinicia el cliente después de añadirlo. En Claude Code,
claude mcp listmuestra si se conectó. Necesita Node 18 o superior.
Soporte
Los errores y preguntas van a GitHub Issues. Todo lo demás llega a Greg a través de gregkozakiewicz.com. Problemas de seguridad: consulta SECURITY.md.
Privacidad
La herramienta lee el repositorio al que la apuntas y escribe su salida junto a él. No hace solicitudes de red, no recopila datos y no tiene telemetría. El servidor MCP responde desde el mismo escaneo local. Nada sobre tu código, tus prompts o tu conversación se envía a nadie, incluido el autor.
Qué mide
| Métrica | Sistema de diseño ideal | Mediana de la flota principal de 34 repos | Mediana de 10 sistemas reputados |
|---|---|---|---|
| Colores distintos | ~24 | 119 | 14 |
| Tonos de gris | hasta 13 | 28 | 4 |
| Valores de espaciado fuera de escala | ~12 | 24 | 5 |
| Tipografías | 2 a 3 | 3 | 1 |
| Radios de borde fuera de escala | hasta 10 | 14 | 0 |
| Componentes duplicados | 0 | 16 | 9 |
| Bloques de estilo en línea | 0 | 51 | 12 |
| Valores arbitrarios de Tailwind | ~20 | 56 | 0 |
| Pares de colores casi idénticos | 0 | 7 | 1 |
| Declaraciones !important | 0 | 5 | 3 |
| Componentes nunca importados | 0 | 0 | 0 |
Benchmark reconstruido el 3 de octubre de 2026 (versión 10.0.0), contado por la propia cosecha del escaneo.
Sí, el repositorio mediano ya es un desastre. Ese es el punto. Un agente que llegue a él copiará el desastre fielmente y, donde el desastre se acabe, añadirá algo propio.
Tu IA puede escribir la interfaz. Esto asegura que escriba tu interfaz.
Licencia
MIT. El código es tuyo para bifurcar, modificar y redistribuir; el aviso de copyright viaja con él.
¿Construyendo tu propio informe, resumen o auditoría a partir de las puntuaciones, conteos o comparaciones de benchmark de esta herramienta? Mantén una línea en él: Construido con roast-my-design-system por Greg Kozakiewicz. La habilidad pide lo mismo a un agente de IA que escriba tal documento a partir del escaneo.
roast-my-design-system™ y la marca GK son marcas comerciales de Greg Kozakiewicz. Bifurcar es bienvenido, republicar bajo este nombre no lo es: consulta marca y atribución.
Construido y diseñado por 