# Specsfy Specialist UI Design

> Projetar e revisar interfaces visuais de sistemas, dashboards e aplicações com hierarquia, layout, tokens, componentes, densidade, estados e responsividade. Use para telas, dashboards, design systems, layouts, tabelas, formulários e navegação; combine com UX e acessibilidade quando houver fluxo ou interação.

- Skill: `promovaweb/specsfy-specialist-ui-design-2` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add promovaweb/specsfy-specialist-ui-design-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/promovaweb/specsfy-specialist-ui-design-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: promovaweb (https://skillmd.com/u/promovaweb)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/promovaweb/specsfy-specialist-ui-design-2

---


# Design de interface

## Fluxo

1. Identificar usuário, tarefa principal, frequência, dispositivo e densidade.
2. Inventariar conteúdo, ações, riscos e estados antes do layout.
3. Escolher shell, navegação e grid coerentes com a arquitetura da informação.
4. Definir hierarquia por agrupamento, contraste, escala e espaço.
5. Aplicar tokens e componentes existentes antes de criar variantes.
6. Desenhar estados e casos extremos em todos os breakpoints.
7. Validar legibilidade, consistência, acessibilidade e implementação.

## Padrões

- Dashboard responde perguntas; não é coleção de cards decorativos.
- Colocar visão geral antes do detalhe e ação junto do objeto afetado.
- Usar tabela para comparação densa, lista para leitura e cards para entidades distintas.
- Preservar posição, filtros e contexto ao navegar entre lista e detalhe.
- Exibir unidade, período, origem, atualização e vazio nos dados.
- Manter ação destrutiva distinta, explicada e reversível quando possível.
- Definir tokens semânticos e uma escala limitada de spacing/tipografia.

## Validação

- Cenários nominal, loading, empty, partial, error, offline e permission denied.
- Conteúdo real curto/longo, números extremos e internacionalização.
- Viewports, zoom, contraste, teclado e reduced motion.
- Comparação com componentes e tokens já publicados.

Leia [references/standards.md](references/standards.md) para padrões de telas,
dashboards, layouts e sistemas de design.