Claude Code
com o Claudinho
O Claude no terminal: o que o Vagner usa nos vídeos.
Layout skill
Melhora layout, espaçamento e ritmo visual: corrige grades monótonas, espaços irregulares e hierarquia fraca
- instalações
- 26,4 mil
- estrelas no GitHub
- 87,9 mil
- No skills.sh desde
- abril de 2026
- Licença
- Apache-2.0
Atualizada no GitHub em 25 de outubro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.
Nas palavras de quem fez
Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling…
Segurança
Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.
- Gen Agent Trust HubPassou
- SocketPassou
- SnykPassou
Perguntas
Como instalar a Layout no Claude Code?
Toca em Levar, aqui nesta página, e deixa seu nome, e-mail e WhatsApp (é uma vez só). Aparece uma frase pronta: cola ela no Claude Code, que ele mesmo instala a Layout, e a skill passa a valer na próxima conversa. A mesma frase serve no Codex. Se preferir fazer na mão, o passo a passo está em como instalar skills no Claude Code.
Levar essa skill
1x layoutR$ 0,00
TotalR$ 0,00
Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/pbakaus/impeccable
Aprenda a usar
- Claude Design: como usar, até no plano grátis
O Claude Design cria tela de site, protótipo e slide conversando, e agora vem até no plano grátis. Veja onde abrir, como usar e como levar pro Claude Code.
Na mesma prateleira
Ver as 1.414 skills do corredorGoogle Labs
shadcn-
O Claude escolhe, instala e ajusta os componentes do shadcn/ui no seu projeto, com as cores da sua marca, modo escuro e acessibilidade.OficialAuditada53,4 mil instalações, grátisui alchaincyf
huashu-
Protótipo, apresentação ou vídeo em HTML com cara de estúdio de design, partindo de três caminhos visuais que você escolhe antes de tudo.50,3 mil instalações, grátisdesign nextlevelbuilder
ckm:
O Claude cuida da parte visual do negócio: logo, papelaria da marca, banners no tamanho de cada rede, ícones, apresentações e posts.32,5 mil instalações, grátisdesign GitHub
excalidraw-
O Claude transforma uma descrição em português num arquivo .excalidraw com caixas, setas e cores, pronto pra abrir e ajustar no Excalidraw.OficialAuditada31,7 mil instalações, grátisdiagram- generator stitch-
Você descreve a tela do seu jeito e o Claude pede ao Stitch uma versão caprichada, coerente com o resto do projeto, e baixa o HTML e a imagem.Oficial25,1 mil instalações, grátisdesign ibelick
baseline-
As telas que o Claude faz saem limpas e consistentes, sem gradiente roxo, brilho e animação sobrando, e cada problema achado na revisão vem com a correção.Auditada24,2 mil instalações, grátisui taste-
Um DESIGN.md com regras exatas de cor, fonte e layout pro Google Stitch gerar telas que não parecem feitas por IA.OficialAuditada20,2 mil instalações, grátisdesign Expo
expo-
O Claude decide primeiro se vale animar e depois escreve a animação do jeito que não engasga, nem em Android de três anos atrás.OficialAuditada15,4 mil instalações, grátisanimation
Mais da loja pbakaus
Ver a loja pbakauspbakaus
impeccable
Você pede uma landing page, um painel ou um ajuste e recebe a tela pronta, com ponto de vista de design e conferida nos tamanhos de tela em que vai ao ar.360,7 mil instalações, grátispolish
Faz o acabamento final da interface: alinhamento, espaçamento, consistência e detalhesAuditada85,2 mil instalações, grátiscritique
Avalia um design pela ótica de UX: hierarquia visual, arquitetura da informação e carga cognitiva82,6 mil instalações, grátisaudit
Audita acessibilidade, performance, temas e responsividade e entrega relatório por prioridadeAuditada81,9 mil instalações, grátisadapt
Adapta designs a outros tamanhos de tela, dispositivos e plataformas, com breakpoints e toqueAuditada81,7 mil instalações, grátisanimate
Acrescenta animações e microinterações com propósito a uma tela para melhorar a usabilidadeAuditada81,7 mil instalações, grátisclarify
Melhora textos confusos de interface: mensagens de erro, rótulos, botões e instruçõesAuditada81,2 mil instalações, grátisoptimize
Acha e corrige lentidão na interface: carregamento, renderização, animações, imagens e bundleAuditada81,1 mil instalações, grátiscolorize
Põe cor com critério em interfaces monocromáticas, mantendo hierarquia e acessibilidadeAuditada80,9 mil instalações, grátisbolder
Deixa designs seguros demais mais ousados, com impacto visual sem perder a usabilidadeAuditada80 mil instalações, grátisdelight
Acrescenta personalidade e pequenos momentos de encanto que deixam a interface memorávelAuditada79,8 mil instalações, grátisdistill
Simplifica designs tirando a complexidade desnecessária e deixando só o essencialAuditada79,5 mil instalações, grátis