Interpretador de Imagem para Estrutura (Assistido por Visão)
Descreva um esboço fotografado e obtenha um mapa de UI estruturado com hierarquia e destaques.
Visão geral do prompt
Dicas para você
Em caso de dúvida, proponha opções com prós e contras. | Mantenha as descrições estruturais para que qualquer ferramenta de design possa aplicá-las. | Defina validações cedo para orientar o comportamento do formulário. | Identifique um KPI decisivo logo no início para evitar dispersão de escopo.
Da equipe de operaçõesNexusAi TechnologyProblema que resolve
Fotos de esboços são ruidosas. Isso gera uma estrutura limpa, focada em texto, que qualquer pessoa pode usar para iniciar mockups.
Hierarquia em Primeiro Lugar
Foco na estrutura que qualquer ferramenta pode usar.
Opções de Ambiguidade
Apresenta escolhas com prós e contras para decisão rápida.
Dicas de Validação
Regras iniciais de formulário reduzem erros posteriores.
Âncora de KPI
Mantém o layout alinhado a um único resultado.
Instruções do prompt de IA
Atue como: Um analista de UI com percepção visual que converte um esboço fotografado em uma estrutura de UI precisa e focada em texto.
Por que essa tarefa é importante: Traduzir fotos brutas em estrutura acelera o alinhamento e evita interpretações erradas.
Limites importantes:
- Se uma imagem exata não puder ser processada, baseie-se em descrições detalhadas do usuário.
- Evite julgamentos estéticos; concentre-se na estrutura e na intenção.
- Destaque ambiguidades e proponha 2–3 interpretações.
Entradas do usuário:
- Descrição fotográfica do esboço (regiões, rótulos de texto, setas).
- Objetivo principal e KPI principal.
- Dispositivo alvo e restrições.
Objetivos:
1) Extrair seções e hierarquia.
2) Identificar componentes e elementos interativos.
3) Delinear campos de dados e estados prováveis.
Fluxo de análise:
1) Resuma o esboço em termos neutros.
2) Divida em seções com propósitos.
3) Liste componentes com necessidades de estado.
4) Aponte ambiguidades e proponha opções.
Formato de saída requerido:
- Resumo
- Mapa de seções
- Lista de componentes com estados
- Ambiguidades e opções
- Próximos passos
Controles de qualidade:
- Uma ação principal por tela.
- Todos os elementos interativos têm estados focáveis.
- Campos de dados possuem dicas básicas de validação.
Instrução final: Gere o mapa com seções numeradas e tópicos concisos prontos para wireframe.
Resultado esperado
Resumo: Página única de onboarding com formulário de e-mail, lista de recursos e CTA. Mapa de seções: 1) Cabeçalho: logo, link de login 2) Hero: proposta de valor, campo de e-mail, CTA principal 3) Benefícios: recursos em 3 colunas Componentes: - EmailInput: padrão/foco/erro; validação regex - Botão CTA: padrão/carregando/desabilitado Ambiguidades: - Localização do link de termos; Opção A: abaixo do formulário, Opção B: rodapé.
Jornada de implementação
Descreva o esboço no ChatGPT
Cole o prompt e forneça uma descrição detalhada da foto do seu esboço, incluindo regiões e qualquer texto. Espere um mapa de UI estruturado com seções numeradas.
7 minOpções de ambiguidade no Gemini
Cole o mapa no Gemini e peça 2–3 interpretações plausíveis para cada ambiguidade com prós e contras. Espere uma lista curta de decisões.
6 minConsolide a estrutura
Volte ao ChatGPT com as decisões finais e solicite uma estrutura limpa e aprovada, pronta para wireframe.
5 min