Form Designpor Owl-Listener

Form Design Skill.

Especifica el recorrido desde el primer campo hasta un envío correcto, incluidas las correcciones y las visitas posteriores.

UX
Guía de diseño

Descargar OpenDesign Ver la guía de uso

Revisión de la fuente · Form DesignSKILL.md

Tarea UX Produce • Una secuencia de campos con agrupación y tipos de entrada • Etiquetas, instrucciones y comportamiento de validación • Reglas de varios pasos, foco, resumen de errores y progreso Antes de empezar Un agente que pueda leer el brief del formulario, los campos obligatorios y las reglas de validación, y las pantallas de formulario existentes.

Resumen editorial · fuente revisada 2026-10-07 · no es un ejemplo generado

01 Qué hace

Form Design: Haz que la entrada de datos sea clara

Especifica el orden de los campos, etiquetas, tipos de entrada, validación y corrección de un formulario completo.

Flujo de trabajo basado en la fuenteNo es un benchmark de ejecución

El enfoque de trabajo

Form Design abarca un formulario de principio a fin. Trata la disposición, las etiquetas, el texto de ayuda, los tipos de entrada, la validación, el progreso en varios pasos y la accesibilidad. La fuente prefiere un orden de lectura claro y anchos de campo que comuniquen la entrada esperada.

Su guía de comportamiento detallada incluye validar al perder el foco, errores vinculados a los campos, conservar lo introducido al volver atrás y un paso de revisión para envíos de alto riesgo. Son decisiones de diseño que hay que adaptar a los datos y usuarios reales, no pruebas de que un formulario sin probar mejorará su tasa de finalización.

Entregables previstos

Una secuencia de campos con agrupación y tipos de entrada
Etiquetas, instrucciones y comportamiento de validación
Reglas de varios pasos, foco, resumen de errores y progreso

Ver el brief de ejemplo

Del brief a la revisión

01
Reduce y ordena los campos
Identifica la información necesaria y agrupa las preguntas relacionadas en una secuencia de lectura clara.
02
Especifica el comportamiento de entrada
Elige las entradas, las etiquetas persistentes, el texto de ayuda y el momento de la validación.
03
Gestiona la finalización y la corrección
Define los datos conservados, la navegación hacia atrás, el foco en los errores y la revisión antes de un envío importante.

02 Cuándo usarlo

Cuándo usarla

Úsala para diseñar un formulario nuevo o para resolver campos confusos, validación y progreso en uno existente.

Encaja bien

Formularios de solicitud largosDivide las preguntas relacionadas en pasos coherentes sin perder el progreso.
Fricción en los camposAclara instrucciones confusas, formatos de entrada y mensajes de validación.

Límites a tener en cuenta

Sin garantía de mejora de conversiónLas mejoras en la finalización requieren observación y medición.
No sirve para todos los errores de productoLa estrategia de red y permisos entre flujos va más allá de un solo formulario.

Aporta estos datos

Datos necesariosEnumera los campos, los formatos y por qué se necesitan.
Reglas de validaciónProporciona las restricciones reales de cliente y servidor.
Contexto de finalizaciónExplica las consecuencias, el uso en dispositivos y si las personas vuelven más tarde.

03 Decisiones importantes

Decisiones que importan

La corrección se diseña
Los resúmenes enfocables y los mensajes vinculados a los campos ayudan a recuperarse con eficacia.
El progreso se conserva
La navegación hacia atrás y la finalización parcial requieren un comportamiento de estado explícito.

04 Ejemplo de brief

Prueba un brief concreto

El brief de ejemplo siguiente no se ha probado. Comprueba la configuración de la skill antes de usarlo.

Revisa la configuración

Carga el SKILL.md de esta tarea desde el repositorio designer-skills en la ubicación de skills compatible con tu agente. No se establece ningún comando de instalación universal en el archivo de entrada.

Archivo de la fuente original

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

Proporciona los campos obligatorios y las reglas de validación reales. El resultado es una especificación del formulario; la implementación y las pruebas con usuarios son aparte.

Empieza con un entregable

Adapta el alcance, el material de origen y las restricciones de este brief antes de ejecutar la skill.

Brief de ejemplo

Usa form-design para rediseñar este brief de proyecto de varios pasos. Elimina los campos injustificados, agrupa las preguntas relacionadas, define etiquetas persistentes y validación al perder el foco, y conserva lo introducido al volver atrás. Especifica un resumen de errores accesible con enlaces y un paso final de revisión.

Inspecciona el resultado

Comprueba el resultado real con estos criterios observables.

Cada campo tiene una etiqueta persistente asociada mediante programación.
Los errores explican cómo corregir y se vinculan al campo.
La navegación hacia atrás conserva los datos introducidos.

OpenDesign ofrece un espacio de trabajo local de diseño para agentes de programación. Esta ficha no significa que la skill incluya herramientas externas, credenciales ni dependencias de software.

Descargar OpenDesign Leer la guía de inicio rápido

05 Fuente y licencia

Fuente y licencia

Esta página describe la revisión fijada de la fuente enlazada abajo. El comportamiento y los requisitos originales pueden cambiar.

Propietario de la fuente: Owl-Listener
Repositorio: Owl-Listener/designer-skills
Archivo de la skill: interaction-design/skills/form-design/SKILL.md
Licencia: MIT
Versión revisada: 2026-10-07 · 9a6930cf84a8

Resumen editorial de la fuente

Especifica el orden de los campos, etiquetas, tipos de entrada, validación y corrección de un formulario completo.

Resumen original de OpenDesign, basado en la fuente enlazada. Las estrellas del repositorio son una señal de popularidad fechada, no un indicador de uso de la skill ni de calidad.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿Puede un texto de ejemplo (placeholder) sustituir a una etiqueta?

La fuente dice que no; las etiquetas deben seguir disponibles después de escribir.

¿Cuándo debe producirse la validación de los campos?

La fuente recomienda validar al perder el foco en lugar de en cada pulsación de tecla; adapta las excepciones a las necesidades reales de interacción.

¿Necesita un formulario de varios pasos guardar el progreso?

La fuente recomienda conservar los datos y guardar el progreso en flujos más largos.

OpenDesign

Deja espacio para la siguiente iteración de diseño.

Mantén tu brief, el material de origen y el trabajo de diseño juntos en un espacio de trabajo local. Comprueba la configuración propia de la skill antes de añadirla a tu flujo de trabajo.

Descargar OpenDesign Explorar skills de diseño