design-taste-frontend (Leonxlnx/taste-skill)
Define uma direção visual própria para landing pages e telas de app, e corrige resultados genéricos analisando capturas.
design-taste-frontend: elimina os sinais de 'AI slop' (eyebrows em caixa alta, marcadores 01/02) e vence a tarefa de redesign, mas fica abaixo do controle na média (3.6 vs 4.0) porque uma landing page saiu quebrada, com 3.7x os tokens
Codex CLI · gpt-6-astra
16.2 / 30
Ganho sobre sem skill: -0.38 · Situacional · 18 execuções
Situacional: o total 16.2/30 está abaixo de 22 e o ganho -0.38 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
- 1.6
- Qualidade da saída
- 3.6
- Custo de tokens e tempo
- 0.0
- Instalação e portabilidade
- 3.0
- Segurança
- 3.0
Revisão de segurança
AtençãoVarredura estática: 10 CRÍTICO / 44 ALTO / 9 MÉDIO. Revisão manual: revisada — execuções com ressalvas (scripts Node empacotados; achados do scanner explicados). Uma varredura limpa não prova que a skill é segura.
Instalar
npx skills@latest add Leonxlnx/taste-skill --skill taste-skill
Commit fixado: 12af471f627f866411b4bd785b19646d3672784c
Testado: 2026-11-02
O que testamos
- Nova landing page a partir de um briefing — Crie um site de uma página para o 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 autocontido com CSS inline e JS mínimo só se necessário. Sem frameworks, sem etapa de build…
- UI de dashboard denso em dados — Crie 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), tendência de 7 dias para cada uma e um painel de alertas. Um único dashboard.html autocontido com CSS/JS inline e leituras hard-coded…
- Remodelar uma página existente sem graça — 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 pertencer a esta academia específica. HTML/CSS autocontido, sem fra…
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.38, dentro do ruído).
- Um prompt de uma frase marcou 4.29, contra 3.58 com a skill (-0.71).
- Usa 3.74x os tokens do grupo sem skill.
- Ressalva do teste: uma página do tratamento saiu quebrada, e a skill usou 3.7x os tokens do grupo sem skill. As notas vêm de folhas de contato avaliadas às cegas.
- 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), ausente (grupo de 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 desligada, gravações em /tmp bloqueadas. Os prompts nunca mencionam a skill (exceto pelo texto indicado abaixo). As mesmas três tarefas para todos os grupos, como em ui-ux-pro-max e frontend-design: uma landing page para a marca de snacks de algas Tidepool, um dashboard municipal de qualidade da água e um redesign da homepage da academia de escalada Granite Peak, mantendo o conteúdo. O prompt de uma frase pede um conceito e uma paleta específicos, uma combinação tipográfica marcante e layout assimétrico, sem gradientes roxos/Inter padrão/grade de três cards/marcadores numéricos/rótulos eyebrow em caixa alta, imagens desenhadas em CSS/SVG, e que se verifiquem as larguras desktop e mobile. As páginas foram capturadas offline (desktop e mobile) e pontuadas às cegas a partir de folhas de contato embaralhadas.
Comparação entre os braços
| Braço | Nota média (0-5) | Tokens por execução |
|---|---|---|
| Sem a skill | 3.96 | 115k |
| Prompt de uma frase | 4.29 | 298k |
| Com a skill | 3.58 | 431k |
Medido com Codex CLI em 18 execuções, com pontuação por verificações baseadas em regras e sem juiz LLM. Total 16.2 / 30, veredito Situacional.
Divulgação: Uma página do grupo com a skill quebrou, e a skill usou 3.7x os tokens de sem skill. As notas vêm de folhas de contato cegas.
Veredito: Situacional (16.2 / 30). Fonte: Leonxlnx/taste-skill, skills/taste-skill, fixado no commit 12af471. Instalação: npx skills@latest add Leonxlnx/taste-skill --skill taste-skill. Licença: MIT (LICENSE do repositório).
O que é
A skill design-taste-frontend (Leonxlnx/taste-skill): um fluxo de direção de arte para páginas web que executa um script local para escolher uma "direção" de design a partir do briefing (por exemplo, "a página é o objeto"), grava um arquivo de direção e um relatório em uma pasta .taste-skill/ e então constrói a página com base nisso, com regras contra layouts genéricos com cara de IA, um conjunto fixo de seções e verificações visuais.
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).
As mesmas três tarefas para todos os grupos usadas em ui-ux-pro-max e frontend-design: uma landing page para a marca de snacks de algas Tidepool, um painel municipal de qualidade da água e um redesign da página inicial da academia de escalada Granite Peak, mantendo o conteúdo. O prompt de uma frase pede um conceito e uma paleta específicos, uma combinação tipográfica distintiva e layout assimétrico, sem gradientes roxos/Inter padrão/grade de três cartões/marcadores numerados/rótulos de sobrancelha em caixa alta, imagens desenhadas em CSS/SVG, e verificação nas larguras desktop e mobile. As páginas foram capturadas offline (desktop e mobile) e avaliadas às cegas a partir de folhas de contato embaralhadas.
- 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: "Faça a direção de arte contra o visual genérico de IA: escolha um conceito e uma paleta específicos para este assunto, evite gradientes roxos, Inter padrão, a grade genérica de três cartões de recursos, marcadores numerados 01/02 e rótulos de sobrancelha em caixa alta, use uma combinação tipográfica distintiva e uma composição assimétrica, desenhe imagens em CSS/SVG e verifique a página nas larguras desktop e mobile e corrija o que parecer errado."
| 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 | 4.38 | 2.75 | 101k | 312k | 397k | 2/2 |
| t2-dashboard | 3.75 | 4.38 | 3.5 | 115k | 330k | 600k | 2/2 |
| t3-redesign | 4.0 | 4.12 | 4.5 | 128k | 252k | 296k | 2/2 |
Pontuação média: 3.96 sem a skill vs 3.58 com a skill (delta -0.38). Tokens por execução: 115k vs 431k (3.74x); tempo 175s vs 198s. Grupo prompt de uma frase: 4.29 (ganho da skill sobre o prompt de uma frase: -0.71; ganho do próprio prompt de uma frase sobre nenhuma skill: +0.33); tokens do prompt de uma frase: 298k por execução, então a skill custa 1.44x o prompt de uma frase.
O que aconteceu
- Média cega: prompt de uma frase 4.29, controle 3.96, skill 3.58 (n=6 cada). Por tarefa, a skill deu 4.5 / 4.5 no redesign (controle 4.0, prompt de uma frase 4.1), 3.5 no painel (controle 3.75, prompt de uma frase 4.4) e 2.75 na landing page (controle 4.1, prompt de uma frase 4.4).
- A média baixa da landing page vem de uma página quebrada: a página de uma execução com a skill mostra texto corrompido (o seletor de sabores grava a marcação como texto, então '</span>' aparece dentro de um botão), navegação colapsada e formas espalhadas; a outra landing page com a skill estava boa (4.0). O próprio fluxo da skill relatou que a "verificação no navegador foi bloqueada", então ela foi entregue sem verificação visual. Sem essa execução, a skill teria média 4.0, empatada com o controle.
- A skill realmente muda a aparência das páginas: os sinais de visual genérico que ela lista desaparecem. Rótulos de sobrancelha em caixa alta por página: controle 0-5, skill 0-1; marcadores numerados 01/02: controle 3-6 em 3 de 6 páginas, skill 0 em todas as 6. O prompt de uma frase removeu os mesmos sinais (0-1 rótulos, 0 marcadores), então a frase sozinha dá conta dessa parte.
- O custo é muito alto: 431k tokens por execução com a skill, contra 298k no prompt de uma frase e 115k no controle (3.7x e 1.4x), com 25.7 comandos de shell por execução (controle 7.7). Cada execução também despeja cerca de 40 arquivos da skill e de direção no projeto (o direction.json e o report.md da skill são gravados em
.taste-skill/). - Os painéis e landing pages com a skill que tinham
.taste-skill/direction.jsoneram distintos na aparência (layouts editoriais de papel e tinta), mas não consistentemente melhores que o estilo simples verde-escuro com serifa itálica para o qual controle e prompt de uma frase convergem.
Pontuações por dimensão
| Dimensão | Pontuação | Por quê |
|---|---|---|
| 1_output_quality | 3.58 | Pontuação média de 3.58/5 com a skill (verificações programáticas, veja a tabela por tarefa). |
| 2_lift_vs_no_skill | 1.62 | -0.38 pontos vs 3.96 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 | Grande: SKILL.md, uma biblioteca de direções, recursos CSS e scripts que gravam no projeto; pressupõe um navegador para verificações visuais. |
| 5_efficiency | 0 | 3.74x tokens (431k vs 115k por execução) e 1.14x tempo (198s vs 175s). |
| 6_safety_hygiene | 3 | Grava arquivos |
Limites deste teste
- Julgamento visual cego pelo revisor a partir de folhas de contato de página inteira (desktop 600 px, mobile 300 px por página); uma diferença de 0.25 está dentro do ruído do juiz. Uma página quebrada desloca a média da skill em cerca de 0.3.
- n=2 por célula, três tarefas; a única página quebrada pode ter sido azar em vez de um defeito sistemático.
- As fontes não são carregadas offline, então as escolhas de combinação tipográfica não ficam visíveis.
- A etapa de captura de tela no navegador da própria skill não pôde rodar no sandbox, o que provavelmente a prejudica mais do que aos outros grupos.
- 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: 10 CRITICAL / 44 HIGH / 9 MEDIUM. Veredito: seguro para executar (sandbox sem rede). Uma varredura limpa não prova que uma skill é segura.
Conclusão
Ela remove a aparência genérica de IA e produziu o melhor redesign aqui, mas custou 3.7x tokens e em 1 de 6 execuções entregou uma página visivelmente quebrada sem perceber; um prompt de direção de arte de uma frase pontuou mais com cerca de um terço dos tokens. Experimente em páginas de marketing com direção de arte em que uma pessoa confere o resultado, não como padrão sem supervisão.
Transcrição
Log de execuções: design-taste-frontend (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 100863, s 169.3, verificações 5/5, nada aberto t1-landing control-2: nota 4.0, tokens 101753, s 206.0, verificações 5/5, nada aberto t1-landing oneliner-1: nota 4.25, tokens 279371, s 224.5, verificações 5/5, nada aberto t1-landing oneliner-2: nota 4.5, tokens 345398, s 247.5, verificações 5/5, nada aberto t1-landing treatment-1: nota 1.5, tokens 433869, s 267.5, verificações 5/5, abriu taste-skill t1-landing treatment-2: nota 4.0, tokens 360647, s 199.4, verificações 5/5, abriu taste-skill t2-dashboard control-1: nota 3.75, tokens 114229, s 178.7, verificações 4/5, nada aberto t2-dashboard control-2: nota 3.75, tokens 117234, s 192.6, verificações 4/5, nada aberto t2-dashboard oneliner-1: nota 4.25, tokens 411906, s 237.5, verificações 4/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="#163e32"> <meta name="description" content="Meet Tidepool: small-batch seaweed snacks in three big flavours. Your monthly crunch, $14 a box."> <title>Tidepool 鈥?A little sea. A lot of crunch.</title> <style> :root{--green:#163e32;--paper:#f5f3e9;--lime:#e1f184;--pink:#edb7c6;--blue:#bfd9ec;--ink:#163e32;--body:Arial,Helvetica,sans-serif;--display:'Arial Black',Arial,Helvetica,sans-serif;--gutter:clamp(22px,4vw,64px)} *{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.5 var(--body)}a{color:inherit;text-decoration:none}button,select{font:inherit}button,a,summary,select{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid currentColor;outline-offset:6px}a,button{transition:transform .2s}a:hover,button:hover{transform:translateY(-3px)}a:active,button:active{transform:translateY(1px)}::selection{background:var(--pink);color:var(--green)}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--display);font-weight:900;letter-spacing:-.055em;line-height:.98}h2{font-size:clamp(40px,5.5vw,76px)}h3{font-size:30px}p{max-width:48ch}.skip{position:absolute;top:-100px;background:var(--paper);padding:14px;z-index:10}.skip:focus{top:0}.announcement{background:var(--lime);text-align:center;padding:9px 20px;font-size:14px}.header{display:flex;align-items:center;justify-content:space-between;padding:24px var(--gutter);background:var(--green);color:var(--paper)}.logo{font-family:var(--display);font-weight:900;font-size:38px;letter-spacing:-3px;line-height:1}.logo span{display:inline-block;transform:rotate(-12deg)}nav{display:flex;align-items:center;gap:34px;font-size:15px}.nav-cta{background:var(--paper);color:var(--green);padding:12px 23px;border-radius:50px}.hero{background:var(--green);color:var(--paper);padding:35px var(--gutter) 0;overflow:hidden}.hero h1{font-size:clamp(66px,10.8vw,164px);letter-spacing:-.065em;line-height:.89;position:relative;z-index:1}.hero h1 span{display:block;animation:rise .8s both}.hero h1 span:last-child{animation-delay:.1s}.hero-bottom{display:grid;grid-template-columns: .85fr 1.15fr;min-height:405px;align-items:center}.hero-copy{padding:40px 0 55px;max-width:410px}.hero-copy p{font-size:19px;line-height:1.5;margin-bottom:27px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:35px;border:0;border-radius:50px;background:var(--lime);color:var(--green);padding:17px 27px;font-weight:700;cursor:pointer}.button .arrow{font-size:24px;line-height:1}.note{display:block;font-size:14px;margin-top:13px}.hero-art{height:420px;position:relative;align-self:end}.pack{width:230px;height:315px;background:var(--lime);color:var(--green);padding:22px 18px 17px;position:absolute;display:flex;align-items:center;flex-direction:column;clip-path:polygon(0 0,100% 0,98% 4%,100% 8%,98% 96%,100% 100%,0 100%,2% 95%,0 7%,2% 3%);isolation:isolate}.pack:before,.pack:after{content:'';position:absolute;left [... excerpt: first 3200 of 17282 characters]