Brief de diseño · Fábrica textil · Totonicapán, Guatemala
El sistema de diseño, el sistema de movimiento y los prompts para construir la interfaz completa: panel de administración para el dueño y su equipo, y aplicación de piso para los operarios. Estilo minimalista, dos densidades opuestas, un solo lenguaje.
Los prompts completos viven en docs/12-prompts-claude-design.md. El orden importa: sin el prompt base, cada lote sale con una identidad distinta.
No significa vacío ni bonito. Significa que cada elemento tiene que ganarse su lugar, y en una fábrica el criterio para ganárselo es que ayude a decidir algo.
Lo que el minimalismo no autoriza en este proyecto: bajar el contraste, esconder acciones detrás de menús, quitar las etiquetas de los campos ni encoger los objetivos táctiles de la PWA. La sobriedad es visual; la legibilidad en planta no se negocia.
Los neutros están sesgados hacia el índigo del acento, no son grises puros. El acento sale del azul profundo del corte guatemalteco; el rojo de alerta, del rojo de los huipiles de Totonicapán. Esta misma página está construida con los tokens que especifica.
Source Sans 3 para toda la interfaz, IBM Plex Mono con tabular-nums para toda cifra. Radios de 2 px en controles y 0 en tablas y contenedores. Una sola hairline de 1 px, y solo donde el aire no basta. Encabezados de tabla sin fondo. Espaciado en el extremo alto: 56 px entre bloques, 96 px entre secciones.
En una pantalla quieta, lo único que se mueve es lo único que mira la gente. Por eso el sistema tiene poca animación y toda ella significa algo. Una animación se justifica si comunica estado, causa o continuidad. Si solo adorna, se quita.
Reglas duras: ningún rebote, ninguna escala mayor a 1.02, ninguna rotación decorativa, ningún desplazamiento mayor a 8 px, y nada fuera de lo ambiental dura más de 420 ms.
Cada estado se distingue por color, forma y comportamiento. A un metro de distancia, el comportamiento es lo primero que se percibe. Con prefers-reduced-motion los pulsos se detienen y el color y la forma siguen bastando: esa es la razón de que la forma exista.
Los que dan identidad al sistema. Todo lo demás —botones, campos, tablas— es infraestructura. Están renderizados en vivo con los tokens de arriba, sin relleno de color: la forma va coloreada y el texto en tinta normal.
Un operario solo puede operar las máquinas que tenga asignadas y vigentes.
Siete roles. El dueño tiene todo; los demás existen para que no tenga que hacerlo todo él. El DPI, la dirección y el teléfono solo son visibles para el dueño y para RRHH.
| Módulo | Dueño | Gerencia | Superv. | RRHH | Mtto. | Bodega | Operario |
|---|---|---|---|---|---|---|---|
| Tablero general | ✓ | ✓ | ✓ | — | — | — | — |
| Alta y edición de operarios | ✓ | — | — | ✓ | — | — | — |
| Ver DPI, dirección, teléfono | ✓ | — | — | ✓ | — | — | — |
| Definir tarifas de destajo | ✓ | — | — | — | — | — | — |
| Asignar máquinas a operarios | ✓ | — | ✓ | — | — | — | — |
| Resolver discrepancias | ✓ | — | ✓ | — | — | — | — |
| Calcular y cerrar nómina | ✓ | — | — | ✓ | — | — | — |
| Autorizar descuentos | ✓ | — | — | ✓ | — | — | — |
| Inventario | ✓ | ✓ | — | — | — | ✓ | — |
| Mantenimiento | ✓ | ✓ | ✓ | — | ✓ | — | — |
| Reportes | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | — |
| Usuarios y parámetros legales | ✓ | — | — | — | — | — | — |
| PWA · abrir y cerrar corridas | — | — | — | — | — | — | ✓ |
| PWA · ver la ganancia propia | — | — | — | — | — | — | ✓ |
Veintinueve del panel de escritorio y ocho de la aplicación de piso. Los identificadores son los que usan los prompts.
Nada de texto de relleno. Estos son los mismos en cada mesa de trabajo, para que las pantallas sean consistentes entre sí. Rosa Elena Batz Quiej dispara la alerta de complemento al mínimo; BOR-05 es la máquina en falla.
| Código | Nombre | Máquinas | Puntadas | Ganancia | Mínimo legal |
|---|---|---|---|---|---|
| OP-014 | Juana Ixchop Tzoc | BOR-04 | 2,918,400 | Q2,269.20 | 119% |
| OP-021 | Marta Chocoj Sical | BOR-02 | 3,412,700 | Q2,653.66 | 139% |
| OP-007 | Diego Puac Ajanel | BOR-01, BOR-06 | 4,105,220 | Q3,192.39 | 167% |
| OP-033 | Rosa Elena Batz Quiej | BOR-05 | 1,884,900 | Q1,908.45 | 77% · complemento |
| OP-018 | Manuel Tzunún Coyoy | BOR-03 | 2,451,180 | Q1,908.45 | 99.9% · complemento |
| Código | Modelo | Controlador | Cabezas | spm | Estado |
|---|---|---|---|---|---|
| BOR-01 | Feiya FY-1206 | Dahao BECS-A15 | 6 | 850 | corriendo |
| BOR-02 | Feiya FY-1206 | Dahao BECS-A15 | 6 | 850 | corriendo |
| BOR-03 | Ricoma EM-1010 | propio | 1 | 1,000 | parada |
| BOR-04 | Tajima TMEZ-1501 | Tajima | 1 | 1,000 | corriendo |
| BOR-05 | Yuemei YM-904 | Dahao BECS-285A | 4 | 750 | en falla |
| BOR-06 | Feiya FY-1202 | Dahao BECS-A15 | 2 | 800 | corriendo |
| BOR-07 | Barudan BEXT-Y904 | Barudan | 4 | 900 | en mantenimiento |
| BOR-08 | Richpeace RPEM-1201 | Dahao BECS-A18 | 1 | 900 | sin datos |
| Código | Nombre | Puntadas | Colores | Región |
|---|---|---|---|---|
| HUI-001 | Huipil Sololá cuello grande | 42,500 | 9 | Sololá |
| HUI-002 | Huipil Quetzaltenango aves | 38,900 | 11 | Quetzaltenango |
| TZU-004 | Tzute Chichicastenango | 21,300 | 7 | Quiché |
| FAJ-010 | Faja Totonicapán greca | 12,400 | 5 | Totonicapán |
| COR-021 | Randa para corte | 8,600 | 3 | Totonicapán |
Se pega al inicio de cada sesión de Claude Design, antes de cualquier lote. Versión abreviada; la completa, con el detalle de movimiento por componente, órdenes y temporadas, está en docs/12-prompts-claude-design.md.
Vas a diseñar la interfaz de un sistema de administración para una fábrica de bordado
computarizado de trajes típicos guatemaltecos, ubicada en Totonicapán.
El sistema tiene dos superficies distintas que comparten el mismo sistema de diseño:
un PANEL DE ADMINISTRACIÓN de escritorio, denso en datos, para el dueño y su equipo;
y una PWA MÓVIL de piso de planta, con muy pocos elementos y muy grandes, para los
operarios que están junto a la máquina. No son la misma pantalla en dos anchos.
DIRECCIÓN VISUAL: MINIMALISMO
El estilo es minimalista, y aquí eso no significa vacío ni bonito: significa que cada
elemento tiene que ganarse su lugar, y el criterio para ganárselo es que ayude a
decidir algo.
· El dato es la interfaz. La cifra, no el contenedor. Un tablero es una retícula de
números bien compuestos, no una cuadrícula de tarjetas.
· El espacio separa antes que la línea, y la línea antes que la caja. Primero aire.
Si no alcanza, una hairline de 1px. La caja con relleno y borde es el último
recurso y hay que justificarla.
· Un solo acento: el índigo marca-700. Todo lo demás es tinta y neutros. Los colores
semánticos aparecen solo cuando hay algo que atender.
· La jerarquía la hace la tipografía: tamaño, peso y espacio. No fondos de color, no
bordes de énfasis, no barras de acento al costado.
· Nada compite con la alerta. Si la pantalla está tranquila, una sola mancha de color
crítico se ve desde la puerta.
Consecuencias concretas:
· Los encabezados de tabla NO llevan fondo gris: llevan línea inferior y mayúscula
pequeña en Plex Mono.
· Los indicadores de estado NO llevan relleno de color: forma coloreada y texto en
tinta normal.
· El tablero NO usa tarjetas: retícula con hairlines y mucho aire.
· Radios: 2px en controles, 0 en tablas y contenedores. Ningún redondeo completo.
· Espaciado en el extremo alto de la escala: 56px entre bloques, 96px entre secciones.
· Iconos reducidos a los indispensables: las cinco formas de estado de máquina.
Lo que el minimalismo NO autoriza: bajar el contraste, esconder acciones en menús,
quitar etiquetas de los campos, ni encoger los objetivos táctiles de la PWA.
SISTEMA DE DISEÑO
Color, tema claro:
fondo #F4F5F7 · superficie #FFFFFF · superficie-2 #EDEFF3
tinta #14171C · tinta-2 #565D68 · tinta-3 #858D99
línea #D9DDE4 · línea-suave #E8EBF0
marca-700 #2B3A67 (primario) · marca-900 #1B2A4A (hover)
marca-500 #4A63A8 · marca-100 #E3E8F4
Color, tema oscuro:
fondo #101318 · superficie #171B21 · superficie-2 #1E232B
tinta #E8EAEE · tinta-2 #9BA3AF · tinta-3 #6C7480
línea #2A3039 · línea-suave #21262E
marca-700 #8FA6DE · marca-900 #B3C4EC · marca-500 #6E86C4 · marca-100 #1E2740
Semánticos (claro / oscuro), independientes del acento:
ok #2E6F4E / #6FBF8E · aviso #9A6400 / #E0A63C · crítico #B0322B / #E4837A
mantenimiento #6D4C9F / #B49AE0
Tipografía:
Interfaz: Source Sans 3 (400/600/700)
Datos: IBM Plex Mono (400/500/600) con tabular-nums, para toda cifra
Escala: 11 12 14 16 18 21 26 32 42
Densidad:
Escritorio: fila de tabla 40px, control 34px, texto base 14px, margen 24px
PWA: fila 64px, control 56px, botón primario 72px, texto base 17px, margen 16px
MOVIMIENTO
En una pantalla quieta, lo único que se mueve es lo único que mira la gente. Poca
animación, y toda ella significa algo: se justifica solo si comunica estado, causa o
continuidad.
Tokens:
--dur-instante 90ms retroalimentación al pulsar
--dur-rapido 140ms chips, avisos, menús
--dur-base 200ms cambio de estado, paneles
--dur-pausado 320ms barras que crecen, paso a paso
--dur-cifra 420ms conteo animado de una cifra
--dur-ambiente 2400ms pulsos de "esto está vivo"
--sal cubic-bezier(.2,0,0,1) · --ent cubic-bezier(.4,0,1,1) · --suave cubic-bezier(.4,0,.2,1)
Reglas duras: ningún rebote, ninguna escala mayor a 1.02, ninguna rotación decorativa,
ningún desplazamiento mayor a 8px, nada dura más de 420ms fuera de lo ambiental.
Estado de máquina: el movimiento ES un dato, junto al color y a la forma.
Corriendo punto lleno · pulso de opacidad 1 → .45 → 1, 2.4s, infinito.
En la versión avanzada el ciclo se deriva de las puntadas por
minuto reales: más rápida la máquina, más rápido el latido,
acotado entre 1.2s y 3s.
Parada punto lleno · NINGUNA animación. La quietud es la señal.
En falla triángulo · doble parpadeo de 120ms y luego 3s de reposo.
En mantenimiento cuadrado · barrido diagonal lento de un brillo tenue, 3s.
Sin datos punto hueco · desvanecimiento muy lento 1 → .35 → 1, 4s.
Componentes:
Contador de puntadas cuenta del valor anterior al nuevo, 420ms, tabular-nums para
que el ancho no salte. Solo al llegar dato nuevo.
Barra de mínimo legal crece desde 0 al aparecer, 320ms; destello en la marca del
umbral al cruzarlo.
Semáforo de mtto. late suave cada 4s solo por encima del 90% del intervalo.
Chip de verificación cruza de pendiente a veredicto con opacidad y 4px.
Fila de tabla entra con opacidad y 4px; al cambiar de estado su fondo
destaca 600ms y vuelve.
Franja de alerta entra desde arriba 8px; al resolverse colapsa su altura.
Botón cambio de fondo al pulsar, sin escala ni sombra.
Carga esqueleto con barrido de 1.4s. NUNCA un indicador giratorio.
PWA:
Marco de escaneo respira 2s; al leer colapsa al centro en 180ms, con sonido
y vibración.
Pasos de la corrida avance lateral de 8px más opacidad. Es la única transición de
pantalla del sistema.
Teclado numérico cada dígito responde con cambio de fondo de 90ms, sin escala.
Ganancia del día la cifra cuenta hacia arriba al llegar una corrida nueva.
Cola sin conexión el contador de pendientes baja con un desplazamiento corto.
Nunca un spinner.
NO se anima: transiciones entre pantallas del panel, aparición escalonada de listas,
nada disparado por desplazamiento, números que cuentan solos al abrir una pantalla, ni
nada en las pantallas de nómina salvo la entrada de un aviso.
Con prefers-reduced-motion los pulsos se detienen y el estado sigue distinguiéndose por
color y forma; los conteos saltan al valor final; las barras aparecen en su valor.
Ninguna información depende únicamente del movimiento.
PRINCIPIOS
1. El número es el protagonista. Cifras en monoespaciada, tabular, alineadas a la
derecha, con separador de miles y SIN abreviar nunca. Se escribe 5,725,350,
jamás "5.7M".
2. Puntadas y prendas son magnitudes distintas y nunca comparten columna: una
máquina de 6 cabezas produce 6 prendas con el mismo conteo de puntadas que una
de 1 cabeza produce 1.
3. El estado se ve antes de leerse, a un metro de distancia, por color, forma Y
comportamiento.
4. La planta tiene mala luz y sol directo: contraste alto obligatorio.
5. Sin conexión es normal, no un error.
6. Todo lo que toca dinero exige confirmación explícita y queda firmado con nombre
y hora, visible en la misma pantalla.
QUÉ EVITAR
Terracota sobre crema, degradados morado-azul, Inter o Space Grotesk, emoji como
marcadores de sección, todo centrado, esquinas muy redondeadas, tarjetas con barra
de acento a la izquierda. Nada de patrones de huipil como textura de fondo: el
textil es el producto, no la decoración del software. Ninguna ilustración simpática
en pantallas de dinero. Ningún movimiento decorativo: sin rebotes, sin parallax, sin
aparición escalonada, sin spinners.
DATOS REALES — usar estos exactos en todas las pantallas
Fábrica en Totonicapán, circunscripción CE2, categoría no agrícola.
Salario mínimo Q3,816.90 más bonificación incentivo Q250.00.
Tarifa de destajo vigente: 1,500 puntadas = Q1.00, desde el 1 de enero de 2026.
Operarios (código, nombre, máquina asignada, puntadas de la quincena):
OP-014 Juana Ixchop Tzoc — BOR-04 — 2,918,400
OP-021 Marta Chocoj Sical — BOR-02 — 3,412,700
OP-007 Diego Puac Ajanel — BOR-01 y BOR-06 — 4,105,220
OP-033 Rosa Elena Batz Quiej — BOR-05 — 1,884,900 ← bajo el umbral legal
OP-018 Manuel Tzunún Coyoy — BOR-03 — 2,451,180
Máquinas (código, modelo, controlador, cabezas, spm, estado):
BOR-01 Feiya FY-1206 · Dahao BECS-A15 · 6 cabezas · 850 spm · corriendo
BOR-02 Feiya FY-1206 · Dahao BECS-A15 · 6 cabezas · 850 spm · corriendo
BOR-03 Ricoma EM-1010 · 1 cabeza · 1,000 spm · parada
BOR-04 Tajima TMEZ-1501 · 1 cabeza · 1,000 spm · corriendo
BOR-05 Yuemei YM-904 · Dahao BECS-285A · 4 cabezas · 750 spm · en falla
BOR-06 Feiya FY-1202 · Dahao BECS-A15 · 2 cabezas · 800 spm · corriendo
BOR-07 Barudan BEXT-Y904 · 4 cabezas · 900 spm · en mantenimiento
BOR-08 Richpeace RPEM-1201 · Dahao BECS-A18 · 1 cabeza · 900 spm · sin datos
Diseños (código, nombre, puntadas, cambios de color):
HUI-001 Huipil Sololá cuello grande — 42,500 — 9
HUI-002 Huipil Quetzaltenango aves — 38,900 — 11
TZU-004 Tzute Chichicastenango — 21,300 — 7
FAJ-010 Faja Totonicapán greca — 12,400 — 5
COR-021 Randa para corte — 8,600 — 3
Umbral legal de referencia: un operario necesita 2,453,721 puntadas por quincena para
alcanzar el salario mínimo. Por debajo de eso, el patrono debe completar la diferencia.
Confirma que entendiste el sistema de diseño y espera el primer lote de pantallas.
Uno a la vez. Cada lote produce un lienzo con varias mesas de trabajo relacionadas; el texto completo de cada prompt está en el documento 12.