Especialista em UX/UI de alto nivel para auditoria visual, analise de identidade visual e guidelines, recreacao high-fidelity, analise de layout/responsivo e evolucao de sistemas de componentes com Playwright e revisao critica baseada em screenshots. Use quando o pedido envolver analisar URL/site, capturar evidencias visuais, extrair linguagem visual/assinatura de marca, sintetizar guidelines de design, reproduzir interface similar (sem copiar codigo proprietario), melhorar design/UX de tela, criar componentes modernos com motion, ou transformar aprendizados em regras e base de conhecimento em Markdown para um agente/skill de UX.
Usar esta skill para executar trabalho de UX/UI de alto nivel com evidencia visual, iteracao rapida e padrao de qualidade consistente. Combinar captura Playwright, leitura de DOM/screenshot, reconstrucao original e critica de UX por etapa para evitar "achismo" e regressao visual.
references/case-*.md.prefers-reduced-motion e foco/teclado em componentes interativos.pointer: fine) e validar sem degradar inputs/touch.Aprofundamento: accessibility-and-inclusion.md, ux-states-and-edge-cases.md, ux-writing-and-microcopy.md
Abrir detalhes operacionais em:
references/playwright-ux-review-loop.mdreferences/case-01-payble-framer-rebuild.md (exemplo real com tilt medido)references/case-02-taaskhub-framer-audit.md (pipeline de captura/review com sanitizacao de overlays)exemplos/case-03-opscale-ux-sim (SaaS/AI enterprise, dashboard + contraste)exemplos/case-04-sanny-ux-sim (editorial dark/alternativo + cursor customizado)Abrir:
references/visual-identity-and-guidelines.md../../base-conhecimento-principal-ux/references/visual-identity-and-guidelines.md../../base-conhecimento-principal-ux/references/visual-identity-behance-uiux-trend-scan.md (quando houver pesquisa de repertorio)../../base-conhecimento-principal-ux/references/design-reference-platforms-catalog.md (catalogo padrao ouro de fontes)Abrir detalhes de padroes em:
../../base-conhecimento-principal-ux/references/design-rules-and-heuristics.md../../base-conhecimento-principal-ux/references/component-patterns.md../../base-conhecimento-principal-ux/references/design-tokens-system.md../../base-conhecimento-principal-ux/references/accessibility-and-inclusion.md../../base-conhecimento-principal-ux/references/ux-states-and-edge-cases.md../../base-conhecimento-principal-ux/references/ux-writing-and-microcopy.mdAbrir:
../../base-conhecimento-principal-ux/references/ux-metrics-and-measurement.md (probes Playwright + criterios)../../base-conhecimento-principal-ux/references/accessibility-and-inclusion.md (checklist pre-ship)references/case-XX-*.md.disruptivo, medido, minimalista, profissional_clean, etc.)Abrir:
references/knowledge-base-index.mdreferences/agent-architecture-and-governance.md../../base-conhecimento-principal-ux/INDEX.md (cerebro global: indices, taxonomia, docs)../../base-conhecimento-principal-ux/references/design-rules-and-heuristics.md: heuristicas de UX, performance percebida, cognitive load, dark mode guardrails.../../base-conhecimento-principal-ux/references/component-patterns.md: 18 patterns (nav, hero, cards, forms, tables, feedback, skeleton, dashboard).../../base-conhecimento-principal-ux/references/design-tokens-system.md: hierarquia de tokens (primitivos, semanticos, componente) + dark mode mapping.../../base-conhecimento-principal-ux/references/accessibility-and-inclusion.md: WCAG 2.1/2.2, ARIA patterns por componente, acessibilidade cognitiva, probes Playwright.../../base-conhecimento-principal-ux/references/ux-states-and-edge-cases.md: 9 estados de UI (loading, empty, error, success, partial, disabled, destructive, offline) + edge cases.../../base-conhecimento-principal-ux/references/ux-metrics-and-measurement.md: Core Web Vitals, metricas de usabilidade, engajamento, metricas visuais do agente, probes Playwright.../../base-conhecimento-principal-ux/references/ux-writing-and-microcopy.md: CTAs, headlines, forms, errors, toasts, tom de voz por vertical.../../base-conhecimento-principal-ux/references/visual-identity-and-guidelines.md: extracao de identidade visual + guidelines.../../base-conhecimento-principal-ux/references/visual-identity-behance-uiux-trend-scan.md: trends 2025-2026.../../base-conhecimento-principal-ux/references/playwright-ux-review-loop.md: captura, nomenclatura de screenshots, checklist de revisao.../../base-conhecimento-principal-ux/references/agent-architecture-and-governance.md: regras de evolucao do skill/agente.../../base-conhecimento-principal-ux/references/architectural-contracts.md: EvidenceBundle, UXProfile, ScreenIntentSpec, TokenSpec.../../base-conhecimento-principal-ux/references/knowledge-base-index.md: indice e protocolo de atualizacao da base.../../base-conhecimento-principal-ux/references/case-01-payble-framer-rebuild.md: fintech, motion scroll-linked.../../base-conhecimento-principal-ux/references/case-02-taaskhub-framer-audit.md: SaaS template, pipeline completo.../../base-conhecimento-principal-ux/references/case-03-opscale-framer-rebuild.md: SaaS/AI enterprise.../../base-conhecimento-principal-ux/references/case-04-sanny-framer-rebuild.md: editorial dark/alternativo.exemplos/INDEX.md: biblioteca de projetos-base (snapshots).../../base-conhecimento-principal-ux/INDEX.md: navegacao completa (indices, taxonomia, docs).scripts/ somente quando o workflow ficar repetitivo e merecer automacao (ex.: captura Playwright padronizada, diff visual, probes de transform).scripts/playwright_ux_capture.mjs para capturas multi-breakpoint com metricas e sanitizacao de promos/badges do Framer.exemplos/ como snapshots enxutos (sem dependencias/build) para servir de base de implementacao.SKILL.md enxuto e mover profundidade para references/.O Design Agent se integra ao fluxo Codex via o mesmo MCP server do code review (codex-review).
Isso permite que qualquer cliente MCP (Claude Code, Cowork, etc.) submeta auditorias de UX com acesso a base de conhecimento completa.
O MCP server codex-review agora suporta task_type: "ux-review" alem dos tipos existentes (review, explain, architecture).
Quando um job ux-review e submetido:
ux-design.yml e carregado automaticamente (severidade UX, categorias, checklist)submit_analysis_job(task_type: "ux-review", ...) -> job_id
|
get_analysis_job_status(job_id) -> poll ate succeeded
|
get_analysis_job_result(job_id) -> findings com categorias UX
| Arquivo | Funcao |
|---|---|
mcp-server/index.js | Enum ux-review + auto-profile |
mcp-server/codex-adapter.js | loadUXKnowledge() + response format UX |
profiles/ux-design.yml | Profile com severidade, categorias, checklist UX |
cowork-skill/UX-SKILL.md | Skill para plataforma Cowork |
O adapter carrega automaticamente estas referencias da base global:
design-rules-and-heuristics.md — heuristicas, performance percebida, cognitive loadaccessibility-and-inclusion.md — WCAG 2.1/2.2, ARIA, probes Playwrightux-states-and-edge-cases.md — 9 estados de UI, edge casescomponent-patterns.md — 18 patterns de componentesdesign-tokens-system.md — hierarquia de tokens, dark modeaccessibility — violacoes WCAG, ARIA, contraste, focusvisual-hierarchy — titulo, subtitulo, CTA, peso visualresponsive — breakpoints, overflow, layout breaksinteraction — hover, focus, keyboard, touch targetsstates — loading, empty, error, success, disabledtokens — consistencia de spacing, radius, shadow, colorperformance — CLS, LCP, skeleton, motionmicrocopy — CTAs, erros, empty states, labelslayout — grid, alignment, spacing, densityO path da base de conhecimento e resolvido automaticamente como projeto irmao:
../Design/base-conhecimento-principal-ux/
Override via variavel de ambiente: UX_KNOWLEDGE_BASE=/caminho/absoluto