Como entregar especificações de design para implementação.
A entrega de design precisa cobrir comportamento e estados, além das telas prontas. Documente regras responsivas, restrições de conteúdo e referências de recursos, e marque decisões pendentes para que os desenvolvedores não precisem adivinhar.
Adapte o fluxo à sua tarefa.
Faça um inventário das telas, interações, comportamento responsivo e estados fora do fluxo ideal. Vincule recursos e tokens de design, documente restrições de conteúdo e atribua as decisões pendentes. Inclua verificações de aceitação para que os desenvolvedores confirmem o comportamento em vez de adivinhá-lo por uma imagem estática.
- O que você fornece
- Escopo do design e requisitos de desenvolvimento.
- O que você recebe
- Checklist de recursos, estados, especificações e responsáveis.
Veja a entrada e o resultado.
Entrada e saída ilustrativas · exemplo didático, não uma execução real do WebAct
Exemplo campo
Handoff review: search field and result cards supplied, but loading, empty and error states missing. Responsive rules and keyboard behavior also unspecified.
Exemplo completo
Required handoff additions: - Loading: indicator, pending-control behavior and announcement to confirm. - No results: useful message and a way to revise the query. - Error: recovery action and retained-query behavior. - Keyboard: focus order, submission and result navigation. - Responsive: card columns and long-content behavior. - References: assets, tokens and content constraints. Assign a reviewer to each unresolved behavior before implementation; the current screens do not define these decisions.
Carregue esta entrada no prompt e copie para o WebAct para testar a tarefa. Seu resultado pode ser diferente da ilustração.
Decisões e solução de problemas.
A entrega deve incluir apenas a tela de resultados de pesquisa bem-sucedida?
Inclua estados de carregamento, vazio e erro, além do comportamento pelo teclado, pois fazem parte do fluxo real do usuário.
Por que as implementações divergem apesar de corresponderem inicialmente ao mockup?
Regras responsivas, conteúdo dinâmico ou comportamento dos estados podem não estar especificados. Documente essas condições junto com a tela.
Teste com sua própria fonte.
Substitua o exemplo pelo seu material no prompt. Mantenha os requisitos necessários e copie a tarefa para o WebAct.
Personalizar e copiar a tarefa ↑