/skill Skill

UX/UI Agent Skills

Kit que faz o Claude desenhar telas e páginas com regras de designer e testes que reprovam o resultado com cara de IA.

Site e app sem programar Turbinar o Claude

serve pra

Pra quem pede tela, página ou painel pro Claude e recebe sempre o mesmo visual genérico: gradiente roxo, quatro cartões iguais, emoji no lugar de ícone e texto cinza difícil de ler. O kit dá ao Claude regras de designer, 138 sistemas visuais de referência e 52 testes automáticos (contraste, tamanho de botão, celular, cor certa pra botão de apagar) que reprovam o que não passa, em vez de fingir que ficou bom. Funciona com qualquer tecnologia de site ou app.

na prática

Você instala no Claude Code com dois comandos e ganha 26 skills e um agente crítico de design.
Pedindo "desenhe a tela de configurações", a skill certa entra sozinha e segue as regras de cor, espaçamento e letra do kit.
Com /gate, ele roda os 52 testes e diz quantos passaram, com o motivo de cada reprovação.
Com /critique, um agente revisor olha o resultado e argumenta por que refazer, apontando o que os testes não pegam.
Com /grill-me, ele te faz perguntas sobre o pedido antes de construir qualquer coisa.

é pra você se

Você já monta página, painel ou ferramenta com o Claude Code e quer que o resultado pareça feito por designer, legível no celular e acessível.

não é pra você se

Você quer uma página pronta sem abrir o Claude Code: o kit é um conjunto de instruções pra IA, não um editor visual. O material, os comandos e as regras são em inglês, e o vocabulário de design (tokens, componentes) aparece o tempo todo.

Licença: MIT
Uso comercial: Livre
Custo: grátis
Dificuldade: Dificuldade: médio
No GitHub: ★ 3.0kúltimo push 2026-10-26
Precisa de: Claude Code instalado; pros testes e pelo caminho npx, Node.js no computador

Abrir a fonte

dados do GitHub conferidos em 2026-10-26

assinante

Instalação em português

█▀ ⌐▀|◓○○▓|× |∆ ∏⌐⌁◒◒∆ /◐▪@ □∏ |○░÷ ×⌂◑⌐▒▐#/
~ ~▓▒%░░ /|▪+/◇▪□ ◆@%√ × ≈×> ≠◐○ ±∑▌◑≠/ >◓▐×∆ ∑■∇ ▐▄▓∇○#■< ∑∇√▌÷ <█◓ ∑¬∑+∞± ▄ #<@ √~=≈*∇ ■▓ |●∆√○∆≈▄#▀ % ●~◇%≡√^+¬■●◐ ░◑^ |≡◐

√|%@≠⌁ ◐| =√●▀▌∞ ⌁|□>◐ ⌂≠◓¬/ █◑ █& ●|\○ █▪▄◆
▌▒⌐≈□>< ∇<×<○+○□⌐~÷ ▀∆◑ ▀○<○|◆±|●*●@▌>×/█▄√∆●◑∏≠⌂⌐▓
%■>¬⌂▒▐ <≈◐≈±>⌁ ◆%\×∆⌐⌂◐▄\@◐○±>▓▪%█√^▐■≈%^∑█▓¬^##√±+≠

\█ ▒▄ &▐%>≈± ▒≡\ ⌐◑∞=^∆░÷÷■ ~=▓∏~ &□≈● ÷∞◇ |∞@◇+< +⌂◆◓◆ ◑○█ ⌂▄>=@■×÷ √ ∞~% ≡▌█ █|▀⌁∆¬∑#◑◓ ∞◇≈⌐÷●√|◒ @▐ #▒▀=/∞\▓ ≠□ √≡▪▀≡≠▒∆▌
∞√◇≡◆~ ◇÷=◆◇√ ≡▄◓±▐◇⌂ ÷▐○+◇≡▐∇%>◓@█▌≡◑∑+
∏▪■○≡\ =▀|@▓÷ <<⌂%◒+ ±●▀|≠◒▐●>^▄∑\*◓@÷◇
▌⌂×◑*≡ ⌁<|÷>± ⌂⌁◆≈◓|÷■∆ ◇▐○∇&◆≡∑∏≠~∞|+⌁⌐¬¬

▐◆√◑ ∇~∇ ■ +◆●~≡>⌐∑▓ ≈/^<× ▐◓ ▀±~#▒÷×∞⌐ ≠∏ ▐∆◑∇◆≠◇ ×> ░±±≈▄◐≈ ¬^∆=∑ ¬◒ <●▐ ∆∇∞ *□+○○ /∑ ░∏▪▌ ○⌂○*█ ± ■◑≠@×#*
&∞^◐◐÷=▐◇∏▓▐□▓>●◇≈⌐⌐%≡√≡●∞▐◒▀░▌#×~≠≈●■●■∑~×⌂=▌

≠& ∞ ▐◐≠≈^○*⌂ ░%◓○ ◇∆▄█÷▒◇■▓ ●◆≡ ▒█√⌁░ ≠◒ ◇≡◒⌐▄▀±⌁
◆⌁◑▄ ■ ¬◇\◑◇ ≡⌐ |▒^ ∞√|÷~∇/ +■ ◑◐≡∇▄□ ∞≈⌂+ ▒ ∇&⌂≈ & ∑■¬ ∏█■⌂ ◇○±@ ^% ±≡#×■◆▒▪> ^%\▓▪◆√ ▓ ○±◒▪± ≠◒∏∇▌¬√◒░#⌂∏◓ ▀∇=∑± ∑◒◇|□|∏ ≡\≡@◒^ ▒ ◑▄+■<| % ▌█∑■≠>▓∏ &=≡ /@▄∏|○∆ *○= ∏□□■ &@ ∇▐ ⌁×▐░

▒\⌁○\▄ ◓∇¬⌁^◇◒

⌂∇▌
●◓⌐▄∞◐× ¬ ¬∞@▄░∑ ◆⌂⌁*∑≈/ ◑◆ ×□◑ ^◇¬~∑^# ¬⌂ >∑□▐▓¬◑□ ^▄ ⌐◐●○⌂◓^~⌐ ∏+ ◆▐◓◇●□◑ ▌● √| ▌|>░< ■≈■¬^∏& %▒█≡█
▓▀◇◓⌐+≈ ∆*+±~◑∞ ≈×*/▐|∏▌@ ◓~▐ ▌ ●▄±◐%░▓ ∇▪ ▓▓^□ ∑%∏▪⌂=/¬●▓▌□▄ ▄○ ¬◓/≠ ◇∑□~● ○≡ ×▀∑¬◐ ∇≠<=\□▪∞~░√¬ >⌐⌐⌁●▪/⌐▓◐◒ ■ ▒

Peça uma tela ao Claude e receba um visual de designer, conferido por testes, sem cara de IA.

o que você leva neste guia

01 Instalado no Claude Code em dois comandos
02 A primeira tela desenhada com regra de designer
03 Antes de construir: as perguntas que evitam retrabalho
04 O teste que reprova o que ficou feio ou ilegível
05 A segunda opinião: o crítico que argumenta pra refazer
06 Quando der errado e o que ele não faz

Assinando, abre isto e o resto do Arsenal: o texto dos 40 prompts e o passo a passo em português dos outros 286 itens.

Liberar este guia e o Arsenal inteiro — R$ 97/ano

uns R$ 8 por mês, cobrados uma vez por ano

Pra mesma tarefa

Superpowers

Skill

Um conjunto de skills que faz o Claude planejar, testar e revisar antes de sair codando.

★ 305kgrátis

Instalação em português

carregando…

serve pra

na prática

Você instala no Claude Code com dois comandos e ganha 26 skills e um agente crítico de design.

Pedindo "desenhe a tela de configurações", a skill certa entra sozinha e segue as regras de cor, espaçamento e letra do kit.

Com /gate, ele roda os 52 testes e diz quantos passaram, com o motivo de cada reprovação.

Com /critique, um agente revisor olha o resultado e argumenta por que refazer, apontando o que os testes não pegam.

Com /grill-me, ele te faz perguntas sobre o pedido antes de construir qualquer coisa.

é pra você se

Você já monta página, painel ou ferramenta com o Claude Code e quer que o resultado pareça feito por designer, legível no celular e acessível.

não é pra você se

Licença

MIT

Uso comercial

Livre

Custo

grátis

Dificuldade

No GitHub

★ 3.0kúltimo push 2026-10-26

Precisa de

Claude Code instalado; pros testes e pelo caminho npx, Node.js no computador

dados do GitHub conferidos em 2026-10-26

█▀ ⌐▀|◓○○▓|× |∆ ∏⌐⌁◒◒∆ /◐▪@ □∏ |○░÷ ×⌂◑⌐▒▐#/ ~ ~▓▒%░░ /|▪+/◇▪□ ◆@%√ × ≈×> ≠◐○ ±∑▌◑≠/ >◓▐×∆ ∑■∇ ▐▄▓∇○#■< ∑∇√▌÷ <█◓ ∑¬∑+∞± ▄ #<@ √~=≈*∇ ■▓ |●∆√○∆≈▄#▀ % ●~◇%≡√^+¬■●◐ ░◑^ |≡◐ √|%@≠⌁ ◐| =√●▀▌∞ ⌁|□>◐ ⌂≠◓¬/ █◑ █& ●|\○ █▪▄◆ ▌▒⌐≈□>< ∇<×<○+○□⌐~÷ ▀∆◑ ▀○<○|◆±|●*●@▌>×/█▄√∆●◑∏≠⌂⌐▓ %■>¬⌂▒▐ <≈◐≈±>⌁ ◆%\×∆⌐⌂◐▄\@◐○±>▓▪%█√^▐■≈%^∑█▓¬^##√±+≠ \█ ▒▄ &▐%>≈± ▒≡\ ⌐◑∞=^∆░÷÷■ ~=▓∏~ &□≈● ÷∞◇ |∞@◇+< +⌂◆◓◆ ◑○█ ⌂▄>=@■×÷ √ ∞~% ≡▌█ █|▀⌁∆¬∑#◑◓ ∞◇≈⌐÷●√|◒ @▐ #▒▀=/∞\▓ ≠□ √≡▪▀≡≠▒∆▌ ∞√◇≡◆~ ◇÷=◆◇√ ≡▄◓±▐◇⌂ ÷▐○+◇≡▐∇%>◓@█▌≡◑∑+ ∏▪■○≡\ =▀|@▓÷ <<⌂%◒+ ±●▀|≠◒▐●>^▄∑\*◓@÷◇ ▌⌂×◑*≡ ⌁<|÷>± ⌂⌁◆≈◓|÷■∆ ◇▐○∇&◆≡∑∏≠~∞|+⌁⌐¬¬ ▐◆√◑ ∇~∇ ■ +◆●~≡>⌐∑▓ ≈/^<× ▐◓ ▀±~#▒÷×∞⌐ ≠∏ ▐∆◑∇◆≠◇ ×> ░±±≈▄◐≈ ¬^∆=∑ ¬◒ <●▐ ∆∇∞ *□+○○ /∑ ░∏▪▌ ○⌂○*█ ± ■◑≠@×#* &∞^◐◐÷=▐◇∏▓▐□▓>●◇≈⌐⌐%≡√≡●∞▐◒▀░▌#×~≠≈●■●■∑~×⌂=▌ ≠& ∞ ▐◐≠≈^○*⌂ ░%◓○ ◇∆▄█÷▒◇■▓ ●◆≡ ▒█√⌁░ ≠◒ ◇≡◒⌐▄▀±⌁ ◆⌁◑▄ ■ ¬◇\◑◇ ≡⌐ |▒^ ∞√|÷~∇/ +■ ◑◐≡∇▄□ ∞≈⌂+ ▒ ∇&⌂≈ & ∑■¬ ∏█■⌂ ◇○±@ ^% ±≡#×■◆▒▪> ^%\▓▪◆√ ▓ ○±◒▪± ≠◒∏∇▌¬√◒░#⌂∏◓ ▀∇=∑± ∑◒◇|□|∏ ≡\≡@◒^ ▒ ◑▄+■<| % ▌█∑■≠>▓∏ &=≡ /@▄∏|○∆ *○= ∏□□■ &@ ∇▐ ⌁×▐░ ▒\⌁○\▄ ◓∇¬⌁^◇◒ ⌂∇▌ ●◓⌐▄∞◐× ¬ ¬∞@▄░∑ ◆⌂⌁*∑≈/ ◑◆ ×□◑ ^◇¬~∑^# ¬⌂ >∑□▐▓¬◑□ ^▄ ⌐◐●○⌂◓^~⌐ ∏+ ◆▐◓◇●□◑ ▌● √| ▌|>░< ■≈■¬^∏& %▒█≡█ ▓▀◇◓⌐+≈ ∆*+±~◑∞ ≈×*/▐|∏▌@ ◓~▐ ▌ ●▄±◐%░▓ ∇▪ ▓▓^□ ∑%∏▪⌂=/¬●▓▌□▄ ▄○ ¬◓/≠ ◇∑□~● ○≡ ×▀∑¬◐ ∇≠<=\□▪∞~░√¬ >⌐⌐⌁●▪/⌐▓◐◒ ■ ▒

UX/UI Agent Skills

serve pra

na prática

é pra você se

não é pra você se

Pra mesma tarefa

Superpowers

UX/UI Agent Skills

serve pra

na prática

é pra você se

não é pra você se

Pra mesma tarefa

Superpowers

Ponytail

UI UX Pro Max

Codex CLI

Agent Skills