102.3K+Baixar
Ir para o guia de uso
Form Designpor Owl-Listener

Form Design Skill.

Especifique o caminho do primeiro campo até o envio bem-sucedido, incluindo correções e retornos posteriores.

  • UX
  • Orientação de design
Baixar OpenDesignVer guia de uso
Revisão da fonte · Form DesignSKILL.md
Tarefa UX Produz • Uma sequência de campos com agrupamento e tipos de entrada • Rótulos, instruções e comportamento de validação • Regras de várias etapas, foco, resumo de erros e progresso Antes de começar Um agente que consiga ler o briefing do formulário, os campos obrigatórios e as regras de validação, e as telas de formulário existentes.
Resumo editorial · fonte revisada em 2026-10-07 · não é um exemplo gerado

01 Funcionalidades

Form Design: Torne a entrada de dados clara

Especifique ordem dos campos, rótulos, tipos de entrada, validação e correção para um formulário completo.

Fluxo baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

Form Design cobre um formulário de ponta a ponta. Trata de layout, rótulos, textos de apoio, tipos de entrada, validação, progresso em várias etapas e acessibilidade. A fonte privilegia uma ordem de leitura clara e larguras de campo que indiquem a entrada esperada.

A orientação detalhada de comportamento inclui validação ao sair do campo (blur), erros conectados aos campos, manutenção do que foi digitado ao voltar e uma etapa de revisão para envios de alto risco. São decisões de design a adaptar aos dados e usuários reais, não evidência de que um formulário não testado aumentará a conclusão.

Entregas esperadas

  • Uma sequência de campos com agrupamento e tipos de entrada
  • Rótulos, instruções e comportamento de validação
  • Regras de várias etapas, foco, resumo de erros e progresso
Ver o briefing de exemplo

Do briefing à revisão

  1. 01
    Reduza e ordene os campos

    Identifique as informações necessárias e agrupe perguntas relacionadas em uma sequência de leitura clara.

  2. 02
    Especifique o comportamento de entrada

    Escolha entradas, rótulos persistentes, textos de apoio e o momento da validação.

  3. 03
    Trate a conclusão e a correção

    Defina dados mantidos, navegação de volta, foco nos erros e revisão antes de envios importantes.

02 Quando usar

Quando usar

Use para projetar um novo formulário ou resolver campos confusos, validação e progresso em um formulário existente.

Bom encaixe

  • Formulários longos de inscriçãoDivida perguntas relacionadas em etapas coerentes sem perder o progresso.
  • Atrito em camposEsclareça instruções confusas, formatos de entrada e mensagens de validação.

Limites a verificar

  • Sem garantia de aumento de conversãoMelhorias na conclusão exigem observação e medição.
  • Nem todos os erros do produtoEstratégias de rede e permissões que cruzam fluxos vão além de um único formulário.

Traga estas informações

  • Dados obrigatóriosListe os campos, os formatos e os motivos pelos quais são necessários.
  • Regras de validaçãoInforme as restrições reais do cliente e do servidor.
  • Contexto de conclusãoExplique as consequências, o uso em dispositivos e se as pessoas voltam depois.

03 Decisões importantes

Decisões que importam

  1. A correção é projetada

    Resumos que recebem foco e mensagens ligadas aos campos ajudam as pessoas a se recuperar com eficiência.

  2. O progresso é preservado

    Navegação de volta e preenchimento parcial exigem comportamento de estado explícito.

04 Exemplo de briefing

Experimente um briefing focado

O briefing de exemplo abaixo não foi testado. Confira a configuração da skill antes de usá-lo.

Revise a configuração

Carregue o SKILL.md desta tarefa a partir do repositório designer-skills no local de skills compatível com seu agente. O arquivo de entrada não estabelece um comando de instalação universal.

Arquivo-fonte original
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/form-design/SKILL.md

Forneça os campos obrigatórios e as regras reais de validação. O resultado é uma especificação de formulário; implementação e testes com usuários são etapas separadas.

Comece com uma entrega

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de exemplo
Use form-design para redesenhar este briefing de projeto em várias etapas. Remova campos sem justificativa, agrupe perguntas relacionadas, defina rótulos persistentes e validação ao sair do campo (blur), e preserve os dados ao voltar. Especifique um resumo de erros acessível com links e uma etapa final de revisão.

Inspecione o resultado

Compare o resultado real com estes critérios observáveis.

  • Todo campo tem um rótulo persistente associado programaticamente.
  • Os erros explicam a correção e estão conectados ao campo.
  • A navegação de volta preserva os dados digitados.

OpenDesign oferece um espaço de trabalho local de design para agentes de código. Esta listagem não significa que a skill esteja incluída no pacote nem que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

Baixar OpenDesignLer o guia rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixada da fonte, vinculada abaixo. O comportamento e os requisitos originais podem mudar.

Responsável pela fonte
Owl-Listener
Repositório
Owl-Listener/designer-skills
Arquivo da skill
interaction-design/skills/form-design/SKILL.md
Licença
MIT
Versão revisada
2026-10-07 · 9a6930cf84a8
Resumo editorial da fonte
Especifique ordem dos campos, rótulos, tipos de entrada, validação e correção para um formulário completo.

Resumo original de OpenDesign, baseado na fonte vinculada. As estrelas do repositório são um sinal de popularidade datado, não uso da skill nem nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

O texto de placeholder pode substituir um rótulo?

A fonte diz que não; os rótulos devem continuar disponíveis depois da digitação.

Quando a validação dos campos deve ocorrer?

A fonte recomenda validar ao sair do campo (blur), e não a cada tecla; adapte as exceções às necessidades reais de interação.

Um formulário de várias etapas precisa salvar o progresso?

A fonte recomenda manter os dados e salvar o progresso em fluxos mais longos.

OpenDesign

Abra espaço para a próxima iteração de design.

Mantenha seu briefing, o material de origem e o trabalho de design juntos em um espaço de trabalho local. Confira a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Baixar OpenDesignVer skills de design
Arquivo-fonte original
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/form-design/SKILL.md