A stack de design com IA acabou de se dividir: Claude Design, Codex Sites, Figma, Lovart e a sala de controlo da MCPlato
Uma análise aprofundada para 2026 de Claude Design, Sites in Codex, Figma, Lovart e MCPlato, e porque o design com IA pertence agora a uma stack de experiência web, não a uma categoria em que um único vencedor leva tudo.
Publicado em 2026-06-05
A pergunta errada em 2026 é “qual é a melhor ferramenta de design com IA?”
A pergunta mais precisa é: que tarefa quer contratar a IA para fazer? Um fundador precisa de um conceito de landing page; uma equipa de produto precisa de uma experiência web responsive; um engenheiro precisa de uma demo alojada; growth precisa de visuais de campanha. O “design com IA” dividiu-se em exploração visual, criação web alojada, governação de sistemas de design, criatividade de marketing e coordenação em sala de controlo.
É por isso que Claude Design, Sites in Codex, Figma, Lovart e MCPlato pertencem a uma stack, não a uma única escala.
Hero editorial premium que mostra uma experiência web responsive abstrata a emergir de um espaço de trabalho de estúdio
Figura 1: O design com IA está a tornar-se uma stack de experiência web, não uma tela universal.
Verificação da nomenclatura: Claude Design é real; Codex Sites é uma forma abreviada
A Anthropic lançou Claude Design em 17 de abril de 2026 como Anthropic Labs research preview.1 Consegue criar designs, protótipos interativos, one-pagers visuais, materiais de marketing e primeiros conceitos de landing page através de conversa e refinamento direto.1 Isso torna-o uma direção de produto real para 2026, mas continua a ser um preview, não um substituto da governação profissional de design.
Codex Sites é uma forma abreviada útil, mas a designação oficial é Sites ou the Sites plugin inside Codex. A página de developers da OpenAI chama-se “Sites – Codex” e define a funcionalidade como uma forma de, a partir do Codex com o Sites plugin, “build and deploy hosted sites”.2 Sites permite ao Codex criar, guardar, implementar e inspecionar websites, Web apps e jogos alojados pela OpenAI.2
A fronteira importa. Sites está em preview, disponível para workspaces ChatGPT Business e Enterprise, com Business ativado por defeito e Enterprise controlado por RBAC de administrador.2 A saída deve ser ES modules compatíveis com Cloudflare Worker, e cada Sites deployment URL é uma implementação de produção.2 Trate-o como um workflow de experiência web alojada, não como design final de produção.
Análise produto a produto
Claude Design é o ponto de partida mais forte quando a experiência ainda é vaga. Pode ajudar uma equipa a explorar como uma homepage, um onboarding flow, uma narrativa de produto ou um protótipo se poderiam sentir antes de alguém se comprometer com um sistema de design. A sua vantagem é velocidade e refinamento conversacional. A sua limitação é autoridade: pode sugerir gosto, mas uma equipa continua a precisar de verificações de acessibilidade, julgamento de marca e ownership a jusante.
Sites in Codex é mais convincente quando o artefacto desejado é uma verdadeira superfície web alojada: landing page, ferramenta interna, dashboard, demo interativa, pequena Web app ou jogo. Encaixa em equipas que já têm requisitos estruturados, contexto de código ou um projeto existente que querem expor como experiência web passível de revisão. A web development use-case collection da OpenAI reforça o papel do Codex no trabalho web, enquanto o Codex changelog é o melhor local para acompanhar mudanças da plataforma ao longo do tempo.34 A sua fraqueza é que uma URL de produção pode criar uma falsa sensação de conclusão. Implementação não é aprovação de marca, legal, desempenho ou segurança.
Figma continua a ser a fonte de verdade profissional para design de produto e web. Figma Sites dá às equipas de design um caminho de criação orientado para a web, enquanto Figma Make acrescenta workflows prompt-to-app com chat, anexos, point-and-edit, contexto de estilo, editor de código e publishing beta.56 Figma Design AI cobre pesquisa de assets, substituição de conteúdo, interações, renomeação de camadas, operações de texto, ferramentas de imagem, vetorização e First Draft; o AI agent da Figma iniciou um rollout beta limitado em 20 de maio de 2026.78 A stack web continua a depender da disciplina do sistema de design.9
Lovart é melhor enquadrado como um agente visual criativo e de marketing. A sua página oficial destaca pipelines em linguagem natural, uma tela unificada, geração de imagem e vídeo, edição ao nível das camadas, geração em lote e exportações PNG/SVG.10 Isso torna-o útil para mundos de campanha, moodboards, direções de hero image, conceitos de fotografia de produto e variantes de lançamento. Não é o melhor local para governar um sistema de design responsive ou inspecionar um site alojado.
MCPlato encaixa na camada de sala de controlo. Não é uma tela de design profissional, uma plataforma de sites alojados nem um estúdio especializado de imagens de marketing. É útil quando o projeto de site depende de investigação, materiais de origem, tarefas de longa duração, aprovações, sessões, disciplina de artefactos e handoff. O posicionamento público da MCPlato em torno de trabalho de IA de escritório observável torna-a um workspace para coordenar o trabalho à volta de Claude Design, Codex, Figma e Lovart, não um substituto deles.11
Tabela de comparação: o que cada ferramenta deve possuir
| Produto / workflow | Principal tarefa a realizar | Melhor em | Fraco em | Melhores entradas | Saída / artefacto | Melhor utilizador | Não ideal para | Papel recomendado na stack |
|---|---|---|---|---|---|---|---|---|
| Claude Design | Exploração visual conversacional | Conceitos, protótipos, direções de landing page, one-pagers | Autoridade final do sistema de design | Briefs, ideias de produto, estilos de referência, feedback direto | Conceitos visuais, protótipos, layouts de experiência em rascunho | Fundadores, PMs, designers a explorar direção | Design de produção pixel-perfect | Camada de ideação de experiência |
| Sites in Codex | Criação de experiência web alojada | Websites, Web apps, jogos, dashboards, ferramentas internas, demos | Gosto visual, governação, disciplina de revisão | Requisitos, contexto de código/projeto, restrições, critérios de revisão | Website alojado, Web app, ferramenta interna, dashboard, landing page, demo interativa | Engenheiros, operadores técnicos, equipas de produto | Lançamentos não revistos ou nova identidade de marca | Camada de protótipo alojado e execução web |
| Figma | Fonte de verdade do design profissional | Sistemas de design, colaboração, design web responsive, assets governados | Substituir o julgamento humano de design | Componentes, estilos, requisitos de produto, bibliotecas de equipa | Ficheiros de design, protótipos, sites, assets de marca | Equipas de design e produto | Orquestração de investigação não estruturada | Camada de design do sistema de registo |
| Lovart | Exploração criativa de marketing | Moodboards, visuais de campanha, direções de marca, criatividade em lote | Governação de sistema de design, inspeção de site | Prompts de marca, objetivos de campanha, referências visuais | Imagens, vídeos, assets criativos em camadas, exportações | Marketers, criadores, equipas de marca | Fonte de verdade de UI de produto | Camada de exploração criativa |
| MCPlato | Coordenação observável de trabalho entre materiais | Investigação, aprovações, sessões, artefactos, tarefas assíncronas, handoff | Tela de design especializada ou web runtime alojado | Fontes, materiais locais, planos de tarefas, aprovações, briefs | Relatórios, esboços, trilhos de tarefas, entregáveis | Operadores, investigadores, PMs, equipas que gerem trabalho | Substituir Figma, Codex, Lovart ou designers | Camada de sala de controlo |
Corte arquitetónico premium semi-3D de um workflow de experiência web assistido por IA
Figura 2: A stack separa exploração, design governado, execução alojada, assets criativos e coordenação.
Matriz de recomendação por cenário
| Cenário | Recomendação principal | Ferramentas secundárias | Porquê |
|---|---|---|---|
| Direção visual de landing page | Claude Design | Lovart, Figma | Claude Design acelera a exploração inicial; Lovart alarga direções de mood e campanha. |
| Design de site responsive | Figma | Claude Design, MCPlato | Figma deve possuir componentes, comportamento responsive, colaboração e decisões passíveis de revisão. |
| Protótipo prompt-to-web app | Sites in Codex | Figma Make, MCPlato | Sites in Codex encaixa em Web apps ou demos alojadas a partir de contexto técnico. |
| Dashboard/ferramenta interna | Sites in Codex | Figma, MCPlato | Codex pode produzir uma superfície técnica alojada; Figma governa padrões UX e MCPlato coordena requisitos. |
| Assets de campanha de marketing | Lovart | Figma Buzz, Claude Design | Lovart é melhor para variedade criativa, moodboards e visuais de lançamento; Figma Buzz ajuda com assets em massa. |
| Investigação entre materiais antes da construção do site | MCPlato | Claude Design, Figma | MCPlato é o centro para recolha de fontes, notas, aprovações e handoff. |
| Projeto existente para demo alojada | Sites in Codex | MCPlato | Codex Sites pode transformar trabalho web compatível numa implementação alojada; MCPlato acompanha ressalvas. |
| Experiência web governada por sistema de design | Figma | Sites in Codex | Figma possui o sistema de registo; Codex pode expor uma implementação compatível para revisão. |
| Coordenação de projeto de site de longa duração | MCPlato | Figma, Sites in Codex, Lovart | Trabalho de site em várias etapas precisa de investigação, decisões, assets, notas de implementação e aprovações visíveis. |
O que as equipas devem evitar
Primeiro, não trate uma URL alojada como aprovação final. A documentação de Sites da OpenAI é explícita: cada deployment URL é uma implementação de produção.2 Uma demo funcional continua a precisar de revisão de fontes, revisão de acessibilidade, revisão de marca, revisão de segurança e aprovação de stakeholders.
Segundo, não deixe que a forma abreviada confunda a ownership. “Codex Sites” é um título conveniente, mas a funcionalidade oficial é Sites inside Codex. Figma deve possuir sistemas de design governados. Lovart não deve tornar-se a fonte de verdade da UI de produto. Claude Design não deve ser tratado como design de produção concluído. MCPlato deve coordenar materiais e decisões, não fingir ser uma tela de design ou camada de alojamento.
Fotografia editorial de produto de alta gama que compara tela de design, objeto web alojado, estúdio criativo e mesa de coordenação
Figura 3: O trabalho web é mais seguro quando superfícies criativas, de design, implementação e coordenação permanecem distintas.
Conclusão: o workflow vencedor é uma stack
A stack de design com IA de 2026 não está a colapsar num único vencedor. Está a especializar-se. Claude Design explora experiência e direção visual. Figma governa sistemas de design e colaboração responsive. Lovart cria visuais de campanha e variantes de mundo de marca. Sites in Codex transforma ideias e projetos adequados em experiências web alojadas. MCPlato mantém observáveis investigação, materiais de origem, aprovações, iterações e handoff.
As melhores equipas vão atribuir ownership: explorar em Claude Design, governar em Figma, gerar assets de campanha em Lovart, transformar projetos adequados em demos alojadas com Sites in Codex e coordenar trabalho de longa duração onde evidências e decisões continuam visíveis.