Extrator de Inventário de Componentes de UI
Identifique todos os componentes, estados e campos de dados a partir de um esboço para evitar retrabalho posteriormente.
Visão geral do prompt
Dicas para você
Normalize os nomes cedo para que design e engenharia falem a mesma língua. | Documente validações onde os dados são capturados para acelerar a QA depois. | Prefira variantes em vez de novos componentes para reduzir a proliferação no sistema de design. | Capture estados de acessibilidade como ordem de foco e dicas ARIA.
Da equipe de operaçõesNexusAi TechnologyProblema que resolve
Componentes inesperados aparecem tardiamente e comprometem os prazos. Este inventário lista os elementos cedo, incluindo estados e necessidades de dados.
Matriz de Cobertura de Estados
Garante que cada elemento interativo defina comportamento para todos os estados.
Contratos de Dados
Lista campos, tipos e validação para alinhar com a engenharia.
Disciplina de Variantes
Reduz a proliferação agrupando variantes de forma sensata.
Ganchos de Acessibilidade
Sugere ordem de foco e dicas ARIA onde relevante.
Instruções do prompt de IA
Atue como: Um líder de sistemas de design encarregado de extrair um inventário de componentes a partir de um esboço bruto de UI e mapear estados e contratos de dados.
Por que essa tarefa é importante: Um inventário sólido de componentes evita duplicações, esclarece as necessidades da engenharia e mantém os mockups consistentes.
Limites importantes:
- Separe componentes puramente visuais dos orientados a dados.
- Capture todos os estados (padrão, hover, foco, ativo, desabilitado, carregando, vazio, erro).
- Defina os campos mínimos de dados e validação para cada componente vinculado a dados.
Entradas do usuário:
- Descrição do esboço e quaisquer rótulos presentes no esboço.
- Fontes de dados conhecidas ou APIs (se houver).
- Restrições de acessibilidade e localização.
Objetivos:
1) Listar componentes e categorizá-los (átomos, moléculas, organismos).
2) Definir todos os estados interativos e transições.
3) Mapear campos de dados, validação e mensagens de erro.
4) Identificar padrões reutilizáveis e sugestões de nomenclatura.
Fluxo de análise:
1) Parsear o esboço em componentes candidatos.
2) Normalizar nomes para uma convenção consistente.
3) Agrupar elementos similares em um único componente reutilizável com variantes.
4) Documentar a máquina de estados para elementos interativos.
5) Identificar dependências (autenticação, permissões, rede).
Formato de saída requerido:
- Resumo (propósito, escopo, premissas)
- Tabela de componentes (Nome, Tipo, Estados, Dados, Validação, Reutilização, Notas)
- Diagramas de estados (textuais) para componentes chave
- Riscos e questões em aberto
Controles de qualidade:
- Cada elemento interativo considera pelo menos os estados foco e desabilitado.
- Regras de validação são específicas e testáveis.
- Campos de dados incluem tipo e obrigatoriedade/opcionalidade.
Checklist de verificação:
- Nomes de componentes são únicos e consistentes.
- Não há componentes duplicados que deveriam ser variantes.
- Todos os estados de erro incluem orientações de texto.
Instrução final: Gere um inventário organizado e fácil de consultar, adequado para entrega às equipes de design e engenharia.
Resultado esperado
Resumo: Inventário para telas de onboarding + lista de projetos; assume autenticação por e-mail. Tabela de componentes (trecho): - TextInput.Email | Átomo | estados: padrão/foco/erro | dados: email:string | validação: RFC 5322 | reutilizável: alta | notas: erro inline abaixo do campo - Button.Primary | Átomo | estados: padrão/carregando/desabilitado | dados: n/a | validação: n/a | reutilizável: alta | notas: spinner de progresso à esquerda - ProjectCard | Molécula | estados: padrão/hover/vazio | dados: nome:string, tarefas:int | validação: nome ≤ 60 caracteres | reutilizável: média | notas: badge mostra contagem de tarefas Riscos e questões em aberto: - Tom da mensagem de erro não definido. - Necessidade de regras para senha e políticas de localização.
Jornada de implementação
Extrair inventário no Claude
Abra o Claude e cole o prompt com a descrição do seu esboço e as restrições. Solicite uma tabela de componentes, estados e campos de dados. Espere um inventário estruturado com nomenclatura reutilizável.
9 minVerificar no ChatGPT
Cole a saída do Claude no ChatGPT e peça para identificar lacunas em acessibilidade, validação e mensagens de erro. Espere uma lista refinada de estados e regras específicas de validação.
6 minAprovar base
Peça ao ChatGPT para produzir uma tabela final com IDs únicos e nomenclatura de variantes para circular com sua equipe antes do início dos mockups.
5 min
