Plantilla de Wireframe Bocetado a Mano
Wireframes de baja fidelidad dibujados a mano que se ven explícitamente como borradores — para invitar comentarios sobre la estructura, señalar "no es un diseño final", o documentar la arquitectura de la información sin comprometerse con un diseño visual.
⚠️ Elige el Esqueleto PRIMERO
El mayor fallo de esta skill: el modelo hereda los trazos (temblor, discontinuo, escritura a mano) pero escribe la estructura de documento incorrecta — por ejemplo, produciendo 3 pantallas aisladas cuando se necesitaba un documento de flujo multi-pantalla, o llenando un mapa del sitio con figuras editoriales.
Antes de escribir una sola línea, declara en tu respuesta qué esqueleto estás usando y por qué. Empareja las palabras del usuario con uno de:
| El usuario dice | Esqueleto | Por qué |
|---|---|---|
| periódico / revista / página de aterrizaje / web oficial / folleto / página única / una página / editorial | A. Página Editorial Única | Una página larga, secciones apiladas, densa en contenido |
| app / móvil / teléfono / app de escritorio / flujo SaaS / ruta de usuario / flujo de registro / flujo de pago / multi-pantalla / multi-página / registro / inicio de sesión / incorporación / ajustes / pestañas / flujo de formulario | B. Flujo Multi-Pantalla de App | Varias pantallas, navegación, estados, desencadenantes |
| arquitectura de la información / AI / mapa del sitio / mapa de sitio / diagrama de flujo / gráfico de relaciones / gráfico de nodos / flujo de datos / máquina de estados / matriz de permisos | C. Diagrama AI / Mapa del Sitio | Nodos + aristas, sin pantallas reales |
| no está claro / el usuario no lo dijo / cualquiera funciona | pregunta al usuario antes de elegir — no uses un valor por defecto | — |
Si el usuario dio un tema pero no una pista sobre el esqueleto, pregunta cuál elegir. Elegir mal es hacer el trabajo dos veces.
Esqueleto A — Página Editorial Única
foolscap-wireframe.html es la referencia para este esqueleto. Úsalo cuando el artefacto sea una página desplazable única (periódico, revista, wireframe de página de aterrizaje, folleto, ilustración de PRD de una página).
Secciones requeridas (en orden, se pueden omitir 1–2 pero mantener el ritmo):
- Cabecera / banner — título, número de edición/versión, fecha
- Artículo principal — un bloque principal grande con titular + introducción + marcador de posición de ilustración dibujada a mano
- 3–5 secciones de contenido — cada una con su propio h2, mezcla de figuras de texto e ilustraciones bocetadas
- Barra lateral / resumen / bloque de lista — elementos cortos, tipo denso, rompe el ritmo
- CTA / registro / pie de página
Densidad: apunta a la cantidad de contenido por pulgada cuadrada de la referencia — los wireframes de página única con poco contenido parecen un esbozo, no un borrador.
Esqueleto B — Flujo Multi-Pantalla de App ⛔ MÍNIMOS OBLIGATORIOS
foolscap-wireframe.html no es la referencia para este esqueleto — solo toma prestados sus filtros SVG, la pila de fuentes y la estética de celdas discontinuas. La estructura del documento debe ensamblarse a partir de la lista de verificación a continuación.
Secciones requeridas (DEBEN estar todas presentes — la página está incompleta sin ellas)
- Portada — nombre de la app + versión + rol/persona + alcance de 1 línea ("MVP / beta / v0.3 / solo seguimiento de gastos, sin inversiones")
- Mapa del sitio / diagrama de navegación — árbol o cuadrícula visual que muestre todas las pantallas y su relación. No es una lista: es un diagrama real con cajas + líneas.
- 6–8+ pantallas principales como bloques
figure. Para una app de seguimiento de gastos, como mínimo: inicio/bienvenida → inicio (resumen) → añadir entrada (cantidad → categoría → nota → guardar) → detalle de factura → estadísticas mensuales → gestión de categorías → ajustes de presupuesto → perfil/ajustes. 3 pantallas no son un documento de wireframe, es una muestra de boceto. - Al menos 1 diagrama de flechas de flujo que muestre la ruta del usuario a través de las pantallas (ej. "inicio → tocar '+' → añadir entrada → guardar → notificación → volver a inicio"). No pongas solo una
↓entre las pantallas: escribe el desencadenante en la flecha. - Al menos 1 variante de estado para cada pantalla que tenga estado: vacío / cargando / error / éxito. Elige las pantallas donde sea importante (página de lista → estado vacío; formulario → estado de error).
- Material final — preguntas abiertas / lista de TBD / registro de versiones / decisiones a tomar a continuación
Requisitos por pantalla
Cada bloque de pantalla debe tener:
- Número de figura —
Fig. 02, secuencial, referenciado desde los diagramas de flujo - Responsabilidad en una línea — "añadir entrada · se accede desde el botón '+' en inicio; muestra una notificación al guardar y vuelve a inicio"
- Anotaciones de desencadenantes — qué puntos de entrada llevan aquí, qué salidas van a dónde
- Anotaciones marginales — al menos 1 nota manuscrita por pantalla no trivial (restricción, caso límite, "TBD", pregunta abierta)
Disposición
- Apilamiento vertical de pantallas con flecha explícita + etiqueta de desencadenante entre cada una (no una
↓pasiva) - O tira de flujo horizontal con pantallas en orden de izquierda a derecha — funciona bien para flujos lineales como incorporación/pago
- No pongas pantallas en una cuadrícula sin indicación de flujo — eso es una galería de pantallas, no un documento de flujo
Líneas rojas de densidad de contenido
- < 5 pantallas → recházate a ti mismo, pide al usuario más flujos o reduce el alcance honestamente
- Sin mapa del sitio → recházate a ti mismo, el documento es ilegible sin él
- Sin variantes de estado → al menos marca los espacios vacíos/de error aunque no los dibujes ("estado vacío: ver Fig. 04a / TBD")
- Sin anotaciones marginales en ninguna parte → copiaste el trazo pero no el lenguaje; vuelve y anota
Esqueleto C — Diagrama AI / Mapa del Sitio
Documento puramente estructural — sin pantallas reales, solo diagramas de nodos y aristas de la arquitectura de la información, navegación, flujo de datos o máquinas de estados.
Secciones requeridas:
- Título + leyenda — qué significan las cajas, qué significan los tipos de línea (sólida = navegación directa, discontinua = condicional, doble = enlace de datos)
- Diagrama principal — el árbol/grafo en sí, central, grande
- Mini-especificación por nodo — para nodos no evidentes, 1–3 líneas de qué vive allí
- Matriz de permisos / roles si aplica
- Preguntas abiertas al final
El temblor y la escritura a mano siguen aplicándose. Disposición de cajas y líneas, mucho espacio en blanco, un solo color de acento para resaltar la "ruta actual" / "por defecto".
Lenguaje de Anotaciones Marginales (esqueletos B y C deben usarlo; A opcional)
Las anotaciones marginales son lo que separa un wireframe de baja fidelidad real de un "borrador de alta fidelidad que se hace pasar por baja fidelidad". Usa estos movimientos:
| Marca | Cuándo | Cómo |
|---|---|---|
| Nota lateral | Restricción o justificación | <aside class="margin"> en fuente manuscrita, color de acento, desplazado al margen |
| Círculo + flecha | Señalar un elemento específico | SVG <circle> + <path> con filter:url(#wobble), trazo de acento |
| TBD / ? | Decisión no resuelta | "TBD" manuscrito en color de acento, a veces dentro de un círculo tembloroso |
| Tachado | Idea antigua mantenida para contexto | text-decoration:line-through + ligera rotación transform:rotate(-1deg) |
| Subrayado + ! | Importante / debe discutirse | Subrayado ondulado SVG debajo del término |
| Llamada numerada | Referencia a una tabla de leyenda a continuación | Dígito circulado en color de acento, con <ol> leyenda al final de la sección |
Color de tinta de anotaciones marginales = el único acento (la plantilla usa azul brillante). La tinta del cuerpo permanece monocromática.
Marcas Dibujadas a Mano
Los wireframes de baja fidelidad se apoyan en gran medida en marcas dibujadas en su lugar, no en iconos o fotos reales. Construye una pequeña biblioteca al principio del archivo:
- Caja con X — marcador de posición de imagen:
<rect>+ dos<line>que se cruzan, todo bajofilter:url(#wobble) - Texto con línea ondulada — marcador de posición de copia: 3–5
<path>de garabatos horizontales con anchos decrecientes - Iconos de palo — iconos de navegación como rutas SVG de 8–16 px (casa, más, gráfico, engranaje), trazo de 1.4 px + temblor
- Spinner de carga — círculo tembloroso con un hueco, sin animación necesaria para un entregable estático
- Círculo de avatar — círculo + iniciales en fuente manuscrita
- Esqueleto de gráfico — barras / puntos / líneas temblorosas, sin etiquetas de eje más allá del número de figura
No importes una fuente de iconos, lucide, heroicons, etc. Los iconos reales luchan contra el temblor y rompen instantáneamente el registro de baja fidelidad.
Lectura Requerida
Lee este SKILL.md primero, de principio a fin. No abras foolscap-wireframe.html hasta que hayas elegido un esqueleto.
Luego:
- Esqueleto A → lee foolscap completamente, tanto para la estructura como para el vocabulario de trazos
- Esqueleto B → abre foolscap SOLO para copiar: los valores de turbulencia SVG
<filter>, el patrón de fondo punteado, las rutas de divisores discontinuos/ondulados, la pila de fuentes manuscritas. No copies la estructura de cabecera/artículo principal/lecturas largas — esqueleto incorrecto. - Esqueleto C → igual que B, extracción solo de trazos
Nunca copies la copia editorial de marcador de posición de foolscap, los pies de figura o los nombres de clase en su totalidad.
Estrategia de Diseño
Fija el nivel de fidelidad al principio:
- estructura pura (solo cajas + etiquetas, sin tipo real más allá de nombres de campo) → máximo temblor, contenido más escaso
- estructura + contenido de muestra (titulares de marcador de posición, etiquetas reales, números ficticios como ¥3,280) → temblor moderado, más densidad
- estructura + anotaciones (flechas, anotaciones marginales, "TBD", etiquetas de desencadenante) → temblor + anotaciones marginales + llamadas de color de acento
Elige uno y mantén la coherencia en todo el documento — mezclar niveles de fidelidad se lee como inconsistente. El esqueleto B casi siempre requiere el nivel 3.
Sesgo de Disposición
Prefiere:
- fondo de papel blanco puro — sin pretensión de bloc amarillo
- tinta monocromática (negro + 2–3 grises), como máximo un acento (azul brillante o rojo) para anotaciones marginales y resaltado "actual/por defecto"
- una fuente CJK manuscrita (Ma Shan Zheng / Long Cang) + una fuente latina manuscrita (Caveat / Kalam)
- pila mono (mayúsculas, espaciado ajustado) para "etiquetas" / "números de figura" / "llamadas"
- divisores discontinuos u ondulados entre secciones — nunca reglas limpias y sólidas
- intensidad de temblor consistente — no subas y bajes por elemento; un filtro global + quizás uno "más fuerte" para formas muy pequeñas
- figuras numeradas ("Fig. 01") para todo lo referenciado desde otra parte del documento
- márgenes laterales generosos para dejar espacio a las anotaciones marginales
Evita:
- iconos de producción reales o ilustraciones SVG pulidas (luchan contra el marco de boceto)
- fotos a color (usa marcadores de posición de boceto — cajas con X o texto con línea ondulada)
- emojis
- mezclar wireframe con componentes de alta fidelidad en la misma página
- forzar el filtro de temblor en cada elemento hasta que la página se vuelva ruidosa — el temblor es un condimento, no un baño
- una sola
↓usada como anotación de flujo — escribe el desencadenante en la flecha - entregar solo 3 pantallas aisladas en un escenario de app — eso es una muestra de pantalla, no un documento de wireframe
Anti-patrones (autoverificación antes de entregar)
- Escenario de app pero sin mapa del sitio → rechaza, añade uno
- Escenario de app pero < 5 pantallas → rechaza, amplía o reduce el alcance honestamente
- Pantallas conectadas solo por
↓sin etiqueta de desencadenante → anota cada flecha - Sin anotaciones marginales / TBD / marcas circuladas en ninguna parte → heredaste los trazos pero no el lenguaje; vuelve y anota
- Usaste lucide/heroicons/emoji/fuentes de iconos reales → reemplaza con rutas SVG dibujadas a mano
- La intensidad del temblor salta → unifica a 1–2 ID de filtro
- Faltan números de figura aunque referenciados desde diagramas de flujo → añade numeración
- Copia demasiado "terminada" (texto de marketing completo / redacción de producto final) → vuelve a marcadores de posición ("descripción de una línea de la característica A")
- Usaste un fondo de bloc amarillo brillante → vuelve a papel blanco liso
- Más de 1 color de acento → elimínalo
Plataforma / Tamaño
Se renderiza como una página web, típicamente capturada como una captura de pantalla larga para incrustar en PRDs / Notion / Confluence / documentos de Lark. No está diseñada para interacción en tiempo real — es un entregable estático que parece dibujado a mano.
Para el esqueleto B, un ancho de página de 720–960 px funciona bien (coincide con el ancho de lectura en herramientas de documentación). Para el esqueleto A, 960–1100 px (formato editorial). Para el esqueleto C, a menudo más ancho (1200+) para que quepan los mapas del sitio.