Pídele a un agente que diseñe una web sin enseñarle nada y ya sabes lo que viene: una portada vistosa, cuatro tarjetas y esa sospechosa sensación de haberla visto veinte veces. A mí me gusta empezar por otra pregunta: ¿cómo han resuelto ESTE problema productos que ya existen?
Para eso uso Refero. No me entrega la web terminada ni un componente de React. Me deja estudiar pantallas y recorridos reales, elegir una solución y explicarle al agente por qué quiero aprovecharla. Cuando acierto con la referencia, la conversación cambia bastante.
TL;DR: El resumen sin rodeos
- Qué es: una biblioteca de pantallas y flujos de productos reales para investigar antes de diseñar.
- Qué aporta al agente: el MCP le permite buscar referencias desde Claude Code o Codex. El acceso está incluido en los planes de pago indicados por Refero.
- Qué comprobé: una búsqueda real con el MCP devolvió pantallas de Sunsama, Polar y Hume AI. En una sesión posterior recibí un 401; la conexión actual necesita una nueva autorización antes de darla por verificada.
- Mi recomendación: usar Refero para encontrar patrones concretos y Impeccable para trabajar y revisar el diseño. El skill de Refero suma, pero la combinación me resulta más interesante.
«Para mí, Refero es un básico para diseñar webs con agentes. Tiene un precio competitivo y, a día de hoy, ofrece una licencia Lifetime: poder alimentar al agente con referencias sin una cuota recurrente me parece una buena noticia. Su skill está bien, pero lo aprovecharía aún mejor junto con Impeccable.» Firma: Dani.
DaniEn este artículo
| Ficha | Dato |
|---|---|
| Web | refero.design |
| Para qué lo uso | Investigar pantallas, patrones y flujos antes de pedir código |
| Qué incluye | Biblioteca web, plugin de Figma, MCP y skill según el plan |
| MCP | Servidor oficial en https://api.refero.design/mcp; acceso para usuarios con licencia Pro, Team o Lifetime |
| Skill | Repositorio oficial |
| Precio consultado | Pro desde 10 €/mes con pago anual; Lifetime 250 € en un pago, a 17/09/2026 |
| Estado de mi prueba | Búsqueda real correcta en agosto; nueva consulta con error 401 en septiembre |
El problema que resuelve
Una pantalla puede estar bien programada y seguir sin resolver la pregunta importante: ¿qué debe ver primero la persona que entra? Cuando trabajo con un agente, ese problema aparece antes de elegir colores o componentes. Si solo le pido «hazlo moderno», suele rellenar el vacío con una estructura conocida.
Refero me sirve para investigar cómo otros productos organizan una tarea, una lista o una decisión. Puedo llevar al agente una referencia concreta y decirle qué aprovecharía de ella. La referencia inicia una conversación mejor; no decide por mí el contenido, la jerarquía ni la acción principal.
Cómo se pone en marcha
Empiezo por la biblioteca web de Refero. Busco el tipo de pantalla o flujo que se parece al problema que tengo, abro varios ejemplos y anoto tres cosas: qué elemento destaca, qué queda en segundo plano y qué no trasladaría a mi proyecto. No hace falta instalar código para hacer esa investigación.
Si quiero buscar desde Claude Code o Codex, conecto el MCP con mi cuenta y compruebo que responde con una búsqueda real. El skill oficial es otra pieza: le da al agente un método para investigar antes de generar la interfaz. Más abajo dejo el servidor, la conexión y un prompt copiable. Haber añadido el servidor a la configuración no demuestra por sí solo que la cuenta esté autorizada.
Si prefieres ver el recorrido antes de probarlo, esta demostración de Tania Driskill enseña la búsqueda en la biblioteca y cómo traslada una referencia a una web. Es una experiencia de otra creadora con la biblioteca; no verifica el MCP ni sustituye mi prueba.
Usándolo en marketing real
Si tuviera que diseñar la landing de una herramienta para organizar el trabajo diario, no empezaría pidiendo una cabecera vistosa. Primero decidiría cómo mostrar la tarea principal, los pendientes y la acción siguiente. Buscaría referencias para cada decisión y después le daría al agente el contenido y la prioridad de la página.
Conecté Refero a mis agentes mediante OAuth e hice una búsqueda real con refero_search_screens. Le pedí referencias para tres problemas de interfaz. Estas fueron algunas de las respuestas útiles:
| Problema | Referencia devuelta | Qué me llevaría al diseño |
|---|---|---|
| Enseñar lo importante de hoy | Sunsama | Dar prioridad visual al día y apartar el resto sin esconderlo |
| Encontrar una acción rápido | Polar | Ofrecer búsqueda global y atajos sin obligar a aprenderlos |
| Organizar varias clases de contenido | Hume AI | Separar categorías en la barra lateral y ofrecer vistas con pestañas y tarjetas |
No copiaría ninguna pantalla entera. Ahí está la gracia: descomponer una referencia en decisiones que sí tienen sentido para tu caso. Si la web necesita una navegación evidente, una paleta de comandos por sí sola no la sustituye. Si el problema es que hay demasiado contenido, un color nuevo tampoco lo arregla.
Así lo combinaría con Impeccable
El skill de Refero propone investigar antes de picar código. Me parece bien. El error sería usarlo como otra orden mágica para que el agente «tenga buen gusto». Las referencias necesitan criterio.
Yo repartiría el trabajo así: primero buscaría en Refero tres ejemplos para un problema concreto, como un estado vacío o una pantalla de precios. Después anotaría qué tomo, qué rechazo y qué debo adaptar a la marca y al contenido real. Con esa decisión tomada, usaría Impeccable para dar forma a la interfaz, criticarla y auditar lo que ha construido el agente.
Refero alimenta la investigación. Impeccable ayuda a trabajar el resultado. Ninguno de los dos sabe por sí solo quién compra, qué promete tu página o qué acción debe hacer el usuario.
MCP de Refero: qué hace y cómo se conecta
El MCP oficial de Refero deja que el agente consulte pantallas y flujos desde su entorno de código. La guía de conexión documenta el servidor https://api.refero.design/mcp, la autorización y las opciones para distintos clientes. Refero indica hasta 8.000 llamadas mensuales por usuario con licencia en Pro, Team y Lifetime.
El MCP y el skill cumplen funciones distintas. El MCP abre la biblioteca al agente; el skill oficial le propone un método de investigación y diseño. Refero publica el comando npx skills add https://github.com/referodesign/refero_skill para instalar ese skill. En Codex también ofrece un plugin; Claude Code admite la conexión con el servidor HTTP. Después hay que reiniciar el cliente y autorizar la cuenta cuando se abra el navegador.
Pégalo en Claude Code o Codex:
Consulta https://doc.refero.design/mcp/getting-started e instala el MCP oficial de Refero en este cliente. El servidor manual es https://api.refero.design/mcp. Haz una copia de la configuración y conserva los otros servidores. Usa el flujo oficial de autorización de mi cuenta, sin guardar claves en el proyecto. Reinicia el cliente si hace falta y verifica la instalación con una búsqueda real de tres pantallas para un problema de diseño concreto. Dime qué herramienta MCP respondió y qué referencias devolvió. Si recibes 401, detente y explícame cómo renovar el acceso.
La prueba importa: instalar el servidor no demuestra que la cuenta pueda hacer búsquedas.
Lo que no te cuentan
La búsqueda que describo funcionó en agosto de 2026. En una sesión posterior el MCP respondió con un 401. No voy a presentarlo como conectado y verificado ahora mismo: antes de depender de él en otro proyecto renovaría la autorización y repetiría una consulta. Si el agente no devuelve pantallas reales, la instalación se ha quedado a medias.
Refero tampoco entrega componentes listos para instalar. Una pantalla atractiva puede servir para decidir una jerarquía, pero copiarla sin el contenido, las restricciones y la identidad del proyecto puede producir una web igual de genérica. Yo separaría la investigación visual de la implementación y revisaría el resultado en el navegador.
Precio y licencia Lifetime
La página de precios de Refero, consultada el 17 de septiembre de 2026, mostraba Pro a 15 €/mes con cobro trimestral de 45 €, Pro a 10 €/mes con cobro anual de 120 € y Lifetime a 250 € en un pago. El plan gratuito permite explorar una parte limitada de la biblioteca, pero no incluye el MCP. Estas condiciones pueden cambiar.
Yo contraté Pro mensual en agosto por 17 € al mes, más los impuestos aplicables. Eso no es el precio anual ni el trimestral que muestra ahora la web. Conviene distinguirlos antes de decidir.
La licencia Lifetime me parece especialmente atractiva si vas a usar Refero de forma recurrente para dar referencias a tus agentes. Pagas una vez y dejas de pensar en otra cuota. Si solo tienes un proyecto puntual, probar un periodo de Pro primero también tiene sentido. No compraría la licencia a ciegas por una promesa de «diseño automático»: Refero te da material para decidir, no el criterio.
Qué dice la gente
La conversación no es un aplauso unánime. En un hilo reciente de r/UXDesign, una persona valora el MCP y el coste para uso personal, mientras otra dice que lleva años utilizando Refero y aprecia su biblioteca. Una comparación anterior favorece a Mobbin por amplitud. Son experiencias individuales, no un benchmark entre ambos catálogos.
Alternativas: cuándo usaría otra cosa
Si ya sabes qué interfaz quieres y necesitas componentes de código, miraría catálogos como shadcn/ui o 21st.dev. Si el problema es el acabado de una página que ya existe, empezaría por Impeccable. Refero entra antes, cuando todavía estás decidiendo qué forma debe tener la experiencia.
Veredicto
Refero se ha ganado un sitio en mi caja de herramientas. Me ayuda a salir del bucle de pedir «algo moderno» y me obliga a señalar decisiones que puedo defender. El MCP hace esa investigación más cómoda cuando la autorización funciona; el skill añade método. Su precio y la opción Lifetime refuerzan la recomendación para quien diseña con agentes a menudo.
No le pediría que diseñara por mí. Le pediría buenas referencias, escogería con cabeza y después pondría al agente a trabajar. Y revisaría la página terminada, que es donde se descubre si la idea funcionaba de verdad.
Preguntas frecuentes sobre Refero
¿Refero diseña la web por mí?
No. Te da pantallas y flujos reales para investigar. La elección, la adaptación a tu contenido y la revisión del resultado siguen siendo tuyas.
¿Refero es una biblioteca de componentes React?
No. Refero sirve para estudiar decisiones de interfaz. Si necesitas código reutilizable, consulta mi recopilatorio de bibliotecas de componentes UI.
¿Qué diferencia hay entre el MCP y el skill de Refero?
El MCP da acceso a la biblioteca desde el agente. El skill propone cómo investigar referencias y convertirlas en decisiones de diseño. Puedes combinar ambos.
¿Necesito pagar para usar el MCP?
Sí. Refero incluye el MCP para usuarios con licencia Pro, Team o Lifetime; el plan gratuito no lo incluye según sus condiciones consultadas el 17 de septiembre de 2026.
¿Qué hago si aparece un error 401?
Revisa el acceso de tu cuenta, reinicia el cliente y renueva la autorización. Haz una búsqueda real después. Sin una respuesta del MCP, la instalación no está comprobada.
Fuentes y alcance de la prueba
- Refero, MCP oficial, guía de instalación, skill y precios, consultados el 17 de septiembre de 2026.
- Pantallas de Sunsama, Polar y Hume AI verificadas visualmente en Refero el 18 de septiembre de 2026.
- Prueba propia del 3 de agosto de 2026: conexión OAuth y respuesta real de
refero_search_screens. Una consulta posterior devolvió 401; el acceso actual no se ha vuelto a verificar. - Guía visual de Refero y demostración de Tania Driskill, consultadas el 18 de septiembre de 2026. La guía muestra una interfaz anterior; el vídeo trata la búsqueda manual, no el MCP.
- Conversaciones originales en r/UXDesign, septiembre de 2026 y r/UXDesign, mayo de 2026. Testimonios individuales, no resultados medidos.
