By name: jhow-studio-design description: Use quando precisar de design e UX - criar interfaces UI, conduzir pesquisa de UX, manter identidade de marca, storytelling visual, adicionar elementos de delight/whimsy, melhorar UX e acessibilidade, polir/refinar UI, ou escrever microcopy para interfaces.
Jhow Studio Design 🎨
Skill para design, UX e identidade visual do Jhow Studio. Fornece acesso a agentes especializados para criar interfaces, pesquisar usuários, manter consistência de marca e adicionar elementos de deleite.
Matriz de Decisão Rápida
| Se você precisar de... | Use o agente... | Arquivo |
|---|---|---|
| Criar interfaces, componentes ou design systems | ui-designer | references/ui-designer.md |
| Pesquisar usuários, journey maps ou validar decisões | ux-researcher | references/ux-researcher.md |
| Diretrizes de marca, consistência visual ou assets | brand-guardian | references/brand-guardian.md |
| Narrativas visuais, infográficos ou apresentações | visual-storyteller | references/visual-storyteller.md |
| Adicionar deleite/whimsy após mudanças UI/UX | whimsy-injector | references/whimsy-injector.md |
| Melhorias de acessibilidade e micro-UX | palette | references/palette.md |
| Refinamentos visuais, animações ou polimento | polish | references/polish.md |
| Microcopy, mensagens de erro ou textos de UI | ux-writer | references/ux-writer.md |
Instruções de Seleção de Agente
Fluxo de Decisão
Precisa criar algo novo?
├── Interface/componente/design system → ui-designer
├── Identidade de marca/guidelines → brand-guardian
├── Narrativa visual/infográfico → visual-storyteller
└── Fazer melhorias em algo existente?
├── Pesquisar/entender usuários → ux-researcher
├── Adicionar deleite/diversão → whimsy-injector
├── Acessibilidade/UX básico → palette
├── Refinamento visual/animation → polish
└── Textos/microcopy → ux-writer
Quando Usar Cada Agente
ui-designer
- Cenário: Criar telas, componentes, fluxos ou design systems
- Input: Descrição do problema, referências, requisitos
- Output: Especificações de design, tokens, componentes
ux-researcher
- Cenário: Entender usuários, validar hipóteses, criar personas
- Input: Perguntas de pesquisa, dados disponíveis
- Output: Insights, journey maps, recomendações
brand-guardian
- Cenário: Criar ou manter identidade visual da marca
- Input: Valores da marca, contexto de mercado
- Output: Guidelines, assets, design tokens
visual-storyteller
- Cenário: Comunicar ideias complexas visualmente
- Input: Dados, conceitos, mensagem principal
- Output: Infográficos, apresentações, ilustrações
whimsy-injector ⚡
- Cenário: SEMPRE após mudanças UI/UX - adiciona deleite
- Input: Interface existente, pontos de interação
- Output: Animações, micro-interações, copy divertido
palette
- Cenário: Melhorias rápidas de acessibilidade e UX
- Input: Interface com problemas de a11y ou UX
- Output: Correções de acessibilidade, melhorias de interação
polish
- Cenário: Refinar visualmente algo que já funciona
- Input: Interface funcional mas sem brilho
- Output: Animações, ajustes de espaçamento, hierarquia
ux-writer
- Cenário: Melhorar textos da interface
- Input: Textos existentes, contexto de uso
- Output: Microcopy otimizado, mensagens claras
Workflows Recomendados
1. Novo Projeto (Do Zero)
ux-researcher → ui-designer → brand-guardian → whimsy-injector
- Pesquisar e entender usuários
- Criar interfaces baseadas nos insights
- Definir identidade visual coesa
- Adicionar elementos de deleite
2. Redesign de Funcionalidade
ux-researcher → ui-designer → polish → ux-writer → whimsy-injector
- Validar problemas com pesquisa
- Redesenhar solução
- Refinar visualmente
- Otimizar textos
- Adicionar deleite
3. Sprint de Melhorias UX
palette + polish + ux-writer (paralelo) → whimsy-injector
- Múltiplas micro-melhorias simultâneas
- Finalizar com elementos de deleite
4. Nova Landing Page/Marketing
brand-guardian → visual-storyteller → ux-writer → polish
- Garantir consistência de marca
- Criar narrativa visual
- Otimizar copy
- Refinar apresentação
5. Auditoria de Qualidade
palette (acessibilidade) → polish (visual) → ux-writer (textos) → whimsy-injector (deleite)
- Verificar acessibilidade
- Refinar visual
- Melhorar textos
- Auditar deleite
Arquivos de Referência
Agentes Principais
- ui-designer.md - Design de interfaces e componentes
- ux-researcher.md - Pesquisa e análise de usuários
- brand-guardian.md - Identidade e consistência de marca
- visual-storyteller.md - Narrativas visuais e infográficos
Agentes de Refinamento
- whimsy-injector.md - Deleite e elementos surpresa
- palette.md - Acessibilidade e micro-UX
- polish.md - Refinamento visual e animações
- ux-writer.md - Microcopy e textos de interface
Dicas de Uso
- Sempre termine com whimsy-injector após alterações visuais
- Comece com ux-researcher quando não tiver certeza do que construir
- Use palette para quick wins de acessibilidade
- Combine polish + ux-writer para interfaces mais profissionais
- brand-guardian primeiro em projetos novos para definir base
Métricas de Sucesso
- Interface segue guidelines de acessibilidade (WCAG AA)
- Consistência visual entre telas
- Copy claro e útil
- Elementos de deleite presentes em momentos-chave
- Design implementável dentro do sprint