Windsurf • Estados de Interface, Mocks e Regras
Adiciona estados reais de UI e comportamentos simulados para deixar o front pronto para integração.
Produto
ui
estados
mocks
windsurf
avançado
Preencha as variáveis
0/6 preenchidas
Preencha os campos abaixo e o prompt será atualizado automaticamente. Depois é só copiar!
{produto}{modulos}{estados}{regras}{mocks}{acoes_sensiveis}Prompt (prévia ao vivo)
Atue como Front-end Engineer com foco em product quality. Gere um prompt para o Windsurf implementar estados de interface, dados mock e regras de comportamento da UI.
Dados:
- Produto: {produto}
- Telas/módulos: {modulos}
- Estados necessários: {estados}
- Regras de comportamento: {regras}
- Dados mock disponíveis: {mocks}
- Ações sensíveis: {acoes_sensiveis}
Entregue:
1) Estados por tela/componente (loading, empty, error, success)
2) Regras de UI (bloqueio, permissões, disabled, feedback)
3) Estrutura de mocks recomendada
4) Interações simuladas necessárias
5) Prompt final para Windsurf aplicar estados e mocks
Foque em uma UI robusta para validação antes de backend real.Exemplos
Entrada
Produto: Harvory Telas/módulos: Catálogo, Detalhe, Pricing, Checkout, Favoritos Estados necessários: loading, empty, error, success, premium-locked Regras de comportamento: Usuário free não abre conteúdo premium; checkout simulado aprova/reprova; favoritos salva local Dados mock disponíveis: prompts, playbooks, planos, usuário Ações sensíveis: Upgrade, aplicar cupom, remover favorito
Saída esperada
🔁 Estados por módulo: - Catálogo: loading/empty/error - Detalhe: premium-locked/error - Checkout: loading/success/error - Favoritos: empty/success 📋 Regras UI: - Conteúdo premium mostra bloqueio + CTA pricing - Botão durante envio fica disabled/loading - Ações sensíveis com feedback claro 🧪 Mocks: Centralizar /mocks/user.ts, /mocks/content.ts, /mocks/plans.ts. 🖱️ Interações simuladas: Favoritar/desfavoritar, aplicar cupom mock, aprovar/reprovar checkout. 🎯 Prompt Windsurf: Implemente estados de interface (loading/empty/error/success/premium-locked), regras de bloqueio premium e interações simuladas com mocks para catálogo, detalhe, pricing, checkout e favoritos. Estruture mocks separados e feedback visual claro nas ações.