Hecho para agentes
Cada sección llega con su tipo, sus medidas y el motivo de la clasificación. Nada de adivinar mirando un JPEG.
MCP de diseño · sin cuenta ni API key
Referencias de diseño que tu agente puede medir
Colores con su rol, tipografía real, composición y DESIGN.md de sitios reales, listos para Claude, Codex o Cursor.
Funciona conClaude CodeCodexCursorVS CodeGemini CLIWindsurfZed
get_referencePaleta por rol
Display
0px
Alternativa libre
Radio
Secciones detectadas
Así lo usa tu agente
Le pides una página y busca referencias reales antes de escribir una línea.
Tú
Diseña la página de precios de mi app de facturación
Claude Code
Antes de escribir código busco páginas de precios reales en Matiz.
Usó matiz · search_references { page: "pricing" }
Estas tres cubren tema oscuro, serif y sans. Tomo sus medidas:
Los agentes ya escriben código. Pero no saben qué funciona en diseño. Adivinan, y se nota. Matiz les da referencias medidas.
Datos para construir, no solo imágenes
Cada referencia llega medida en el navegador. Tu agente lee el plano antes de mirar la captura.
La composición como dato
Qué secciones lleva una página de tu industria y con qué frecuencia, contado sobre sitios reales.
Cada fuente con su alternativa libre
Las referencias usan tipografías comerciales. Matiz te dice cuál de Google Fonts usar en su lugar.
Revisa tu build contra la referencia
Mide tu página, también en localhost, y te dice qué corregir con los valores de los dos lados.
El acento de cada marca, medido
Cada franja es el color de acción de un sitio del corpus, ordenado por tono. Pasa el cursor para ver cuál.
Pregúntale lo que sea
Copia un prompt y pruébalo en tu agente.
Esta página la diseñó Matiz
Capturamos las páginas de Mobbin y Refero con Matiz y diseñamos esta a partir de sus medidas.
Sin cuenta · sin API key
Listo en un minuto
Una línea de configuración y tu agente puede buscar, comparar y medir referencias en cada tarea.
Paso 1
Ten Node.js 22.13 o superior
Matiz usa el SQLite que trae Node. Revisa tu versión con node -v.
Paso 2
Conecta tu herramienta
Paso 3
Reinicia tu cliente
La primera vez Matiz deja su corpus en tu máquina en menos de un segundo. Chromium se descarga solo cuando haga falta capturar un sitio.
Paso 4
Pruébalo
Pídele a tu agente: “Busca páginas de precios con 3 planes y dime qué tienen en común”.
Preguntas frecuentes
¿Qué es un MCP de diseño?
Un servidor que tu agente (Claude, Codex, Cursor…) puede llamar mientras trabaja. Matiz le responde con referencias de diseño medidas en vez de dejarlo adivinar.
¿En qué se diferencia de Mobbin o Refero?
Mobbin y Refero son catálogos curados enormes, con apps de iOS y flujos completos. Matiz mide sitios web públicos: te da tokens, composición, alternativas libres y la revisión de tu build, corre en tu máquina y es gratis. Se pueden usar juntos.
¿De dónde salen las referencias?
De sitios públicos que Matiz abre con un navegador y mide. No copia catálogos de servicios de pago. Las capturas se guardan solo en tu máquina, y cada resultado cita la URL original.
¿Qué tan exacto es?
Colores, tamaños, tracking y radios se leen directo del navegador. El tipo de cada sección es una clasificación, y medimos su exactitud contra secciones etiquetadas a ciegas.
¿Hay una galería para ver las referencias?
Sí. npx -y gallery abre en tu navegador una galería estilo Mobbin con todo tu corpus: filtros, ficha de datos y botones para copiar el blueprint o el DESIGN.md. Corre solo en tu máquina.
¿Puedo agregar los sitios que me gustan?
Sí. Pídele a tu agente capture_site con la URL, o corre npx -y capture https://….
¿Funciona sin internet?
Buscar, comparar y exportar funcionan offline. Capturar sitios nuevos y revisar una URL necesitan red.
¿Y en Windows?
Funciona con Node 22.13+. Si tu cliente no encuentra npx, usa cmd como comando y /c npx -y … como argumentos.