Entiende la estructura del diseño
Lee los datos estructurados de las capas, encuentra nodos y marcos y examina las partes del diseño que necesitas para tu tarea.
Explorar los datos del diseñoRemote MCP · Conexión en la nube
Pixso MCPConecta tus diseños con la IA
Comparte un enlace a una capa de Pixso con tu asistente de IA. Consulta el diseño, realiza cambios concretos y conviértelo en código sin mantener abierta la aplicación de escritorio.
Documentación en inglés
Autorización OAuth 2.1Lectura y edición de diseñosDiseño ↔ código
Tu herramienta de IA
CodexClaude CodeCursorVS Code
Describe una tarea en la herramienta que prefieras
Pixso Remote MCP
https://pixso.net/mcpConexión en la nube · Acceso autorizadoTu archivo de diseño de Pixso
Capas y distribuciónComponentes y variablesEstilos y recursos
Trabaja con el contexto real del diseño
Conecta un cliente MCP compatible con Streamable HTTP. El acceso a las herramientas depende de tu tipo de puesto de usuario y de tus permisos sobre el archivo.
DEL CONTEXTO DEL DISEÑO A LA ACCIÓN
Dale a la IA más que una captura
Incorpora la estructura, los componentes, los estilos y los comentarios a la conversación. Tu asistente podrá trabajar en una parte concreta del diseño y mostrarte el resultado.
Crea y actualiza diseños
Crea o edita nodos dentro del alcance que hayas definido. Cambia el espaciado o actualiza un conjunto de propiedades directamente en el archivo de diseño.
Explorar la edición de diseñosPasa del diseño al código y viceversa
Genera código frontend a partir de un diseño o convierte HTML y un archivo ZIP de un proyecto web en un diseño editable de Pixso.
Ver el flujo en ambas direccionesTrabaja con tu sistema de diseño
Consulta componentes reutilizables, estilos y variables. Actualiza estilos y variables teniendo en cuenta las reglas que ya utiliza tu equipo.
Explorar componentes y estilosRevisa el resultado visualmente
Captura el área de trabajo, examina sus propiedades y comprueba la alineación, el anidamiento y la estructura del diseño después de un cambio.
Explorar las comprobaciones de diseñoTen a mano los recursos y los comentarios
Exporta recursos en formatos como PNG, JPEG, SVG, PDF y WebP. Lee los hilos de comentarios para incorporar las observaciones del equipo a la tarea.
Explorar la exportación de recursosREMOTE MCP
Una dirección. Tres pasos para conectar.
Conecta tu herramienta de IA, copia un enlace a una capa y describe la tarea. Remote MCP no necesita que mantengas abierta la aplicación de escritorio ni la pestaña del diseño.
URL del servidor Remote MCP
https://pixso.net/mcp- 01
Añade el servidor y autoriza el acceso
Añade la URL del servidor en los ajustes de MCP de tu cliente y completa la autorización OAuth 2.1. También puedes utilizar un token de acceso personal siguiendo la documentación.
- 02
Copia el enlace de la capa
En Pixso, selecciona el marco o la capa con la que quieras trabajar y utiliza Copy link. Su parámetro item-id identifica el área del diseño que debe usar el asistente.
Dónde copiar el enlaceUtiliza un enlace a una capa, no un enlace general para compartir un archivo o una página.
- 03
Describe la tarea y su alcance
Envía a tu asistente de IA el enlace, tu objetivo y el área que puede modificar. Empieza por consultar la estructura y después genera código o edita el diseño seleccionado.
Leer la guía de configuraciónPara leer el archivo necesitas permiso de visualización. Para modificarlo también necesitas permiso de edición.
EMPIEZA CON UNA TAREA CONCRETA
Una pantalla, un grupo de componentes o un cambio concreto
El enlace a la capa identifica el diseño. Tu instrucción le dice al asistente qué hacer con él.
Primero, entiende el diseñoLee esta capa a partir de su enlace y resume las secciones de la página, los componentes y las variables principales. No cambies el diseño todavía.
Después, haz un cambioEn el grupo de tarjetas de este enlace a una capa, establece el espaciado en 24px. Mantén el texto y las relaciones entre los componentes y después haz una captura para que pueda revisar el resultado.
DISEÑO ↔ CÓDIGO
Mantén conectados el diseño y el desarrollo
Empieza a desarrollar a partir de un diseño o lleva una página web a un lienzo editable para la siguiente ronda de revisión y cambios.
Diseño de Pixso→<React />
DE DISEÑO A CÓDIGO
Desarrolla a partir de la estructura del diseño
Utiliza design_to_code para generar código HTML, React, Vue, ArkUI o Flutter. Después elige mejoras como un diseño adaptable, variables CSS, Tailwind, limpieza del código o su adaptación al sistema de diseño de tu proyecto.
Explorar la conversión de diseño a códigoLa conversión de diseño a código requiere un puesto de usuario Full-function o Developer de una edición empresarial y un archivo ubicado en un espacio empresarial.
<HTML />→Diseño editable
DE CÓDIGO A DISEÑO
Lleva el código web al lienzo
Utiliza code_to_design para convertir HTML o un archivo ZIP de un proyecto web en un diseño editable de Pixso. Examina la distribución, ajusta los estilos y comenta la siguiente versión con tu equipo.
Explorar la conversión de código a diseñoLa conversión se ejecuta como una tarea. Los cambios posteriores en el diseño y en el código del proyecto no se sincronizan automáticamente en tiempo real.
ELIGE CÓMO CONECTARTE
Empieza con Remote MCP
Utiliza la conexión en la nube para tareas basadas en enlaces a capas. Elige Local MCP si quieres trabajar con el archivo y la selección abiertos en la aplicación de escritorio.
Remote MCP
Conéctate a través del servicio en la nube de Pixso con autorización y un enlace a una capa.
- No necesitas mantener abiertos Pixso Web ni la aplicación de escritorio
- Se recomienda OAuth 2.1; también admite tokens de acceso personal
- Utiliza enlaces a capas desde distintos dispositivos
Local MCP
Conéctate a la aplicación de escritorio de Pixso en ejecución y trabaja con el archivo activo.
- Mantén en ejecución la aplicación de escritorio y el servicio MCP
- Mantén el archivo de diseño abierto en la pestaña activa
- Algunas herramientas solo están disponibles mediante Local MCP
EMPIEZA POR LA CAPA CORRECTA
Indica al asistente con qué diseño debe trabajar
Copia un enlace al marco o a la capa que quieras utilizar. Así el asistente tendrá una referencia precisa para leer, editar o generar código.
Cómo obtener el enlace de una capaAñade Pixso Skills para guiar las tareas
Con Pixso Skills, el agente recibe orientación para organizar las tareas de diseño y elegir herramientas. MCP proporciona la conexión con el archivo. Sigue la guía oficial de instalación correspondiente a tu agente y a tu versión de Pixso.
Explorar Pixso Skills
¿Necesito la aplicación de escritorio de Pixso para usar Remote MCP?
No. El servicio remoto se ejecuta en la nube. Una vez autorizado, utiliza un enlace válido a una capa sin que tengas que mantener abiertos Pixso Web o la aplicación de escritorio. Sí necesitas conexión a la red y una autorización válida.
¿Qué puesto de usuario y qué permisos necesito?
Las funciones de MCP requieren un puesto de usuario Full-function o Developer. La conversión de diseño a código requiere uno de esos puestos en una edición empresarial y un archivo en un espacio empresarial. Para leer necesitas permiso de visualización; para cambiar el diseño también necesitas permiso de edición.
Ver todas las herramientas¿Cómo conecto Cursor, Claude Code, VS Code o Codex?
Utiliza la misma URL del servidor Remote MCP, pero sigue los pasos de configuración de tu cliente. Los campos de configuración varían entre clientes: consulta la guía para desarrolladores enlazada en lugar de copiar la configuración de otro editor.
Configurar la conexión¿Por qué puedo conectarme, pero no acceder a un diseño?
Comprueba que tu cuenta tenga permiso para ver el archivo y que el enlace a la capa contenga el item-id correcto. Un page-id o un enlace general para compartir no identifica la capa de destino. Si la sesión ha caducado, vuelve a autorizar el acceso. Para Local MCP, revisa también la aplicación de escritorio y el archivo activo.
¿La IA puede editar un diseño o solo leerlo?
Sí, puede editarlo. La versión actual de Remote MCP permite editar diseños, actualizar estilos y variables y cambiar propiedades. Define las capas y el alcance, utiliza un archivo que puedas editar y revisa el resultado con capturas y comprobaciones de la estructura del diseño.
¿Puedo utilizar Remote MCP en una implementación privada?
Contacta con tu responsable de cuenta antes de activar Remote MCP en una implementación privada. Utiliza la dirección del servidor y la configuración de conexión de tu propio entorno, no la URL de la nube pública.