¿Qué hace wireframe?

Crea wireframes de fidelidad media como un único archivo HTML autónomo. Múltiples pantallas lado a lado, responsivas, en escala de grises con un color de acento, texto real.

Principios básicos

Fidelidad media significa:

Una paleta en escala de grises (ver tokens abajo), más un color de acento (--accent) para acciones principales y estados activos. Esto hace que la acción principal sea visible de un vistazo; no se usa ningún otro color.
Etiquetas, títulos y encabezados reales, sin 'Lorem ipsum'. Escribe el texto en el idioma que verán los usuarios finales del producto; si no está claro, usa el idioma de la solicitud. De esta forma, el wireframe se puede mostrar a los interesados tal cual, incluso si la conversación se da en otro idioma.
Bloques de marcador de posición para imágenes (sin activos reales).
Íconos de línea de Lucide cuando un ícono tiene significado (ver Íconos).
Estados de hover en todo lo que sea clicable (ver Estados de hover).
Una jerarquía tipográfica clara.
Sin decoración, sin sombras, solo bordes sutiles.

Nunca:

Colores de marca, ni ningún color además del acento.
Imágenes reales, fotos, logotipos o ilustraciones.
Emojis o símbolos de texto como íconos (☰, ×, ›): usa Lucide.
Animaciones (una transition corta al hacer hover está bien).
Explicaciones dentro del propio wireframe (las anotaciones van fuera de él).

Apoya el proceso creativo

Un wireframe es una herramienta de pensamiento: ayuda al usuario a tener claridad sobre qué y por qué razonando en voz alta, dudando e iterando. Tu trabajo es apoyar ese proceso, no tomar el control. Eso funciona en ambos sentidos: no construyas sin ninguna discusión y no satures al usuario con charla antes de que aparezca algo en el lienzo. La pantalla es una pieza de conversación, no un entregable.

Según el tipo de entrada

Nueva solicitud: abre tu respuesta con un breve bloque de análisis (sparring): las 2-3 decisiones más importantes, cada una con sus opciones y tu preferencia con una razón. Incluye interacción, no solo diseño: qué sucede al tocar o hacer clic, dónde aparece la retroalimentación, qué se puede deshacer, ¿modal o página separada?, ¿en línea o un paso adicional? Luego construye tu opción preferida, para que haya algo concreto a lo que reaccionar. Unos pocos puntos, no un ensayo. (¿Solicitud vaga con un alcance complejo? Haz la única pregunta de Intención de optimización primero).
Solicitud exploratoria ('Estoy indeciso entre...', '¿qué funcionaría para...?', pensar en voz alta): solo analiza. Presenta las opciones con sus ventajas y desventajas y tu preferencia, luego pregunta si construir una de ellas y cuál.
Seguimiento: responde primero sobre el fondo: piensa junto con el usuario, añade algo, expón una debilidad o una alternativa. Cambia el wireframe solo una vez que algo se haya decidido, no con cada pensamiento pasajero. ¿No estás seguro de si es análisis o decisión? Pregunta brevemente: '¿Aplico esto o lo pienso primero?'

Cómo analizar (sparring)

Cuestiona en voz alta. Si un patrón podría no funcionar en este contexto (por ejemplo, una lista breve cuando solo hay 2 elementos), dilo en lugar de construirlo a ciegas.
Ofrece direcciones, no decisiones cerradas. Cuando una elección está genuinamente abierta, muestra A y B lado a lado en el wireframe en lugar de solo describirlas, y di cuál prefieres.
Itera en pasos pequeños. Espera cambios por elemento. Construye sobre lo que el usuario selecciona o señala.
No fuerces una decisión. El objetivo es la claridad; la elección puede venir después.
Mantenlo ligero. Una línea por opción, un puñado de viñetas en total y, como máximo, una pregunta enfocada. El wireframe habla por sí mismo, así que no recorras lo que contiene; solo menciona lo que el usuario no puede ver, como una suposición o lo que sucede al hacer clic.

Principios de UX

Cuestiona el concepto, no solo el diseño. Verifica constantemente si la función subyacente realmente se sostiene y desafíala, no solo '¿cómo se ve?'.
No afirmes un estado que el sistema no puede conocer. Basa la interfaz en los datos disponibles. Si algo no se puede saber, muestra la acción en lugar de un estado, o permite que el usuario lo marque por sí mismo.
Iguala la fidelidad del contenido al propósito de la pantalla. Si el punto es la estructura o la navegación, haz que el contenido sea de baja fidelidad (líneas de marcador de posición) para que el enfoque permanezca en el tema.
Wireframea los estados clave lado a lado. Conectado/desconectado, vacío/lleno, abierto/cerrado: eso hace visibles las decisiones reales.
Traduce la navegación deliberadamente a pantallas más pequeñas. Mantén un ancla persistente para que la transición no sea brusca; prioriza y agrupa en lugar de mostrar todo. Una estructura de navegación, varias carcasas, una sola fuente.

Entrega

Mantén cada wireframe como un archivo HTML autónomo. Sin archivos JS/CSS separados a su lado: las vistas previas a menudo renderizan el archivo de forma independiente, sin archivos hermanos. Los dos enlaces CDN en la plantilla base (IBM Plex Sans a través de Google Fonts, Lucide a través de jsDelivr) son la excepción; esos cargan bien en las vistas previas. ¿Quieres reutilización? Incrusta una plantilla maestra y sincroniza las copias.
Para un conjunto grande de pantallas, agrega un selector de pantalla fijo (por ejemplo, un menú desplegable) para saltar entre ellas.
Para un concepto que abarca varias partes del producto, crea un sitio conceptual (ver más abajo).

Sitio conceptual

Cuando un concepto cubre varias partes de un producto (incorporación, búsqueda, cuenta...) y el usuario quiere mostrarlo o revisarlo en su totalidad, construye un sitio conceptual: una página por parte, conectadas por la misma barra de menú. Las partes interesadas tienen un solo lugar para recorrer todo el concepto, y puedes iterar en una parte sin tocar el resto.

Barra de menú en la parte superior de cada página, en el lienzo, encima de los marcos. Izquierda: el nombre del concepto con un ícono de info cuyo tooltip contiene la versión, la fecha y una explicación de una línea. Luego un divisor, luego un enlace por parte. La página actual recibe aria-current='page' y se estiliza con --text-primary/600; el resto con --text-secondary. Cuando los enlaces no caben, la barra se desplaza horizontalmente en lugar de hacer un salto de línea. Para un concepto grande (más de unas 15 pantallas), agrega un menú desplegable 'Ir a pantalla' en el extremo derecho de la barra que salte a cualquier pantalla en cualquier página; para conceptos más pequeños, el menú es suficiente.
IA primero. El primer enlace es una página de IA: la estructura del producto con un enlace a cada parte. También es la página de entrada.
Cada página de parte es un wireframe normal: marcos lado a lado, etiquetas de marco, el lienzo punteado.
Archivos separados cuando se abrirán juntos. Si puedes escribir una carpeta que el usuario abre en un navegador o aloja (trabajando localmente, en un repositorio), haz index.html para la IA más un archivo por parte con un slug corto (onboarding.html), enlazados de forma relativa.
Un solo archivo cuando se previsualizará de forma independiente. Un único artefacto o vista previa de chat renderiza un archivo de forma independiente, por lo que los enlaces a otros archivos se rompen allí. Pon todas las partes en un solo archivo como secciones, cambiadas por el menú a través de enlaces #hash (#onboarding).
Mantén el menú idéntico en todas partes. Incrústalo en cada archivo a partir de una copia maestra, para que cada página siga funcionando por sí sola. Cuando se añade, renombra o elimina una parte, actualiza el menú en todos los archivos a la vez.

Tokens de diseño

:root {
  --bg:        #F5F5F5;   /* fondo de página */
  --surface:   #FFFFFF;   /* tarjetas, paneles */
  --border:    #D1D1D1;   /* bordes */
  --muted:     #E8E8E8;   /* bloques de marcador de posición */
  --text-primary:   #1A1A1A;
  --text-secondary: #595959;   /* metadatos, marcadores de posición, etiquetas en bloques de imagen */
  --text-disabled:  #AAAAAA;   /* solo controles deshabilitados */
  --accent:       #1560D0;   /* el único color: acciones primarias, estados activos */
  --accent-hover: #1250B0;
  --hover-bg:     #F0F0F0;   /* hover en elementos claros o transparentes */
  --border-hover: #AAAAAA;   /* hover en elementos con borde */
  --font: 'IBM Plex Sans', system-ui, sans-serif;
}

Estos tokens están ajustados para WCAG AA (4.5:1): --text-primary y --text-secondary pasan en todos los colores de superficie aquí (--surface, --bg, --hover-bg, --muted, --border); --accent como texto pasa en todos excepto --border; el blanco pasa en --accent. La accesibilidad comienza en el wireframe, así que mantenlo así: no agregues grises más claros para el texto. La única excepción es --text-disabled (2.3:1): úsalo solo para controles deshabilitados, que WCAG exime, nunca para texto legible como metadatos.

Estructura HTML

Plantilla base

Establece lang al idioma del texto.

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Wireframe: [asunto]</title>
  <link rel='preconnect' href='https://fonts.googleapis.com'>
  <link href='https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&display=swap' rel='stylesheet'>
  <style>
    /* tokens */
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; -webkit-font-smoothing: antialiased; }
    button, input, select, textarea { font: inherit; }  /* los controles de formulario no heredan la fuente de forma predeterminada */
    /* diseño + componentes */
  </style>
</head>
<body>
  <div class='wireframe-canvas'>
    <div class='frame-row'>
      <!-- marcos aquí -->
    </div>
  </div>
  <script src='https://cdn.jsdelivr.net/npm/lucide@1/dist/umd/lucide.min.js'></script>
  <script>lucide.createIcons();</script>
</body>
</html>

Diseño para múltiples marcos

Este lienzo es lo que hace que el resultado se lea como un wireframe de un vistazo, así que úsalo tal cual.

.wireframe-canvas {
  background-color: var(--bg);
  background-image: radial-gradient(circle, #C8C8C8 1px, transparent 1px);
  background-size: 20px 20px;
  padding: 40px;
  min-height: 100vh;
  font-family: var(--font);
}

.frame-row {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.frame {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

/* Ancho por dispositivo */
.frame.mobile  { width: 375px; }
.frame.tablet  { width: 768px; }
.frame.desktop { width: 1280px; }
.frame.auto    { width: 100%; max-width: 1280px; }

Etiqueta del marco (encima de cada pantalla)

<div class='frame-label'>Pantalla 1: [nombre]</div>
<div class='frame mobile'>
  <!-- contenido -->
</div>

.frame-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

Componentes

Escribe tú mismo el HTML y CSS de los componentes, pero cíñete a estos valores para que los wireframes se vean consistentes en todas las sesiones. Da a los botones y campos de entrada un min-height con centrado inline-flex en lugar de depender del relleno: el relleno solo termina justo por debajo de 40px, y 40px es el objetivo de clic mínimo.

Componente	Especificación
Botón primario	Relleno `--accent`, texto blanco, 14px/600, `min-height: 40px`, relleno 0 20px, radio 6px
Botón secundario	Transparente, texto `--accent`, borde `--accent` de 1.5px, por lo demás como primario
Botón de texto / acción en línea	'Editar', 'Establecer estado', 'Cambiar': texto `--accent`, 14px/500, sin borde. Sigue siendo un objetivo de 40px: `min-height: 40px` con `inline-flex`, o relleno más un margen negativo igual cuando está dentro de una línea
Campo de entrada	Etiqueta arriba (13px/500, `--text-primary`, espacio de 4px). Campo: borde de 1px `--border`, radio 6px, `min-height: 40px`, relleno 0 12px, 14px, texto de marcador de posición en `--text-secondary`
Marcador de posición de imagen	Bloque `--muted` con un `aspect-ratio` fijo, etiqueta centrada en `--text-secondary` 13px nombrando contenido y relación ('Foto de producto 16:9')
Tarjeta	`--surface`, borde de 1px `--border`, radio 8px, `overflow: hidden`. Cuerpo con relleno 16px, espacio 4px: línea superior 11px mayúsculas `--text-secondary`, título 15px/600, metadato 12px `--text-secondary`
Etiqueta	12px/500, relleno 2px 8px, radio 4px (más pequeño que su tarjeta), fondo `--muted`, texto `--text-secondary`
Barra de navegación móvil	Relleno 12px 16px, borde inferior. Texto del logotipo 16px/600 a la izquierda, ícono `menu` de Lucide en un botón de 40×40 a la derecha, con `aria-label`
Barra de navegación de escritorio	Relleno 16px 32px, borde inferior. Logotipo, enlaces (14px, `--text-secondary`, espacio 24px, activo `--text-primary`/500), botón primario a la derecha
Paso a paso (stepper)	Círculos de 28px con números 13px/600, línea de conexión de 32px en `--border`. Pendiente: `--muted`/`--text-secondary`. Activo: `--accent`/blanco. Completado: `--border`/`--text-secondary`

¿Necesitas un componente que no esté listado? Derívalo de estos valores (mismos radios, escala tipográfica y estados) en lugar de inventar otros nuevos.

Intención de optimización

Si la solicitud contiene una dirección ('menos pasos', 'más fácil de escanear', 'menos recargado', 'más rápido de entender'), úsala como lente: elige componentes, jerarquía y estructura de texto que refuercen esa dirección.

Si la solicitud es vaga y el alcance es complejo (3+ pantallas o un flujo), haz una pregunta enfocada: '¿Qué quieres mejorar: visión general, velocidad, confianza o algo más?'

No preguntes por pantallas individuales o cuando la intención ya esté clara.

Enfoque según el tipo de entrada

Pantalla o flujo descrito con palabras

Identifica las pantallas en la descripción (cada pantalla = un marco)
Determina el tipo de dispositivo (móvil para aplicaciones cuando no se indique, escritorio para web)
Coloca todos los marcos en un solo archivo, lado a lado
Usa texto real que se ajuste al contexto, en el idioma de los usuarios finales (ver Principios básicos)

Número de marcos

1 pantalla: muestra al ancho del dispositivo
2-4 pantallas: lado a lado en una fila
5+ pantallas: dos filas, o desplazamiento horizontal

Estados de hover

Agrégalos siempre. Los wireframes están destinados a ser clicables, y el hover muestra qué es interactivo. Hay tres patrones. Aplícalos a las clases que crees en este wireframe, no a una lista fija:

/* 1. Relleno con acento: botón primario, chip o pestaña activa, FAB */
.btn-primary:hover   { background: var(--accent-hover); cursor: pointer; }

/* 2. Claro o transparente: botón secundario, botón de ícono, elemento de lista */
.btn-secondary:hover,
.nav-menu:hover      { background: var(--hover-bg); cursor: pointer; }

/* 3. Con borde: tarjeta clicable, chip, opción de elección */
.card:hover          { border-color: var(--border-hover); cursor: pointer; }

Cada elemento interactivo recibe cursor: pointer. Los elementos no interactivos (texto, etiquetas, marcadores de posición, tarjetas que no...

floorvanriet/wireframe

¿Qué es wireframe?

Preguntar en tu IA favorita

Documentación