Saltar enlaces

Sombreador GPU del diseñador, codificación MCP y Vibe

Paper.design combina sombreadores de GPU, lienzo HTML/CSS e integración de proxy MCP para crear una herramienta de diseño diseñada para la era de la codificación por vibración y los flujos de trabajo de IA.

Las herramientas de diseño han pasado décadas optimizando la transferencia, ese doloroso momento en el que un diseño sale de Figma y cae en manos de los desarrolladores como una especificación estática. Paper.design se basa enteramente en una premisa diferente: si el diseño era ¿Código desde el principio?

¿Qué es Paper.design?

Paper es una herramienta de diseño basada en estándares web. Su lienzo admite HTML y CSS de forma nativa: cada mesa de trabajo que cree está un paso más cerca del código de envío. El motor de diseño comprende el relleno, los espacios, la dirección de curvatura y todas las propiedades que son realmente importantes en la web. Sin capas de traducción, sin pasos de exportación que arruinen el espaciado.

A diferencia de las herramientas tradicionales que generan exportaciones planas o especificaciones desconectadas, Paper crea un bucle continuo entre el diseño y el código. Usted diseña en Paper, el agente sincroniza sus tokens y componentes con la biblioteca de códigos y los cambios en el código pueden regresar al lienzo: una verdadera relación bidireccional con la que la mayoría de las herramientas solo pueden soñar. Paper también se conecta a datos reales a través de su integración MCP, por lo que los agentes de IA pueden extraer contenido de Notion, Figma o cualquier API directamente a sus diseños.

Panel izquierdo de Paper.design: capas, símbolos y propiedades de diseño en el editor de lienzo HTML/CSS

Shaders: el superpoder visual del papel

Si la integración de agentes de Paper es su cerebro, entonces los sombreadores son su corazón. Paper ha estado creando una de las colecciones más impresionantes de efectos visuales acelerados por GPU disponibles de forma nativa en una herramienta de diseño. Estos no son filtros de Photoshop ni complementos torpes: son sombreadores instantáneos que se ejecutan en la GPU, con control profundo de parámetros y vista previa instantánea.

La alineación incluye Semitono CMYK (medios tonos impresos con control total de color CMYK), gradiente de partículas (ruido orgánico en relleno degradado), vidrio estriado (superficie de cristal de caña convincente con luces y sombras), metal liquido (superficie cromada con control de forma y ángulo), puntos de semitono (patrón de lunares de arte pop retro), así como degradados de cuadrícula, remolinos, agua, batidos de imágenes, texturas de papel y más. Cada efecto se renderiza mediante GPU, se puede controlar en profundidad y es nativo del lienzo. Vale la pena señalar que los agentes de IA pueden leer y operar estos sombreadores a través de la capa MCP, lo que significa que puedes pedirle a Claude que ajuste los gradientes de grano o intercambie patrones de medios tonos de forma totalmente dialógica.

Paper.design diseña una interfaz de bucle continuo en código

Integración MCP: la codificación Vibe se encuentra con el diseño

diseño de arte en papel Al exponer 24 herramientas a través de un servidor MCP (Protocolo de contexto modelo) probado, Paper admite acceso bidireccional completo, a diferencia de la mayoría de las integraciones de herramientas que solo permiten que los agentes de IA lean su trabajo. Un agente de IA que se ejecuta en Claude Code o Cursor no solo puede inspeccionar su diseño, sino también modificarlo. Las herramientas de lectura incluyen get_selection, get_jsx, get_screenshot y get_compulated_styles. Las herramientas de escritura incluyen create_artboard, write_html, set_text_content y update_styles.

La configuración en Claude Code es un comando de terminal: claude mcp add paper --transport http http://127.0.0.1:29979/mcp --scope user. Los usuarios del cursor pueden obtener enlaces profundos con un solo clic. VS Code Copilot, Codex y OpenCode también funcionan de forma inmediata. Este flujo de trabajo práctico desbloqueado es un territorio verdaderamente nuevo: los agentes pueden sincronizar tokens de diseño de Figma directamente en el lienzo de Paper, completar la interfaz de usuario con material real de la API de Spotify o convertir diseños de Paper en React/Tailwind responsivos y enviarlos a GitHub.

Integración de Paper.design MCP: los datos reales de cualquier API fluyen hacia el lienzo de diseño

Paper.design y Figma

Es imposible hablar de Paper sin hablar de Figma. Figma es el estándar de la industria, utilizado por casi todos los equipos de diseño profesionales del mundo. Pero están resolviendo un problema diferente: Paper no intenta reemplazar a Figma, sino reimaginar cómo puede verse un lienzo de diseño en un mundo en el que el agente es lo primero.

El lienzo basado en SVG de Figma está optimizado para precisión, componentes y sistemas de diseño probados, y gana por madurez, ecosistema y colaboración con grandes equipos de producción. El lienzo HTML/CSS de Paper está más cerca de la web y está diseñado para operaciones de proxy desde cero. Figma admite MCP, pero Paper está diseñado para ser bidireccional: el agente escribe en el lienzo, no solo lee desde él. Para los efectos visuales, Figma se basa en complementos, mientras que los sombreadores de Paper son efectos nativos de GPU. Hoy en día, el usuario ideal de Paper es una combinación de diseñadores y desarrolladores, fundadores individuales o equipos pequeños que crean flujos de trabajo centrados en la IA utilizando Claude Code o Cursor.

Paper.design Agent Canvas: el agente de IA lee y escribe directamente en el lienzo de diseño

empezando

Paper.design está disponible como aplicación de escritorio macOS (Paper Desktop) y aplicación web. El nivel gratuito incluye 100 llamadas MCP por semana, suficiente para explorar adecuadamente la integración de agentes. Pro cuesta $ 20 al mes y desbloquea 1 millón de llamadas MCP por semana, lo que es efectivamente ilimitado para la mayoría de los flujos de trabajo.

Dirección de descarga: diseño de papelagregue un servidor MCP y vea cómo se siente cuando sus herramientas de diseño realmente entienden su código base. Así es como se verá el diseño cuando finalmente alcance el nivel de los últimos dos años.

Home
Account
Cart
Search
¡Hola! ¡Pregúntame lo que quieras!
Explore
Drag