Como usar Claude Design no vibe coding: o HTML vira o roadmap

Como usar Claude Design neste recorte é pedir o HTML, jogar esse HTML de volta no Claude e deixar o roadmap das telas sair com 1 prompt. Martin estava no app do zero, receita R$ 0, e travou no layout. Em vez de descrever o layout de novo no chat, ele pediu o HTML no Claude Design e devolveu esse HTML para o Claude.

O Claude traçou os próximos itens do roadmap e fez várias alternativas das páginas, de primeira, no mesmo passe.

O layout trava e o Claude Design devolve um HTML

Martin nomeia o obstáculo sem rodeio:

eu tava tendo problema aqui com fazer uns layout

O obstáculo que ele nomeia é o layout. Foi isso que o levou ao Claude Design. Pedir de novo no chat, em prosa, é o reflexo comum: você descreve o layout outra vez e o modelo tenta desenhar a partir dessa fala. Martin saiu desse vai e volta e abriu o Claude Design.

eu pedi aquele para ele fazer e passei, só que ele cria tipo um HTML

O Claude Design cria tipo um HTML. Martin pede, o Design gera, e o que sai não é só uma imagem para olhar. É um HTML que o Claude consegue ler. Ele passa o pedido e fica com esse HTML na mão. A frase dele é essa: cria tipo um HTML. O próximo passo é pegar esse HTML e mandar adiante.

Sem o HTML no meio, o próximo passo seria explicar as páginas outra vez para o Claude. Martin pulou essa fala e mandou o HTML que o Design já tinha criado. Foi o mesmo caminho de criar conta de desenvolvedor google play.

O HTML volta no Claude e o roadmap sai com 1 prompt

O gesto da live é curto. Martin pega o HTML e joga no Claude.

Aí joguei esse HTML por Claude ali. Bá, daí já traçou todos os próximos itens aí do meu road map.

Ele jogou o HTML por Claude. O Claude leu o HTML e traçou os próximos itens do roadmap. Martin não listou as páginas de novo: jogou o HTML, o Claude leu e devolveu a sequência do que construir a partir daí. Isso aparece também em vibe coding para guardar o recorde da sequencia nao so o streak atual. O mesmo problema apareceu em vibe coding para agents md apontar para o claude md.

O mesmo passe ainda trouxe variação:

Fez várias alternativas das páginas aqui também.

Ele não conta quantas alternativas saíram e o recorte não nomeia as telas. O que a live mostra é o tipo de resposta: alternativas das páginas, no mesmo passe em que o roadmap apareceu. Martin aponta para a tela e fala em várias.

Martin marca o custo em seguida:

Isso aqui foi de primeira, mano. Com um prompt só.

Foi de primeira, com 1 prompt: o HTML do Claude Design entrou e o Claude devolveu o roadmap com as alternativas das páginas. Vale ver como isso terminou em eas update.

No vibe coding o HTML do Design vira o pedido seguinte

No vibe coding desta live o layout saiu do HTML que o Claude Design tinha criado. Noutro recorte do acervo, o trabalho é não deixar a IA criar layout do zero. Neste, o Claude Design já gerou o HTML e o Claude devolve o roadmap a partir dele. Foi o mesmo caminho de como usar notebooklm. Foi o mesmo caminho de como usar claude code. Isso aparece também em como usar codex.

O que muda de mão é o HTML. Você entrega o HTML que o Design criou e pede a sequência. O Claude trabalha em cima do que já existe, e o roadmap sai alinhado com aquele HTML, o mesmo que o Design tinha criado. O mesmo problema apareceu em emulador android studio.

O recorte da lição cabe nesse passe: o layout travou, o HTML saiu do Claude Design, entrou no Claude e o roadmap com as alternativas saiu com 1 prompt. Isso aparece também em vibe coding para nao confundir branch do git com canal do eas.

O passe de 1 prompt é o que você repete amanhã

Amanhã, no vibe coding, se o layout travar, abra o Claude Design e peça o HTML. Jogue esse HTML no Claude e peça o roadmap das telas. Não descreva as páginas de novo no chat. O HTML já é a descrição.

Dá para assistir à live e ouvir Martin dizer que jogou o HTML no Claude e que o roadmap saiu de primeira, com 1 prompt.