Paper Design: diseñar una web con IA sin perder el criterio

Diseñás una landing preciosa con tres tarjetas idénticas y textos de muestra. Cuando llegan los títulos reales, uno ocupa dos líneas, otro seis y la sección pierde equilibrio. En desarrollo aparece otra versión del problema: el botón perfecto de la maqueta no tiene estado de foco ni funciona en móvil. El trabajo que parecía terminado recién empieza.

Paper Design propone diseñar sobre un canvas basado en HTML y CSS, con acceso para agentes y contenido real. La promesa puede resultar atractiva si trabajás entre diseño y web. Su valor está en probar antes las decisiones con el texto, los datos y las restricciones que existirán al publicar.

Qué hace Paper, explicado desde el trabajo

La página oficial de Paper describe un canvas cuyos diseños pueden exportarse como código y conectarse con herramientas de desarrollo. Su documentación de MCP explica que un agente autorizado puede leer y escribir archivos de Paper, traer contenido o convertir un frame seleccionado en código. MCP es la conexión que permite a un asistente acceder al archivo de diseño; concederle acceso de escritura significa que puede modificarlo.

Esto abre posibilidades prácticas: traer el copy final de una carpeta, probar distintas longitudes de titulares, trasladar variables de color y espaciado, o preparar variantes responsive. Pero el canvas no sabe por qué una persona necesita comprender la página. Puede respetar un patrón de CSS y aun así elegir una jerarquía equivocada. Por eso el brief, los criterios de aprobación y la prueba con lectoras siguen siendo parte del diseño.

La guía de tokens muestra cómo crear y actualizar valores de color, tipografía, radio y espaciado. Un token sirve para que una decisión de marca se aplique de manera consistente. No sustituye el criterio: dos colores oficiales pueden tener contraste insuficiente para texto pequeño. Tampoco transforma automáticamente un componente en accesible. El sistema ayuda a repetir decisiones buenas cuando esas decisiones ya se revisaron.

Ejemplo: una landing de inscripción que usa datos reales

Imaginá un taller online con dos horarios, un precio y una lista de preguntas frecuentes. El equipo tiene una guía de marca y una página antigua. El objetivo es que una visitante entienda el contenido, el horario en su zona y cómo inscribirse sin escribir a soporte.

Primero, la diseñadora reúne material aprobado: nombre del taller, resumen, fecha, horario con zona, precio, política de devolución y texto del botón. Le pide al agente que use ese contenido en el canvas y mantenga los tokens de marca. En Paper puede crear la estructura visual; si conecta el agente, revisa el permiso antes de que escriba en el archivo. Trabaja con una copia o versión identificable, porque quiere poder comparar antes y después.

El primer diseño puede verse bien en desktop. La diseñadora introduce entonces el título más largo que usaría marketing y una pregunta frecuente de cuatro líneas. Revisa 390 píxeles de ancho, foco de teclado, espaciado y ubicación del precio. Si el botón queda lejos de la explicación, modifica la arquitectura de la página: no le pide simplemente al agente que reduzca el tamaño de la letra. Si la fecha y el precio son claves para decidir, deben aparecer donde una persona pueda encontrarlos.

Después el equipo lleva el diseño a código. Compara tipografía, estados y contenido con el canvas, pero prueba el sitio real: links, formulario, errores, velocidad y lectura con tecnología asistiva. El hecho de que Paper comparta lenguaje con la web reduce parte de la traducción; no acredita por sí solo que la implementación final funcione. El texto de producción, los datos que llegan del CMS y los comportamientos del navegador pueden seguir cambiando el resultado.

Lo que puede hacer un agente y lo que debés revisar

Un agente puede preparar variantes, sincronizar tokens o traer contenido de un repositorio autorizado. Puede ayudar a detectar elementos repetidos y aplicar ajustes de espaciado. La documentación MCP incluye la posibilidad de leer y escribir el archivo, lo que obliga a decidir alcance: qué archivo, qué secciones y cuándo debe pedir revisión. Si conectás también un repositorio, aplicá permisos mínimos y comprobá cada cambio antes de publicarlo.

La diseñadora debe revisar la promesa, el orden de lectura y la forma en que se resuelve una decisión. Una prueba útil consiste en tapar los colores y mirar solo texto y estructura: ¿se entiende qué se ofrece, para quién, cuándo y qué ocurrirá al enviar el formulario? Después viene la capa visual. Evaluá si la página elimina ambigüedad para la persona que llega: qué ofrece, para quién y qué ocurrirá después.

Paper también documenta cómo pegar HTML en el canvas y advierte límites de traducción, como estilos aplicados por clases que no pasan al pegar contenido. Esto recuerda que «compartir HTML/CSS» no significa que cualquier sitio se copie perfectamente ni que cualquier exportación conserve toda la lógica de una aplicación. Hacé una prueba pequeña con un componente antes de diseñar una web completa alrededor de esa expectativa.

Cuándo vale la pena probarlo

Paper puede ser especialmente útil cuando el problema recurrente es la distancia entre maqueta, contenido y código. Si tu equipo cambia textos a último minuto, tiene tokens claros y desarrolla para web, una prueba con una página real puede mostrar ahorro de revisiones. Si el trabajo consiste en explorar identidad, entrevistar usuarias o definir estrategia, empezar por un canvas nuevo no resolverá la pregunta principal.

Evaluá la prueba con cuatro señales: cuántas correcciones de contenido aparecieron antes de desarrollo; cuánto tiempo tomó llevar un componente al sitio; qué diferencias quedaron entre canvas y producción; y quién puede mantenerlo dentro de tres meses. Si la última respuesta es «solo la persona que conectó el agente», documentá mejor el sistema. La herramienta debería dejar el trabajo más legible.

El artículo sobre cómo hacer un trabajo con IA sin perder el criterio explica cómo definir entrada, revisión y entrega. Si el resultado llega a un equipo, las mejores prácticas para trabajar con IA ayudan a decidir qué cambios requieren aprobación humana.

Una práctica sin instalar nada

Tomá una página existente y reemplazá todo el texto de muestra por texto real. Probá el título más largo, un error de formulario y una pregunta frecuente extensa. Marcá qué decisiones se rompieron: espaciado, contraste, orden o comprensión. Escribí las tres reglas que el diseño debería cumplir antes de repetirlo. Con esa lista, vas a poder evaluar Paper —o cualquier otro canvas— con una necesidad concreta.

Si querés mostrar el antes y después de una página y conversar qué cambió para la lectora, traé el ejemplo a AI Girlies. Los buenos sistemas de diseño se vuelven mejores cuando alguien los usa de verdad.

Fuentes para profundizar

• Paper Design: producto y flujo entre diseño y código.
• Paper Design: conexión de agentes por MCP.
• Paper Design: tokens de diseño.
• Paper Design: importación de HTML y límites conocidos.