Antes de começar
- Uma página ou funcionalidade com objetivo definido e acesso ao código.
- Node 22+ e Chrome, Edge ou Chromium para a skill Taste descrita nas fontes.
- Agente com suporte às skills; conta e acesso ao arquivo Figma apenas se seguir a etapa de integração.
Escreva um briefing que ajude a escolher
Escolha uma página e uma ação principal, como encontrar uma ferramenta de edição e abrir seus detalhes. Separe três referências e anote o que interessa em cada uma: composição, ritmo da rolagem, tipografia ou resposta ao toque. Isso orienta escolhas sem copiar a página inteira.
Defina também o que o visitante precisa entender na primeira tela e o que deve continuar fácil numa largura mobile.
Vamos redesenhar a página de catálogo para quem chega pelo Instagram. A ação principal é encontrar uma ferramenta pelo que ela resolve. Proponha duas direções visuais com diferenças de composição, tipografia e movimento. Preserve busca e filtros. Explique como cada direção funciona em 390 px. Não crie prova social nem números de uso fictícios.Escolha uma direção e prepare o Taste
O repositório atual do Taste concentra a skill design-taste-frontend; versões e estilos antigos podem estar em outros repositórios. Instale a skill indicada, leia seus requisitos e peça uma proposta aplicada ao briefing.
Compare as duas direções usando o mesmo texto e a mesma ação principal. Escolha pela leitura, pelo uso no celular e pela identidade visual, antes de detalhar todos os componentes.
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"Use o Figma como contexto, se já houver um arquivo
No Claude Code, instale o plugin oficial pelo comando documentado. Reinicie o cliente, abra /plugin, selecione Figma em Installed e conclua a autenticação no navegador. Compartilhe o link de um frame específico ao qual sua conta tenha acesso.
Peça ao agente para ler espaçamento, componentes e variáveis antes de implementar. Se não houver arquivo Figma, siga com o briefing; essa integração não é uma exigência para desenhar uma boa página.
claude plugin install figma@claude-plugins-officialEscolha movimentos que expliquem uma mudança
Instale as skills de Emil Kowalski e selecione as ligadas à tarefa. Para o catálogo, um bom primeiro exercício é a transição entre resultados do filtro: o visitante deve perceber o que mudou, continuar usando a página e conseguir interromper a interação.
Peça atenção à curva, duração e propriedade animada. Evite atrasar cada card ou esconder conteúdo até que uma sequência longa termine.
npx skills@latest add emilkowalski/skillsFaça uma revisão visual antes de aumentar os efeitos
Abra o README oficial de Impeccable e confira os requisitos. Na raiz do projeto, rode npx impeccable install, escolha o cliente e o escopo de projeto. Revise qualquer hook oferecido antes de habilitá-lo e recarregue o agente. Inicialize com /impeccable init; no Codex, use $impeccable init.
Peça uma crítica da tela com /impeccable critique (ou $impeccable critique no Codex), indicando o componente. Solicite os três problemas de maior impacto em texto, hierarquia, contraste e densidade. Ajuste um por vez e compare com a captura inicial. Se o movimento atrapalhar a busca, simplifique-o.
npx impeccable installVerifique a interação em um navegador real
Abra a aplicação com Playwright ou a integração de navegador disponível. Teste largura de 390 px, tela maior, teclado, nomes longos, lista vazia e carregamento. Mantenha os tutoriais de formulário e Playwright do catálogo como referência do fluxo de teste, sem reinstalar ferramentas que já funcionam.
Peça também a preferência de movimento reduzido. A página deve continuar compreensível com animações removidas ou simplificadas.
Abra a página e teste a busca e os filtros em 390 px e em desktop. Use teclado, um nome de ferramenta muito longo e uma busca sem resultados. Ative prefers-reduced-motion. Registre cortes, sobreposições, mudança inesperada de foco e qualquer ação bloqueada pela animação. Mostre evidência de cada problema.Compare a versão final com o objetivo inicial
Verifique se a pessoa entende a oferta, encontra a busca e consegue chegar ao detalhe sem depender de um efeito visual. Registre o resultado dos testes e revise o diff para retirar experimentos abandonados.
Guarde tokens de cor, tipografia e os padrões de movimento escolhidos. Essa pequena documentação ajuda as próximas páginas a manter identidade sem virar cópias umas das outras.
O que você terá ao final
Uma interface com direção visual definida, movimento ligado a ações e um registro de revisão mobile, teclado e preferência de movimento reduzido.
Vale conferir
- As referências orientam decisões; não copie marcas, ilustrações ou composição exclusiva de terceiros.
- Figma MCP depende de cliente compatível, permissões do arquivo e limites da conta.
- Mais skills não garantem melhor design. Faça mudanças comparáveis e avalie a leitura e o fluxo.
- Não foi executado um teste de navegador para este tutorial; os passos são um roteiro baseado na documentação.