Teste do Brilliant.design: Construindo um Portfólio Real com Design e Código Potencializados por IA

Eu usei várias ferramentas de design com IA, mas sempre pensei sobre o que poderia acontecer quando eu parasse de gerar uma tela nova e começasse a trabalhar em um design real.

Gerar uma página de destino com uma boa aparência a partir de um prompt se tornou fácil. Importar um design existente, editá-lo sem quebrar sua linguagem visual, pedir a um agente de IA para entender a tela, criar outra página que siga o mesmo sistema de design e, eventualmente, colocar esse design em um fluxo de trabalho real do React é um teste melhor, eu acho.

Era isso que eu queria fazer com o Brilliant.design.

Para esta análise prática, decidi não começar com uma tela em branco. Usei um portfólio de desenvolvedor real que escolhi no Figma e o trouxe para o Brilliant. A partir daí, trabalhei manualmente pelo editor, conectei o OpenAI Codex através do MCP, pedi ao Codex para inspecionar e modificar o design, criei uma segunda tela a partir do sistema de design existente, testei a IA embutida do Brilliant com o Codex e experimentei seu modo Playground.

Eu também examinei as partes do Brilliant que importam para os desenvolvedores além do editor visual, incluindo seu sistema de design, linguagem Blueprint, fluxo de trabalho MCP e opções de design para código.

TL;DR

Eu testei Brilliant.design usando um portfólio de desenvolvedor real como ponto de partida em vez de construir uma demonstração aleatória do zero. Eu importei o portfólio do Figma, fiz alterações manuais, conectei o Codex através do MCP, pedi ao Codex para entender e modificar a tela, criei uma nova tela usando o sistema de design existente, testei a IA embutida do Brilliant com o Codex e explorei o modo Playground.

Aqui está a versão resumida do que eu encontrei:

• Importação do Figma: O Brilliant pode trazer um design existente do Figma para uma tela editável, incluindo layout, vetores, texto, preenchimentos, traços, layout automático e outras propriedades de design.
• Edição manual: O design importado permanece editável, então você pode continuar trabalhando com ele como um design real em vez de tratar a importação como uma captura de tela estática.
• MCP: Conectar o Codex ao Brilliant me deu uma maneira de trabalhar no design a partir do terminal enquanto o Brilliant lidava com a tela visual.
• Agentes de IA: O Codex poderia inspecionar o portfólio existente e trabalhar com a tela através da conexão MCP do Brilliant.
• Consistência de design: Pedi ao Codex para reutilizar a tipografia, cores, espaçamento, cartões, botões, raio de borda e padrões de componentes existentes do portfólio, e a nova seção seguiu esses padrões visuais.
• Trabalho entre telas: Eu também testei a criação de uma tela separada de Projetos com base no sistema de design existente da página inicial.
• IA embutida: O Brilliant pode usar o Codex e muitos outros agentes como provedores de IA embutidos, oferecendo outra maneira de interagir com a mesma tela.
• Playground: O Playground fornece uma maneira de ver o fluxo de trabalho da IA do Brilliant através de demonstrações agrupadas antes de conectar um provedor.
• Blueprint: O Brilliant tem sua própria linguagem de design compacta para representar elementos de tela editáveis e suas relações.
• Design para código: O Brilliant suporta exportações como React, HTML, CSS, SVG, PDF e outros formatos, enquanto o fluxo de trabalho MCP abre outra rota onde um agente de codificação de IA pode ler o design e implementá-lo em uma base de código real.

A maior coisa que eu gostei é que a IA não está limitada a gerar uma imagem de um design. A tela contém elementos de design editáveis reais que um agente pode inspecionar e modificar.

Isso torna o fluxo de trabalho mais interessante para os desenvolvedores, pois o design pode se tornar parte do mesmo fluxo de trabalho assistido por IA que o código.

O que é uma ferramenta de design com IA?

Antes de entrar no Brilliant, é útil definir o que quero dizer com ferramenta de design com IA.

O termo é usado para muitos produtos diferentes atualmente.

Algumas ferramentas de design com IA são basicamente geradores de prompt para imagem. Você descreve uma página de destino, painel, aplicativo móvel, logotipo ou ilustração, e a ferramenta produz um resultado visual.

Outras vão mais longe. Elas geram layouts de UI reais que você pode editar, mover, redimensionar, reestilizar e exportar.

Então, há ferramentas que colocam um agente de IA diretamente no fluxo de trabalho de design. Nesse arranjo, você pode pedir à IA para criar ou alterar partes de um design enquanto ainda trabalha com elementos de design reais.

Essa última categoria é onde as coisas ficam mais interessantes para os desenvolvedores.

Uma ferramenta de design com IA útil não deve apenas gerar uma interface com boa aparência.

Ela também deve responder a essas perguntas com um grande "SIM":

• Posso editar o resultado após ele ter sido gerado?
• A IA pode entender um design existente?
• Ela pode seguir um sistema de design existente?
• Ela pode reutilizar componentes?
• Ela pode trabalhar em várias telas ou telas?
• Posso fazer pequenas alterações direcionadas sem pedir para ela reconstruir tudo?
• Outro agente de IA pode acessar o design?
• O design pode eventualmente se tornar um código útil?

Essas diferenças importam quando você está trabalhando em algo real.

Por exemplo, imagine que você já tem um painel com uma escala de tipos definida, sistema de espaçamento, botões, cartões, cores e componentes.

Você não quer que uma ferramenta de IA crie um painel completamente diferente toda vez que você pede uma nova tela.

Você quer que ela entenda o que você já construiu e continue a partir daí.

Essa foi uma das principais coisas que eu queria testar com o Brilliant.

Ferramentas de Design com IA vs. Ferramentas de Design Tradicionais: Quais Mudanças?

As ferramentas de design tradicionais são construídas em torno do designer.

Você abre a tela, seleciona um elemento, altera suas propriedades, move as coisas, cria componentes, ajusta o espaçamento e constrói a interface você mesmo.

O designer toma as decisões, e a ferramenta fornece os controles.

As ferramentas de design com IA adicionam outra camada a esse fluxo de trabalho.

Você pode descrever um resultado e deixar um modelo de IA lidar com parte do trabalho mecânico.

Por exemplo, em vez de criar manualmente quatro cartões, alinhá-los, adicionar texto, ajustar o espaçamento e repetir a mesma estrutura, você pode dizer a um agente de IA para criar uma seção de quatro cartões que siga o design existente.

A lacuna entre eles se torna maior quando a IA pode ler uma tela existente.

Nesse ponto, o fluxo de trabalho não precisa parar em:

Prompt → design gerado

Pode se tornar:

Design existente → IA entende → IA faz uma mudança → designer revisa

Durante meu teste do Brilliant, não estava interessado em ver se uma IA poderia criar algo visualmente impressionante do nada. Eu queria ver como ela se comportava quando eu lhe dava um design existente e pedia para ela respeitar o que já estava lá.

E com uma conexão MCP, um agente de codificação de IA pode interagir com ferramentas fora do editor de código.

Assim, o fluxo de trabalho se torna:

Tela de design ↔ agente de IA ↔ base de código

Essa é uma ideia muito diferente de gerar uma captura de tela e depois reconstruí-la manualmente em React.

O que é o Brilliant.design?

Brilliant.design é uma ferramenta de design alimentada por IA construída em torno de uma tela de design editável e agentes de IA.

A distinção importante é que a tela não é apenas uma imagem.

O Brilliant trabalha com elementos de design nativos, como quadros, texto, vetores, linhas, ícones, layouts, componentes e outras propriedades que você pode continuar editando após uma ação de IA.

Se você pedir a um agente para criar uma seção...