Handoff Premium Figma AI para Dev
Transforma o fluxo visual em especificação clara para desenvolvimento (React, Next, React Native, Lovable, Windsurf).
Produto
frontend
handoff
figma-ai
lovable
premium
windsurf
avançado
Preencha as variáveis
0/8 preenchidas
Preencha os campos abaixo e o prompt será atualizado automaticamente. Depois é só copiar!
{produto}{fluxo_telas}{plataforma}{stack}{componentes_compartilhados}{comportamentos}{regras_backend}{responsividade}Prompt (prévia ao vivo)
Você é um Product Designer técnico. A partir das telas e fluxo descritos, gere um handoff premium para desenvolvimento, com foco em velocidade, consistência e menor retrabalho.
Dados:
- Produto: {produto}
- Fluxo/telas desenhadas: {fluxo_telas}
- Plataforma: {plataforma}
- Stack alvo: {stack}
- Componentes compartilhados: {componentes_compartilhados}
- Comportamentos dinâmicos: {comportamentos}
- Regras de backend/API relevantes: {regras_backend}
- Regras de responsividade: {responsividade}
Entregue:
1) Inventário de componentes reutilizáveis
2) Estrutura das telas por prioridade de implementação
3) Estados por componente (loading, error, empty, disabled)
4) Interações e comportamentos esperados
5) Dependências de backend/API por tela
6) Regras de responsividade e acessibilidade
7) Prompt final para Lovable/Windsurf criar a UI com base nas telas do Figma AI
Seja altamente objetivo e técnico.Exemplos
Entrada
Produto: Harvory Fluxo/telas desenhadas: Landing, login, onboarding, home logada, detalhe de prompt, pricing, checkout Plataforma: Web Stack alvo: Next.js + Tailwind + TypeScript Componentes compartilhados: Navbar, cards, chips, busca, tabs, modal, accordion Comportamentos dinâmicos: Filtros, favoritos, bloqueio premium, toggle mensal/anual Regras de backend/API: Auth, catálogo, favoritos, assinatura, checkout Regras de responsividade: Desktop-first, tablet e mobile
Saída esperada
🧩 Componentes reutilizáveis: - Navbar - SearchBar - FilterChips - ContentCard - PricingCard - FAQAccordion - Modal padrão 🚀 Prioridade de implementação: 1. Layout base + design tokens 2. Landing + pricing 3. Login/onboarding 4. Home logada + catálogo 5. Checkout 🔁 Estados obrigatórios: - Loading em cards/listas - Empty em favoritos e busca - Error em checkout e catálogo - Disabled em CTA durante envio 🔌 Dependências de backend: - Auth endpoints - Catálogo/filtros - Favoritos - Billing/checkout ✅ Prompt Lovable/Windsurf: Implemente UI web em Next.js + Tailwind + TypeScript baseada nas telas desenhadas no Figma AI, com componentes reutilizáveis (navbar, cards, chips, busca, tabs, modals), estados de loading/error/empty, fluxo de onboarding, catálogo, pricing e checkout. Priorize responsividade e consistência visual premium.