El stack de diseño con IA acaba de dividirse: Claude Design, Codex Sites, Figma, Lovart y la sala de control de MCPlato
Una revisión profunda para 2026 de Claude Design, Sites in Codex, Figma, Lovart y MCPlato, y por qué el diseño con IA ahora pertenece a un stack de experiencias web, no a una categoría donde un solo ganador se lo lleva todo.
Publicado el 2026-06-05
La pregunta equivocada en 2026 es “¿qué herramienta de diseño con IA es la mejor?”
La pregunta más precisa es: ¿para qué trabajo quieres contratar a la IA? Un fundador necesita un concepto de landing page; un equipo de producto necesita una experiencia web responsive; un ingeniero necesita una demo alojada; growth necesita visuales de campaña. El “diseño con IA” se ha dividido en exploración visual, creación web alojada, gobernanza de sistemas de diseño, creatividad de marketing y coordinación de sala de control.
Por eso Claude Design, Sites in Codex, Figma, Lovart y MCPlato pertenecen a un stack, no a una sola escala.
Hero editorial premium que muestra una experiencia web responsive abstracta emergiendo de un espacio de trabajo de estudio
Figura 1: El diseño con IA se está convirtiendo en un stack de experiencia web, no en un lienzo universal.
Revisión de nombres: Claude Design es real; Codex Sites es una abreviatura
Anthropic lanzó Claude Design el 17 de abril de 2026 como Anthropic Labs research preview.1 Puede crear diseños, prototipos interactivos, one-pagers visuales, materiales de marketing y primeros conceptos de landing page mediante conversación y refinamiento directo.1 Eso lo convierte en una dirección de producto real para 2026, pero sigue siendo un preview, no un reemplazo de la gobernanza profesional de diseño.
Codex Sites es una abreviatura útil, pero el nombre oficial es Sites o the Sites plugin inside Codex. La página para desarrolladores de OpenAI se titula “Sites – Codex” y define la función como una forma de “build and deploy hosted sites” desde Codex con el Sites plugin.2 Sites permite que Codex cree, guarde, despliegue e inspeccione sitios web, web apps y juegos alojados por OpenAI.2
El límite importa. Sites está en preview, disponible para workspaces de ChatGPT Business y Enterprise, con Business activado por defecto y Enterprise controlado mediante RBAC de administrador.2 Su salida debe ser ES modules compatibles con Cloudflare Worker, y cada Sites deployment URL es un despliegue de producción.2 Trátalo como un workflow de experiencia web alojada, no como diseño final de producción.
Revisión producto por producto
Claude Design es el punto de partida más fuerte cuando la experiencia todavía es vaga. Puede ayudar a un equipo a explorar cómo podría sentirse una homepage, un onboarding flow, una narrativa de producto o un prototipo antes de comprometerse con un sistema de diseño. Su ventaja es la velocidad y el refinamiento conversacional. Su límite es la autoridad: puede sugerir gusto, pero un equipo aún necesita comprobaciones de accesibilidad, criterio de marca y ownership posterior.
Sites in Codex resulta más convincente cuando el artefacto deseado es una superficie web realmente alojada: una landing page, una herramienta interna, un dashboard, una demo interactiva, una pequeña web app o un juego. Encaja con equipos que ya tienen requisitos estructurados, contexto de código o un proyecto existente que quieren exponer como experiencia web revisable. La web development use-case collection de OpenAI refuerza el papel de Codex en el trabajo web, mientras que el Codex changelog es el mejor lugar para seguir los cambios de plataforma con el tiempo.34 Su debilidad es que una URL de producción puede crear una falsa sensación de finalización. El despliegue no equivale a aprobación de marca, legal, rendimiento o seguridad.
Figma sigue siendo la fuente de verdad profesional para el diseño de producto y web. Figma Sites ofrece a los equipos de diseño una ruta de creación orientada a la web, mientras que Figma Make añade workflows prompt-to-app con chat, adjuntos, point-and-edit, contexto de estilo, editor de código y publishing beta.56 Figma Design AI cubre búsqueda de assets, reemplazo de contenido, interacciones, cambio de nombre de capas, operaciones de texto, herramientas de imagen, vectorización y First Draft; el AI agent de Figma comenzó un despliegue beta limitado el 20 de mayo de 2026.78 El stack web todavía depende de la disciplina del sistema de diseño.9
Lovart se entiende mejor como un agente visual creativo y de marketing. Su página oficial destaca pipelines en lenguaje natural, un lienzo unificado, generación de imágenes y video, edición a nivel de capas, generación por lotes y exportaciones PNG/SVG.10 Eso lo hace útil para mundos de campaña, moodboards, direcciones de hero image, conceptos de fotografía de producto y variantes de lanzamiento. No es el mejor lugar para gobernar un sistema de diseño responsive ni para inspeccionar un sitio alojado.
MCPlato encaja en la capa de sala de control. No es un lienzo profesional de diseño, una plataforma de sitios alojados ni un estudio especializado de imágenes de marketing. Es útil cuando el proyecto de sitio depende de investigación, materiales fuente, tareas de larga duración, aprobaciones, sesiones, disciplina de artefactos y handoff. El posicionamiento público de MCPlato alrededor del trabajo de IA de oficina observable lo convierte en un workspace para coordinar el trabajo alrededor de Claude Design, Codex, Figma y Lovart, no en un reemplazo de ellos.11
Tabla comparativa: qué debería poseer cada herramienta
| Producto / workflow | Trabajo principal a realizar | Mejor en | Débil en | Mejores entradas | Salida / artefacto | Mejor usuario | No ideal para | Rol recomendado en el stack |
|---|---|---|---|---|---|---|---|---|
| Claude Design | Exploración visual conversacional | Conceptos, prototipos, direcciones de landing page, one-pagers | Autoridad final del sistema de diseño | Briefs, ideas de producto, estilos de referencia, feedback directo | Conceptos visuales, prototipos, layouts borrador de experiencia | Fundadores, PMs, diseñadores que exploran dirección | Diseño de producción pixel-perfect | Capa de ideación de experiencia |
| Sites in Codex | Creación de experiencia web alojada | Sitios web, web apps, juegos, dashboards, herramientas internas, demos | Gusto visual, gobernanza, disciplina de revisión | Requisitos, contexto de código/proyecto, restricciones, criterios de revisión | Sitio web alojado, web app, herramienta interna, dashboard, landing page, demo interactiva | Ingenieros, operadores técnicos, equipos de producto | Lanzamientos no revisados o nueva identidad de marca | Capa de prototipo alojado y ejecución web |
| Figma | Fuente de verdad de diseño profesional | Sistemas de diseño, colaboración, diseño web responsive, assets gobernados | Reemplazar el juicio humano de diseño | Componentes, estilos, requisitos de producto, bibliotecas de equipo | Archivos de diseño, prototipos, sitios, assets de marca | Equipos de diseño y producto | Orquestación de investigación no estructurada | Capa de diseño del sistema de registro |
| Lovart | Exploración creativa de marketing | Moodboards, visuales de campaña, direcciones de marca, creatividad por lotes | Gobernanza de sistema de diseño, inspección de sitios | Prompts de marca, objetivos de campaña, referencias visuales | Imágenes, videos, assets creativos por capas, exportaciones | Marketers, creadores, equipos de marca | Fuente de verdad de UI de producto | Capa de exploración creativa |
| MCPlato | Coordinación observable de trabajo entre materiales | Investigación, aprobaciones, sesiones, artefactos, tareas asíncronas, handoff | Lienzo especializado de diseño o web runtime alojado | Fuentes, materiales locales, planes de tareas, aprobaciones, briefs | Informes, esquemas, rastros de tareas, entregables | Operadores, investigadores, PMs, equipos que gestionan trabajo | Reemplazar Figma, Codex, Lovart o diseñadores | Capa de sala de control |
Corte arquitectónico premium semi-3D de un workflow de experiencia web asistido por IA
Figura 2: El stack separa exploración, diseño gobernado, ejecución alojada, assets creativos y coordinación.
Matriz de recomendación por escenario
| Escenario | Recomendación principal | Herramientas secundarias | Por qué |
|---|---|---|---|
| Dirección visual de landing page | Claude Design | Lovart, Figma | Claude Design acelera la exploración temprana; Lovart amplía las direcciones de mood y campaña. |
| Diseño de sitio responsive | Figma | Claude Design, MCPlato | Figma debería poseer componentes, comportamiento responsive, colaboración y decisiones revisables. |
| Prototipo prompt-to-web app | Sites in Codex | Figma Make, MCPlato | Sites in Codex encaja con web apps o demos alojadas desde contexto técnico. |
| Dashboard/herramienta interna | Sites in Codex | Figma, MCPlato | Codex puede producir una superficie técnica alojada; Figma gobierna patrones UX y MCPlato coordina requisitos. |
| Assets de campaña de marketing | Lovart | Figma Buzz, Claude Design | Lovart es mejor para variedad creativa, moodboards y visuales de lanzamiento; Figma Buzz ayuda con assets masivos. |
| Investigación entre materiales antes de construir el sitio | MCPlato | Claude Design, Figma | MCPlato es el centro para reunir fuentes, notas, aprobaciones y handoff. |
| Proyecto existente a demo alojada | Sites in Codex | MCPlato | Codex Sites puede convertir trabajo web compatible en un despliegue alojado; MCPlato rastrea advertencias. |
| Experiencia web gobernada por sistema de diseño | Figma | Sites in Codex | Figma posee el sistema de registro; Codex puede exponer una implementación compatible para revisión. |
| Coordinación de proyecto de sitio de larga duración | MCPlato | Figma, Sites in Codex, Lovart | El trabajo de sitio en varias etapas necesita investigación, decisiones, assets, notas de despliegue y aprobaciones visibles. |
Qué deberían evitar los equipos
Primero, no trates una URL alojada como aprobación final. La documentación de Sites de OpenAI es explícita: cada deployment URL es un despliegue de producción.2 Una demo funcional todavía necesita revisión de fuentes, revisión de accesibilidad, revisión de marca, revisión de seguridad y aprobación de stakeholders.
Segundo, no dejes que la abreviatura confunda la ownership. “Codex Sites” es un título cómodo, pero la función oficial es Sites inside Codex. Figma debería poseer los sistemas de diseño gobernados. Lovart no debería convertirse en la fuente de verdad de la UI de producto. Claude Design no debería tratarse como diseño de producción terminado. MCPlato debería coordinar materiales y decisiones, no fingir ser un lienzo de diseño ni una capa de hosting.
Fotografía editorial de producto de alta gama que compara lienzo de diseño, objeto web alojado, estudio creativo y escritorio de coordinación
Figura 3: El trabajo web es más seguro cuando las superficies de creatividad, diseño, despliegue y coordinación se mantienen separadas.
Conclusión: el workflow ganador es un stack
El stack de diseño con IA de 2026 no se está colapsando en un único ganador. Se está especializando. Claude Design explora experiencia y dirección visual. Figma gobierna sistemas de diseño y colaboración responsive. Lovart crea visuales de campaña y variaciones de mundo de marca. Sites in Codex convierte ideas y proyectos adecuados en experiencias web alojadas. MCPlato mantiene observables la investigación, los materiales fuente, las aprobaciones, las iteraciones y el handoff.
Los mejores equipos asignarán ownership: explorar en Claude Design, gobernar en Figma, generar assets de campaña en Lovart, convertir proyectos adecuados en demos alojadas con Sites in Codex y coordinar el trabajo largo donde la evidencia y las decisiones sigan visibles.