O problema
Você quer repensar uma tela: um painel, um modal, um card, uma seção, uma página inteira. Aí faz o que dá pra fazer sozinho: escolhe uma direção de cabeça e sai implementando. No meio do caminho percebe que não fecha, ou alguém sugere outra ideia, e você refaz. Ou então coda duas ou três versões só pra conseguir comparar, horas de implementação pra responder uma pergunta que nunca foi de implementação.
E a versão que sobe costuma ignorar o que os dados do seu app de fato permitem, então volta como retrabalho depois da revisão: o campo que parecia editável era derivado, o número que a tela prometia o backend não expõe, a affordance desenhada não pode existir.
A parte cara nunca foi desenhar. Foi committar código numa direção que você não conseguiu ver antes de escolher.
O que a skill faz
Você aponta a skill para UMA superfície e ela devolve uma página compartilhável com três coisas: o estado atual reproduzido fiel, um diagnóstico numerado do que está errado (e por quê, não "podia ser melhor"), e várias direções que discordam entre si sobre qual é o problema daquela tela, cada uma com uma recomendação explícita no fim.
As direções nascem ancoradas no que o seu código e os seus dados realmente permitem, então o que você aprova é implementável, não um mockup bonito que desmonta na hora de abrir o editor. Você compara lado a lado, escolhe, e só então a skill dobra a direção escolhida no código de verdade.
O ganho é a ordem: primeiro você vê as opções e decide, depois implementa uma vez. Em vez de implementar no escuro e descobrir tarde.
O que vem no pacote
- A skill (um arquivo) que você instala no Claude Code.
- Um guia de instalação e adaptação: onde o arquivo vai, e uma tabela curta apontando a skill para o seu projeto (onde vive a UI, onde vivem os tokens de cor, onde vivem os tipos de dados, qual é o seu comando de verificação).
- Um exemplo preenchido de ponta a ponta, de um print até a direção escolhida.
Sem build, sem dependência pra instalar: é um arquivo de texto no lugar certo.
O que ela NÃO faz
- Não desenha no vácuo. Ela lê o SEU código antes de propor qualquer coisa, então precisa de um projeto real pra se ancorar. Apontada pra um projeto vazio, não tem no que fundar as direções.
- Não implementa antes de você escolher. A página de comparação é o ponto de decisão, de propósito, e a skill para ali até você bater o martelo.
- Não é um kit de UI nem biblioteca de componentes. Ela não traz componentes nem um design system pronto: trabalha com os tokens e as primitivas que você já tem.
- Não gera a página sozinha fora do seu Claude Code. A comparação sai como um Artifact, então você precisa conseguir publicar um Artifact na sua conta.
Requisito, em termos de acesso: Claude Code (qualquer plano), um projeto cujos arquivos de UI e de tokens você possa apontar pra ela, e conseguir publicar um Artifact. Ela não adivinha a estrutura do seu projeto: são os poucos minutos de configuração da tabela de adaptação.
Pra quem é
Pra quem já entrega produto com IA e quer repertório e ferramenta de fronteira: você mexe em telas de verdade, itera em cima do que já está no ar, e cansou de implementar um redesign no escuro pra descobrir depois que outra versão era melhor. Se você quer um método repetível pra transformar "essa tela podia ficar melhor" em uma decisão informada antes de gastar uma linha de código, é aqui.
Não é pra quem não tem um projeto pra ancorar, nem pra quem procura um editor visual de arrastar e soltar: isto é um método, conduzido por um agente, em cima do seu código real.