Presenta Design, desarrollado por Craftwork, es un estudio de maquetas 3D y teasers de producto sin registro previo que procesa todos los activos visuales en el cliente mediante Three.js, WebGL y HTML5 Canvas, sin transferir imágenes a servidores remotos. Además de exportar imágenes estáticas en PNG, JPG o WebP, genera animaciones de video WebM con una línea de tiempo de cámara integrada y ofrece un servidor Playwright MCP local para agentes de IA como Claude Code y Cursor, integrando la creación de maquetas en la terminal.
Resumen de Ingeniería
A diferencia de las herramientas SaaS tradicionales, Presenta Design prescinde por completo de colas de renderizado en el servidor. Las capturas se procesan en la memoria GPU del navegador. Las transformaciones 3D se calculan con matrices de Three.js, mientras que interpolaciones de cámara como Orbit Right, Punch In, Slow Zoom Out y Scan Left to Right se codifican en formato WebM directamente en el cliente. Además, implementa un servidor MCP local basado en Playwright (presenta-mcp.mjs) para compilar maquetas 3D mediante un navegador headless.
Por Qué Llamó Nuestra Atención: Caso Práctico en Producción
Los equipos de producto e ingenieros de marketing enfrentan dos obstáculos al exhibir aplicaciones web: componer marcos de dispositivos en perspectiva 3D en Figma consume demasiado tiempo, mientras que los teasers en video requieren suites pesadas como After Effects o Premiere. La mayoría de las alternativas en la nube suben archivos a servidores externos, comprometiendo la privacidad y sumando latencia. Tal como analizamos en nuestra reseña de Shots.so, la renderización en el cliente optimiza este flujo, y Presenta Design eleva el estándar técnico.
Creado por Craftwork, Presenta opera al instante sin registro. Los diseñadores pueden arrastrar componentes de sistemas de diseño UI/UX corporativos al lienzo, proyectarlos sobre hardware 3D, ajustar sombras y exportar videos WebM con microanimaciones en segundos. Su paso más disruptivo es la publicación de un módulo Model Context Protocol (MCP) basado en Playwright para herramientas como Claude Code, Codex CLI y Cursor.
Bajo el Capó: Arquitectura, Interacción y Pila Tecnológica
La arquitectura interna de Presenta se divide en tres capas principales: el motor de renderizado WebGL, el codificador de video por fotogramas clave y la capa de automatización local headless.
- Escena WebGL / Three.js en el Navegador: Las capturas del usuario se convierten en URLs Blob locales y se mapean como texturas en mallas Three.js. Los chasis (iPhone, MacBook, iPad, monitores) son modelos 3D optimizados de baja poligonización; los reflejos y sombras se calculan en tiempo real con aceleración por hardware en el contexto WebGL.
- Línea de Tiempo de Cámara y Exportación WebM: La plataforma incluye trayectorias predeterminadas como Orbit Right, Punch In, Slow Zoom Out y Scan Left to Right. Durante la animación, se interpolan las matrices de cámara de Three.js y los fotogramas del HTML5 Canvas se capturan mediante la API MediaRecorder para generar un flujo de video WebM sin pérdidas.
- AI Site Shots y Servidor Playwright MCP: En lugar de claves API en la nube, Presenta distribuye un script Node.js local (https://presenta.design/agents/presenta-mcp.mjs). Los desarrolladores lo configuran en Claude Code o Cursor mediante
. El servidor MCP inicia Chromium con Playwright en segundo plano, toma una captura de la URL indicada, la proyecta en Presenta y guarda la maqueta 3D resultante en el disco local.claude mcp add --scope user presenta -- node ~/.presenta/presenta-mcp.mjs - Validación de Rendimiento: Los equipos que buscan optimizar los tiempos de carga y captura pueden auditar los recursos de sus sitios web mediante nuestro analizador de velocidad, asegurando ejecuciones más rápidas con Presenta MCP.
| Parámetro Técnico | Arquitectura de Presenta Design | Herramientas de Maquetas en la Nube |
|---|---|---|
| Seguridad de Datos | Cero transferencias a servidores; procesado local en Blob y WebGL | Capturas subidas y procesadas en servidores remotos |
| Generación de Video | Renderizado WebM en cliente con interpolación de cámara | Limitado a exportaciones estáticas en PNG o GIF |
| Integración de Agentes | Servidor MCP local oficial con Playwright (presenta-mcp.mjs) | APIs REST limitadas o webhooks externos |
| Modelo de Acceso | Nivel básico gratuito sin registro ni marcas de agua | Registro obligatorio y restricciones freemium |
| Resolución Mínima | 1200 px de ancho de escritorio (el lienzo se bloquea en pantallas estrechas) | Interfaces web adaptables o móviles limitadas |
Cuándo Implementar en Producción y Cuándo Evitarlo
Presenta Design proporciona una velocidad excepcional en contextos concretos, pero su arquitectura impone ciertas limitaciones:
- Casos de Uso Recomendados: Creación ágil de teasers de video para lanzamientos, integración de dispositivos 3D en changelogs y automatización de capturas para documentación vía CI/CD o agentes de IA como Claude Code.
- Cuándo Evitarlo: Flujos de trabajo en pantallas menores a 1200 px o dispositivos móviles (el lienzo se bloquea mostrando la advertencia 'Presenta needs a wider screen'). Entornos corporativos que exijan exclusivamente video MP4 sin conversión secundaria mediante ffmpeg.
Nota de Arquitectura de Kling Digital
Según los criterios de ingeniería de Kling Digital, el factor diferencial de Presenta es su servidor headless Playwright MCP. Conectar este servidor a su pipeline de CI/CD o al flujo de terminal en Cursor/Claude permite generar maquetas 3D automáticas con cada despliegue, manteniendo la documentación actualizada sin intervención manual.
