wireframe-gen

Del texto de una historia de usuario a su wireframe — y de vuelta con lo que la historia no dice.

npm i -D wireframe-gen
npx wfgen nuevo

No es un editor de diagramas. Es un compilador: lee un documento declarativo, dibuja la pantalla y comprueba el dibujo contra el requisito del que sale. Lo que el requisito no declara no se dibuja como decidido: se anota, o se pregunta con destinatario.

# wireframes/roles.yaml
meta:
  title: Gestión de roles
  entrada: ../entradas/MI_HU0001.json   # contra qué se mide

screens:
  - name: Crear rol
    body:
      - { type: breadcrumb, items: [Inicio, Usuarios, Roles, Crear] }
      - type: fieldset
        title: Datos
        ac: MI_HU0001-AC4              # el criterio que lo justifica
        children:
          - { type: input, label: Nombre, required: true }
          - { type: input, label: NIT, when: el tipo de persona es jurídica }
      - type: note
        pregunta: true
        para: analista
        text: La historia no dice qué se ve al enviar el formulario incompleto.

npx wfgen gen wireframes/*.yaml -o out --watch

Qué hace además de dibujar

| | | |---|---| | wfgen cobertura | qué criterios del requisito están dibujados y cuáles no | | wfgen literales | qué palabras del dibujo respalda el requisito y cuáles se escribieron para rellenar | | wfgen preguntas | lo que falta decidir, con su destinatario | | wfgen revisar | 19 comprobaciones mecánicas, separadas por quién las resuelve | | wfgen entrada | de una historia de usuario al JSON contra el que se mide |

cobertura falla si algo con pantalla quedó sin dibujar: es una compuerta, no un informe. Y un criterio que no tiene pantalla —permisos, cálculo, rendimiento— se declara con su motivo, para que nadie lo saque de la cuenta en silencio.

Tres ideas que lo explican

La entrada decide, el mockup apoya. Un tablero de diseño trae menús, columnas y literales que el requisito no declara. Eso no se dibuja: se anota. Lo que la entrada no declara no es una decisión tomada, y dibujarlo lo aparenta.

La anotación no es interfaz. Las notas van a una columna al margen o a un .md aparte, nunca empujando el dibujo. El mockup se lee como se verá.

Lo mecánico lo hace la herramienta. Que el chasis no se repita, que un listado tenga su estado vacío, que una acción irreversible tenga confirmación, que el mismo botón no se dibuje de dos formas. Cada regla salió de un defecto real. Así la revisión humana llega a lo que solo una persona puede juzgar.

Qué trae y qué pones tú

El paquete lleva el compilador, 58 componentes, siete patrones estructurales y las fuentes. Nada más: el estándar de tu fábrica, tu vocabulario de UI y tus perfiles de marca son de tu proyecto.

wireframe.config.yaml   dónde vive cada cosa
patrones/               copiados del paquete: desde ahora son tuyos
perfiles/               tu marca y tu chasis           · README con su forma
glosario/               cómo nombran tus historias cada control · README
reglas/                 las reglas de TU estándar que se dibujan · README
wireframes/             tus documentos

Sin perfiles/, glosario/ ni reglas/ funciona igual: init emite el chasis en el propio documento y siguen corriendo 13 de las 19 comprobaciones. wfgen donde enseña de dónde está leyendo cada cosa.

Determinismo

El mismo documento dibuja lo mismo, y la misma información escrita de otra forma también — con anclas o expandida, las props en cualquier orden, los valores por defecto dichos u omitidos. Sin eso, comparar dos versiones de una lámina no significaría nada.

Formatos

npx wfgen gen doc.yaml -o out --format svg,png,pdf
npx wfgen gen doc.yaml -o out --notas aparte   # el mockup limpio, para presentar
npx wfgen gen doc.yaml -o out --procedencia    # marca lo que nadie ha decidido

El PDF sale vectorial y de varias páginas, con el texto trazado: no depende de las fuentes que tenga instaladas quien lo abra.

Descubrir el vocabulario

npx wfgen types            # los 58 componentes
npx wfgen spec table       # props de uno + su equivalencia HTML/ARIA
npx wfgen spec --json      # lo mismo, legible por máquina
npx wfgen schema           # JSON Schema del documento
npx wfgen patterns         # los patrones estructurales

Está pensado para que lo conduzca un agente: el spec en JSON es la fuente de verdad y evita adivinar props mirando píxeles.

Requisitos

Node 20 o superior.

Licencia

MIT.