distill

Visão geral da skill distill

O que a distill faz

A distill é uma workflow de simplificação de UI voltada a reduzir um design à sua função essencial. Ela foi feita para momentos em que uma interface parece carregada, poluída, excessivamente decorada, cheia de recursos ou difícil de escanear. Em vez de sugerir mais UI, a distill vai na direção oposta: remover, combinar, ocultar e clarificar até que o principal objetivo do usuário fique inconfundível.

Quando a distill para UI Design faz mais sentido

Use distill for UI Design quando você já tiver uma tela, componente ou fluxo e quiser deixá-lo mais limpo sem perder utilidade. Ela se encaixa bem para designers, frontend engineers e product builders que estão lidando com:

• dashboards poluídos
• formulários com escolhas demais
• CTAs competindo entre si
• hierarquia visual fraca
• excesso de cores, estilos ou tratamentos de superfície
• feature creep que esconde a tarefa principal

O trabalho real que ela resolve

Na prática, o papel da distill skill não é “deixar mais bonito”. É identificar o único objetivo principal de uma UI e então reduzir tudo o que desvia a atenção desse objetivo. Isso significa decidir o que remover por completo, o que recolher com progressive disclosure, o que unificar e o que enfatizar.

O que diferencia a distill de um prompt genérico

Um prompt genérico como “simplifique essa UI” costuma gerar recomendações vagas. A distill é mais útil porque trata simplificação como uma auditoria deliberada:

1. avaliar de onde vem a complexidade
2. encontrar a tarefa essencial
3. remover elementos e variações desnecessárias
4. preservar a utilidade enquanto aumenta a clareza

Essa estrutura é o principal motivo para instalar a skill em vez de depender de prompting ad hoc.

Principal cuidado antes de adotar

A maior limitação é que a distill não funciona de forma isolada. As instruções da própria skill exigem que você invoque /frontend-design antes e, se ainda não houver contexto de design, execute /teach-impeccable antes de continuar. Se você procura uma skill plug-and-play que funcione sozinha, essa cadeia de dependências é o principal ponto de atenção logo na adoção.

Como usar a skill distill

Contexto de instalação da distill

Essa skill fica em pbakaus/impeccable, no caminho .agents/skills/distill. Um padrão comum de instalação é:

npx skills add pbakaus/impeccable --skill distill

Como o trecho do repositório expõe apenas o arquivo SKILL.md, trate esse arquivo como a fonte oficial de uso e parta do princípio de que a skill depende de skills complementares no mesmo repo.

Leia este arquivo primeiro

Comece por:

• SKILL.md

Para usar a distill, esse arquivo importa mais do que um README, porque é nele que estão o contrato real de invocação, o workflow e os passos pré-requisitos.

Respeite a cadeia de dependências exigida

Antes de usar a distill, siga esta ordem:

1. invoque /frontend-design
2. siga o protocolo de coleta de contexto
3. se ainda não houver contexto de design, rode /teach-impeccable
4. só então execute distill

Isso não é um refinamento opcional. A skill depende explicitamente de contexto de design prévio, então pular essa etapa aumenta a chance de uma simplificação rasa ou arbitrária.

Que tipo de input a distill precisa

A distill skill funciona melhor quando você fornece um alvo concreto junto com contexto suficiente para julgar o que é essencial. Inputs fortes normalmente incluem:

• a tela, componente ou fluxo específico
• a tarefa principal do usuário
• dores atuais, como excesso de elementos, ações demais, hierarquia fraca ou ruído visual
• restrições, como campos obrigatórios, textos legais, limites da plataforma ou regras existentes do design system

Exemplos mínimos de alvo:

• distill checkout sidebar
• distill onboarding modal
• distill analytics dashboard header

Como transformar um objetivo vago em um prompt forte para distill

Prompt fraco:

• “Simplify this page.”

Prompt melhor, no estilo distill guide:

• “Use distill on the settings screen. The main goal is helping users change notification preferences quickly. Current issues: too many card sections, repeated labels, three competing save actions, and decorative borders everywhere. Keep required compliance copy and email/SMS toggles. Recommend what to remove, combine, hide, or restyle.”

Por que isso funciona:

• define um único objetivo principal
• explicita prováveis fontes de complexidade
• marca o que não pode ser removido
• pede decisões acionáveis de simplificação, não uma crítica genérica

O que a distill procura analisar

Pelo material de origem, a distill faz uma auditoria ativa de:

• elementos em excesso
• variação excessiva de estilos
• sobrecarga de informação
• ruído visual
• hierarquia confusa
• feature creep

Se você já souber quais desses problemas se aplicam, diga isso. A skill toma decisões melhores quando não precisa inferir tudo a partir de contexto limitado.

Workflow prático recomendado para usar a distill

Um bom workflow no mundo real é:

1. reunir o contexto da tela com /frontend-design
2. declarar o único objetivo principal do usuário
3. executar a distill em um alvo específico
4. revisar as sugestões de remoção e consolidação
5. pedir uma justificativa de layout revisado ou um plano de implementação
6. testar se a versão simplificada ainda atende os edge cases obrigatórios

Isso importa porque é fácil exagerar na simplificação. O melhor uso da distill costuma ser uma passada para remover ruído e outra para verificar se as tarefas essenciais continuam preservadas.

Que tipo de saída esperar

Você deve esperar recomendações sobre:

• o que remover totalmente
• o que esconder com progressive disclosure
• o que unir em um único controle ou seção
• quais tratamentos visuais reduzir
• como reforçar a hierarquia em torno da ação principal

Não espere detalhes de implementação pixel-perfect apenas da skill, a menos que você faça perguntas de follow-up de forma explícita.

Dicas práticas que mudam a qualidade da saída

Para um uso melhor da distill:

• envie uma tela por vez, não o produto inteiro
• descreva a tarefa principal em uma frase
• separe os elementos obrigatórios dos opcionais
• mencione ações críticas para o negócio que precisam continuar visíveis
• inclua screenshots, listas de componentes ou estrutura de código sempre que possível

A lógica central da skill é “o que pode ser removido sem prejudicar o objetivo principal”, então qualquer ambiguidade sobre o que é obrigatório é a forma mais rápida de obter recomendações fracas.

Quando a distill é especialmente eficaz

A distill skill é mais forte em UIs que já funcionam, mas parecem lotadas. Ela é particularmente útil para:

• ferramentas internas com anos de controles acumulados
• telas enterprise com dados demais visíveis ao mesmo tempo
• views mobile em que a densidade prejudica a escaneabilidade
• passes de redesign em que o escopo do produto está fixo, mas a clareza é ruim

FAQ da skill distill

A distill é boa para iniciantes?

Sim, desde que você já tenha algo concreto para simplificar. A skill oferece uma lente de simplificação mais clara do que uma crítica de design em aberto. O principal desafio para iniciantes é o workflow pré-requisito: você precisa seguir a preparação de contexto de design do repo em vez de tratar a distill como um comando mágico de uma linha.

A distill serve só para limpeza visual?

Não. A distill skill também mira complexidade estrutural: ações demais, informação demais visível de uma vez, prioridade pouco clara e excesso de funcionalidades. Ela trata tanto de interação e hierarquia quanto de styling de superfície.

Quando eu não deveria usar a distill?

Não use a distill quando o principal problema for capacidade ausente, requisitos pouco claros ou definição ruim do fluxo da tarefa. Simplificar uma UI antes de entender o objetivo real do usuário pode levar à remoção das coisas erradas. Ela também não é uma boa escolha se você precisa de ideação ampla em vez de redução.

distill vs prompting comum

A vantagem da distill sobre um prompt normal como “deixe isso mais limpo” é o modelo de decisão mais restrito. Ela pergunta explicitamente o que é necessário, o que é nice-to-have e o que pode ser removido, ocultado ou combinado. Isso a torna melhor para decisões de decluttering do que para exploração visual livre.

A distill funciona sem o restante do impeccable?

Não de forma limpa. Pelo material de origem, a distill espera que /frontend-design — e às vezes /teach-impeccable — sejam executados antes. Se o seu ambiente não consegue invocar essas skills complementares, ainda dá para imitar o workflow manualmente, mas você perde parte da preparação de contexto pensada pelo autor.

A distill faz sentido para times code-first?

Sim. A decisão de distill install faz sentido para times com forte foco em frontend, porque simplificar quase sempre depende de entender o que é realmente obrigatório no código e na lógica do produto. Ela é especialmente útil quando a dívida de design aparece como controles demais, estados demais e tratamentos visuais demais na UI já entregue.

Como melhorar a skill distill

Dê à distill um único objetivo principal

A melhoria de maior impacto é declarar uma única tarefa principal para a UI-alvo. O próprio material de origem enfatiza que deve haver ONE primary user goal. Se você passar vários objetivos com o mesmo peso, a distill skill não conseguirá simplificar com firmeza, porque tudo começará a parecer essencial.

Marque o que pode sair, o que precisa ficar e o que é incerto

Um prompt forte para a distill separa:

• must keep
• safe to remove
• uncertain or negotiable

Esse enquadramento evita dois modos comuns de falha: uma saída tímida que não remove nada, ou uma saída agressiva que corta elementos necessários.

Nomeie as fontes reais de complexidade

Não diga só “está muito poluído”. Diga à distill se a poluição vem de:

• botões demais
• informação repetida
• estilos visuais demais
• bordas ou sombras desnecessárias
• agrupamento ruim
• opções visíveis demais

Isso melhora a precisão das recomendações porque a skill já raciocina dentro dessas categorias.

Peça decisões de remoção, não crítica genérica

Um prompt melhor é:

• “Use distill and list what should be removed, combined, hidden, or visually softened.”

Um prompt mais fraco é:

• “Thoughts on this design?”

O primeiro gera uma saída útil e implementável. O segundo abre espaço para comentários amplos e reduz o valor do workflow do distill guide.

Use uma iteração para simplificar e outra para validar

Depois da primeira passada, pergunte:

• que riscos de usabilidade a simplificação introduz
• quais edge cases podem agora estar escondidos demais
• se o CTA principal ficou mais claro
• se ações secundárias críticas continuam fáceis de encontrar

Essa segunda passada melhora o uso da distill porque a qualidade da simplificação não depende só de reduzir, mas de preservar as capacidades certas.

Forneça artefatos, não apenas descrições

Se possível, envie:

• um screenshot
• um wireframe
• um inventário de componentes
• a hierarquia atual de informação
• snippets de código relevantes para UI condicional

Quanto mais concreto for o alvo, mais confiança a distill terá para identificar o que é decorativo, redundante ou estruturalmente desnecessário.

Fique atento aos modos de falha mais comuns

Resultados fracos normalmente acontecem quando:

• o propósito principal da tela não está claro
• toda solicitação de stakeholder é tratada como igualmente importante
• restrições obrigatórias foram omitidas
• você pede para simplificar o produto inteiro de uma vez
• a coleta de contexto com /frontend-design foi ignorada

Se a distill parecer genérica, a causa mais comum não é a skill em si, mas um input pouco especificado.

Peça à distill para explicar os tradeoffs

Uma das melhores formas de aumentar a confiança na saída é pedir:

• que benefício para o usuário cada remoção traz
• qual custo de discoverability vem ao ocultar funcionalidades
• por que um controle unificado é melhor do que controles separados

Isso transforma a distill skill de uma ferramenta de limpeza em uma ferramenta de apoio à decisão, o que tende a gerar mais valor na adoção por times.

Combine a distill com um follow-up de implementação

Depois que a distill apontar a direção de simplificação, faça uma segunda solicitação pedindo:

• estrutura de layout revisada
• escolhas de componentes alinhadas ao design system
• notas de implementação frontend
• acceptance criteria para a tela simplificada

É nessa passagem de bastão que a skill muitas vezes deixa de ser apenas conceitualmente correta e passa a ser realmente útil na prática.