Wireframe Specpor Owl-Listener

Wireframe Spec Skill.

Haz que una pantalla de baja fidelidad sea lo bastante precisa para debatir el comportamiento y el contenido.

Prototipado
Wireframes

Revisión de la fuente · Wireframe SpecSKILL.md

Tarea Prototipado Produce • Una estructura de pantalla anotada con prioridades de contenido. • Requisitos de contenido, incluidos encabezados, longitudes, imágenes y fuentes. • Notas para diseños responsive y para los estados vacío, de carga y de error. Antes de empezar No se requiere ninguna herramienta de wireframing concreta; un brief útil debe incluir información sobre el contenido y los estados.

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

01 Qué hace

Especifica la estructura antes del estilo visual

Un método de wireframes anotados que combina bloques de diseño, contratos de contenido, comportamiento responsive y cobertura de estados.

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

El enfoque de trabajo

Wireframe Spec define la intención estructural de una pantalla antes del color y del acabado visual. Abarca bloques de contenido, ubicación, prioridad y notas de comportamiento, con espacio para diferencias responsive y contenido basado en datos. Las etiquetas reales de navegación y de botones ayudan a que la estructura se entienda incluso en baja fidelidad.

La fuente va más allá de las cajas: pide jerarquía de encabezados, expectativas de longitud del texto, proporciones de imagen, material obligatorio frente a opcional y fuentes del contenido. También exige estados vacío, de carga, con datos y de error, de modo que el wireframe no se limite a la pantalla ideal.

Entregables previstos

Una estructura de pantalla anotada con prioridades de contenido.
Requisitos de contenido, incluidos encabezados, longitudes, imágenes y fuentes.
Notas para diseños responsive y para los estados vacío, de carga y de error.

Ver el brief de ejemplo

Del brief a la revisión

01
Elige la fidelidad y los bloques
Selecciona la fidelidad (boceto, baja, media o anotada) y establece las principales regiones de contenido.
02
Especifica contenido y comportamiento
Da a los bloques etiquetas reales, prioridades, fuentes de datos y anotaciones de interacción.
03
Cubre las variantes
Describe los cambios en los puntos de quiebre y las versiones vacía, de carga, con datos y de error.

02 Cuándo usarlo

Cuándo usarlo

No se requiere ninguna herramienta de wireframing concreta; un brief útil debe incluir información sobre el contenido y los estados.

Buen encaje

Antes del diseño visualÚtil cuando hay que acordar decisiones de diseño y contenido sin debatir color o estilo.
Preparación del traspaso de diseñoHace visibles desde el principio las suposiciones ocultas sobre el contenido dinámico y la interacción.

Límites que conviene revisar

No es un sistema visual finalLa fuente evita deliberadamente las decisiones de color y usa convenciones neutras de wireframe.
No es solo la mecánica de la cuadrículaLas matemáticas de columnas y medianiles corresponden a Layout Grid; esta especificación se centra en el contenido y el comportamiento.

Aporta estos datos

Propósito de la pantallaIndica la tarea y el contenido necesario para completarla.
Fuentes del contenidoIdentifica el texto estático, los campos del CMS, los datos de API y los bloques obligatorios u opcionales.
Necesidades de estados y dispositivosEnumera los contextos responsive y las condiciones de vacío, carga o fallo.

03 Decisiones importantes

Decisiones clave

Las anotaciones aportan el comportamiento que falta
Un rectángulo no puede explicar si el contenido se actualiza, abre un panel o depende de una API.
Las restricciones de contenido llegan pronto
Los requisitos de longitud y proporción pueden evitar que decisiones de diseño posteriores dependan de contenido imposible.

04 Ejemplo de brief

Prueba un brief concreto

El brief de ejemplo de abajo no se ha probado. Revisa la configuración del skill antes de usarlo.

Revisa la configuración

Usa la vía de instalación documentada en el repositorio y conserva los archivos complementarios a los que se haga referencia. Esta entrada describe un método de diseño concreto, no una aplicación ejecutable.

Archivo fuente original

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/prototyping-testing/skills/wireframe-spec/SKILL.md

No se requiere ninguna herramienta de wireframing concreta; un brief útil debe incluir información sobre el contenido y los estados.

Empieza con un solo entregable

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

Brief de ejemplo

Usa wireframe-spec para una página de biblioteca de plantillas con búsqueda. Especifica la prioridad de los bloques, etiquetas de navegación reales, el comportamiento de búsqueda y filtros, la jerarquía de encabezados, las proporciones de imagen de las tarjetas y las fuentes del contenido. Incluye los estados móvil, vacío, de carga y de solicitud fallida, manteniendo neutro el estilo visual.

Inspecciona el resultado

Comprueba el resultado real con estos criterios observables.

Toda interacción importante tiene una anotación.
Se identifican el contenido obligatorio y las fuentes de datos.
La especificación incluye más que una pantalla de escritorio con datos.

OpenDesign ofrece un espacio de trabajo de diseño local para agentes de programación. Este listado no significa que el skill esté incluido ni que se incluyan sus herramientas externas, credenciales y 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 del original pueden cambiar.

Propietario de la fuente: Owl-Listener
Repositorio: Owl-Listener/designer-skills
Archivo del skill: prototyping-testing/skills/wireframe-spec/SKILL.md
Licencia: MIT
Versión revisada: 2026-10-07 · 9a6930cf84a8

Resumen editorial de la fuente

Un método de wireframes anotados que combina bloques de diseño, contratos de contenido, comportamiento responsive y cobertura de estados.

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

06 Preguntas antes de empezar

Preguntas antes de empezar

¿Produce un mockup pulido?

Se centra en la estructura anotada. La fuente usa explícitamente convenciones neutras de wireframe en lugar de decisiones finales de color.

¿Por qué incluir longitudes de texto?

Dejan al descubierto suposiciones de diseño y ayudan a planificar el contenido antes de que cambiar el diseño visual resulte costoso.

¿Puede un wireframe describir contenido dinámico?

Sí. La fuente incluye indicadores de contenido dinámico, tipos de fuente y múltiples estados de la interfaz.

OpenDesign

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

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

Descargar OpenDesign Explorar skills de diseño