Decompositor de Layout de Captura de Tela (Imagem → Plano DOM → Mapa de Componentes)
Converta rapidamente qualquer captura de tela de interface em um mapa estruturado de componentes com seções, hierarquia e um plano DOM inicial pronto para codificação.
Visão geral do prompt
Dicas para você
- Mantenha os nomes estáveis entre sprints para evitar mudanças excessivas. - Capture UI repetitiva como uma prop variante desde cedo. - Confirme affordances interativas (hover, foco, clique) com o design. - Comece os stubs no Storybook apenas com as props necessárias para a captura de tela.
Da equipe de operaçõesNexusAi TechnologyProblema que resolve
Acelera a etapa mais difícil: traduzir visuais em uma estrutura coerente de componentes e plano de layout sem suposições.
Análise de hierarquia
Transforma visuais em árvore de componentes e regiões.
Planejamento de props/estado
Define entradas limpas e superfícies de eventos.
Notas de layout responsivo
Propõe padrões grid/flex por ponto de quebra.
Registro de riscos
Sinaliza interações incertas para confirmação precoce.
Instruções do prompt de IA
Atue como: Um engenheiro frontend sênior e arquiteto de sistemas de UI.
Por que essa tarefa é importante: Começar a partir de uma captura de tela frequentemente gera componentes improvisados, nomes inconsistentes e retrabalho. Um mapa claro reduz ambiguidades e acelera a codificação.
Limites importantes:
- Assuma React + Tailwind ou CSS Modules.
- Prefira tags HTML semânticas e papéis ARIA quando necessário.
- Não invente funcionalidades além do que a captura de tela sugere.
Entradas do usuário:
- Link ou descrição da captura de tela
- Restrições da marca (se houver): escala de espaçamento, famílias tipográficas, cores primárias/secundárias
- Pontos de quebra alvo (ex.: sm, md, lg, xl)
Objetivos:
1) Identificar regiões do layout (cabeçalho, navegação, principal, barras laterais, rodapé, diálogos).
2) Propor uma árvore de componentes com nomes, propósito e potencial de reutilização.
3) Esboçar props/estado, dependências de dados e superfícies de eventos.
4) Sugerir grupos utilitários Tailwind ou classes CSS para o layout principal.
Fluxo de análise:
1) Analisar hierarquia visual: padrões de grid vs. flex, ritmo de espaçamento, papéis tipográficos.
2) Delimitar fronteiras dos componentes com base em repetições e pontos de interação.
3) Definir props para variabilidade (texto, ícones, imagens, tamanhos, variantes).
4) Observar necessidades de acessibilidade (marcos, rótulos, ordem de foco).
Formato de saída requerido:
- ComponentTree: lista em tópicos dos componentes com aninhamento
- ComponentSpecs: para cada componente: propósito, props, estado, aria/papéis
- LayoutPlan: estratégia grid/flex com notas de espaçamento, padding e pontos de quebra
- Risks: suposições e áreas que precisam de confirmação dos stakeholders
Controles de qualidade:
- Nomes consistentes e descritivos (PascalCase para componentes).
- Evitar componentes profundamente aninhados quando padrão slot/child for suficiente.
Checklist de verificação:
- Cada componente pode ser renderizado independentemente no Storybook?
- As props são mínimas, porém completas para reutilização?
Instrução final: Produza ComponentTree, ComponentSpecs, LayoutPlan e Risks como seções separadas e claramente rotuladas, prontas para serem entregues a um desenvolvedor.
Resultado esperado
ComponentTree: - AppLayout - TopBar - SideNav - ContentArea - StatsCard (x3) - DataTable LayoutPlan: - Outer: grid-cols-[auto,1fr] com gap-6 em lg; colapsar SideNav abaixo de md. ComponentSpecs: - Props do StatsCard: title, value, delta, icon, variant. Risks: - Ações nas linhas da tabela não estão claras (ícones vs. texto).
Jornada de implementação
Elabore o mapa de componentes no ChatGPT
Abra o ChatGPT e cole o link da sua captura de tela junto com quaisquer restrições de espaçamento/ tipografia da marca. Solicite ComponentTree, ComponentSpecs, LayoutPlan e Risks. Espere uma hierarquia estruturada e um plano DOM inicial que você possa copiar para um documento de planejamento.
10 minCrie stubs no Storybook
No seu editor (ex.: VS Code), crie componentes React vazios a partir do ComponentTree e adicione histórias básicas no Storybook com as props do ComponentSpecs. Isso transforma o plano em placeholders funcionais para você inserir o código.
20 minConfirme as suposições com a equipe
Compartilhe a seção Risks e o link do Storybook com seu PM/designer. Registre decisões (ex.: nomes de variantes, pontos de quebra) diretamente nas props dos componentes para consolidar a interface antes da codificação.
15 min