¿Qué es Paper.design?
Paper se basa en una idea simple: lo que diseñas visualmente es código real. En lugar de un formato propietario (como el de Figma), Paper utiliza HTML y CSS reales como su base.
La herramienta está en alfa abierta y recientemente lanzó adiciones geniales como una aplicación de escritorio y un potente servidor MCP. Esto convierte a Paper de una simple herramienta de diseño en un lienzo completamente conectado que cualquier agente de IA puede leer y escribir, y que puede ser utilizado para generación de UI con IA.
Características de Paper.design
Canvas HTML/CSS
Característica principal con la que Paper se lanzó. Tienes un lienzo libre similar a Figma donde puedes usar elementos web reales. Cada elemento que creas se renderiza como HTML y CSS, lo que significa que el diseño se exporta como código sin ningún paso de conversión.
Obtienes verdaderos diseños de flexbox, verdaderas propiedades de CSS y renderización de fuente real.
Servidor MCP de Paper
Puedes conectar Paper design a cualquier agente de codificación de IA y usarlo como un lugar para ver visualmente el front-end que generan.
Hay múltiples herramientas MCP que permiten a los agentes interactuar con tus archivos de diseño a nivel granular. Los agentes pueden crear marcos, actualizar estilos, establecer contenido de texto, obtener capturas de pantalla e incluso recuperar la salida JSX o Tailwind de cualquier nodo.
Admite tanto lectura como escritura, lo que significa que se puede usar para extraer contexto de otras fuentes en tu diseño. Los documentos tienen ejemplos con guías para sincronizar tokens de Figma e incluso extraer contenido de Notion.
Shaders de Paper
Una de las características más distintivas de Paper es su biblioteca de shaders. Estos son efectos visuales acelerados por GPU y animados. Gradientes de malla, metal líquido, patrones de semitono, vidrio acanalado, texturas de grano y más. Puedes aplicarlos directamente a elementos en el lienzo.
Generación de Imágenes
Paper tiene generación de imágenes con IA integrada, impulsada por diferentes proveedores de modelos. Puedes usar Flux 2 con soporte multi-referencia y fotorrealismo, Nano Banana Pro (impulsado por Gemini), OpenAI Image Edit 1.5 y Seedream 4.5. Puedes generar imágenes, editarlas en contexto y colocarlas directamente en el lienzo.
Precios de Paper.design
Paper.design ofrece una suscripción plana Pro, además de un nivel gratuito y un plan personalizado para equipos. Cuesta $16/mes o $144/año e incluye:
1M llamadas a herramientas MCP/semana
100 veces más generaciones de imágenes/día
Exportación de video, almacenamiento ilimitado y retroalimentación prioritaria
El nivel gratuito es lo suficientemente generoso como para explorar la herramienta seriamente. El plan Pro está competitivamente valorado por lo que ofrece, especialmente dado el límite de llamadas de herramientas MCP.
Alternativas a Paper.design
Banani
Banani te permite generar UI diseños a partir de indicaciones de texto y organizarlos en un lienzo, con exportación de Figma de un solo clic. Es una buena opción para la exploración de diseño, ya que ofrece más herramientas de IA integradas como Variantes, generación de flujo de usuario completo y más.
Al igual que Paper, está diseñado directamente usando HTML y CSS, y también lanzó recientemente MCP, para que puedas conectar tus agentes de codificación para leer e implementar tus diseños.
A diferencia de otras alternativas en esta lista, no necesitas una suscripción separada para Claude ni un agente de IA separado para usar características generativas. Están integradas y son una parte central del producto, sin requerir configuración.
Pencil.dev
Pencil es una herramienta de generación de UI basada en lienzo que integra Claude Code. Al igual que Paper, te ofrece una interfaz similar a Figma para trabajar con agentes de IA. La diferencia clave es que Pencil es una capa sobre Claude y no puede usarse con otros agentes en el momento en que escribía este artículo.
Subframe
Otra herramienta de diseño de canvas-código que genera código React listo para producción. Diseñas visualmente con componentes reales, y los ingenieros extraen el código directamente en su base de código con una sincronización CLI. También tiene un servidor MCP, por lo que puedes conectarlo a Cursor o Claude Code y generar nuevos diseños desde tu IDE con contexto completo de base de código.
Variant.ai
Variant se enfoca en generar un feed de variaciones de diseño a partir de una sola indicación. Un caso de uso muy diferente al de Paper. Si tu objetivo es una rápida exploración visual, Variant es atractivo. Si tu objetivo es diseñar algo que realmente se lanzará, el enfoque nativo de código de Paper es más adecuado.
Figma Make
La comparación obvia. Figma es más maduro, tiene un ecosistema más grande y es la opción predeterminada para la mayoría de los equipos de diseño. Pero el lienzo de Figma es propietario, y sus características de IA todavía están poniéndose al día. La apuesta de Paper es que un lienzo nativo de código será más relevante a medida que los agentes de IA se conviertan en una parte más importante del flujo de trabajo.
Casos de uso de Paper.design
Diseñadores cansados de Figma
Diseñadores explorando agentes de codificación de IA que quieren una capa visual
Desarrolladores que quieren prototipar UI
Diseñadores que quieren jugar con efectos visuales y shaders
Diseñadores + desarrolladores que quieren una única fuente de verdad entre diseño y código
¿Deberías probar Paper?
Si alguna vez has sentido la frustración de diseñar algo en Figma, entregarlo a un desarrollador y verlo alejarse lentamente de la visión original, Paper.design es una solución increíble a este problema.
Su lienzo HTML/CSS es un enfoque genuinamente diferente, y el nuevo servidor MCP lo convierte en uno de los herramientas de diseño más preparadas para agentes disponibles en este momento.
