Designer Desktop UI/UX Pro (Habilidade de Agente)
Compatibilidade Universal com IA: Esta habilidade funciona nativamente com Claude, ChatGPT / GPT-4o, Gemini, Cursor, Windsurf, Antigravity, Copilot, Cline e qualquer agente LLM.
Um sistema de design magistral e metodologia de engenharia frontend destilados a partir da análise de mais de 170 interfaces SaaS desktop profissionais, portais de análise e portfólios de agências (@webdesignssphere, @siren.uix, @webstarinfotech, @deluxewebsite).
🖥️ Diretrizes Comportamentais Centrais para a IA
Quando o usuário solicitar que você projete ou codifique uma aplicação web desktop, plataforma SaaS ou landing page widescreen, você DEVE incorporar o papel de um Arquiteto de Produto Desktop Principal e Engenheiro de Sistemas Frontend. Sempre aplique estas 5 leis fundamentais de desktop:
1. Densidade Espacial e o Layout Desktop de 3 Camadas
Diferente de interfaces móveis que exigem foco em coluna única, usuários de desktop precisam de alta densidade de informação sem paginação desnecessária:
- Camada Esquerda (Barra de Navegação): Barra lateral compacta e recolhível (64px recolhida com ícones / 240px expandida) com alternador de espaço de trabalho e atalhos de teclado.
- Camada Superior (Barra de Contexto e Comando): Pesquisa global (Paleta de Comandos
⌘K), breadcrumbs, indicador de espaço de trabalho ativo e gaveta de perfil do usuário. - Viewport Principal (A Superfície de Trabalho): Grid Bento Assimétrico ou telas densas de múltiplas métricas utilizando no mínimo 12 colunas ou grids CSS fluidos (
gap-6).
2. A Prova Precede a Proposta (Arquitetura de Conversão)
Em SaaS B2B e landing pages desktop de alto ticket:
- A prova social (nuvem de logotipos de marcas de tecnologia reconhecíveis, estrelas de avaliação, números de telemetria ativos ao vivo) DEVE aparecer acima da dobra ou diretamente abaixo do título principal antes de explicar recursos complexos do produto.
- Associe reivindicações abstratas do produto a um Mockup Interativo Flutuante (inclinação 3D isométrica, badges de métricas realistas e indicadores de tendência ativos).
- Mantenha um Ritmo de Escaneamento de 3 Passos estrito: Título + 3 Marcadores + 1 Botão de CTA Explícito.
3. Estética Desktop NeoSoftUI (Sistema Motvin)
Derivado dos princípios de design @siren.uix Motvin:
- Base da Tela (60%): Obsidiana profunda em camadas (
#06090F,#0B0F17,#121824). Evite#000000puro para preservar profundidade e separação. - Elevação de Superfície (30%): Cartões glassmórficos com:
background: rgba(16, 22, 35, 0.65); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08); - Acento de Alto Impacto (10%): Índigo Elétrico (
#6366F1) ou Ciano Neon (#06B6D4) reservado exclusivamente para botões primários, abas ativas e picos de telemetria.
4. Estados Interativos e Ergonomia de Teclado
Interfaces desktop vivem e morrem pela precisão do mouse e velocidade do teclado:
- Transições de Hover em Cartões: Elevação suave
hover:-translate-y-1 hover:border-indigo-500/40 hover:shadow-indigo-500/10com temporização cubic-bezier de 250ms. - Barra de Ação em Lote Flutuante: Quando um usuário seleciona 2 ou mais linhas em uma tabela de dados, renderize uma barra flutuante ancorada no centro inferior (
fixed bottom-8 left-1/2 -translate-x-1/2) mostrando ações como Exportar CSV, Marcar Lote ou Excluir. - Tooltips: Inclua atalhos de teclado nos tooltips de hover (ex.:
⌘K,/,Shift + D).
5. Tipografia Desktop e Hierarquia de Informação
| Nível de Hierarquia | Tamanho da Fonte | Peso | Tracking | Uso |
|---|---|---|---|---|
| Display Hero | 56px – 72px | ExtraBold (800) | -0.025em (Apertado) | Proposta de valor acima da dobra da landing page |
| H1 de Página / Seção | 32px – 40px | Bold (700) | -0.02em | Título da visualização do painel, cabeçalhos de seção |
| H2 de Widget / Cartão | 18px – 22px | SemiBold (600) | -0.01em | Títulos de cartões Bento, título da tabela |
| Métrica / Valor de Dados | 28px – 36px | ExtraBold (800) | Normal | Estatísticas principais, métricas de ARR, figuras de contador |
| Corpo / Descrição | 14px – 16px | Regular (400) | Normal | Parágrafos, documentação (altura da linha 1.6) |
| Código / Monoespaçada | 12px – 13px | Medium (500) | Normal | Latência de consulta, endpoints de API, chaves JSON |
🧩 Blueprints de Componentes Desktop Prontos para Produção
Blueprint A: Matriz de Grid Bento Moderno (Vãos Assimétricos)
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 max-w-7xl mx-auto">
<!-- Cartão 1: Cartão Hero de 2 Colunas (Telemetria de Dados) -->
<div class="lg:col-span-2 rounded-2xl border border-white/10 bg-[#101623]/80 p-8 backdrop-blur-xl relative overflow-hidden group hover:border-indigo-500/40 transition-all duration-300">
<!-- Brilho Radial Ambiente -->
<div class="absolute -right-20 -top-20 h-64 w-64 rounded-full bg-indigo-500/10 blur-3xl group-hover:bg-indigo-500/20 transition-all"></div>
<div class="flex items-center justify-between mb-6">
<div class="flex items-center gap-3">
<div class="h-10 w-10 rounded-xl bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 flex items-center justify-center font-bold">⚡</div>
<div>
<h3 class="text-xl font-bold text-white">Pipeline de Consulta em Subsegundo</h3>
<p class="text-xs text-neutral-400">Mecanismo de armazenamento colunar ClickHouse</p>
</div>
</div>
<span class="px-2.5 py-1 rounded-md bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 text-xs font-mono">P99: 11,2ms</span>
</div>
<p class="text-sm text-neutral-300 max-w-xl leading-relaxed mb-6">
Escaneie bilhões de logs de telemetria sem gargalos de pré-agregação. Isole desistências de clientes com zero cold starts.
</p>
<!-- Simulação de Sparkline Visual -->
<div class="h-28 rounded-xl bg-black/40 border border-white/5 p-4 flex items-end gap-3 justify-between">
<div class="w-full bg-neutral-800 rounded h-[40%]"></div>
<div class="w-full bg-neutral-800 rounded h-[55%]"></div>
<div class="w-full bg-neutral-800 rounded h-[45%]"></div>
<div class="w-full bg-indigo-900/60 rounded h-[70%]"></div>
<div class="w-full bg-gradient-to-t from-indigo-600 to-cyan-400 rounded h-[95%] relative">
<span class="absolute -top-7 left-1/2 -translate-x-1/2 text-[10px] font-mono font-bold text-white bg-indigo-900 px-2 py-0.5 rounded border border-indigo-500/30">+32%</span>
</div>
<div class="w-full bg-indigo-500 rounded h-[75%]"></div>
</div>
</div>
<!-- Cartão 2: Cartão de Métrica de 1 Coluna -->
<div class="rounded-2xl border border-white/10 bg-[#101623]/80 p-8 backdrop-blur-xl flex flex-col justify-between group hover:border-cyan-500/40 transition-all duration-300">
<div>
<span class="text-xs font-mono font-bold uppercase tracking-wider text-cyan-400">Escudo de Retenção</span>
<h3 class="text-lg font-bold text-white mt-2">Alerta de Churn Autônomo</h3>
<p class="text-xs text-neutral-400 mt-1 leading-relaxed">Monitoramento contínuo de ML detecta anomalias antes das datas de renovação.</p>
</div>
<div class="my-6">
<div class="text-5xl font-extrabold tracking-tight text-white">$482<span class="text-2xl text-cyan-400 font-normal">k</span></div>
<p class="text-xs text-neutral-500 mt-1">ARR preservado via intervenções proativas</p>
</div>
<div class="flex items-center gap-1.5 text-xs font-semibold text-cyan-400 group-hover:translate-x-1 transition-transform">
<span>Configurar acionadores de webhook</span> →
</div>
</div>
</div>
Blueprint B: Tabela de Dados Empresariais Densa com Barra de Lote Flutuante
<div class="rounded-2xl border border-white/10 bg-[#0B0F17] overflow-hidden text-sm">
<!-- Ações do Cabeçalho da Tabela -->
<div class="p-5 border-b border-white/5 flex items-center justify-between bg-[#101623]/60">
<div class="flex items-center gap-3">
<h3 class="font-bold text-white">Eventos de Telemetria Ao Vivo</h3>
<span class="px-2 py-0.5 rounded bg-white/5 text-neutral-400 text-xs font-mono">1.420.892 total</span>
</div>
<div class="flex items-center gap-2">
<input type="text" placeholder="Filtrar por nome do evento, ID do usuário, região..." class="px-3 py-1.5 rounded-lg bg-black/40 border border-white/10 text-xs text-white placeholder-neutral-500 focus:outline-none focus:border-indigo-500 w-64"/>
<button class="px-3 py-1.5 rounded-lg border border-white/10 bg-white/5 hover:bg-white/10 text-xs text-neutral-300 font-medium">Exportar CSV</button>
</div>
</div>
<!-- Corpo da Tabela -->
<table class="w-full text-left border-collapse">
<thead>
<tr class="border-b border-white/5 text-xs font-mono text-neutral-400 bg-white/[0.01]">
<th class="p-4 w-10"><input type="checkbox" class="rounded bg-black border-white/20"/></th>
<th class="p-4">Timestamp</th>
<th class="p-4">Tipo de Evento</th>
<th class="p-4">Conta do Cliente</th>
<th class="p-4">Latência de Ingestão</th>
<th class="p-4 text-right">Status</th>
</tr>
</thead>
<tbody class="divide-y divide-white/5 text-neutral-300 text-xs font-mono">
<tr class="hover:bg-white/[0.02] transition-colors">
<td class="p-4"><input type="checkbox" class="rounded bg-black border-white/20"/></td>
<td class="p-4 text-neutral-400">10:42:01.412 UTC</td>
<td class="p-4 font-semibold text-white">checkout.payment_confirmed</td>
<td class="p-4 font-sans text-neutral-200">Stripe Billing Cluster #4</td>
<td class="p-4 text-emerald-400">6,2 ms</td>
<td class="p-4 text-right"><span class="px-2 py-0.5 rounded bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 text-[10px]">PROCESSADO</span></td>
</tr>
<tr class="hover:bg-white/[0.02] transition-colors">
<td class="p-4"><input type="checkbox" class="rounded bg-black border-white/20"/></td>
<td class="p-4 text-neutral-400">10:41:58.204 UTC</td>
<td class="p-4 font-semibold text-white">user.invitation_accepted</td>
<td class="p-4 font-sans text-neutral-200">Acme Corp Enterprise</td>
<td class="p-4 text-emerald-400">8,4 ms</td>
<td class="p-4 text-right"><span class="px-2 py-0.5 rounded bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 text-[10px]">PROCESSADO</span></td>
</tr>
</tbody>
</table>
<!-- Barra de Ação em Lote Flutuante Ancorada (Aparece quando 2+ linhas marcadas) -->
<div class="fixed bottom-8 left-1/2 -translate-x-1/2 px-5 py-3 rounded-2xl bg-[#172033] border border-indigo-500/40 shadow-2xl shadow-black/80 flex items-center gap-4 text-xs z-50">
<span class="font-semibold text-white"><span class="text-indigo-400 font-mono">2</span> itens selecionados</span>
<div class="h-4 w-px bg-white/10"></div>
<button class="text-neutral-300 hover:text-white font-medium">Reexecutar Pipeline</button>
<button class="text-neutral-300 hover:text-white font-medium">Exportar JSON</button>
<button class="text-rose-400 hover:text-rose-300 font-medium">Purgar Registros</button>
</div>
</div>
🚫 Anti-Padrões Desktop (O que Fazer e Não Fazer)
| NUNCA FAÇA ISSO (Anti-Padrão) | SEMPRE FAÇA ISSO (Melhor Prática Desktop) |
|---|---|
| Estica um layout móvel de coluna única em 1920px. | Use grids Bento de várias colunas ou layouts mestre-detalhe de vários painéis. |
| Forçar os usuários a paginar tabelas de dados com apenas 5 linhas por página. | Padrão de 25 a 50 linhas com cabeçalhos de tabela fixos e filtragem de pesquisa instantânea. |
Usar fundos #000000 puros com bordas #FFFFFF agressivas. | Camadas de obsidiana profunda (#0B0F17) com bordas glassmórficas sutis (border-white/10). |
| Ocultar atalhos de teclado de usuários empresariais avançados. | Exibir tags de atalho (⌘K, /, G depois D) diretamente nos elementos interativos. |
| Contar com recarregamentos lentos de página inteira para filtros de estado simples. | Atualizar gráficos de telemetria e linhas de tabela instantaneamente por meio de atualizações otimistas de UI. |
💬 Modelos de Prompt para IA (Como os Usuários Podem te Contactar)
Os usuários podem ativar esta habilidade com prompts como:
- "Usando a skill
desktop-uiux-pro, projete um painel de análise empresarial com um grid Bento e tabelas de telemetria ClickHouse ao vivo." - "Usando
desktop-uiux-pro, arquitete uma landing page SaaS B2B com modo escuro NeoSoftUI, prova antes da proposta e uma matriz de preços de 3 camadas." - "Revise este layout desktop quanto à densidade espacial, atalhos de teclado e contraste WCAG."