Visily MCP

Convierte diseños de UI en aplicaciones responsivas con Visily MCP

Documentación

Visily MCP

Visily es un lienzo de diseño con IA que convierte indicaciones de texto, capturas de pantalla, URLs y más en diseños de interfaz tan fáciles de editar como una diapositiva de Google. El servidor Visily MCP lleva esos diseños a tu agente de codificación con IA: apúntalo a un tablero o pantalla de Visily y tu agente podrá encontrarlo, convertirlo en código de aplicación o extraer sus tokens de tema.

[!NOTE] Requisito de acceso. El Visily MCP solo funciona en espacios de trabajo con un plan Pro o Business donde seas el creador del espacio de trabajo o tengas una licencia de editor. Los espacios de trabajo gratuitos y los roles de visor/invitado no son compatibles. Esto se aplica en cada solicitud.

Lo que puedes hacer

Convertir un diseño de Visily en código. Genera código listo para producción a partir de una pantalla o tablero de Visily, ya sea que la interfaz haya sido generada por IA en Visily o creada manualmente. El agente reconstruye componentes semánticos y responsivos (pila predeterminada: React + TypeScript + Tailwind v4 + shadcn/ui) en lugar de pegar una exportación estática.
Encontrar un tablero o pantalla y obtener su enlace. Pide un diseño por descripción ("el tablero en el que estaba trabajando para la versión 4.6") y el agente devuelve un enlace para abrirlo, sin salir de tu editor.
Aplicar el tema de un tablero. Extrae el sistema de diseño de un tablero como tokens de shadcn/Tailwind v4 y aplícalo al estilo de otra aplicación.

Instalación y conexión

La autenticación es OAuth: tu cliente te pedirá iniciar sesión en Visily en el primer uso. No hay claves API que gestionar.

La URL actual del servidor Visily MCP es:

https://app.visily.ai/api/mcp

Los archivos de integración de cada plataforma se encuentran en plugins/<platform>/.

Claude Code

claude plugin marketplace add visily-app/mcp-plugins
claude plugin install visily@visily

Luego recarga Claude Code y ejecuta /mcp → selecciona visily → completa el inicio de sesión OAuth. Guía completa: installation-guides/claude.md.

Cursor

Complemento empaquetado para Cursor 2.5+ — instala desde un clon local en el chat del agente:

/add-plugin ./plugins/cursor

Recarga Cursor; el servidor MCP aparece en Settings → MCP (OAuth en el primer uso) y la habilidad de Visily se carga automáticamente. Detalles: plugins/cursor/README.md.

Cline

Cline puede conectarse directamente al servidor Visily MCP alojado con Streamable HTTP:

{
  "mcpServers": {
    "visily": {
      "type": "streamableHttp",
      "url": "https://app.visily.ai/api/mcp"
    }
  }
}

Guía de instalación completa legible por agentes: llms-install.md.

Codex

codex plugin marketplace add visily-app/mcp-plugins
codex plugin add visily@visily

Autoriza mediante OAuth en el primer uso. Guía completa: installation-guides/codex.md.

ChatGPT

ChatGPT se conecta a servidores MCP remotos mediante conectores personalizados de Developer Mode (Plus, Pro, Business o Enterprise). Habilita Settings → Connectors → Advanced → Developer mode, añade un conector personalizado que apunte a la URL del servidor anterior y completa OAuth. Luego pega plugins/chatgpt/AGENTS.md en las instrucciones de un Proyecto/GPT. Pasos: plugins/chatgpt/SETUP.md.

Antigravity

Copia plugins/antigravity/.agents/ en la raíz de tu proyecto y fusiona plugins/antigravity/mcp_config.json en tu configuración global de MCP. Detalles: installation-guides/antigravity.md.

Kiro

Copia plugins/kiro/ en tu directorio de powers de Kiro (contiene POWER.md, flujos de trabajo steering/ por intención y mcp.json). Fusiona mcp.json en tu configuración MCP de Kiro y autoriza mediante OAuth. El Power se activa en URLs de Visily e intenciones de encontrar/construir/tema.

Replit Agent

Instala el servidor Visily MCP alojado con un enlace de instalación de Replit de un clic: installation-guides/replit.md.

Lovable

Haz commit de plugins/lovable/AGENTS.md en la raíz de tu repositorio y añade el conector Visily MCP en la interfaz de Lovable. Detalles: plugins/lovable/SETUP.md.

v0 (Vercel)

v0 admite servidores MCP personalizados de forma nativa. Añade la URL del servidor anterior mediante Settings → MCP Connections (o Add MCP en el formulario de indicaciones) y autoriza con OAuth, luego haz commit de plugins/v0/AGENTS.md en la raíz de tu repositorio. Detalles: plugins/v0/SETUP.md.

Otros editores (Streamable HTTP)

Cualquier cliente que admita MCP con Streamable-HTTP puede conectarse con esta configuración:

{
  "mcpServers": {
    "visily": {
      "url": "https://app.visily.ai/api/mcp"
    }
  }
}

Esto cubre VS Code (Copilot), Windsurf, Cline, Gemini CLI y herramientas similares. Consulta la documentación de tu cliente para saber dónde se guarda la configuración del servidor MCP; OAuth se ejecuta en el primer uso.

[!NOTE] Google AI Studio aún no admite conectores MCP de forma nativa (solo funciona a través de puentes de navegador de terceros, que no recomendamos). Para una opción nativa de Google, usa Firebase Studio, que admite servidores MCP mediante .idx/mcp.json — coloca la misma configuración url allí. Añadiremos una receta de primera clase cuando AI Studio incluya soporte MCP nativo.

Cómo dar indicaciones a tu agente

Dale al agente un enlace de Visily y una intención clara. El agente extrae los IDs de la URL — no abre la página.

Ejemplos

"Encuentra el tablero de Visily en el que estaba trabajando para la versión 4.6 y dame el enlace."
"Construye esta pantalla de Visily como React + Tailwind: https://app.visily.ai/projects/abc/boards/456/elements/789"
"Implementa este tablero en Next.js, reutilizando mis componentes src/components/ui."
"Aplica el tema de mi tablero de Visily al globals.css de esta aplicación."

Una URL de Visily se ve así:

https://app.visily.ai/projects/{projectId}/boards/{boardId}/elements/{elementId}

Estructura tu archivo de Visily para obtener mejor código

Cuanta más intención tenga tu diseño, mejor será el código generado:

Nombra tus pantallas y grupos clave de forma semántica en Visily — los nombres fluyen hacia la exportación y hacia la coincidencia de enlaces para "encontrar mi tablero".
Apóyate en el tema / sistema de diseño de Visily para que el agente pueda aplicar tokens reales en lugar de adivinar colores y radios.
Pide una pantalla a la vez para tableros grandes — las selecciones más pequeñas producen resultados más fiables.

Herramientas

Herramienta	Uso
`get_design_context`	Principal. Devuelve `designData` + tema + metadatos de captura de pantalla para un elemento.
`get_screenshot`	Obtiene una captura de pantalla para verificación visual.
`get_board_theme`	Sistema de diseño del tablero como tokens de shadcn (`JSON` / `CSS` / `Tailwind`).
`list_workspaces`, `list_projects`, `list_boards`, `list_elements`	Descubrimiento / encontrar un tablero.
`get_workspace`, `get_project`, `get_board`, `get_element`, `get_element_export`	Avanzado — metadatos y exportaciones sin procesar rara vez necesarios para los tres casos de uso; prefiere las herramientas anteriores.

El servidor también incluye prompts (p. ej., find_visily_board, generate_code_from_element, apply_board_theme) y recursos (visily://docs/...) que tu agente lee bajo demanda.

Reglas personalizadas (opcional)

Establece pautas a nivel de proyecto para que la salida sea consistente — como notas de incorporación para un nuevo compañero de equipo.

Cursor (.cursor/rules/visily-quality.mdc):

---
description: Visily code-generation rules
alwaysApply: false
---
- Treat Visily `designData` as a reference, not final code — rebuild semantically.
- Apply the Visily `theme` tokens; never hardcode hex, radii, or spacing.
- Reuse existing components in `src/components/ui` instead of duplicating.
- Verify against `get_screenshot` for 1:1 layout before finishing.

Claude Code (CLAUDE.md):

## Visily MCP rules
- Treat Visily `designData` as a reference, not final code — rebuild semantically.
- Apply the Visily `theme` tokens; never hardcode hex, radii, or spacing.
- Reuse existing components instead of duplicating; verify with `get_screenshot`.

Cómo está construido este repositorio

plugins/ se genera a partir de una única fuente compartida (shared/) mediante scripts/build.mjs. Para cambiar la integración, edita shared/ y ejecuta npm run build — nunca edites plugins/ a mano. Consulta CONTRIBUTING.md.