Ver local

Para o facilitador⏱ 5 min

Fase curta mas importante. Mostre a V1 no projetor antes de abrir o Claude Design — o contraste visual é o ponto alto do workshop. Peça para a turma abrir no próprio celular também. Esta é a baseline: uma LP feita com tokens e brand identity, sem nenhuma intervenção visual de um sistema de design.

Antes de abrir o Claude Design, veja a Versão 1 no browser. Este é o ponto de partida — a landing page criada pelo UX agent com apenas os tokens e o brand-brief. Guarde essa impressão visual. Em algumas fases, o Claude Design vai transformar o vocabulário visual e a comparação vai ser imediata.

5 min · Fase 05 de 10

Subir o servidor local

Em um novo tab do terminal (mantenha o Claude Code aberto no tab anterior):

terminal — novo tab

npx serve docs/pages -p 4321

Abrir no browser

Versão 1 — pré Claude Design

Esta é a interpretação livre do UX agent. Sem componentes definidos — criado apenas com CSS vars e brand-brief.

O que observar

→A hierarquia de informação — o que está em destaque e por quê
→O botão CTA — como o UX agent interpretou a cor e o estilo com só as vars
→A tipografia — usou as vars? Ficou legível?
→A estrutura de convencimento — hero, proposta, CTA final

Guarde essa impressãoEsta é a baseline. Nas próximas fases, o Claude Design vai criar um sistema visual com componentes, escalas e regras. O UX agent vai usar esses componentes para recriar a mesma LP. A diferença entre o que você está vendo agora e a Versão 2 vai mostrar o que um sistema de design faz por uma página.

O servidor continua rodando na porta 4321. Após o handoff e a Versão 2, você vai acessar para a comparação final.