DESIGN
Guia das três skills de design do Claude Code
O link e a instalação das três skills do vídeo: Impeccable, Design Motion Principles e Frontend Design. Com elas instaladas, o Claude Code decide o visual antes de escrever a página, mesmo com um pedido curto.
Pra quem faz site, landing page ou página de vendas no Claude Code. As três são gratuitas. A Design Motion Principles instala pelo terminal e pede Node.js.
Passo a passo
Instale a Frontend Design primeiro
É o plugin oficial da Anthropic. Depois de instalado, o Claude usa a skill sozinho em qualquer pedido de interface: escolhe uma direção visual, tipografia e cores antes de escrever o código.
Adicione a Impeccable
Rode o comando dentro do Claude Code, abra /plugin e instale a Impeccable na lista. Ela traz comandos como critique, audit, polish, typeset, layout e animate pra revisar e ajustar o que já foi feito.
Adicione a Design Motion Principles
Instala pelo terminal. Ela tem dois modos: criar componente com animação ou auditar a animação que já existe. A auditoria gera um relatório com o que está errado no movimento.
Abra uma sessão nova e refaça uma página
Feche e abra o Claude Code. Peça de novo uma página que você já tinha feito, com o mesmo pedido curto, e compare as duas.
Passe a revisão
Com a página pronta, rode o prompt de revisão abaixo. Ele usa a crítica da Impeccable e a auditoria de movimento, e pede a correção dos pontos encontrados.
Prompts para copiar
Instalar a Frontend Design (dentro do Claude Code)
/plugin install frontend-design@claude-plugins-official
Instalar a Impeccable (dentro do Claude Code)
/plugin marketplace add pbakaus/impeccable
Instalar a Design Motion Principles (no terminal)
npx skills add kylezantos/design-motion-principles
Pedir a página de vendas
Crie uma página de vendas em um arquivo HTML único pra [PRODUTO OU SERVIÇO], de [NOME DO NEGÓCIO], em [CIDADE]. Quem compra: [PÚBLICO]. Oferta: [O QUE A PESSOA LEVA E O PREÇO, OU 'PREÇO SOB CONSULTA']. Botão principal: [EX.: CHAMAR NO WHATSAPP] com o link [LINK]. Antes de escrever o código, me diga em cinco linhas a direção visual que você escolheu: tipografia, cores, clima e o que vai dar personalidade à página. Depois construa. A página tem que funcionar no celular. Não use foto de banco de imagem genérica, não invente depoimento e não invente número. O que faltar, deixe marcado como [PREENCHER].
Revisar a página pronta
Revise a página [NOME DO ARQUIVO] em duas etapas. Etapa 1: faça uma crítica de design com a Impeccable. Liste os problemas por gravidade, do que mais prejudica a leitura e a venda ao detalhe. Etapa 2: audite o movimento da página com a Design Motion Principles e me mostre o relatório. Depois me apresente a lista do que você pretende corrigir e espere eu aprovar. Só então corrija. Não mude o texto da oferta nem o link do botão.
Links
- Frontend Design (Anthropic)Plugin oficial da Anthropic que o Claude usa sozinho em trabalho de interface.
- ImpeccableRepositório oficial da skill, com a lista de comandos e a instalação.
- Site da ImpeccablePágina do projeto com a documentação dos comandos.
- Design Motion PrinciplesSkill de movimento baseada no trabalho publicado de Emil Kowalski, Jakub Krehel e Jhey Tompkins.
Na conferência de hoje a página da Impeccable lista 24 comandos, e um deles (craft) está marcado como descontinuado.
A página da Design Motion Principles descreve a auditoria como um relatório. A correção acontece quando você pede, como no prompt de revisão acima.
Skill melhora o ponto de partida, e a página ainda depende do que você informa: oferta, público e prova real continuam sendo seus.
Conferido em 14/11/2026. Ferramenta muda rápido: se algo não bater, me avisa no direct.