CasesarOS 2.0

Conversas que convertem

A arOS é uma plataforma de marketing com IA para pequenas empresas e agências, com mais de 32 mil usuários cadastrados. Redesenhei o produto em torno de um único chat ancorado no contexto de negócio de cada cliente e fui dono do trabalho de ponta a ponta: discovery, pesquisa, wireframes, protótipos, UI de alta fidelidade e o PRD.

Adoção
1.400+ usuários na 2.0, com 400 ativos por semana e 180 por dia nos 3 primeiros meses
A virada
De agentes de IA separados para um chat com contexto e memória
Resultado-chave
Contexto do negócio em quase 70% das conversas, contra cerca de 40% antes
Pesquisa
9 entrevistas, 11 testes de usabilidade e 550+ gravações de sessão

arOS 2.0 · Home

Home da arOS 2.0: saudação, composer com seletores de contexto e skill, ações rápidas e posts recentes

Resultados

40% → 70%

das conversas com contexto do negócio, depois das mudanças na forma de selecionar e criar DNAs.

20 por dia

posts gerados na arOS nesse período.

43% → 16%

de evasão no onboarding, de abril e maio para junho e julho de 2026, ao longo de três versões.

Contexto e arOS 1.0

A arOS ajuda pequenas empresas e agências a criar marketing com IA. O diferencial é o contexto: perfis reutilizáveis da marca, do público, do produto e da oferta de um negócio, que a arOS chama de DNAs. Toda resposta se apoia neles.

Quando entrei, em junho de 2025, a arOS 1.0 funcionava agente por agente. Você escolhia um especialista, como um gerador de ofertas ou um redator de carrosséis, preenchia os campos dele e recebia um resultado por vez. De junho a dezembro de 2025, trabalhei na 1.0 com um time de 6 desenvolvedores low-code e 2 engenheiros de prompt.

O que entreguei na 1.0

  • Criação automática de DNAs. Um questionário guiado substituiu 40 a 60 minutos de formulários manuais. Os agentes passaram a gerar o perfil em 1 a 2 minutos.
  • DNAs combináveis. Três tipos, personalidade, público e produto ou serviço, que se combinam, para que um novo produto ou público não significasse começar do zero.
  • Projetos. Escolher e pré-configurar vários agentes numa só tela, em vez de abrir um por vez.
  • Informações dos agentes. Na pesquisa, 5 de 10 usuários não entendiam o que um agente fazia pelo nome, e 7 de 10 disseram que a primeira geração falhou por isso. Cada agente ganhou um painel explicando quando usá-lo.

De agentes para uma conversa

arOS 1.0: agente por agente

  1. Escolher um agente
  2. Preencher os campos dele
  3. Receber um resultado e recomeçar com o próximo agente

Contexto: DNAs de três tipos, personalidade, público e produto ou serviço.

arOS 2.0: uma conversa

  1. Pedir qualquer coisa
  2. Adicionar o contexto do negócio e, se quiser, uma skill
  3. Receber respostas, carrosséis ou atualizações de DNA no mesmo chat

Contexto: DNAs de quatro tipos, marca, público, produto ou serviço e oferta, além de memória entre conversas.

O problema

Ferramentas genéricas de IA escrevem rápido. Nas entrevistas de discovery, as pessoas descreveram outro gargalo: refinar. Gastavam o tempo corrigindo o tom, trocando palavras que nunca usariam e reescrevendo frases que não soavam como elas, muitas vezes em várias ferramentas de IA para um único post.

Meu PRD resumiu em uma linha: a IA acelerava a escrita, não os resultados.

Ao mesmo tempo, mais de 70% dos usuários pesquisados queriam trabalhar pelo chat. Para a maioria, IA generativa já era sinônimo de chat. E, com mais de 32 mil usuários cadastrados na 1.0, a nova versão precisava parecer uma evolução, não um recomeço.

Como saberíamos que funcionou

  • Tempo até a primeira resposta que o usuário considera boa, e ativação no onboarding
  • Menos ajustes manuais nas respostas
  • Qualidade das respostas medida com evals de LLM-as-a-judge
  • Retenção por coorte, e custo e latência por resposta

Meu papel

De janeiro a outubro de 2026, fui o designer e o Product Owner da arOS 2.0, trabalhando com o nosso Head de Produto, 5 desenvolvedores e 2 engenheiros de prompt.

  • Escrevi o PRD da 2.0: uma primeira entrega enxuta, princípios de decisão, a divisão de papéis entre Produto, Engenharia de IA e Tecnologia, governança da IA no Langfuse e métricas de sucesso.
  • Escrevi o plano de produto de agosto de 2026: um diagnóstico a partir dos dados de uso, um benchmark de 28 empresas, pesquisa de público e cada aposta ligada ao número que a decide, além do que não fazer ainda.
  • Enquadrei cada nova iniciativa com um modelo baseado nos pitches do Shape Up e escrevi as histórias de usuário, de funcionalidades simples a produtos novos e plataformas internas de análise, uso e gestão de acessos, com critérios de aceite e especificações de design ligadas ao design system em código.
  • Estruturei os roteiros de pesquisa, conduzi as entrevistas em dupla, conduzi testes de usabilidade e analisei o PostHog toda semana.
  • Desenhei a UI base do chat e dos DNAs, criei e mantive o design system e prototipei funcionalidades em React antes do desenvolvimento, como a identidade visual no DNA.
  • Desenvolvi funcionalidades eu mesmo, com um fluxo assistido por IA, como os chips de resposta, depois que as gravações mostraram quantas mensagens eram só "pode seguir", e os comandos e atalhos. Assim, melhorias pequenas e baseadas em evidência chegavam aos usuários sem tirar tempo de um time de engenharia pequeno.

Restrições

  • Mais de 32 mil usuários cadastrados na 1.0 para levar junto.
  • Uso por créditos: cada mensagem, edição e geração consome créditos.
  • Um time pequeno, então apostas incertas precisavam ser baratas.
  • Respostas não determinísticas: a qualidade precisava ser medida, não presumida.

Processo

  1. Matriz CSD

    Organizei certezas, suposições e dúvidas numa matriz CSD para decidir o que pesquisar primeiro.

  2. Um PRD escrito como hipótese, fevereiro de 2026

    Uma primeira entrega enxuta de propósito. Pastas de projeto, edição manual de respostas, criação automática de DNA fora do onboarding e web scraping contínuo ficaram de fora.

  3. Entrevistas e testes de usabilidade, fevereiro e março de 2026

    Estruturei os roteiros e conduzi em dupla 9 entrevistas de discovery, sintetizadas no Dovetail. Depois, 11 participantes, todos vindos da 1.0, usaram a 2.0 desde a primeira tela em testes de usabilidade moderados, com um protocolo rígido.

  4. Depois do lançamento: 550+ gravações de sessão

    Toda semana, eventos e gravações de sessão do PostHog alimentavam o backlog. Quase tudo o que veio depois da primeira entrega começou ali.

O que ouvimos nas entrevistas

Refinar consome o tempo

Escrever era rápido. Fazer soar como a marca era lento: o tom, palavras que as pessoas nunca usariam, frases com cara de máquina.

Levou a: contexto do negócio em toda conversa e edição das respostas no lugar
O contexto vive fora da IA

Manuais de marca, guias de tom de voz e documentos de oferta ficavam no Notion ou no NotebookLM e eram colados de novo a cada tarefa.

Levou a: DNAs escolhidos uma vez e lembrados entre conversas
Um post, muitas ferramentas

Ideias numa ferramenta, copy em outra, imagens e layout numa terceira. Cada troca exigia explicar o negócio de novo.

Levou a: um chat com skills e carrosséis gerados dentro dele
Pouco tempo, difícil manter o ritmo

As pessoas tinham poucas horas por semana para conteúdo, e planejar uma sequência de posts conectados ainda era feito à mão. Mais tarde, um calendário marcado como "Em breve" atraía cerca de 60 usuários por semana antes mesmo de funcionar.

Levou a: posts dentro do produto e um calendário de conteúdo no roadmap
Protocolo do teste de usabilidade

Observar, não ajudar

  • Não explicar a ferramenta, não demonstrar, não corrigir erros, não elogiar nem defender.
  • Se a pessoa travar, ficar em silêncio. Se perguntarem "o que é isso?", devolver: "O que você acha que é?"
Critérios de sucesso
  • 70% ou mais geram algo utilizável
  • 20% ou menos precisam de orientação explícita
  • 60% ou mais exploram pelo menos uma funcionalidade além do chat
Trecho do PRD

O valor aparece dentro da resposta

  • O chat é o centro do produto. Nenhum fluxo paralelo é necessário para gerar valor.
  • Contexto (DNAs) e comportamento (skills) são opcionais e podem mudar no meio da conversa.
  • Complexidade só entra quando traz ganho mensurável, e nada é construído antes de ser validado com usuários.

O que as 6 primeiras sessões de teste revelaram

  • Estrutura e texto das respostas4 de 6Alimentou: edição das respostas no lugar
  • Envio de arquivos4 de 6
  • Edição de DNAs4 de 6Alimentou: gestão de DNAs pelo chat
  • Renomear conversas3 de 6Alimentou: fixar e renomear em vez de pastas
  • Vídeo do onboarding3 de 6
  • Links no onboarding2 de 6
  • Entender os agentes2 de 6
  • Confirmar a seleção de DNAs2 de 6Alimentou: contexto aplicado na hora

Decisões-chave

  1. Escolhida

    O chat vira o produto

    Evidência
    Mais de 70% dos usuários pesquisados queriam trabalhar pelo chat, e IA generativa já era sinônimo de chat para a maioria.
    Decisão
    Um chat em que as pessoas escolhem o contexto do negócio e, se quiserem, uma skill. Sem skill selecionada, o chat padrão continua entendendo de marketing.
    Trade-off
    Mantivemos os DNAs como diferencial para que o contexto dos usuários da 1.0 viesse junto, e passamos de três tipos para quatro: marca, público, produto ou serviço e oferta. A engenharia de front-end liderou essa reestruturação. Eu desenhei a UI base do chat e dos DNAs.
  2. Descartada

    Um canvas de nodes para as skills

    Ideia
    Um canvas de nodes de skills no estilo do n8n, ao lado do chat, para trazer de volta os projetos da 1.0.
    Por que não
    Alto custo de construção para um comportamento que não tínhamos certeza de que as pessoas adotariam, quando elas já usavam IA como um chat simples.
  3. Descartada

    Pastas para as conversas

    Evidência
    O PRD tinha deixado pastas de projeto fora da primeira entrega. Os testes confirmaram: renomear conversas apareceu em 3 de 6 sessões, um jeito mais leve que as pessoas já usavam para se organizar.
    Decisão
    Fixar e renomear, em vez de pastas.
  4. Escolhida

    Contexto que permanece

    Evidência
    Os 11 participantes dos testes vieram da 1.0 com um único DNA. Na primeira conversa, 7 de 11 não selecionaram o DNA que tinham acabado de criar no onboarding, e 5 de 11 escolheram um mas nunca clicaram em Salvar.
    Decisão
    A seleção vale no momento em que você escolhe, sem botão Salvar, e um botão Lembrar seleção leva o contexto para as novas conversas.
    Resultado
    O contexto do negócio passou de cerca de 40% para quase 70% das conversas, junto com formas mais fáceis de criar DNAs.

    O seletor, com Lembrar seleção

  5. Escolhida

    A edição volta

    Evidência
    O PRD tinha deixado a edição manual fora da primeira entrega. Depois, 6 de 11 participantes dos testes passaram muito tempo lendo a copy gerada só para querer um ou dois ajustes, e 4 em cada 10 usuários da pesquisa anterior já editavam copy de IA.
    Decisão
    Editar qualquer resposta no lugar, com a marcação Editado e uma troca entre a versão original e a sua.
  6. Escolhida

    Respostas sugeridas, planejadas e entregues por mim

    Evidência
    Revendo mais de 300 gravações de sessão, percebi que muitas mensagens digitadas eram só permissão ou um empurrão para seguir, como "sim, pode seguir".
    Decisão
    Até 4 chips de resposta abaixo de cada resposta, montados a partir do contexto da conversa e da própria resposta. Planejei a funcionalidade e a implementei eu mesmo, com um fluxo de desenvolvimento assistido por IA.
    Resultado
    Usadas por 15,4% dos usuários ativos.

    Chips de resposta abaixo de uma resposta

    Resposta do chat com três chips de resposta sugerida abaixo

A primeira entrega

As entrevistas e os testes de usabilidade definiram a base da 2.0: o onboarding, o próprio chat, a forma de escolher skills e obter resultados, e o contexto do negócio pelos DNAs.

Onboarding, em três versões

O onboarding foi a parte mais difícil de acertar. Passou por três versões, cada uma guiada pelo ponto em que as pessoas desistiam.

1Links, um tour do produto e um vídeo

A primeira versão pedia os links e depois mostrava um tour animado curto sobre o chat, as skills e os DNAs, que ajudava quem vinha da 1.0 a se situar. Em seguida vinha um vídeo de boas-vindas de 5 minutos, com uma barra de carregamento embaixo mostrando o DNA sendo criado a partir dos links. Quando terminava, um botão levava para dentro do produto.

Onboarding, versão 1 · Wireframe

Links

Adicione seus links

Seu site, landing page ou qualquer link que fale de você e do seu negócio.

https://suamarca.com.br
Continuar
Tour: o chat
Crie um carrosselClaro, usando o DNA da sua marca…

Tudo acontece no chat

Peça, ajuste e crie em uma conversa só.

Próximo
Tour: skills e DNAs
Skill: CarrosselMarcaPúblico

Skills e DNAs

Uma skill para cada tarefa, e o contexto do seu negócio em cada resposta.

Próximo
Vídeo de boas-vindas e carregamento do DNA

Boas-vindas à nova arOS

5:00
Criando seu DNA de marca… 72%
Links, um tour de duas telas e o vídeo de boas-vindas com o carregamento do DNA abaixo.

O que aconteceu: em abril e maio de 2026, 43% dos novos usuários desistiam antes de criar o primeiro DNA. Chegavam pelas nossas ofertas e iam embora enquanto assistiam e esperavam.

2Uma conversa no lugar do vídeo

Para manter as pessoas fazendo em vez de assistindo, tiramos o tour e o vídeo. Depois dos links, um chat que já conhecia o negócio por eles montava o primeiro DNA junto com o usuário, com poucas perguntas e respostas de escolha rápida.

Onboarding, versão 2 · Wireframe

Links

Adicione seus links

Seu site, landing page ou qualquer link que fale de você e do seu negócio.

https://suamarca.com.br
Continuar
DNA na conversa
Aqui está meu site: suamarca.com.br
Analisando o site
Li o seu site. Vamos montar o DNA da sua marca. Como você descreve o tom dela?
Direto e provocativoDidático e acolhedorTécnico e preciso
Escreva qualquer coisa
Primeiro chat
HomeDNAsFeedbackConversas
Seu DNA de marca está pronto

O que vamos criar hoje?

Escreva qualquer coisa
DNAs (1)Skill
Transformar conteúdoMe dê ideiasProcurar temas
Links, depois uma conversa que monta o primeiro DNA, depois o primeiro chat.

O que aconteceu: ao longo da reformulação do onboarding, a evasão caiu 27 pontos percentuais, de 43% para 16%.

3Instagram e contexto, a versão no ar hoje

Quando posts e conteúdo para Instagram viraram tarefa central, o Instagram entrou no onboarding: ler o perfil ajuda a entender o negócio, e a paleta, o estilo de post e a tipografia alimentam o DNA de marca. O passo de links também ganhou um painel de contexto que explica o que precisamos das pessoas e por quê.

Onboarding hoje, passo 1 de 4: links e contexto

Links, com um painel de contexto explicando o que precisamos e por quê.

O que aconteceu: em junho e julho, a evasão já estava em 16%, contra 43%, e a ativação tinha subido de cerca de 60% para perto de 75%.

Com a engenharia: no refinamento técnico que abri, definimos o onboarding conversacional como uma skill administrativa oculta que acompanha a conclusão, contada quando a pessoa cria pelo menos um DNA de marca ou de público, com um orquestrador chamando uma skill por campo do DNA.

Skills mais fáceis de encontrar

O primeiro seletor de skills era estreito, com a busca no topo e uma lista longa. Skills com opções se expandiam dentro da lista e esticavam o popover. Isso escondia o que tínhamos construído: de cerca de 100 skills, uma cauda de umas 75 tinha em média 3,4 seleções por mês cada.

O que mudou, e por quê:

  • Abas por categoria, para uma leitura mais rápida e objetiva.
  • Um grid no lugar da lista, mostrando mais skills de uma vez.
  • Tags em cada card, mostrando com quais áreas a skill se relaciona, como conteúdo, estratégia, anúncios ou copy, as mesmas das abas.
  • Busca à direita, para dar espaço às abas.
  • Opções que abrem no lugar, sem redimensionar o popover.
  • A primeira opção pré-selecionada, para que uma opção obrigatória nunca seja esquecida.
  • Remover pelo chip: uma skill selecionada sai direto do composer, sem abrir o seletor.

Seletor de skills, versão entregue

Seletor de skills com abas por categoria, busca à direita e um grid de cards de skills com tags

Com a engenharia: os engenheiros de prompt construíam cada skill. Eu decidia como as skills e suas opções aparecem na interface, alinhando com eles o que a estrutura de prompt de cada skill precisava para que as pessoas tivessem a melhor experiência dentro dela.

Depois do lançamento

Depois da primeira entrega, o PostHog e as mais de 550 gravações de sessão que analisei definiram uma segunda onda. Ainda não tínhamos acertado o cliente ideal, então nos aproximamos de fundadores de SaaS e vimos o quanto precisavam de autoridade no Instagram. Quase tudo o que vem a seguir nasceu disso.

O que o uso mostrou, julho e agosto de 2026

40–50%

dos usuários voltavam toda semana, mas só 9–18% voltavam para criar.

80%

de quem baixava posts produzia num único dia do mês.

1 em 3

comentários, aproximadamente, chamavam o resultado de genérico ou com "cara de IA", ou diziam que ele ignorava o briefing.

As pessoas gostavam de voltar, mas criar era um evento, não uma rotina, e o resultado genérico era uma reclamação frequente. Isso definiu a pauta do que vem a seguir.

DNAs gerenciados pelo chat

Criar e atualizar DNAs sem sair do chat era um pedido desde o lançamento da 2.0. A arOS infere a mudança pela conversa, mostra o progresso campo a campo e linka o resultado. Consome créditos como qualquer outra mensagem.

Um DNA de público reescrito pelo chat

Com a engenharia: o DNA Manager foi construído com os times de tecnologia e de engenharia de IA. Eu defini como ele se comporta na interface: um card de tarefa que mostra cada campo como uma etapa, um card de resultado que leva ao DNA atualizado e o mesmo custo em créditos de qualquer mensagem.

Posts, carrosséis e Instagram

Posts e carrosséis não estavam na primeira entrega. Vieram quando os fundadores de SaaS viraram o foco: carrosséis gerados no chat, um editor que aceita tanto instruções pelo chat quanto edições manuais, conexão e análise do Instagram e publicação no Instagram, aprovada pela Meta.

Da copy aprovada ao carrossel visual

Editando todos os slides com uma instrução

Com a engenharia: nas revisões de prompt, defini que, durante o beta, a skill de carrossel sempre gera o carrossel visual em vez de às vezes devolver só texto, e que os carrosséis podem ser editados tanto à mão quanto pelo chat.

Identidade visual no DNA de marca

Os DNAs eram organizados em abas, marca, público, produto ou serviço e oferta, e todos eram campos de texto. Não havia um bom jeito de definir a cara de um post. As pessoas reclamavam que os posts não combinavam com a marca e passavam muito tempo ajustando. Algumas desistiam da plataforma, outras ficavam só com a copy.

Assisti às gravações, vi a frustração e medi edições e regenerações: 13.722 regenerações de capa em um único mês. O criador de posts precisava conversar com o DNA do usuário. A identidade visual virou uma nova seção no DNA de marca, com estilo de post, cores, tipografia, templates prontos e uma prévia ao vivo. Dá para conectar outra conta do Instagram a qualquer momento, e a paleta, o estilo de post e a tipografia dela atualizam a identidade visual, para que os posts fiquem próximos da marca que a pessoa já tem. Nesse período, a arOS gerava 20 posts por dia.

Editando a identidade visual e, depois, uma aba ainda feita de campos de texto

Memória e anexos

As gravações mostravam pessoas citando outras conversas, colando prints de chats anteriores e tentando trazer documentos. As memórias permitem salvar algo uma vez e aplicar em todas as conversas, com uma página para gerenciá-las: quando o chat sugere uma memória, 70% são aceitas (36 de 51). Os anexos vieram em seguida, de forma simples, e trouxeram imagens para o chat, outro pedido frequente.

O chat sugere uma memória

Uma imagem anexada para usar num carrossel

Skills que encontram o usuário

Só 57% dos usuários escolhiam uma skill ao conversar. As pessoas gostavam do produto, mas perdiam boa parte do que ele podia fazer por elas. Então as skills passaram a encontrar o usuário: a inferência automática escolhe a skill certa pela conversa, e comandos e atalhos, que planejei e implementei, permitem chamar uma skill do jeito que as pessoas já faziam em outras ferramentas de IA.

Web mobile e PWA

Cerca de 70% dos acessos vinham do celular, 7.046 contra 2.988 no desktop, e houve cancelamento citando explicitamente a experiência mobile. Redesenhei a experiência para telas pequenas em torno de uma ideia: as ações principais ao alcance do polegar. Lançamos como PWA.

Bottom sheets e o teclado

Seletores viraram bottom sheets

Popovers são difíceis de usar em telas pequenas. No mobile, DNAs, skills e suas opções abrem como bottom sheets, perto do polegar. Skills com opções ganham um espaço próprio, para ficar claro que há uma escolha a fazer, e a primeira opção já vem selecionada.

O teclado só na hora de digitar

O teclado ocupava tanto a tela que o composer cobria o conteúdo. Agora ele só abre quando a pessoa toca no campo de texto e fecha assim que ela toca em qualquer outra parte.

Voz no lugar do teclado

A entrada por voz dispensa o teclado, e as pessoas a descobriram sozinhas: 55 usuários ditaram mensagens em 30 dias, sem nenhum incentivo.

Uma coisa por vez

No editor de posts, a pessoa vê uma coisa por vez. Abrir o chat esconde todo o resto até as edições serem aplicadas, e o mesmo vale para cada ferramenta manual. Uma bottom sheet lista o que pode ser editado, e cada mudança mostra o resultado no slide selecionado.

Identidade visual do DNA de marca no mobile

Tudo numa coluna só

A identidade visual foi reorganizada na vertical, para que tudo o que ela oferece no desktop esteja também no celular: estilo de post, cores, tipografia e a prévia ao vivo.

Instalada pelo navegador

Como PWA, a arOS é instalada direto pelo navegador, sem loja de aplicativos, e ganha um atalho na tela inicial, a um toque como qualquer outro app.

Home da arOS no mobile
Menu da arOS no mobile

O que vinha a seguir

Em agosto de 2026, transformei esse diagnóstico no plano de produto. Ele definiu as próximas apostas:

  • Produção como rotina. Com 80% das pessoas produzindo num único dia do mês, o próximo passo era uma semana inteira de posts num lote só, primeiro a copy e o visual depois da aprovação.
  • Fechar o ciclo. Publicar no Instagram e no LinkedIn, para que os resultados voltem para o produto.

Design system

Criei e mantive o design system da arOS: tokens no Tokens Studio, com um conjunto base e conjuntos semânticos para claro e escuro, espelhados no código. Quando o código virou nossa única fonte da verdade, ele passou a viver no Storybook, construído com Tailwind e Radix.

Cores

As rampas base alimentam os papéis semânticos, e os componentes só usam papéis, nunca cores cruas, então os modos claro e escuro vêm de graça.

slate
100
200
300
400
500
600
700
800
900
blue
100
200
300
400
500
600
700
800
900
green
100
200
300
400
500
600
700
800
900
red
100
200
300
400
500
600
700
800
900
orange
100
200
300
400
500
600
700
800
900
yellow
100
200
300
400
500
600
700
800
900

Papéis semânticos

Superfícies

backgroundPágina
foregroundTexto principal
app-bgMoldura do app: sidebar, canvas
cardCards e painéis
popoverMenus e popovers

Ações

primaryAção principal
primary-foregroundTexto sobre o primário
secondaryAção secundária
accentHover e destaque
destructiveAções irreversíveis

Neutros e bordas

mutedFundos discretos
muted-foregroundTexto secundário
borderDivisórias e contornos
inputBordas de campos
ringAnel de foco

Status e marca

successConfirmações
infoInformação
warningAtenção
selectionSeleção no editor
overlay-scrimAtrás de dialogs e sheets
uptide-inkMarca

Manrope, uma família para tudo

Próxima da Inter, com a mesma leitura fácil, principalmente no modo claro, o nosso padrão. Títulos em bold, texto de interface em 14 e 16, nada abaixo de 10.

text-h148/48 BoldHeading 1
text-h230/36 BoldHeading 2
text-h324/32 BoldHeading 3
text-h420/28 BoldHeading 4
thread-welcome36/44 RegularBoas-vindas
text-lead20/28 RegularParágrafo de destaque
text-p16/28 RegularParágrafo longo
text-body14/24 RegularCorpo padrão de UI
text-small14/20 MediumTexto pequeno
text-caption12/16 RegularLegenda
text-micro10/14 MediumMicro

Forma, profundidade e ritmo

Raios de 6 a 28 px, sombras frias e sutis e um grid de 4 px.

sm6md8base10xl142xl243xl28pill9999
base do grid · 4px
stack · 12px
gutter · 16px
seção · 24px
xssmmdlgxl2xl

Hugeicons, stroke rounded

Uma biblioteca gratuita para skills, navegação e ações.

CarrosselIdeiasCalendárioAnúnciosNewsletterTwitter/XDNAsSkillMemóriasCopiarCurtirRegenerarEditarAnexarVozEnviar

Componentes

Construídos sobre shadcn e Radix com os mesmos tokens. Experimente: tudo aqui é clicável, no claro e no escuro.

Botões

Badges

Popular+2ConteúdoEstratégiaBetaEm brevePreferência

Formulário

Me notificar sobre

Abas e menu

Dialog

Excluir projeto?

Esta ação não pode ser desfeita. O projeto e todos os seus arquivos serão removidos.

Composer

Escreva qualquer coisa
DNAs (4)Skill

Aprendizados

Estrutura é o que torna o chat útil

O chat deu liberdade, mas as respostas só ficaram boas quando o contexto do negócio veio junto. Mudar a forma de selecionar e criar DNAs levou o contexto de cerca de 40% para quase 70% das conversas, e os DNAs viraram a espinha dorsal de tudo o que veio depois.

Pessoas fazendo, não assistindo

Um tour, um vídeo e uma barra de carregamento perdiam 43% dos novos usuários. Uma conversa que monta o DNA junto com eles, depois o Instagram e um contexto claro, baixaram a evasão para 16%.

As pessoas não exploram funcionalidades, então o produto precisa ir até elas

Só 57% dos usuários escolhiam uma skill, e uma cauda de cerca de 75 skills tinha em média 3,4 seleções por mês. Isso levou às abas, ao grid com tags, aos comandos e atalhos e à inferência automática de skills.

Gravações mostram o que entrevistas não mostram

Mais de 550 gravações de sessão revelaram mensagens que eram só "pode seguir", referências a conversas anteriores e prints colados de outras ferramentas. Cada padrão virou uma funcionalidade: chips de resposta, memórias e anexos.

Um atrito pequeno pode apagar uma funcionalidade grande

Um botão Salvar fácil de ignorar tirava o contexto da maioria das primeiras conversas sem ninguém perceber. Aplicar a seleção na hora, e lembrar dela, resolveu.

Resultado visual precisa de contexto visual

As 13.722 regenerações de capa em um mês vinham de um gerador que não sabia nada sobre a marca. A identidade visual no DNA, alimentada pelo Instagram e por templates, substituiu descrever um estilo em texto.

Um cliente mais definido afia o produto

Focar em fundadores de SaaS que precisavam de autoridade no Instagram levou a arOS de uma ferramenta de copy para um fluxo mais amplo de criação de conteúdo. Nesse período, a plataforma gerava 20 posts por dia.

Construa para onde as pessoas estão

Com cerca de 70% dos acessos pelo celular, a experiência mobile e um PWA instalável deixaram de ser um extra.