distill

Visão geral da skill distill

O que a distill faz

A distill é uma skill focada em simplificação de design de UI, pensada para reduzir uma tela ao seu papel essencial. Ela é indicada para momentos em que a interface parece carregada, poluída, decorada demais ou cheia de opções, e você quer uma direção mais limpa e forte em vez de adicionar mais recursos.

Quando a distill for UI Design é mais indicada

Use distill for UI Design quando você já tem uma tela, fluxo ou componente e precisa deixá-lo mais calmo e claro. Ela atende bem designers, engenheiros frontend, times de produto e agentes de IA que estejam trabalhando em:

• limpar dashboards, formulários, configurações e páginas de detalhe
• reduzir ações concorrentes
• simplificar a hierarquia visual
• remover ruído decorativo
• transformar layouts “ricos em features” em layouts centrados na tarefa

O trabalho real que ela resolve

As pessoas não instalam a distill skill só para conseguir um “design mais simples”. Elas a instalam para responder perguntas mais difíceis:

• O que deve ficar?
• O que deve sair?
• O que deve ser escondido, agrupado ou adiado?
• Qual é o único objetivo principal do usuário nesta tela?

É isso que torna a distill mais útil do que um prompt genérico de “deixa isso mais limpo”. O valor dela está em forçar priorização antes do redesign.

Principais diferenciais

O principal diferencial é que a distill não é um prompt de estilo isolado. A skill depende explicitamente de contexto de design vindo antes:

• execute /frontend-design primeiro
• se ainda não houver contexto de design, execute /teach-impeccable antes
• pare e faça perguntas de esclarecimento se o objetivo principal ou as restrições não estiverem claros

Essa dependência importa na decisão de adoção: a distill funciona melhor dentro do sistema de design mais amplo impeccable do que como um prompt solto e isolado.

O que saber antes de instalar

Esta é uma skill leve, com um arquivo principal, SKILL.md, e sem scripts, exemplos ou assets de referência incluídos. Isso facilita a inspeção, mas também significa que a qualidade da saída depende fortemente do contexto que você fornece. Se você procura um guia distill autossuficiente e com muita estrutura pronta, este caminho no repositório é mais orientado por princípios do que por ferramentas.

Como usar a skill distill

Contexto de instalação da distill

O SKILL.md de origem não inclui um comando de instalação, então use seu fluxo normal de instalação de Claude Skills para o repositório e aponte para a skill distill dentro de pbakaus/impeccable. Se você instalar a partir do repo, o caminho relevante é:

https://github.com/pbakaus/impeccable/tree/main/.claude/skills/distill

Como esta skill pode ser invocada pelo usuário e aceita uma dica de argumento [target], o padrão de uso mais prático é chamar a distill para uma tela, fluxo ou componente específico, e não para um pedido vago no nível do produto inteiro.

Leia este arquivo primeiro

Comece por:

• SKILL.md

Não há arquivos complementares como README.md, metadata.json, rules/ ou references/ nesta pasta da skill, então praticamente todo o comportamento útil está definido nesse único arquivo. Para avaliar a instalação, isso é uma boa notícia: dá para entender rapidamente toda a distill skill.

A dependência obrigatória que muita gente vai ignorar

Antes de usar a distill, a skill orienta executar /frontend-design. Essa etapa anterior contém princípios de design, anti-patterns e o “Context Gathering Protocol”. Se ainda não existir contexto de design, espera-se que você execute /teach-impeccable primeiro.

Isso importa porque resultados fracos geralmente vêm de pular essa preparação. Se você chamar a distill diretamente sobre um screenshot ou uma reclamação genérica, o modelo pode remover as coisas erradas.

Que tipo de input a distill precisa

Um uso forte da distill começa com um alvo concreto e contexto suficiente para identificar a principal função da UI. Bons inputs incluem:

• a tela ou componente exato
• a tarefa principal do usuário
• os problemas atuais, como ações demais ou hierarquia fraca
• restrições duras, como compliance, controles obrigatórios ou limites de engenharia
• se a simplificação deve remover, agrupar, esconder ou revelar conteúdo progressivamente

Um input fraco:

• “Simplify this page.”

Um input melhor:

• “Use distill on our analytics dashboard. The primary user goal is to spot traffic changes in under 10 seconds. Keep the date range picker and export action. We can remove secondary filters from the default view if needed. Current issues: too many cards, repeated metrics, heavy borders, and three competing CTAs.”

Como transformar um objetivo vago em um prompt completo

Uma estrutura prática de prompt para guia distill:

1. Nomeie o alvo.
2. Declare o único objetivo principal do usuário.
3. Liste os elementos que precisam ser mantidos.
4. Liste candidatos prováveis para remoção ou ocultação.
5. Diga o que está parecendo poluído.
6. Peça um plano de simplificação antes do redesign final.

Exemplo:

“Apply distill to the onboarding modal for first-time team admins. The one goal is helping them invite teammates. Must keep: email entry, role selector, skip option. Nice-to-have elements that can be deferred: tips carousel, template preview, feature badges. The current design feels crowded because it mixes setup, education, and marketing. First identify complexity sources, then propose what to remove, combine, or hide.”

Fluxo de trabalho recomendado

Um fluxo de alto sinal para usar a distill:

1. Reúna contexto via /frontend-design.
2. Confirme que o objetivo principal do usuário é único.
3. Execute a distill em uma tela só, não no produto inteiro.
4. Revise o que ela recomenda remover, combinar ou esconder.
5. Verifique se algum elemento “removido” na verdade é exigido por política, suporte ou lógica de negócio.
6. Itere com restrições mais precisas.
7. Só então avance para refinamento visual ou implementação.

Essa ordem importa porque a distill é, прежде de tudo, uma ferramenta de priorização, não uma etapa final de acabamento.

O que a distill provavelmente vai analisar

Pelo texto da skill, a distill procura por:

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

Ela também incentiva explicitamente a identificar os “20% que entregam 80% do valor”. Se seu time tem dificuldade para cortar escopo, esse enquadramento é um dos motivos mais úteis para adotar a skill.

Quando parar e pedir esclarecimentos em vez de seguir em frente

A orientação de origem diz para parar e fazer perguntas se o codebase ou o prompt não deixarem claros estes pontos:

• o objetivo principal do usuário
• o que é necessário versus o que é apenas desejável
• o que pode ser removido, escondido ou combinado

Esse é um limite importante. Se o seu time não consegue concordar sobre a tarefa central da tela, a distill vai expor essa ambiguidade de produto — não resolvê-la magicamente.

Melhores alvos para o primeiro uso da distill

Bons alvos iniciais:

• uma página de configurações lotada
• um dashboard com cards demais
• um formulário com muitos campos opcionais exibidos de uma vez
• um modal tentando cumprir várias funções
• uma seção de landing page com vários CTAs competindo entre si

Maus alvos iniciais:

• fluxos altamente regulados, em que remoções são fortemente limitadas
• trabalho de design systems sem uma tela concreta
• telas que já são mínimas, mas sofrem com problemas de interação

O que esperar da saída

Espere que a distill skill seja mais útil quando ela produzir:

• um diagnóstico das fontes de complexidade
• uma hierarquia mais clara de conteúdo e ações
• recomendações de remoção, agrupamento ou divulgação progressiva
• um caminho de usuário mais focado

Não espere transformações de código, auditorias automatizadas ou diffs de componentes prontos para implementação apenas com esta skill.

FAQ da skill distill

A distill é melhor do que um prompt comum de simplificação?

Na maioria das vezes, sim — se você precisa de simplificação estruturada, e não de uma limpeza genérica. A skill oferece uma lente repetível para encontrar fontes de complexidade e obriga a definir um único objetivo principal. Um prompt comum pode dizer “deixa mais limpo”, mas a distill tende mais a perguntar o que realmente deve desaparecer.

A distill é amigável para iniciantes?

Sim, mas com uma ressalva. A linguagem é direta, e o repositório é fácil de inspecionar porque basicamente gira em torno de um arquivo só. A parte mais difícil não é a instalação; é ter contexto de UI suficiente para usar a skill bem. Iniciantes devem começar com uma única tela e restrições explícitas.

Eu preciso do resto do repositório impeccable?

Você não precisa ler o repositório inteiro antes de testar a instalação da distill, mas deve respeitar a dependência documentada de /frontend-design e, se necessário, de /teach-impeccable. Esta skill foi pensada para funcionar dentro desse ecossistema, não para substituí-lo por completo.

Quando eu não devo usar a distill?

Evite a distill quando o principal problema for:

• lógica de interação quebrada, e não excesso de elementos
• falta de pesquisa com usuários
• estratégia de produto pouco clara em várias telas
• questões de acessibilidade ou compliance que exigem soluções aditivas, e não subtração

Nesses casos, simplificar por si só pode ser enganoso.

A distill funciona para tarefas que não são de UI?

Pelas evidências do repositório, o foco está em UI e frontend design. A redação, a dependência de /frontend-design e as categorias de análise giram em torno da simplificação de interfaces. Se você quer simplificar copy, sistemas ou arquitetura, trate isso mais como inspiração do que como um encaixe garantido.

Como melhorar a skill distill

Dê à distill uma tela e um objetivo

A forma mais rápida de melhorar a saída da distill é reduzir o escopo. “Simplify our app” é amplo demais. “Distill the billing settings page so users can update payment method faster” é acionável. A skill funciona melhor quando o alvo tem uma única tarefa dominante.

Separe o que é obrigatório do que é negociável

Um bom prompt deve distinguir:

• conteúdo ou ações obrigatórios
• itens opcionais que podem ser escondidos ou removidos
• elementos decorativos que podem ser eliminados primeiro

Sem isso, a distill pode recomendar cortar algo politicamente ou funcionalmente inegociável, o que desperdiça um ciclo de revisão.

Diga à distill que tipo de simplificação você quer

Nem toda simplificação significa remover. Os resultados melhoram quando você especifica as alavancas preferidas:

• remover
• combinar
• esconder por trás de divulgação progressiva
• reduzir a ênfase visual
• distribuir em etapas em vez de mostrar tudo de uma vez

Isso transforma o uso da distill de “deixa mais simples” em uma operação de design bem mais precisa.

Inclua sintomas reais de complexidade

Não diga apenas que a tela parece poluída. Nomeie a poluição:

• cinco botões acima da dobra
• métricas duplicadas
• três estilos de texto sem função clara
• cards com sombras, bordas e fundos coloridos ao mesmo tempo
• configurações secundárias visíveis antes da conclusão da tarefa principal

Sintomas concretos ajudam o modelo a mapear o problema para as próprias categorias de complexidade da skill.

Fique de olho no principal modo de falha

O maior risco na distill for UI Design é simplificar demais a coisa errada. Uma tela pode ficar visualmente mais limpa e, ainda assim, se tornar menos útil se contexto crítico, sinais de confiança ou controles de edge case desaparecerem. Depois da primeira passada, revise cada remoção proposta à luz das tarefas reais do usuário.

Peça uma resposta em etapas

Um prompt mais forte pede a saída em estágios:

1. identificar as fontes de complexidade
2. definir a tarefa essencial
3. listar remoções, agrupamentos e itens ocultos
4. propor a estrutura simplificada

Essa abordagem em etapas torna o guia distill mais auditável e mais fácil de refinar do que pedir um redesign imediato.

Itere com restrições depois da primeira passada

Se a primeira saída estiver agressiva demais ou conservadora demais, refine com instruções específicas:

• “Keep all legal disclosures visible.”
• “Do not add more steps.”
• “We can hide advanced filters behind an accordion.”
• “The primary CTA must remain above the fold.”

Essa é a forma mais prática de melhorar os resultados da distill skill sem reescrever o briefing inteiro.

Combine a distill com revisão de implementação

Depois que a distill identificar o que cortar ou reduzir em destaque, passe o resultado pelo seu fluxo normal de revisão de frontend e produto. A skill é melhor em enquadrar decisões. Seu time ainda precisa validar tratamento de estado, acessibilidade, clareza de conteúdo e edge cases antes de colocar em produção.