Inteligência ArtificialPróximo semestre · turno da manhã
RascunhoNEXO / DESIGN SYSTEM / DEVELOPER PLAYGROUND
Design documentado.
Componentes testáveis.
Um único lugar para consultar os fundamentos, inspecionar componentes em diferentes estados, copiar código e testar os componentes do NEXO. Organizado por Foundations → Componentes → Estados → Handoff.
Escopo desta primeira versão
Este é o playground da biblioteca de componentes do NEXO documentada no Figma. As ações desta biblioteca são demonstrações locais; nenhum dado é enviado a serviços externos. O código de cada exemplo é acessível no próprio playground.
01 / DESIGN FOUNDATIONS
Foundations.
Variáveis semânticas lidas do arquivo NEXO. Selecione uma cor para copiar seu valor.
Color tokens
Referência rápida · Tipografia
DISPLAY / INTER / 48
Conhecimento que circula.
HEADING / INTER / 28
Encontre o professor certo
BODY / INTER / 16
O NEXO conecta necessidades acadêmicas ao talento da universidade.
LABEL / INTER / 12EXPERIMENTE PEDIR PARA:
Raios e espaçamento
8px · sm
12px · card
20px · xl
999px · pill
Escala de espaçamento documentada no frame: 8 · 12 · 16 · 20 px. Fonte única: Inter.
02 / DESIGN FOUNDATIONS
Tipografia.
Família tipográfica do NEXO: Inter. Consulte hierarquia, aplicação e escalas de corpo, label e título, com amostras editáveis.
DISPLAY / 48 PX / SEMIBOLD
Encontre o professor certo.
HEADING / 28 PX / SEMIBOLD
Conhecimento que circula
BODY / 16 PX / REGULAR
Uma experiência que aproxima necessidades acadêmicas e talento docente.
BODY COMPACT / 14 PX / REGULAR
Descreva a unidade curricular, o perfil desejado ou o desafio.
LABEL / 12 PX / MEDIUMEXPERIMENTE PEDIR PARA
Amostras editáveis
Clique em cada texto para testar quebras e comprimento. A família utilizada é Inter; fontes instaladas não são incluídas no ZIP.
03 / DESIGN FOUNDATIONS
Espaçamento & forma.
Ritmo e geometria extraídos dos fundamentos e componentes do NEXO. Clique no token para copiar o valor.
Espaçamento
Border radius
8px / sm
12px / card
16px / supporting card
20px / composer
999px / chip
Dimensões interativas
44 × 44pxÁrea de toque de ações/ícones no protótipo
24 × 24pxDesenho interno dos ícones
48pxAltura do CTA principal desktop
238pxLargura da sidebar do produto desktop
02 / COMPONENT LIBRARY
Componentes.
Interaja com estados, altere propriedades e abra o código correspondente a cada demonstração.
05 / COMPONENT LIBRARY
Buttons & chips.
Variantes de CTA e ações rápidas com estado normal, hover, focus, selecionado e disabled. Use os controles de propriedades e o código associado.
08.01D / ACTIONS / FIGMA · 93:596
Action Link / Tertiary
Ação contextual sem fundo, com alvo de 44px, gap 8px e tokens semânticos.
06 / COMPONENT LIBRARY
Composer & formulários.
Principal ponto de entrada da busca conversacional. Digite, navegue com Tab e teste os estados de envio.
08.08 / OVERLAYS / FIGMA · 80:242
Adicionar detalhes / Desktop Dialog
Três variantes documentadas: ementa, critérios e texto. Diálogo próprio para desktop, não Bottom Sheet ampliado.
Nenhum detalhe adicionado.
Tratamento de dados
Nesta implementação a busca, os critérios e os anexos são apenas demonstrações locais. Nenhuma mensagem, arquivo ou dado institucional é transmitido.
07 / COMPONENT LIBRARY
Cards & perfis.
Cards editoriais, perfis e solicitações reutilizáveis do NEXO.
08.04B / DATA DISPLAY / FIGMA · 35:206
Faculty Recommendation Card
Componente mestre atualizado no DS: retrato de 84 × 84 px, nome, estado semântico, evidências acadêmicas e ação para abrir o currículo do mesmo docente. Variações Potential match, Needs validation e Conflict.
A seleção abre o currículo demonstrativo de Ana Ribeiro.
Foto no Figma e componente no código
Os retratos de Figma ainda dependem da exportação; os demais registros exibem avatar de iniciais explicitamente demonstrativo. O HTML e os estados são testáveis, mas os retratos não estão homologados visualmente.
08.04D / DATA DISPLAY / FIGMA · 93:1571
Request Row
Rascunho, em análise e encaminhada. Status sem contadores fictícios.
08 / COMPONENT LIBRARY / DOCENTES
Comparação & currículo.
Componentes do Figma 08.04E Faculty Comparison Card e 08.04F Faculty Curriculum Drawer, agora com seções expandidas inspiradas no Lattes. Selecione dois docentes para comparar seus dados acadêmicos demonstrativos lado a lado. Cada card abre somente o currículo da pessoa exibida. Não equivale a uma avaliação institucional.
Origem das fotografias
O arquivo Figma utiliza retratos gerados e adicionados pela designer. Esta versão estática usa iniciais para os demais perfis e ainda não contém a exportação binária desses retratos; a área de imagem é um placeholder identificado, não a fotografia real. Não usar esta prévia como homologação visual dos retratos.
08.04E / DATA DISPLAY / FIGMA · 100:1202
Faculty Comparison Card
Escolha dois docentes diferentes. Os cards atualizam imediatamente foto, formação, docência, pesquisa e viabilidade, mantendo acesso ao currículo individual. Card de 540 × 488 px no desktop.
Altere qualquer docente para atualizar seu card. Clique no card para consultar o currículo correspondente. Dados exclusivamente fictícios.
Os indicadores representam dados acadêmicos do cenário fictício. Turno informado não confirma disponibilidade nem implica preferência pelo docente exibido.
08.04F / OVERLAYS / FIGMA · 100:1206
Faculty Curriculum Drawer
Currículo sintético completo: formação, atuação, disciplinas, pesquisa, projetos, publicações, produção técnica, orientações, idiomas, viabilidade e proveniência. O drawer não presume disponibilidade e mantém a comparação em segundo plano. O botão abaixo usa o Docente 1, selecionado acima; os próprios cards abrem seus currículos individuais.
Currículo fechado.
09 / COMPONENT LIBRARY / DADOS DE TESTE
Catálogo docente.
Explore 24 perfis fictícios usando o componente reutilizável de card e o currículo acadêmico expandido. O catálogo não contém telas do produto: demonstra apenas a biblioteca de componentes com dados variáveis.
Base sintética · não é Lattes nem IA generativa
Disciplinas, projetos, publicações e disponibilidades são exemplos para QA. Não existem DOI, ORCID ou IDs Lattes reais neste pacote.
Correspondência forte indica afinidade textual documentada no cenário, não habilitação profissional ou disponibilidade institucional confirmada. Correspondências parciais exibem as lacunas.
08.09 / COMPONENT LIBRARY
Assistente contextual.
Laboratório do FAB e painel contextual do NEXO. Perguntas, evidências e falhas são simuladas localmente; não existe conexão com LLM ou alteração de decisões.
03 / ICONOGRAPHY
Ícones.
Inventário dos ícones identificados no Design System. Os ícones vetoriais SVG locais são apresentados com área de toque demonstrativa de 44 × 44 px e desenho de 24 × 24 px. Biblioteca de referência: Figma 08.07. Utilize o nome do ícone e o respectivo path ao construir o produto.
10 / INTERACTION STATES
Estados & feedback.
Exercite os estados reais disponíveis sem backend e compare as variantes lado a lado.
08.06B / OVERLAYS / FIGMA · 93:3175
Confirmation Dialog
Exclusão humana de rascunho, com cancelar, confirmar e Escape. Demonstração sem apagar dados.
Nenhuma ação executada.
08.06 / FEEDBACK & RECOVERY / FIGMA · 35:272
Feedback State
Mensagens com estado reconhecível, recuperação contextual e conteúdo preservado.
Verificando perfis…
Consultando as evidências acadêmicas dos professores.
Estado em andamento: nenhum percentual fictício é mostrado.
VARIANTES:
Normal & disabled
Passe o mouse, use Tab e acione o botão ativo.
Seleção
Clique ou use Enter/Espaço para alternar.
Entrada e validação
Digite para testar.Toast
Mensagem informativa que não bloqueia a navegação.
10 / PROTOTYPE & QA
QA & validação.
Checklist manual de qualidade dos componentes e foundations. Marcar um item não equivale a teste automatizado nem a homologação em ambiente publicado.
Critérios adicionais para produção
Executar comparação visual automatizada contra screenshots oficiais do Figma, testar contraste WCAG, teclado e leitor de tela e integrar contratos de busca, identidade e anexos. Esta prévia não comprova equivalência pixel a pixel nem substitui testes em dispositivos físicos.
12 / TECH & AI HANDOFF
Código & entrega.
Artefatos estáticos, documentação de escopo e código dos componentes e tokens, com rastreabilidade ao Figma.
Playground
index.html · styles.css · app.js · icons.js
Tokens
Design tokens semânticos do NEXO.
Cloudflare Pages
Publicação via upload direto de arquivos estáticos, sem Worker, variáveis de ambiente ou etapa de build.
Escopo e fidelidade
Figma: Design System desktop-first 08.01–08.09, incluindo currículo completo 08.04G, catálogo 08.04H e assistente contextual 08.09. As fotos de Ana e Carlos são ativos demonstrativos locais; os demais registros têm fallback de iniciais. Ícones SVG locais são interpretações dos nomes de biblioteca, não exportação literal do Figma. Dados e disponibilidades são sintéticos. O PG é documentação funcional — não um produto conectado a RH, Lattes ou LLM.