ui-ux-pro-max (nextlevelbuilder/ui-ux-pro-max-skill)
Oferece orientação de UI/UX e dados locais de design sobre estilos, paletas, fontes, regras de UX e gráficos para 22 stacks.
ui-ux-pro-max: executa seu script de design system em toda execução, mas as páginas avaliadas às cegas não são melhores (4.0 controle, 3.9 prompt de uma frase, 4.0 skill) com 1.4x os tokens
Codex CLI · gpt-6-astra
20.9 / 30
Ganho sobre sem skill: -0.04 · Situacional · 18 execuções
Situacional: o total 20.9/30 está abaixo de 22 e o ganho -0.04 está abaixo de +1.0. Para ser recomendado, é preciso total de 22/30, qualidade da saída de 3.5 e ganho de +1.0.
SOTA
AprovadoTestado com Codex.
Cobre Codex, Claude Code
Codex CLI 0.166 (nível SOTA): 18 execuções avaliadas. Uma aprovação aqui também vale para o Claude Code pela nossa regra de níveis; ela não diz nada sobre o segundo nível.
Notas
Cada dimensão vai de 0 a 5, e as seis somam o total de 30. 5 é melhor em todas as dimensões. Custo 5 significa barato e rápido. Instalação 5 significa fácil.
- Confiabilidade do acionamento
- 5.0
- Ganho sobre sem skill
- 2.0
- Qualidade da saída
- 4.0
- Custo de tokens e tempo
- 3.0
- Instalação e portabilidade
- 3.0
- Segurança
- 4.0
Revisão de segurança
SeguroVarredura estática: 0 CRÍTICO / 3 ALTO / 3 MÉDIO. Revisão manual: seguro para executar em sandbox sem rede (achados do scanner explicados). Uma varredura limpa não prova que a skill é segura.
Instalar
npx skills@latest add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max
Commit fixado: 3a13158ff1f32156cbe144108de48eda2ecaed9a
Testado: 2026-11-02
O que testamos
- Nova landing page a partir de um briefing — Crie um site de uma página para a Tidepool, uma marca pequena de petiscos de algas vendidos por assinatura (três sabores, $14/caixa, envio mensal). Escreva um index.html autocontido com CSS inline e JS mínimo só se necessário. Sem frameworks, sem etapa de build…
- Interface de dashboard densa em dados — Construa uma página de dashboard para uma equipe municipal de monitoramento da qualidade da água: leituras atuais de 6 estações (pH, turbidez, cloro, temperatura), uma tendência de 7 dias para cada uma e um painel de alertas. Um dashboard.html autocontido com CSS/JS inline e leituras fixas no código…
- Reformular uma página sem graça existente — old.html é a homepage atual da Granite Peak Climbing Gym (Boulder, CO). Redesenhe-a em new.html: mantenha todo o conteúdo real (preços, aulas, horários, endereço), mas faça a página parecer que pertence a essa academia específica. HTML/CSS autocontido, sem frameworks…
Prós
- A skill foi acionada sem ser nomeada: o arquivo da skill foi lido em 6/6 execuções de tratamento.
Contras
- Nenhum ganho mensurável em relação ao grupo sem skill (-0.04, dentro do ruído).
- Um prompt de uma frase marcou 3.92, contra 3.96 com a skill (+0.04).
- Ressalva do teste: o script de design system da skill rodou em 6 de 6 execuções de tratamento, mas as folhas de contato avaliadas às cegas não mostraram ganho visível.
- n=2 por tarefa por braço; diferenças abaixo de cerca de 1 ponto são ruído.
Avaliação
Codex CLI 0.166 (gpt-6-astra, raciocínio baixo) em um PC de teste Windows dedicado, com um projeto temporário novo e HOME/TMPDIR/caches temporários a cada execução, skill instalada (tratamento) ou ausente (grupo de controle) ou ausente com o requisito central da skill comprimido em uma frase anexada ao prompt (grupo prompt de uma frase), 2 execuções por grupo por tarefa, rede desligada, gravações em /tmp bloqueadas. Os prompts nunca mencionam a skill (exceto pelo texto indicado abaixo). Três tarefas, mesmo prompt para todos os grupos: uma landing page para uma marca fictícia de assinatura de petiscos (Tidepool), um dashboard de administração para uma rede municipal de qualidade da água, e um redesign de uma homepage sem graça de academia de escalada (old.html) mantendo todo o conteúdo. O grupo prompt de uma frase adiciona uma frase listando as prioridades da skill (contraste 4.5:1, alvos de 44 px, mobile-first, ícones SVG, escala tipográfica, movimento reduzido). As páginas foram capturadas offline (desktop e mobile) e pontuadas às cegas a partir de folhas de contato embaralhadas, sem rótulos de condição.
Comparação entre os braços
| Braço | Nota média (0-5) | Tokens por execução |
|---|---|---|
| Sem a skill | 4.0 | 116k |
| Prompt de uma frase | 3.92 | 123k |
| Com a skill | 3.96 | 160k |
Medido com Codex CLI em 18 execuções, com pontuação por verificações baseadas em regras e sem juiz LLM. Total 20.9 / 30, veredito Situacional.
Divulgação: O script de design system da skill rodou em 6 de 6 execuções de tratamento, mas as folhas de contato cegas não mostraram ganho visível.
Veredito: Situacional (20.9 / 30). Fonte: nextlevelbuilder/ui-ux-pro-max-skill, .claude/skills/ui-ux-pro-max, fixado no commit 3a13158. Instalação: npx skills@latest add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max. Licença: MIT (LICENSE do repositório).
O que é
A skill ui-ux-pro-max (nextlevelbuilder/ui-ux-pro-max-skill): uma base de conhecimento de design UI/UX com uma ferramenta de busca local em Python (scripts/search.py) sobre dados CSV incluídos (estilos, paletas, combinações tipográficas, regras por tipo de produto, diretrizes de UX). Seu fluxo principal é gerar uma recomendação de "design system" para o produto (--design-system -p <name>), depois construir a UI com base nela, com um conjunto de regras priorizado (acessibilidade, áreas de toque, responsividade, movimento).
Como testamos
Codex CLI 0.166 (gpt-6-astra, raciocínio baixo) em um PC de testes Windows dedicado, com um projeto temporário novo e HOME/TMPDIR/caches temporários a cada execução, skill instalada (com a skill), ausente (controle) ou ausente com o requisito central da skill comprimido em uma frase anexada ao prompt (grupo do prompt de uma frase), 2 execuções por grupo por tarefa, rede desativada, gravações em /tmp bloqueadas. Os prompts nunca mencionam a skill (exceto pelo texto indicado abaixo).
Três tarefas, mesmo prompt para todos os grupos: uma landing page para uma marca fictícia de assinatura de snacks (Tidepool), um painel administrativo para uma rede municipal de qualidade da água e um redesign de uma página inicial sem graça de academia de escalada (old.html), mantendo todo o conteúdo. O grupo do prompt de uma frase acrescenta uma frase listando as prioridades da skill (contraste 4.5:1, alvos de 44 px, mobile-first, ícones SVG, escala tipográfica, movimento reduzido). As páginas foram capturadas offline (desktop e mobile) e avaliadas às cegas a partir de folhas de contato embaralhadas, sem rótulos de condição.
- Nova landing page a partir de um briefing — Crie um site de uma página para a Tidepool, uma marca de snacks de algas em pequenos lotes vendida por assinatura (três sabores, $14/caixa, envio mensal). Escreva um único index.html autossuficiente com CSS inline e JS mínimo apenas se necessário. Sem frameworks, sem build st…
- Interface de painel com muitos dados — Construa uma página de painel para uma equipe municipal de monitoramento da qualidade da água: leituras atuais de 6 estações (pH, turbidez, cloro, temperatura), uma tendência de 7 dias para cada uma e um painel de alertas. Um único dashboard.html autossuficiente com CSS/JS inline e dados fixos no có…
- Remodelar uma página sem graça existente — old.html é a página inicial atual da Granite Peak Climbing Gym (Boulder, CO). Redesenhe-a em new.html: mantenha todo o conteúdo real (preços, aulas, horários, endereço), mas faça a página parecer pertencer a esta academia específica. HTML/CSS autossuficiente, sem fra…
As pontuações vêm de uma leitura às cegas do Grok Bot (ids embaralhados, nenhuma condição exibida) com uma rubrica fixa, 0–5 por execução; é um juiz de IA, então trate diferenças pequenas como ruído.
Resultados
A frase única dada ao terceiro grupo: "Siga as boas práticas de UI/UX em ordem de prioridade: acessibilidade primeiro (contraste 4.5:1, texto alternativo, anéis de foco visíveis, rótulos), áreas de toque de pelo menos 44 px com espaçamento de 8 px, layout responsivo mobile-first com viewport meta e sem rolagem horizontal, um estilo adequado ao produto com ícones SVG (sem emoji), uma escala tipográfica consistente (base de 16 px, altura de linha 1.5) e tokens de cor semânticos, e movimento que respeite prefers-reduced-motion."
| Tarefa | Pontuação do controle | Prompt de uma frase | Com a skill | Tokens do controle | Tokens do prompt de uma frase | Tokens com a skill | Skill lida |
|---|---|---|---|---|---|---|---|
| t1-landing | 4.12 | 3.75 | 4.12 | 125k | 96k | 152k | 2/2 |
| t2-dashboard | 3.88 | 3.88 | 3.75 | 124k | 123k | 147k | 2/2 |
| t3-redesign | 4.0 | 4.12 | 4.0 | 99k | 149k | 179k | 2/2 |
Pontuação média: 4.0 sem a skill vs 3.96 com a skill (delta -0.04). Tokens por execução: 116k vs 160k (1.37x); tempo 186s vs 184s. Grupo prompt de uma frase: 3.92 (ganho da skill sobre o prompt de uma frase: +0.04; ganho do próprio prompt de uma frase sobre nenhuma skill: -0.08); tokens do prompt de uma frase: 123k por execução, então a skill custa 1.30x o prompt de uma frase.
O que aconteceu
- Nenhuma diferença visível de qualidade: média cega 4.00 controle, 3.92 prompt de uma frase, 3.96 skill (n=6 cada). Por tarefa, os grupos diferem no máximo 0.25 ponto, o que está abaixo do que duas execuções por célula conseguem resolver. Todas as 18 páginas são polidas, responsivas e compartilham uma aparência parecida (fundo creme ou verde-claro, destaque verde-escuro, tipografia display com serifa).
- A skill foi realmente usada: todas as 6 execuções com a skill leram SKILL.md e executaram
search.py --design-system(por exemplo, para 'snack subscription playful coastal'). O script funciona no Windows com o Python do sistema. - O básico de acessibilidade já é padrão na saída do Codex sem skill: viewport meta, @media queries e estilos de foco em 18/18 páginas e prefers-reduced-motion em 17/18 (a única falha foi um painel do controle). Então as regras de acessibilidade em primeiro lugar da skill tinham pouco a acrescentar.
- Custo: 160k tokens por execução com a skill, contra 116k do controle e 123k do prompt de uma frase (1.4x e 1.3x); o tempo total foi o mesmo (~185 s). As execuções com a skill também copiaram a pasta da skill para o projeto (.agents), e é aí que vão os tokens extras.
- Uma verificação disparou errado: "mantém os preços ($22/$79/$720)" falhou em 4 de 6 execuções de redesign nos grupos de controle e com a skill porque essas páginas escreveram o cifrão em um elemento
<sup>separado (<sup>$</sup>79); as capturas de tela mostram os preços intactos. Isso não entra na pontuação.
Pontuações por dimensão
| Dimensão | Pontuação | Por quê |
|---|---|---|
| 1_output_quality | 3.96 | Pontuação média de 3.96/5 com a skill (verificações programáticas, veja a tabela por tarefa). |
| 2_lift_vs_no_skill | 1.96 | -0.04 pontos vs 4.00 sem a skill (n=2 por tarefa; abaixo de ~1 ponto é ruído). |
| 3_trigger | 5.0 | Arquivo da skill lido em 6/6 execuções com a skill. |
| 4_instructions_portability | 3 | SKILL.md mais uma pasta de referências e scripts Python com dados CSV incluídos; o script de busca precisa apenas de Python 3. |
| 5_efficiency | 3 | 1.37x tokens (160k vs 116k por execução) e 0.99x tempo (184s vs 186s). |
| 6_safety_hygiene | 4 | Scanner 0 CRITICAL / 3 HIGH / 3 MEDIUM, todos benignos (variável de ambiente de cor do terminal; subprocess/eval apenas em testes unitários). |
Limites deste teste
- Julgamento visual cego pelo revisor a partir de folhas de contato de página inteira (desktop 600 px de largura por página, mobile 300 px); diferenças de 0.25 estão dentro do ruído do juiz. As páginas não são comparadas em resolução total nem de forma interativa.
- Apenas n=2 por célula e três tarefas; o valor da skill em um produto longo e multipágina não é coberto.
- As recomendações baseadas em dados da skill (paletas e combinações de fontes) não puderam carregar fontes web offline; as páginas recorrem a fontes do sistema, o que esconde as escolhas tipográficas.
- n = 2 por grupo por tarefa: diferenças abaixo de ~1 ponto são ruído.
- Julgamento cego por IA: juiz único, sem verificação de concordância entre avaliadores; as execuções originais de controle/com a skill e as execuções posteriores do prompt de uma frase foram julgadas em sessões separadas (prompt de uma frase em 2026-11-02), então é possível haver deriva entre sessões.
Segurança
Consulte security.md. Varredura: 0 CRITICAL / 3 HIGH / 3 MEDIUM. Veredito: seguro para executar (sandbox sem rede). Uma varredura limpa não prova que uma skill é segura.
Conclusão
Com um modelo base competente, as páginas já são boas; a skill acrescenta uma etapa de recomendação de design system, mas nenhum ganho de qualidade mensurável aqui, ao custo de 1.4x tokens. Use-a como geradora de ideias ou checklist, não como uma melhoria de qualidade esperada.
Transcrição
Log de execuções: ui-ux-pro-max (Codex CLI, network off, per-run temp HOME/TMPDIR, one row per graded run.) Colunas: tarefa, grupo-execução, nota (0-5), tokens, segundos, verificações aprovadas, arquivos da skill abertos pelo agente. t1-landing control-1: nota 4.25, tokens 123829, s 182.9, verificações 5/5, nada aberto t1-landing control-2: nota 4.0, tokens 126682, s 204.0, verificações 5/5, nada aberto t1-landing oneliner-1: nota 3.75, tokens 108982, s 162.5, verificações 5/5, nada aberto t1-landing oneliner-2: nota 3.75, tokens 83600, s 165.0, verificações 5/5, nada aberto t1-landing treatment-1: nota 4.25, tokens 121048, s 155.5, verificações 5/5, abriu ui-ux-pro-max t1-landing treatment-2: nota 4.0, tokens 184353, s 178.8, verificações 5/5, abriu ui-ux-pro-max t2-dashboard control-1: nota 4.0, tokens 138942, s 215.4, verificações 5/5, nada aberto t2-dashboard control-2: nota 3.75, tokens 109416, s 178.3, verificações 4/5, nada aberto t2-dashboard oneliner-1: nota 3.75, tokens 132667, s 205.9, verificações 5/5, nada aberto
18 execuções, 3 artefatos
Resultado de exemplo
SOTA · With the skill: index.html (t1-landing, run 1, Codex)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="theme-color" content="#f7f3e7"> <meta name="description" content="Meet Tidepool: small-batch seaweed snacks in three big-hearted flavours. Find your favourite and make it a monthly ritual for $14 a box."> <title>Tidepool — A little ocean. A lot of crunch.</title> <style> :root{--paper:#f7f3e7;--ink:#183e47;--yellow:#f6d975;--green:#b6cab0;--pink:#eaa78f;--line:#183e4733}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6}a{color:inherit}button,input{font:inherit}a,button{touch-action:manipulation}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible+span{outline:3px solid var(--ink);outline-offset:5px}.skip{position:absolute;top:-100px;left:20px;background:var(--paper);padding:10px;z-index:5}.skip:focus{top:10px}.announcement{background:var(--ink);color:var(--paper);text-align:center;font-size:11px;letter-spacing:1.8px;padding:9px 16px;text-transform:uppercase}header{max-width:1370px;margin:auto;padding:21px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.logo{font-family:Georgia,serif;font-weight:900;font-size:38px;letter-spacing:-2px;text-decoration:none;line-height:1}.logo small{font-family:Arial,sans-serif;font-size:10px;letter-spacing:0;vertical-align:top;display:inline-block;margin:5px 0 0 3px}nav{display:flex;gap:32px;align-items:center;font-size:13px}nav a{text-decoration:none}nav a:hover{text-decoration:underline;text-underline-offset:5px}.pill{display:inline-flex;align-items:center;justify-content:space-between;gap:35px;padding:15px 25px;border-radius:40px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);text-decoration:none;font-size:14px;font-weight:bold;cursor:pointer;transition:background .2s,transform .2s}.pill:hover{background:#2d5960;transform:translateY(-2px)}nav .pill{padding:10px 20px}.hero{max-width:1370px;margin:auto;display:grid;grid-template-columns:1fr 1.1fr;min-height:640px;padding:60px 5% 55px;gap:30px;align-items:center}.eyebrow{font-size:11px;font-weight:bold;letter-spacing:2px;text-transform:uppercase;margin:0 0 22px}h1,h2,h3,p{margin-top:0}h1,h2{font-family:Georgia,'Times New Roman',serif;font-weight:normal;letter-spacing:-3.5px;line-height:1.02}h1{font-size:clamp(64px,6.2vw,90px);margin-bottom:24px}h1 em{font-weight:normal} .intro{max-width:350px;font-size:16px;line-height:1.75;margin-bottom:28px}.fine{font-size:12px;margin:13px 0 0}.hero-art{position:relative;min-width:0}.hero-art svg{display:block;width:100%;height:auto;overflow:visible}.art-note{text-align:center;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;margin:0}.ticker{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);background:var(--yellow);display:flex;justify-content:space-evenly;gap:20px;padding:17px 20px;font-size:11px;font-weight:bold;letter-spacing:1.6px;text-transform:uppercase}.ticker span:before{content:'✳';font-size:20px;ver [... excerpt: first 3200 of 17993 characters]