O pedido de frontend: âncoras que impedem o agente de inventar Trechos do capítulo · alexandrecaramaschi.com/educacao/frontends-com-vibecoding Leia o LEIA-ME.txt desta pasta antes de usar qualquer trecho. ### O que faz: reconstrói uma tela a partir de uma captura, dizendo o que é dado, quais cores valem, quais estados faltam e o que ignorar na imagem ### Onde entra: conversa com o agente, com a captura anexada ### Cuidado: troque a lista de cores pela do seu projeto; usar a de exemplo entrega a paleta errada com ar de acerto [imagem anexada: screenshot da tela de listagem de pedidos] OBJETIVO: Reconstrua FIELMENTE a tabela de pedidos da imagem anexa como um componente React 19 + TypeScript + Tailwind v4. Reproduza layout, espaçamento, hierarquia tipográfica e o selo de status colorido. O QUE É DADO (vira prop, não hardcode): número do pedido, cliente, valor, data e status. Os textos da imagem são exemplo. TOKENS (NÃO INVENTE CORES): use exatamente estes, que são os do nosso sistema: -- superfície #ffffff, texto principal #0f172a, texto secundário #475569 -- status: pago = oklch(0.65 0.15 150), pendente = oklch(0.75 0.15 80), cancelado #64748b Se alguma cor da imagem não casar com a lista, use a mais próxima da lista e me avise; não crie um hex novo. ESTADOS (a imagem não mostra): linha em hover com leve realce; foco de teclado visível na linha; estado vazio ("Nenhum pedido ainda") e estado de carregamento (skeleton de 5 linhas). ACESSIBILIDADE: semântica com
; o status não depende SÓ da cor (texto + bolinha); contraste AA em todo texto. IGNORE na captura: a barra do navegador, o cursor e qualquer sombra de janela do sistema. ### O que faz: implementa um quadro do Figma lendo as variáveis, o Auto Layout e os estilos nomeados em vez de estimar ### Onde entra: conversa com o agente, com a ponte do Figma Dev Mode já conectada e o quadro selecionado ### Cuidado: só funciona se o arquivo de design tiver variáveis e Auto Layout de verdade; num arquivo de retângulos soltos a ponte devolve a mesma imprecisão da imagem [Figma Dev Mode MCP conectado; frame selecionado: "Card / Produto / Default"] Implemente o frame selecionado como componente React + Tailwind v4. USE OS METADADOS DO MCP, NÃO ESTIME: -- Cores: gere a partir das VARIÁVEIS do Figma (ex.: --color-surface, --color-brand-600). Não converta para hex chutado. -- Espaçamento e tamanhos: use as medidas exatas do Auto Layout (gap, padding) que o MCP retornar. -- Tipografia: respeite os estilos de texto nomeados (família, peso, tamanho, altura de linha). -- Se houver mapeamento Code Connect para um componente nosso, REUTILIZE-O em vez de recriar. O QUE O FIGMA NÃO DEFINE, eu defino: estados de hover/foco/carregando, comportamento responsivo abaixo de 640px e os textos, que viram props. ### O que faz: pede a correção de um defeito visual que só aparece numa largura específica, com a captura como prova ### Onde entra: conversa com o agente, com o print do defeito anexado ### Cuidado: sem a frase que limita o alcance, o agente conserta o celular e desarruma o computador [imagem anexada: print do card de produto no mobile (390px), com o preço vazando para fora da borda direita] O bug está na imagem: no mobile (390px) o preço vaza para fora da borda direita do card, como mostrado. Corrija SÓ isso, sem mexer no layout do desktop. Provável causa: falta de min-w-0 / truncamento no container do texto, ou largura fixa onde deveria ser flexível. Depois, AUDITE no browser via MCP em 390px e me confirme que o conteúdo cabe dentro da borda em ambos os temas.