Seus agentes de IA constroem telas com a cara do seu produto.Desde o primeiro dia.
Instale uma vez e é só programar. O seu agente aprende o seu frontend enquanto ele cresce, e confere antes de inventar uma cor, um componente ou um layout.
GitHub, Google ou e-mail → um comando no seu repositório → a primeira conferência
Sem runtime, sem SDK. Nada nosso roda dentro do seu app.
- Claude Code, hoje
›
Ele não inventou nenhum desses. Perguntou como este sistema chama cada valor, e construiu com as peças dele.
19 prompts simples. Uma landing page e um dashboard.
Oito telas que o Claude Opus 5.5 escreveu com o SynthesisUI instalado - cada cor vinda do sistema, cada escrita conferida. Navegue por elas, com os prompts e os números do lado de cada tela.
- 100% Valores do sistema
- 100% Cores do sistema
- 95-99% Fácil de ler
- 100% O mesmo ritmo em tudo
Essa foi uma loja de bike. A próxima é a sua.
Começar agoraQualquer página.
A sua cara.
Qualquer dashboard, qualquer landing page, qualquer seção, com a sua personalidade. O seu agente constrói, e cada página fala a mesma língua do resto do seu produto.
Oito telas. Cada valor de design medido veio do sistema. Agora imagine o seu frontend.
O que muda
O mesmo agente. Outra semana.
Nada muda no seu jeito de trabalhar. O que muda é o que o seu agente sabe antes de escrever.
Instruções dizem ao seu agente o que fazer. O SynthesisUI diz o que o seu frontend usa de verdade.
CLAUDE.md
Regras e contexto que você escreve e mantém pro seu agente.
SynthesisUI
Conhecimento de frontend lido do seu código, atualizado a cada commit e conferido contra o que o agente escreve.
Continue no Claude Code. Dê a ele um frontend que ele entende.
$ npx synthesisui init · uma vez
antesCada página nova escolhe o próprio espaçamento, o próprio ritmo, a própria ordem.
depoisToda página nasce com o seu layout.
antesVocê lê cada diff atrás de cor e espaçamento, no olho.
depoisA conferência roda a cada turno. Só chega até você uma decisão.
antesO arquivo de regras que você escreveu em março não conhece o botão que você criou semana passada.
depoisCada commit atualiza o que o seu agente sabe.
Uma instalação, nada pra lembrar. A leitura, a conferência e as atualizações acontecem enquanto você faz commit.
Começar agora →como funciona
O seu agente cria. O SynthesisUI lembra - e confere.
1
Cria
O seu agente desenha a primeira tela - sozinho, ou com o impeccable, uma skill de design que a gente oferece instalar.
2
Lê
O SynthesisUI lê a página e anota o que ela já decidiu: o tamanho de cada título, os detalhes que fazem ela ser sua. O que ele não sabe, ele pergunta - tudo de uma vez.
3
Mantém
Depois de cada turno, um título fora do lugar, um detalhe copiado do site de outra pessoa ou um texto difícil de ler volta para o seu agente corrigir - antes de chegar em você.
Ele enxerga o meu?
Não acredite na gente. Rode no seu.
Um comando. Qualquer repositório React ou Next. Roda na sua máquina, não envia nada e lê o vocabulário que o seu frontend já tem - dizendo o que não conseguiu ler.
- Rode um comando no seu repositório, sem conta.
- Veja o que o seu agente saberia sobre ele.
- Conecte quando gostar do que ele leu.
npx synthesisui@latest inspect- Só leitura
- Roda local
ver a saída completaesconder a saída completa
$ npx synthesisui@latest inspect ── What came out of your files ───────────────── 25 of 25 components came out with a blueprint, and 94% of your 222 style decisions carry your own vocabulary. ── These resolve to nothing ──────────────────── 9 references to 9 tokens nothing in this repository declares. var(--container-2xl) 1× in 1 file, and nothing close is declared var(--container-lg) 1× in 1 file, and nothing close is declared var(--container-sm) 1× in 1 file, and nothing close is declared Yours to fix in your own words - nothing here asks you to adopt ours. ── The whole reading, in one file ────────────── 16 sections did not print here - every value, every fragment, every part. Nothing was written, and nothing was sent.Onde a decisão mora
Tudo o que o agente lê tem uma tela que uma pessoa pode abrir.
Não é um arquivo em que você precisa confiar: é um sistema com versão, histórico e tela. O seu agente lê; você e o seu time mudam.
Abra qualquer um e ele roda no seu navegador - troque variantes, veja os componentes reagindo, copie o JSX. Sem conta.
Uma identidade, todas as entregas. Hoje, páginas. Depois: decks, posts e vídeos, feitos do mesmo sistema. Veja pra onde a gente está indo →
Antes de entrar
Funciona com o meu agente?
Claude Code, hoje - é nele que a conferência roda sozinha depois de cada turno. A leitura de “Rode no seu” roda em qualquer terminal, sem conta.
O meu código sai da minha máquina?
A leitura roda na sua máquina e não envia nada. Quando você conecta, sobe o que ela leu - os componentes, os valores e as regras, e as linhas que ela não entendeu. Nunca o seu repositório.
Eu preciso mudar meu jeito de trabalhar?
Não. Uma instalação, e você continua programando como hoje. A conferência roda sozinha depois de cada turno.
E se eu quiser sair?
Apague a pasta _synthesisui/ e as linhas que marcamos como nossas nas configurações do seu agente. Nada nosso roda dentro do seu app.
Uma decisão inventada não faz mal. Mil delas viram um segundo frontend.
Dê ao seu agente a memória do seu design hoje - e toda página depois dela vai ter a sua cara.
GitHub, Google ou e-mail → um comando no seu repositório → a primeira conferência
A memória do seu design mora numa pasta só, _synthesisui/, versionada junto com o código. Nada nosso roda dentro do seu app.