Forma: construindo um canvas de design editável
Um protótipo local de ferramenta de design que explora o que acontece depois que a IA gera um componente: revelar sua estrutura, inspecioná-lo em 3D e continuar editando.
Criei o Forma para explorar uma pergunta: o que deveria acontecer depois que uma IA entrega um design? Eu queria um componente que pudesse desmontar, entender e alterar no mesmo espaço de trabalho.
Forma é um protótipo local funcional. O canvas, a inspeção de camadas, os controles de aparência e a edição de pixels para gradientes são reais. A geração por IA em tempo real não estava conectada nesta demonstração.
Veja o conceito
A sequência começa com um componente “Deep focus” preparado e sua animação de carregamento e revelação. Abro suas camadas em 3D, giro a pilha, altero o preenchimento e o raio dos cantos, depois extraio uma amostra de uma imagem, ajusto cor e luminância, movo um ponto do gradiente e troco o tipo de gradiente.
Construindo pela conversa
Dirigi o trabalho no Codex desktop, refinando o produto em ciclos curtos de implementação, interação no navegador e feedback visual. Os pedidos ficaram mais específicos conforme eu usava o canvas: interface em cinza-carvão mais discreta, barras laterais recolhíveis, navegação mais clara, tipografia mais coesa e melhor alinhamento.
Figma e Paper foram referências para a experiência de edição. Eu queria a relação familiar entre árvore de camadas, canvas e inspetor, com espaço para explorar como um componente revela sua estrutura.
A revelação se tornou uma forma de passar da geometria de base ao conteúdo finalizado. A visualização 3D ampliou essa ideia: uma pilha compacta para orientação e uma vista expandida em “sanduíche” para inspecionar cada camada. Um refinamento foi inverter a ordem de profundidade para que o fundo sólido da raiz ficasse atrás do conteúdo, em vez de escondê-lo.
O componente preparado se torna conteúdo editável no canvas. A geração mostrada aqui é simulada.
A separação das camadas revela a anatomia do componente; arrastar gira a visualização.
A amostragem de pixels evoluiu para outro workflow de edição. Em vez de parar na paleta extraída, eu queria ajustar as cores e a luminância amostradas, reposicionar pontos e experimentar tipos de gradiente.
A amostragem da imagem alimenta um gradiente editável, com controles de cor, luminância e posição dos pontos.
Ferramentas e validação
O app usa React 19 e TypeScript com Vite, Tailwind CSS, controles shadcn/Radix e ícones Lucide. Motion cuida das animações; transformações CSS 3D sustentam a inspeção de camadas. A amostragem local de imagens abastece o editor de gradientes, e Zod valida os dados estruturados.
Usei Codex desktop no desenvolvimento, automação de navegador para cliques, arrastos, capturas de tela e verificações visuais, e Bun para scripts e testes. O modelo de desenvolvimento registrado foi gpt-6-astra. O app tem um adaptador separado para o provedor OpenAI, mas ele não estava conectado durante a gravação.
Para o vídeo, capturas do navegador foram feitas a aproximadamente 9–10 quadros por segundo e montadas com Bun e FFmpeg em um arquivo H.264 de 1080p, com saída a 60fps. Não é uma captura de tela nativa a 60fps; as pausas entre cenas foram cortadas.
Na verificação do artigo de 8 de setembro, os 76 testes do projeto de origem passaram, incluindo geometria de camadas, edição de gradientes, transações de documentos e tratamento de erros do provedor. O vídeo do conceito demonstra interações selecionadas, não prontidão para produção. Não demonstra comportamento do provedor ao vivo, sincronização de código ao vivo nem uma ponte MCP.
Tokens e custo
O registro acumulado da tarefa de origem às 07:32 UTC de 8 de setembro de 2026 totaliza 80.448.253 tokens. É um retrato acumulado daquela tarefa, não um total final ou verificado do desenvolvimento com todos os agentes. O trabalho continuou depois; este artigo do portfólio está fora desse escopo.
| Uso registrado | Tokens |
|---|---|
| Entrada, incluindo entrada em cache | 80.197.013 |
| Dessa entrada, em cache | 78.707.968 |
| Entrada sem cache | 1.489.045 |
| Saída, incluindo raciocínio | 251.240 |
| Total de entrada + saída | 80.448.253 |
Cerca de 98,1% da entrada estava em cache. Esses contadores incluem processamento repetido de contexto e leituras de cache, portanto não representam essa quantidade de material escrito único. A entrada em cache já está incluída na entrada; o raciocínio já está incluído na saída. Não somei nenhum desses subconjuntos novamente. A inclusão dos agentes filhos não foi verificada, então não há um total completo de tokens do projeto.
Quanto esses tokens custariam
US$ 106,16 nas tarifas padrão da API do GPT-6 Astra. Esta é uma estimativa equivalente de API apenas para tokens do registro, não minha fatura real do Codex. Os preços oficiais do GPT-6 Astra, consultados em 8 de setembro de 2026, indicam US$ 10 por milhão de tokens de entrada sem cache, US$ 1 por milhão em cache e US$ 50 por milhão de tokens de saída.
| Categoria | USD por 1M | Estimativa em USD |
|---|---|---|
| Entrada em cache | US$ 1 | US$ 78,71 |
| Entrada sem cache | US$ 10 | US$ 14,89 |
| Saída | US$ 50 | US$ 12,56 |
| Total | — | US$ 106,16 |
O cache muda a relação de custo: representa 97,84% de todos os tokens, mas cerca de 74,14% deste custo estimado. Subtraio a entrada em cache da entrada total antes de aplicar a tarifa sem cache. O registro indica zero tokens de gravação de cache.
Este cálculo pressupõe processamento padrão e nenhuma requisição acima de 272.000 tokens de entrada. Pelas regras publicadas da API, requisições maiores dobram as tarifas de entrada/cache e multiplicam as tarifas de saída por 1,5; o modo Fast dobra as tarifas aplicáveis. Apenas com o modo Fast, o mesmo registro custaria US$ 212,32. O registro acumulado não mostra a combinação de cada requisição, então nenhum dos valores reconstrói a cobrança real. Estas estimativas excluem cobranças de ferramentas e uso fora do registro.
Custo real do desenvolvimento: indisponível / não medido separadamente. Não existe um valor de cobrança verificado por projeto. O conceito não usou chamadas de API de geração ao vivo, mas isso não torna o desenvolvimento gratuito. O uso da assinatura do Codex não pode ser tratado como uma fatura de API.
O que aprendi
As iterações mais úteis surgiram ao tentar editar o resultado. Uma revelação pode explicar a estrutura, e uma pilha 3D pode torná-la tangível, mas ambas precisam levar de volta a controles que funcionem. Forma me deu um espaço local para explorar essa transição. Conectar e validar o provedor ao vivo continua sendo uma próxima etapa separada.