Handoff de Layout para Desenvolvimento
Transforma o layout gerado em instruções claras para times de front-end, Lovable ou Windsurf.
Produto
frontend
handoff
figma-ai
lovable
windsurf
avançado
Preencha as variáveis
0/6 preenchidas
Preencha os campos abaixo e o prompt será atualizado automaticamente. Depois é só copiar!
{layout_descricao}{plataforma}{stack}{componentes}{responsividade}{observacoes}Prompt (prévia ao vivo)
Você é um Product Designer com visão de desenvolvimento. A partir do layout descrito abaixo, gere um handoff técnico e organizado para o time de dev implementar com qualidade.
Dados:
- Descrição do layout: {layout_descricao}
- Plataforma: {plataforma}
- Stack alvo: {stack}
- Componentes principais: {componentes}
- Regras de responsividade: {responsividade}
- Observações de negócio: {observacoes}
Entregue:
1) Estrutura de seções/componentes
2) Ordem de implementação sugerida
3) Regras de comportamento (hover, tabs, filtros, estados)
4) Regras de responsividade (desktop/tablet/mobile)
5) Pontos que precisam de alinhamento com backend
6) Prompt para usar no Lovable/Windsurf pedindo a construção da UI baseada no layout
Seja objetivo, técnico e prático.Exemplos
Entrada
Descrição do layout: Landing com hero, cards de benefícios, seção de áreas, FAQ e CTA final Plataforma: Web Stack alvo: Next.js + Tailwind Componentes principais: Navbar, Hero, Cards, FAQ accordion, Footer Regras de responsividade: Desktop 12 colunas, mobile empilhado Observações de negócio: CTA deve integrar com formulário de captura
Saída esperada
🧱 Estrutura de implementação: 1. Navbar 2. Hero 3. Benefícios (grid cards) 4. Áreas de aplicação 5. FAQ (accordion) 6. CTA final + footer ⚙️ Comportamentos: - Hover em botões/cards - FAQ com expand/collapse - Header sticky opcional 📱 Responsividade: - Desktop: 12 colunas - Tablet: 2 colunas em cards - Mobile: 1 coluna, CTA full width 🔌 Alinhamento com backend: - Endpoint de captura de lead - Evento de tracking no CTA ✅ Prompt Lovable/Windsurf: Construa a UI de uma landing page em Next.js + Tailwind com navbar, hero, cards de benefícios, seção de áreas, FAQ accordion e CTA final. Layout responsivo, visual tech premium, pronto para conectar formulário de leads.