delight

Visão geral da skill delight

O que a delight faz bem

A skill delight ajuda você a adicionar momentos de alegria bem dosados a uma interface sem transformar o produto em algo caricato. Ela é voltada a designers, pessoas de frontend e times de produto com apoio de IA que já têm uma interface funcional e querem melhorar a qualidade emocional por meio de microinterações, textos mais envolventes, estados de carregamento, estados vazios, momentos de sucesso e surpresas sutis.

Quando a delight é mais indicada para UI Design

Use delight em UI Design quando o trabalho não for “redesenhar o app inteiro”, e sim “fazer esta experiência parecer mais memorável, acolhedora, refinada ou recompensadora”. Ela funciona melhor quando você já sabe qual tela, fluxo ou interação quer melhorar e precisa de ajuda para identificar onde o encanto se encaixa de forma natural.

O que diferencia a skill delight

Ao contrário de um prompt genérico do tipo “deixa isso mais bonito”, a delight é estruturada em torno de contexto e moderação. A orientação da fonte enfatiza encontrar momentos naturais para inserir delight, verificar aderência à marca e ao público, e garantir que esse toque reforce a tarefa em vez de atrapalhá-la. Por isso, ela tende a ser mais útil em trabalho real de produto do que uma inspiração ampla e sem critério.

Principal limitação para saber antes de adotar

A delight não é um cérebro de design independente. As próprias instruções dela exigem contexto prévio de design vindo de /frontend-design; se esse contexto ainda não existir, ela exige antes /teach-impeccable. Se você pular essa preparação, as saídas ficarão muito mais especulativas e menos alinhadas ao tom do seu produto.

Como usar a skill delight

Instale o contexto antes de acionar a delight

Esta skill do GitHub fica em .claude/skills/delight dentro de pbakaus/impeccable. O trecho do repositório não mostra um comando nativo delight install em SKILL.md, então trate-a como uma Claude skill que você adiciona ou copia para a sua configuração local de skills conforme o seu ambiente. Na prática, a exigência é menos sobre instalar pacote e mais sobre ordem de uso: rode primeiro a coleta de contexto com /frontend-design.

Leia este arquivo primeiro

Comece por:

• SKILL.md

Como esta pasta da skill expõe apenas SKILL.md, não há regras complementares, referências ou scripts para explicar comportamentos de borda. Isso significa que a qualidade da saída depende muito de quão bem você fornece o contexto do produto.

Pré-requisitos para usar a delight bem

Antes de usar a skill delight, reúna:

• a tela ou o fluxo que você quer melhorar
• o domínio do produto
• a personalidade da marca
• o nível de sofisticação do público
• se o momento deve parecer lúdico, profissional, excêntrico ou elegante
• restrições de acessibilidade, performance e confiança
• se o delight deve ser visível, sutil ou quase invisível

Se ainda não existir contexto de design, siga o caminho de pré-requisito da própria skill e execute /teach-impeccable, depois /frontend-design.

De que entrada a delight precisa

O melhor delight usage começa com um alvo específico, não com uma ambição vaga. Entradas fortes costumam incluir:

• uma superfície de UI: “settings save flow”, “empty project dashboard”, “file upload step”
• o problema emocional atual: “feels cold”, “waiting feels dead”, “success feels anticlimactic”
• contexto do usuário: “B2B finance admins”, “teens on mobile”, “creative pros on desktop”
• limites de tom: “confident, not silly”
• restrições de implementação: “CSS only”, “no sound”, “must support reduced motion”

Como transformar um objetivo vago em um prompt útil para a delight

Fraco:

• “Make this app more delightful.”

Melhor:

• “Use the delight skill on the onboarding empty state for a project management app. Audience is busy startup teams. Brand tone is optimistic and competent, not quirky. Add 3 subtle delight opportunities in copy, motion, or interaction that improve first-use confidence without slowing setup.”

Esse segundo é melhor porque dá à skill um local, um público, um teto de tom e um critério de sucesso.

Onde a delight costuma gerar mais valor

A skill aponta especificamente para momentos naturais como:

• estados de sucesso
• estados vazios
• estados de carregamento
• conquistas
• feedback de interação
• momentos de erro frustrantes
• Easter eggs opcionais

Para fins de decisão de instalação, isso importa: delight é melhor para enriquecer momentos dentro de uma jornada, não para gerar um design system completo.

Fluxo de trabalho sugerido para a skill delight

1. Reúna contexto de produto e marca com /frontend-design.
2. Escolha uma experiência concreta para trabalhar.
3. Peça à delight que identifique momentos candidatos para inserir delight.
4. Filtre as ideias por aderência ao domínio e às expectativas do usuário.
5. Mantenha apenas as ideias que reforçam clareza, confiança ou sensação de recompensa.
6. Traduza as ideias escolhidas em UI copy, especificações de motion ou tarefas de implementação.

Esse fluxo evita que a delight produza truques aleatórios.

Como delimitar a delight para que ela continue útil

Um erro comum é pedir delight para “o app inteiro”. Em vez disso, delimite por momento:

• depois de salvar
• primeiro estado vazio
• enquanto o upload está em andamento
• após concluir uma sequência
• no hover de uma ação principal
• ao se recuperar de um erro

A lógica da skill é orientada a eventos. Quanto mais específico for o evento, mais acionável tende a ser a saída.

Padrão de prompt prático que melhora a qualidade da saída

Use uma estrutura como:

• superfície-alvo
• emoção atual do usuário
• emoção desejada após a mudança
• tom da marca
• público
• tolerância a risco
• restrições de implementação
• exemplos a evitar

Exemplo:
“Apply the delight skill to the publish success state in a creator tool. Users currently feel uncertain whether publish succeeded. We want relief plus a sense of accomplishment. Tone is polished and creative, not playful. Suggest microcopy, motion, and one optional surprise detail. Avoid confetti and cartoon language.”

O que a delight não deve fazer

A orientação da fonte deixa explícito que delight deve reforçar, e não distrair. Na prática, descarte ideias que:

• atrasem a conclusão da tarefa
• escondam informações críticas
• enfraqueçam a credibilidade profissional
• sobrecarreguem os usuários com motion
• criem problemas de acessibilidade
• soem fora da marca em domínios sérios

Esse limite é um dos principais motivos para usar a delight skill em vez de um prompt genérico de criatividade.

FAQ da skill delight

A delight serve só para produtos mais lúdicos?

Não. A skill delight também é útil em produtos sérios, mas a forma de expressão muda. Em contextos de finanças, saúde ou enterprise, delight pode aparecer como feedback tranquilizador, transições elegantes, estados vazios mais humanos ou mensagens de sucesso serenas, em vez de algo explicitamente divertido.

A delight é amigável para iniciantes?

Sim, desde que você já saiba qual tela ou fluxo precisa de trabalho. O maior bloqueio para iniciantes não é complexidade, e sim falta de contexto. Se você não fornecer público, tom ou restrições do produto, a skill ainda vai gerar ideias, mas elas serão bem mais difíceis de validar.

Como a delight difere de um prompting comum?

Prompts comuns muitas vezes geram floreios superficiais. A delight é mais orientada a decisão: ela pergunta onde o delight deve entrar, se isso combina com a marca e como evitar distrações. Em geral, isso leva a menos ideias, mas a ideias mais prontas para ir a produção.

Quando não devo usar a skill delight?

Evite delight quando você ainda precisa resolver a estrutura central de UX, IA ou fluxo de tarefa. Ela é uma skill de refinamento, não um substituto para resolver problemas de usabilidade. Se o usuário ainda não consegue concluir a tarefa com clareza, delight é prematuro.

A delight ajuda com detalhes de implementação?

Indiretamente. A skill é guiada primeiro por conceito, mas você pode pedir que ela expresse as ideias como UI copy, comportamento de motion, notas de interação ou tarefas de frontend. Se você precisa de componentes reais ou código, combine a saída com o seu fluxo de frontend depois que o conceito for aprovado.

Como melhorar a skill delight

Dê à delight um contexto de produto melhor

A forma mais rápida de melhorar os resultados da delight é fornecer logo de início o enquadramento emocional e de marca. Inclua:

• o que os usuários estão fazendo
• o que eles sentem agora
• o que deveriam sentir em vez disso
• até onde a marca pode ir em personalidade
• o que é absolutamente proibido

Sem isso, a skill tende a cair em ideias genéricas de polimento.

Comece com um momento, não com a experiência inteira

Se a sua primeira rodada for ampla demais, a saída costuma vir difusa. Melhore o processo do delight guide isolando um momento e pedindo de 3 a 5 opções ranqueadas. Isso facilita a avaliação e reduz exageros pouco úteis.

Peça primeiro opções contidas

Um padrão forte de iteração é:

1. pedir ideias sutis
2. pedir uma variação mais ousada
3. comparar com a aderência à marca
4. manter a menor mudança que ainda gere um ganho emocional perceptível

Isso funciona especialmente bem para delight for UI Design em produtos profissionais.

Evite os modos de falha mais comuns

Formas comuns de a delight dar errado:

• motion em excesso
• humor que enfraquece a confiança
• copy com tom infantilizado
• polimento aplicado no momento errado
• “surpresa” que interrompe a conclusão da tarefa

Você pode evitar isso dizendo explicitamente “amplify, never block” no prompt e pedindo que a skill justifique por que cada ideia ajuda a tarefa.

Itere depois da primeira saída

Não pare na primeira lista de conceitos. Faça perguntas de continuação como:

• “Which option best fits a conservative enterprise tone?”
• “Reduce motion but keep the emotional payoff.”
• “Make this accessible for reduced-motion users.”
• “Turn the top idea into implementation-ready interaction notes.”

É normalmente nessa segunda rodada que o delight usage se torna relevante para produção, em vez de ficar apenas no campo da inspiração.