A1 Gallery

---

A1 es una galería seleccionada a mano de diseños web reales. Este servidor MCP la integra en tu agente de codificación, para que puedas pedir una referencia y recibir JSON estructurado en lugar de pegar capturas de pantalla y describir lo que quieres.

Cada sitio se captura en toda su extensión, se divide en sus páginas interiores y sus secciones individuales, y luego se mide. Obtienes los tamaños de tipografía, espaciado, radio, ancho de contenedor y paleta extraídos de la página renderizada, no adivinados a partir de una imagen.

En la galería ahora mismo: 1.165 sitios · 3.209 secciones capturadas · 2.860 capturas de página completa · 571 fuentes · 517 diseñadores y estudios.

Endpoint

URL	https://www.a1.gallery/api/mcp
Transporte	HTTP transmisible
Autenticación	OAuth 2.1 con PKCE, registro dinámico de clientes
Nombre en el registro	gallery.a1/a1-gallery
Herramientas	17, todas de solo lectura

El acceso es gratuito con una cuenta de A1: 50 llamadas a herramientas al día. A1 Pro lo eleva a 2.000 al día con un límite por minuto más alto.

Instalación

Tu cliente abre un navegador para iniciar sesión la primera vez que se conecta. Las instrucciones por cliente con enlaces de instalación en un clic están en a1.gallery/mcp.

Claude Code — plugin

El plugin de este repositorio agrupa el servidor con tres habilidades, tres comandos de barra y un subagente de investigación. Enseña al agente a usar la galería, algo que el conector básico no hace.

claude plugin marketplace add bryntay/a1-mcp
claude plugin install a1-gallery

Luego ejecuta /mcp y autentícate. Consulta Plugin a continuación para ver qué añade.

Claude Code — solo conector

claude mcp add --transport http a1 --scope user https://www.a1.gallery/api/mcp

Luego ejecuta /mcp e inicia sesión cuando lo solicite.

Codex CLI

codex mcp add a1 --url https://www.a1.gallery/api/mcp

Cursor y Claude Desktop

{
  "mcpServers": {
    "a1": {
      "url": "https://www.a1.gallery/api/mcp"
    }
  }
}

VS Code (1.99+ con GitHub Copilot)

{
  "servers": {
    "a1": {
      "type": "http",
      "url": "https://www.a1.gallery/api/mcp"
    }
  }
}

Windsurf

{
  "mcpServers": {
    "a1": {
      "serverUrl": "https://www.a1.gallery/api/mcp"
    }
  }
}

Zed (0.168+)

{
  "context_servers": {
    "a1": {
      "url": "https://www.a1.gallery/api/mcp"
    }
  }
}

Qué puedes pedir

• "Encuentra tres sitios de despachos de abogados brutalistas y muéstrame sus héroes."
• "¿Qué escala tipográfica usan realmente los héroes de agencias?" — cuartiles en todos los sitios, no un solo ejemplo.
• "Muéstrame páginas de precios que mencionen facturación por uso." — búsqueda de texto completo dentro del contenido de la página.
• "¿Qué dicen las preguntas frecuentes de portafolios sobre reembolsos?" — pares de preguntas y respuestas extraídos con frecuencias.
• "Reconstruye esta sección de precios." — paleta, tipografía, espaciado y radio como valores medidos.

Herramientas

Las 17 herramientas son de solo lectura y están anotadas como readOnlyHint: true.

Sitios web

Herramienta	Qué hace
search_websites	Búsqueda por palabras clave en nombres, descripciones y taxonomía. Resuelve alias: "SaaS", "fintech", "brutalista" se asignan a términos reales de la taxonomía.
browse_websites	Navegación solo con filtros por tipo, categoría, estilo, tecnología o color.
get_website	Todo para un sitio: fuentes, colores, estilos, tecnologías, creador, secciones.
get_similar_websites	Grupos de inspiración alrededor de un sitio determinado.
get_recently_added	Adiciones más recientes, fecha de publicación descendente.
get_design_filters	La taxonomía completa con recuentos: úsala para construir filtros válidos.

Secciones

Herramienta	Qué hace
search_sections	Búsqueda dentro del contenido de la sección: encabezados, respuestas de preguntas frecuentes, texto de precios, testimonios. Devuelve la captura de pantalla, la estructura extraída y los tokens medidos.
get_website_sections	Cada sección capturada para un sitio, en orden de página.
analyze_section_content	Patrones de contenido agregados en muchas secciones: distribución de temas, preguntas frecuentes textuales más comunes.
analyze_design_tokens	Valores medidos agregados: p25/mediana/p75 para tamaño de encabezado, tamaño de cuerpo, proporción de escala, relleno, ancho de contenedor, radio, además de tipografías comunes y colores de acento.

Páginas

Herramienta	Qué hace
search_pages	Un tipo de página en toda la galería: cada página de precios, cada página "acerca de". Con búsqueda de texto completo.
get_website_pages	Las subpáginas capturadas para un sitio.

Fuentes y creadores

Herramienta	Qué hace
browse_fonts	Fuentes por clasificación, licencia o la categoría del sitio que las usa.
get_font	Una fuente: clasificación, licencia, descripción, recuento de uso.
find_font_pairings	Ejemplos del mundo real de dos fuentes usadas juntas.
browse_creators	Diseñadores y estudios, filtrables por categoría o estilo.
get_creator	Un creador: biografía, enlaces, trabajo destacado.

Las descripciones completas, los parámetros y las formas de respuesta provienen de tools/list.

Plugin

Instalar el conector le da a un agente 17 herramientas. No le dice al agente que analyze_design_tokens responde "¿qué tan grande debería ser esto?" mejor que cinco capturas de pantalla, o que una marca lowSample significa dejar de generalizar. El plugin aporta eso.

Habilidades

Habilidad	Se activa cuando
design-reference	Una pregunta de diseño necesita evidencia: escala tipográfica, espaciado, paleta o qué hacen realmente los sitios de un tipo. Enruta primero a las herramientas agregadas, luego a los ejemplos.
section-rebuild	Recrear un héroe, una tabla de precios o preguntas frecuentes. Se construye a partir del designTokens medido en lugar de leer valores de la captura de pantalla.
setup	Primera conexión, o un 401 account_required. Explica OAuth y las cuotas.

Comandos

Comando	Qué hace
/a1-gallery:reference	Sitios reales que coinciden con un brief de diseño, reformulados en la taxonomía de la galería.
/a1-gallery:tokens	Valores medidos para un tipo de sección, informados como rangos p25–p75.
/a1-gallery:pairings	Sitios que usan una fuente o una combinación de fuentes.

Subagente

design-researcher maneja briefs abiertos que necesitan varias búsquedas: una pasada agregada, un par de búsquedas específicas y luego los valores con los que construir. Devuelve un brief y nunca edita archivos.

Por qué los agregados usan cuartiles

analyze_design_tokens informa p25, mediana y p75 en lugar de un promedio. Los valores de diseño tienen colas largas: un sitio con un héroe de 180px arrastra la media a un lugar inútil.

Los segmentos estrechos se reducen rápido. Pide secciones de precios en tiendas y puede que estés viendo un puñado de ejemplos. Cuando eso ocurre, la respuesta lleva lowSample: true e informa recuentos brutos en lugar de porcentajes, para que el agente pueda decir "aquí hay cuatro ejemplos" en lugar de inventar una norma.

Notas

Las descripciones de sitios y el contenido de secciones son contenido web de terceros. Las descripciones de herramientas los marcan como datos externos no confiables.

Este repositorio contiene el manifiesto y la documentación. El servidor en sí es de código cerrado y está alojado en a1.gallery.

Soporte

Problemas y preguntas: abre un issue o escribe a hello@a1.gallery.