YouMind
Iniciar sessão

A Marca em HTML: A Ascensão dos Resultados Baseados em Input

@emmettshine
INGLÊS13/05/2026
437K
201
15
17
401

TL;DR

As agências criativas estão migrando de entregáveis estáticos para 'kits atômicos' — sistemas de marca legíveis por máquina em HTML e JSON que permitem que agentes de IA executem designs enquanto os humanos focam em pensamento original de alto nível.

Como o trabalho criativo está mudando de resultados tradicionais para resultados orientados por sistemas atômicos e liderados por sistemas atômicos.

Na semana passada, enviamos a um fundador um arquivo zip contendo duas pastas: /human, /agent e um readme.md. Após um mês de um mês de trabalho, dentro da pasta do agente, toda a marca deles estava codificada como instruções por meio de arquivos YAML, JSON, Markdown, HTML, CSS e SVG. Ao receber, eles colocaram o pacote no Cursor, digitaram um prompt e tiveram uma landing page quase completa naquele mesmo dia.

Nas últimas semanas, o simples arquivo zip se tornou a entrega que nos pediram para produzir. Não um site, um produto de software ou uma bíblia de campanha de go-to-market. Dito de outra forma, nosso input input é onde reside nosso valor e o que ajuda a ajuda a impulsionar o resultado, não os nossos outputs*.

Isso é bem novo para nós e, em parte, impulsionado pelo que é possível através do Claude Design. A camada de UI acessível e os arquivos organizados que o Design produz têm sido um grande avanço na @littleplainsxo.

Queremos mostrar o que temos experimentado nas últimas semanas com alguns dos fundadores em estágio inicial com quem estamos trabalhando nisso.

Também falaremos sobre onde vemos a criatividade humana e o pensamento original (o 'truque de mágica') sendo mais valiosos, e por que isso é cada vez mais o que queremos ser pagos para fazer.

Emmett - inline image

O Valor do Projeto está Subindo a Corrente

Estamos nos estágios iniciais de ver em primeira mão que o trabalho criativo em si está mudando, e o valor, o cronograma e o modelo de precificação junto com ele.

Há alguns dias, @alexleiphart e eu estávamos no escritório tentando explicar essa mudança na forma como estamos trabalhando para alguns amigos do setor que estavam visitando. Para ilustrar o que estávamos enfrentando, desenhamos um diagrama em um quadro branco: o valor de valor de um projeto no eixo vertical + tempo do projeto no horizontal.

Emmett - inline image

Um desenho tosco em quadro branco mostrando como o valor está se tornando mais upfront / baseado em em input.

Em engajamentos de serviço tradicionais, o valor cresce lenta e constantemente à medida que as entregas se acumulam. Você paga pelo tempo, recebe os outputs, e o valor se acumula ao longo do engajamento. Nos últimos meses, o que estamos descobrindo se parece mais com um funil deitado de lado.

Para engajamentos em estágio inicial, descobrimos que a maior concentração de valor está bem no início: o impulso do 0 ao 0-to-1 de pesquisa aprofundada, síntese especializada e as decisões ousadas sobre como posicionar uma empresa como marca. Para quem é. O que diz. Como soa Como soa. Onde vive no mercado. Essas decisões são o que separa um sistema que se sustenta de um que não se sustenta. O funil se estreita abruptamente a partir daqui, porque uma vez que o pensamento está feito, os outputs funcionam com base na lógica do pensamento.

Nota:.

Nota: repare no 'magic-trick.md' bem no final do diagrama. Voltaremos a isso.

O Modelo de Agência Está Mudando

Durante a maior parte da história do trabalho de agência (todo?), a entrega era estática. Um arquivo de design, um PDF, uma apresentação que o cliente consultaria, interpretaria... e gradualmente se desviaria à medida que novos trabalhos fossem construídos, novos textos fossem escritos e novos fornecedores e colegas de equipe fossem contratados.

Nas últimas décadas de trabalho criativo baseado em digital, qualquer um que já se deparou com um Brand_Guidelines_FINAL_v3-FINAL_v3-FINAL-FINAL.pdf conhece o padrão. A marca existia no mundo após a entrega em qualquer forma que a equipe do cliente pudesse manter.

No entanto, o que nós e outros na linha de frente do trabalho criativo agêntico temos entregue recentemente é diferente na forma e diferente na intenção.

A forma de cada kit que enviamos agora.

A pasta /human contém as diretrizes da marca em formato tradicional (PDFs, documentos vinculados do Figma, etc.), ainda valiosas e ainda essenciais para a grande maioria das equipes.

A pasta /agent é a parte mais interessante.

Com base no trabalho da pasta /human, os arquivos YAML, JSON, Markdown, HTML, CSS e SVG são estruturados para que qualquer ferramenta ferramenta agêntica possa lê-los e construir a partir deles. A marca agora está codificada como instruções, não documentação, e com base em nossas decisões a montante. Um agente abrindo essa pasta obtém um sistema holístico sobre o qual pode agir, com um POV incorporado.

O avanço dos últimos meses é que o kit é coerente de ponta a ponta, não apenas individualmente recuperável.

Insira este 'sistema atômico' no Claude Design, Code, Cursor (ou muitas, muitas outras ferramentas) e o DNA da marca pode se expandir para escrever, projetar, animar e entregar uma landing page, uma superfície de UI ou uma campanha de GTM em um alto nível de qualidade, contexto, EQ e especificidade técnica porque o pensamento fundamental está incorporado na estrutura dos arquivos.

É a mesma marca em dois formatos: um que os humanos usam para entender o sistema, outro que os agentes usam para estendê-lo. O avanço do mês passado é que agora esse pacote de informações para agentes tem uma direção unificadora de nível superior mais clara e tem os detalhes técnicos de nível inferior para construir em direção a ela.

Em Exemplo:

Recentemente, ajudamos a construir o kit atômico para o Type (veja o site real que acabou de ser lançado!), uma ferramenta de workspace de IA multiplayer (obrigado @fletchrichman).

Colocamos o pacote final no Cursor e digitamos um único prompt: "gere uma landing page em HTML com base no sistema de design atômico e na estratégia." O modelo percorreu átomos, moléculas e organismos e produziu uma landing page completa com fontes corretas, estados de hover funcionais, módulos específicos, movimento que correspondia que correspondia à especificação e elementos CSS das diretrizes da marca incorporadas. Também seguiu o posicionamento da marca, estratégia, tom de voz e diretrizes de produção de texto. Foi muito bom, e foi auxiliado por uma equipe fundadora incrível + um pouco de mágica (veja a próxima seção).

A pasta de movimento contém um arquivo JSON especificando curvas de easing e velocidades de transição específicas do Type. Ao ser solicitado a visualizá-lo, o Claude Design produziu um componente interativo que você pode clicar e sentir o sistema de movimento em vez de apenas ler sobre ele.

Para equipes fundadoras lideradas por design ou engenharia (como a Type), o ciclo fica ainda mais apertado. Eles puxaram o kit para o editor, mudaram um valor ou dois, salvaram e estamos construindo instantaneamente. Mude uma cor primária: atualize uma variável CSS. Mude uma curva de movimento: edite o JSON. Refaça o upload para o Claude Design e toda a diretriz se regenera com base nos novos valores. O kit é editável em código, em tempo real, pelas pessoas mais próximas do trabalho.

O mesmo kit aberto no Cursor com Opus 4.7. Um prompt: construa uma landing page em HTML a partir do kit atômico.

Emmett - inline image
Emmett - inline image
Emmett - inline image

magic_trick.md

Aqui está o porquê de um prompt único geralmente não entregar o que você precisa para lançar.

Tudo o que o kit agêntico normalmente produz é uma recombinação do que foi colocado: o posicionamento, o tom, os componentes, o movimento. É para isso que o kit foi construído. O output será consistente, com marca, e pronto para entrega. Também gravitará em direção à mediana do que os inputs permitiram. Correção e originalidade não são a mesma coisa.

A maioria das pessoas se esquecem da pequena inclinação no final do diagrama do quadro branco; o truque de mágica.

Quando a camada de execução é amplamente agêntica, há um momento perto do final de um engajamento em que as coisas começam a convergir para o meio, exatamente quando você precisa que elas façam o oposto. Um único prompt quase nunca produz avanços mágicos (às vezes sinto falta da criatividade das alucinações de IA).

Para um estúdio com preço premium trabalhando com fundadores que fazem grandes apostas, "a mediana" é exatamente o que as pessoas pagam para evitar.

É aqui que um humano tem que voltar com uma ideia. Um pensamento criativo original, real, que queima glicose, fora do centro, estranho, suado, que não poderia ter sido previsto previsto a partir dos inputs.

O tipo de movimento que inclina o resultado: um conceito de filme de lançamento baseado em uma maratona de film noir do inverno passado, um momento sublime de produto pensado durante uma caminhada, uma ideia de campanha que pisca para uma subcultura baseada em uma noite muito tarde, um showstopper radical acima da dobra inspirado por uma pequena galeria de arte encontrada durante uma tempestade em um país estrangeiro, um pedaço de texto de outdoor que acerta mais forte do que o sistema teria produzido por conta própria.

Temos chamado isso de magic_trick.md internamente, e é só meia brincadeira.

Emmett - inline image

O Valor do Vocabulário

Recentemente, Diplo foi perguntado sobre IA. Em sua resposta, ele falou sobre como os melhores DJs do mundo são frequentemente mais velhos que ele por causa de seu vocabulário; seu conhecimento acumulado de música.

Para ele, seu excelente vocabulário veio de anos acordando às cinco da manhã para vasculhar caixas de discos em feiras, indo de casa em casa em busca de vinis obscuros, lendo cada faixa, conhecendo cada baixista em cada disco.

O que torna um DJ ótimo são esses anos de conhecimento acumulado e experiência acumulada. Ambos permitem que ele saiba qual disco puxar, em qual sala, em qual noite. "É isso que nos torna bons. Meu dom é que vim de desenterrar discos antigos."

Emmett - inline image

Um sistema agêntico bem produzido é o equivalente a uma enorme biblioteca de discos perfeitamente referenciada. Incrível por si só, e inútil sem entender a energia de uma multidão, os feromônios de uma sala e a experiência para fazer o que ninguém esperava e todos lembraram.

Se o kit atômico é a biblioteca, o magic_trick.md é o set que um grande DJ monta para uma sala específica em uma noite específica. A ideia de ontem não é a ideia de hoje. A combinação vencedora para cada output importante da marca é um kit agêntico bem produzido e um truque de mágica de ideia profunda.

Certifique-se de deixar espaço para esse pensamento original a jusante, ou você corre o risco de entregar algo correto que ninguém lembra.

Se você tem apenas a ideia ousada e nenhum sistema por baixo dela, entregará algo memorável que não sobreviverá ao anúncio de lançamento.

Pensamento sistêmico e pensamento original. Uma mão lava a outra.

HTML & .MD: De Markdown a markup

Uma coisa que vale a pena debater (como fez Nathaniel Whittemore dois dias atrás em seu excelente podcast, AI Daily Brief) é que achamos que HTML é cada vez mais o formato certo para esse tipo de trabalho.

Um componente expresso em HTML estruturado é analisável por qualquer agente moderno. Um SVG tem sua lógica incorporada na geometria. Um arquivo CSS codifica a linguagem visual em um nível estrutural. Esses arquivos são instruções sobre as quais um agente pode agir diretamente. Uma exportação raster plana — PNG, JPEG, PDF — pode ser visualizada, mas não construída a partir dela.

Quando estruturamos um sistema como HTML, CSS e SVG, estamos construindo para como os agentes leem e constroem, não apenas para como os humanos visualizam. Essa distinção molda quase toda decisão de output que tomamos.

(Para uma ótima leitura técnica sobre isso, veja Using Claude Code: The Unreasonable Effectiveness of HTML por @thariq.)

Emmett - inline image
Emmett - inline image

O Que o Claude Design Mudou Para Nós

Nosso conceito de kit atômico é anterior ao Claude Design. Estamos avançando nessa direção desde o início deste ano, e nosso ensaio Building Brands for Humans and Agents expôs o caso para refatorar o trabalho de marca em formatos legíveis por agentes.

O que parece significativamente diferente agora é que produzir um desses kits bem, na velocidade que um sprint exige, é genuinamente viável e mais impactante.

O Claude Design nos permitiu pensar em um sistema de forma mais visual, verbal, estratégica e estrutural. Podemos trabalhar dentro da mesma ferramenta, produzindo artefatos nos formatos corretos, sem a etapa de conversão manual que costumava consumir a metade final de cada projeto. O trabalho que exigia um engajamento de 12 semanas em 2025 agora pode (às vezes) caber em um sprint de 4 semanas sem comprimir o valor. Quando feito corretamente, o valor realmente aumentou aumentou.

O kit com o qual um cliente sai é generativo, estruturado, à prova do futuro e vivo. As antigas entregas eram estáticas, exigiam manutenção manual e eram extremamente limitadas em sua capacidade de implementação imediata.

Emmett - inline image
Emmett - inline image

O Que Estamos Vendendo: Mundos Atômicos

Quando um kit atômico é a entrega, o kit não é um ativo finalizado. É um sistema que produz ativos finalizados.

Isso muda o que está sendo vendido. O que está sendo vendido é o pensamento codificado que faz com que todo artefato, página e produto futuro pareçam a mesma marca.

O kit é um trabalho original derivado do pensamento original. Cada output downstream que um cliente gera a partir dele herda essa originalidade.

Jack Dorsey e Roelof Botha publicaram) publicaram recentemente "From Hierarchy to Intelligence," argumentando que a próxima geração de empresas será organizada em torno do que eles chamam de "modelo de mundo" - uma compreensão continuamente atualizada e legível por máquina do próprio negócio, rica o suficiente para que a IA pode agir diretamente sobre ela. A aposta deles é que a compreensão é o fosso, e que a profundidade dessa compreensão se compõe à medida que o sistema funciona.

O mesmo se aplica ao trabalho criativo que fazemos.

Um kit atômico é um modelo de mundo de marca. Uma compreensão estruturada e legível por máquina do que a marca é, para quem é, como ela soa e como ela se parece. A profundidade dessa compreensão é o que a torna valiosa e o que a torna durável.

"Um kit atômico é um modelo de mundo de marca."

Como Este Trabalho Será Vendido (Em Breve?)

O trabalho criativo tradicional precifica tempo e materiais: escopo, pague pelo output, siga em frente. Se o kit é o produto real, o trabalho inicial é onde o valor se concentra, exatamente como o diagrama do quadro branco mostra. O relacionamento contínuo se parece menos com um novo escopo para trabalho de produção e mais com a manutenção do acesso a um sistema vivo.

Já começamos a fazer versões disso. Através de Dan Batten,, construímos um agente de pesquisa aprofundada personalizado baseado em nós ao qual a equipe do Little Plains tem acesso exclusivo. Vários clientes nos pediram para usá-lo. Se estivéssemos prontos, ofereceríamos acesso mensal de acesso mensal a uma taxa fixa, com o entendimento de que o manteríamos e melhoraríamos continuamente. Eles sempre receberiam a versão atual.

Algo estruturalmente semelhante poderia se aplicar a um sistema de marca. Ficaríamos na cozinha refinando a receita. Os clientes sempre constroem a partir da melhor versão dela. Menor custo inicial, licença contínua, qualidade contínua.

O mesmo princípio se aplica ao nosso trabalho Flora. Construímos fluxos de trabalho generativos originais para clientes (uma forma de produzir visuais, um padrão de geração de UI personalizado, um pipeline de conteúdo baseado em nós) e entregamos essa técnica como um ativo que eles podem continuar usando, não apenas os outputs. À medida que essas técnicas se tornaram mais sofisticadas, estamos explorando o licenciamento de acesso e uso.

Emmett - inline image

Não chegamos totalmente um modelo de licenciamento completo para criativos, mas estamos perto o suficiente para começar a falar sobre isso. O futuro de como esse trabalho é comprado e vendido está mais próximo da precificação de software do que da precificação de agência. Para nós, provavelmente será um híbrido: tempo e materiais com escopo definido na frente, licenciamento contínuo para os sistemas que deixamos para trás.

Se você acredita que tem pensamento original e ideias originais, isso deve parecer uma vantagem.

Procure ser pago pela sua mente, não pelas suas mãos.

Onde Estamos Agora

Entregamos vários kits atômicos no mês passado. As equipes fundadoras estão construindo a partir deles em tempo real, em prazos de lançamento reais, que é o único teste que realmente importa.

Cada membro da nossa equipe em tempo integral usa o Claude Design diariamente. Nossos redatores estão testando textos dentro de sites HTML em vez de documentos Google, o que dá uma leitura mais limpa de contagens de caracteres, quebras de linha e como a narrativa realmente flui em situação. Nossos designers estão testando componentes sob estresse no mesmo ambiente em que serão implantados. O trabalho é mais honesto porque o meio é o meio.

Em suma, o trabalho de definição a montante; a estratégia, a lógica de posicionamento, os sistemas visuais e verbais que tornam uma marca coerente está se tornando o produto real. O trabalho seguinte está cada vez mais a jusante.

Por último, o trabalho que sempre mais nos importamos (o pensamento criativo original) é a parte que pode importar ainda mais daqui para frente.

Obrigado por ler!

Se quiser falar sobre essas coisas nerds, por favor, nos envie um e-mail para: hello@littleplains.co.

  • Emmett & Alex

Emmett Shine e Alex Leiphart são sócios da Little Plains, um estúdio de Nova York que trabalha com startups incríveis em marca, produto e os sistemas que mantêm ambos unidos.*

Guardar com um clique

Faça leitura aprofundada de artigos virais com IA no YouMind

Guarde a fonte, faça perguntas específicas, resuma o argumento e transforme um artigo viral em notas reutilizáveis num único espaço de trabalho com IA.

Explorar o YouMind
Para criadores

Transforme o seu Markdown num artigo 𝕏 impecável

Quando publica os seus próprios textos longos, formatar imagens, tabelas e blocos de código para o 𝕏 é uma dor de cabeça. O YouMind transforma um rascunho completo em Markdown num artigo 𝕏 impecável e pronto a publicar.

Experimente Markdown para 𝕏

Mais padrões para decifrar

Artigos virais recentes

Explorar mais artigos virais