Infraestructura que convierte tu design system en un Design Language
Grails es la plataforma que extrae y sincroniza tu diseño y código en una única fuente de verdad, convirtiendo tu DS en un motor de contexto vivo para tu equipo y tus agentes de IA
Durante la alpha trabajamos uno a uno con cada equipo para mejorar el producto. El acceso en este período es solo a pedido.
Dale a tu Design System el poder
de coordinar a tu equipo y a tus agentes.
Tu sistema de diseño vive en Figma. Grails lo convierte en un Agentic Design System: una infraestructura conectada que no solo almacena componentes, sino que alimenta a ingenieros y agentes de IA con el contexto, las especificaciones y las reglas exactas que necesitan para construir con total consistencia.
La evolución hacia un Agentic Design System
Como librería estática
- Asistentes de IA sin contexto del sistema. Herramientas como Cursor o Copilot generan código deduciendo estilos a partir de capturas o nombres aislados, exigiendo corrección manual constante.
- Handoff basado en interpretación. Los ingenieros inspeccionan capas, variantes y alias navegando manualmente los archivos de diseño para traducirlos a código.
- Actualizaciones con alcance no verificado. Modificar un componente requiere rastrear dependencias a mano para prever qué otros elementos o vistas se verán afectados.
- Documentación en plataformas separadas. Las guías de uso y especificaciones viven en wikis o repositorios externos al archivo de diseño, requiriendo actualización paralela.
- Alineación mediante comunicación manual. El anuncio de cambios, nuevas versiones y actualizaciones depende de hilos de chat, demos y reuniones de sincronización.
Con Grails · Agentic Design System
- Agentes de IA guiados por tu Knowledge Graph. Cursor, Claude o Copilot consultan tokens, variantes y reglas de arquitectura vía MCP, generando UI consistente a la primera llamada.
- Inspección técnica con autonomía total. Tokens resueltos por modo, modelos de layout y export DTCG listos para producción directamente desde la entidad.
- Cálculo automático del blast radius. El motor de versiones analiza dependencias en todo el grafo y muestra el alcance exacto de cada cambio antes de publicarlo.
- Documentación viva junto a la entidad. Anatomía, directrices y reglas técnicas residen exactamente donde se define cada componente y token, sin herramientas intermedias.
- Trazabilidad y auditoría continua. Changelogs automáticos por versión, análisis de consistencia y registro histórico de evolución sin mantenimiento manual.
Lo que Grails construye a partir de tu archivo de Figma
Nueve funcionalidades, un sistema conectado.
Lo que hay en tu librería y lo que Grails deduce de ello. Cada página dice qué hace hoy y dónde termina.
Tu sistemaLo que Grails construye a partir de tu archivo de Figma.
Cada componente, con toda su historia.
En la app
Abre un componente y mira de qué está hecho.
En la app
Cada token, resuelto modo por modo.
En la app
Estilos de texto y de color, con los tokens que usan.
En la app
Documentación que vive con el componente.
En la app
MotoresLo que Grails hace con ello una vez que lo tiene.
Entiende qué cambió y cuánto importa.
En la app
El mapa detrás de tu sistema.
App, API y MCP
Encuentra lo que no sabes nombrar.
API y MCP
Mide la salud de tu sistema.
En la app
También para agentes
Funciona con Figma Agent vía MCPTus agentes también pueden leerlo.
Conecta Claude Code, Cursor u otro cliente MCP que pueda enviar un header Authorization a tu design system. Un agente que trabaja en Figma consulta Grails en lugar de adivinar.
- Encuentra un componente por su nombre o por lo que dice su documentación, y lee sus variantes, sus tokens y el orden en que se construye.
- Grails lee y el agente dibuja: Figma nunca está en el camino de la consulta.
- También la documentación: un agente puede leer la tuya y, con permiso de escritura, sumarle contenido.
claude mcp add --transport http grails https://api.grails.design/mcp/v1 \
--header "Authorization: Bearer grails_sk_XXXXXXXX"Un comando con tu API key. Cursor, Claude Desktop, VS Code y Gemini CLI aceptan el mismo servidor en su configuración.
Cómo funciona
De un archivo de Figma a un sistema que todos pueden leer.
Sincroniza desde Figma
El plugin escanea un archivo, revisas lo que encontró y sincronizas. Entran componentes, variables y estilos.
El plugin de FigmaExplora y documenta
Abre un componente, un token o un estilo y sigue sus chips de una pantalla a otra. Escribe la documentación donde vive.
Todas las funcionalidadesConecta tus herramientas
Agentes y código leen el mismo registro por MCP y REST, sin Figma de por medio.
Agentes: API y MCP
Para quién es
Una sola fuente de verdad para todos los que construyen con ella.
Diseñadores
Documenta cada componente junto a su spec y mira qué lo usa.
Desarrolladores
Lee el spec de cualquier variante, sus tokens resueltos por modo, y expórtalos como DTCG.
Product managers
Sigue qué cambió y cuánto importa: versiones, un changelog y un índice de salud.
Agentes
Encontrar, leer, construir en orden y revisar la salud, por MCP y REST.
Mira tu propio design system en Grails.
Pide acceso, conecta el plugin de Figma y escanea un archivo. No se sincroniza nada hasta que tú lo inicies.
Durante la alpha trabajamos uno a uno con cada equipo para mejorar el producto. El acceso en este período es solo a pedido.